feat: implement custom page title setting

closes issue #21

src/components/Settings/Overlay.tsx

@@ -40,6 +40,7 @@ import {
   POSITION_TYPE_AGILE,
   POSITION_TYPE_QUANTITY,
   PrintType,
+  printTypeSelectTitles,
   printTypeTitles,
   PRINT_TYPE_CONFIRMATION,
   PRINT_TYPE_INVOICE,
@@ -349,6 +350,22 @@ const SettingsOverlay: Component = () => {
                     />
                   </div>
 
+                  <div class="col-span-2">
+                    <TextInput
+                      label="Titel"
+                      labelMinWidth={fullWidthLabelWidth}
+                      placeholder={
+                        state.project.title
+                          ? undefined
+                          : printTypeTitles[uiState.printType]
+                      }
+                      value={state.project.title || ""}
+                      onInput={(evt) =>
+                        setState("project", "title", evt.currentTarget.value)
+                      }
+                    />
+                  </div>
+
                   <div class="col-span-2">
                     <TextArea
                       label="Einleitung"
@@ -981,7 +998,7 @@ const SettingsOverlay: Component = () => {
                         value={type}
                         selected={type === uiState.printType}
                       >
-                        {printTypeTitles[type]}
+                        {printTypeSelectTitles[type]}
                       </option>
                     )}
                   </For>

src/routes/index.tsx

@@ -28,6 +28,7 @@ import {
   createStore,
   createUiStore,
   LocalStoreContext,
+  printTypeSelectTitles,
   printTypeTitles,
   PRINT_TYPE_CONFIRMATION,
   PRINT_TYPE_INVOICE,
@@ -143,7 +144,7 @@ export default function Home() {
         (state.project.projectNumber.length > 0
           ? `${state.project.projectNumber} - `
           : "") +
-        printTypeTitles[uiState.printType]
+        printTypeSelectTitles[uiState.printType]
     );
 
     const externalTitle = "Räppli - Web App für Schweizerische Rechnungen";
@@ -303,6 +304,10 @@ export default function Home() {
       </Show>
     );
 
+    const pageTitle = createMemo(function () {
+      return state.project.title || printTypeTitles[uiState.printType];
+    });
+
     return (
       <>
         <Style type="text/css">{`
@@ -327,7 +332,7 @@ export default function Home() {
           <Page>
             <InnerPadding>
               <PageHeader />
-              <Title>Offerte</Title>
+              <Title>{pageTitle()}</Title>
               <Preface />
               <PositionsWithData />
               <Conclusion />
@@ -339,7 +344,7 @@ export default function Home() {
           <Page>
             <InnerPadding>
               <PageHeader />
-              <Title>Auftragsbestätigung</Title>
+              <Title>{pageTitle()}</Title>
               <Preface />
               <PositionsWithData />
               <Conclusion />
@@ -351,7 +356,7 @@ export default function Home() {
           <Page>
             <InnerPadding>
               <PageHeader />
-              <Title>Rechnung</Title>
+              <Title>{pageTitle()}</Title>
               <Preface />
               <PositionsWithData />
               <Show when={localState.paymentTerms}>

src/stores.ts

@@ -36,10 +36,15 @@ export type PrintType =
 
 export const printTypeTitles = {
   [PRINT_TYPE_OFFER]: "Offerte",
-  [PRINT_TYPE_CONFIRMATION]: "Bestätigung",
+  [PRINT_TYPE_CONFIRMATION]: "Auftragsbestätigung",
   [PRINT_TYPE_INVOICE]: "Rechnung",
 };
 
+export const printTypeSelectTitles = {
+  ...printTypeTitles,
+  [PRINT_TYPE_CONFIRMATION]: "Bestätigung",
+};
+
 export const createUiStore = () =>
   createStore_({
     lastSaved: 0,
@@ -63,6 +68,7 @@ export const storeSchema = z.object({
     deliveryNumber: z.string(),
     deliveryDate: z.number().optional(),
     date: z.number(),
+    title: z.string().optional(),
     preface: z.string().optional(),
     conclusion: z.string().optional(),
   }),