From c35a017d910eec83b6980497e93fcc833c9af6a1 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Wed, 14 Sep 2022 18:47:33 +0200
Subject: [PATCH] feat: implement custom page title setting

closes issue #21
---
 src/components/Settings/Overlay.tsx | 19 ++++++++++++++++++-
 src/routes/index.tsx                | 13 +++++++++----
 src/stores.ts                       |  8 +++++++-
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index cdd863c..dc783a1 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/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>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b236c0f..5eba592 100644
--- a/src/routes/index.tsx
+++ b/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}>
diff --git a/src/stores.ts b/src/stores.ts
index c0716b7..2800819 100644
--- a/src/stores.ts
+++ b/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(),
   }),