work on document form

documents/src/main/java/de/srsoftware/umbrella/documents/model/Document.java

@@ -212,8 +212,8 @@ public final class Document implements Mappable {
 		map.put(DATE, date);
 		map.put(STATE, state.code);
 		map.put(FIELD_DELIVERY, delivery);
-		map.put(FIELD_HEAD, markdown(head));
-		map.put(FIELD_FOOTER, markdown(footer));
+		map.put(FIELD_HEAD, Map.of(SOURCE,head,RENDERED,markdown(head)));
+		map.put(FIELD_FOOTER, Map.of(SOURCE,footer,RENDERED,markdown(footer)));
 		map.put(FIELD_CURRENCY, currency);
 		map.put(SENDER, sender.toMap());
 		map.put(FIELD_CUSTOMER, customer.toMap());

frontend/src/Components/LineEditor.svelte

@@ -24,6 +24,16 @@
     }
 </script>
 
+<style>
+    div{
+        min-width: 40px;
+        min-height: 20px;
+    }
+    div:hover{
+        border: 1px dotted;
+    }
+</style>
+
 {#if editable && editing}
 <input bind:value={editValue} onkeyup={typed} autofocus />
 {:else}

frontend/src/Components/MarkdownEditor.svelte

@@ -45,6 +45,13 @@
         width: 100%;
         min-height: 100px;
     }
+    div{
+        min-width: 40px;
+        min-height: 20px;
+    }
+    div:hover{
+        border: 1px dotted;
+    }
 </style>
 
 {#if editable && editing}

frontend/src/routes/document/View.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
     import { useTinyRouter } from 'svelte-tiny-router';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import PositionList from './PositionList.svelte';
     import StateSelector from './StateSelector.svelte';
     import TemplateSelector from './TemplateSelector.svelte';
@@ -9,6 +10,9 @@
     let error = null;
     let doc = $state(null);
 
+    let editable = $derived(doc.state == 1);
+
+
     async function loadDoc(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
         const resp = await fetch(url,{credentials:'include'});
@@ -39,42 +43,59 @@
 {#if doc}
     <fieldset class="left">
         <legend>{t('document.customer')}</legend>
-        <div>
-            {#each doc.customer.name.split("\n") as line}
-            {line}<br/>
-            {/each}
-        </div>
-        <div>
-            <span>{t('document.customer_number',doc.customer.id)}</span>
-        </div>
-        <div>
-            <span>{t('document.tax_id',doc.customer.tax_id)}</span>
-        </div>
-        <div>
-            <span>{t('document.email',doc.customer.email)}</span>
-        </div>
+        <table>
+            <tbody>
+                <tr>
+                    <td colspan="2">
+                        {#each doc.customer.name.split("\n") as line}
+                        {line}<br/>
+                        {/each}
+                    </td>
+                </tr>
+                <tr>
+                    <th>{t('document.customer_id')}:</th>
+                    <td>{doc.customer.id}</td>
+                </tr>
+                <tr>
+                    <th>{t('document.tax_id')}:</th>
+                    <td>{doc.customer.tax_id}</td>
+                </tr>
+                <tr>
+                    <th>{t('document.email')}:</th>
+                    <td>{doc.customer.email}</td>
+                </tr>
+            </tbody>
+        </table>
     </fieldset>
     <fieldset class="left">
         <legend>{t('document.sender')}</legend>
-        <div>
-            {#each doc.sender.name.split("\n") as line}
-            {line}<br/>
-            {/each}
-        </div>
-        <div>
-            <span>{t('document.court',doc.sender.court)}</span>
-        </div>
-        <div>
-            <span>{t('document.tax_id',doc.sender.tax_id)}</span>
-        </div>
-        <div>
-            <span>
-                {t('document.bank_account')}:
-                {#each doc.sender.bank_account.split("\n") as line}
-                {line}<br/>
-                {/each}
-            </span>
-        </div>
+        <table>
+            <tbody>
+                <tr>
+                    <td colspan="2">
+                        {#each doc.sender.name.split("\n") as line}
+                        {line}<br/>
+                        {/each}
+                    </td>
+                </tr>
+                <tr>
+                    <th>{t('document.court')}:</th>
+                    <td>{doc.sender.court}</td>
+                </tr>
+                <tr>
+                    <th>{t('document.tax_id')}:</th>
+                    <td>{doc.sender.tax_id}</td>
+                </tr>
+                <tr>
+                    <th>{t('document.bank_account')}:</th>
+                    <td>
+                        {#each doc.sender.bank_account.split("\n") as line}
+                        {line}<br/>
+                        {/each}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </fieldset>
     <fieldset class="left">
         <legend>{t('document.type_'+doc.type)}</legend>
@@ -86,7 +107,7 @@
     </fieldset>
     <fieldset class="clear">
         <legend>{t('document.head')}</legend>
-        {@html doc.head}
+        <MarkdownEditor bind:value={doc.head} editable={editable} />
     </fieldset>
     <fieldset>
         <legend>{t('document.positions')}</legend>
@@ -94,7 +115,7 @@
     </fieldset>
     <fieldset>
         <legend>{t('document.footer')}</legend>
-        {@html doc.footer}
+        <MarkdownEditor bind:value={doc.footer} editable={editable} />
     </fieldset>
     <fieldset>
         <legend>{t('document.actions')}</legend>

translations/src/main/resources/de.json

@@ -5,19 +5,23 @@
   "document": {
     "actions": "Aktionen",
     "add_new": "{0} anlegen",
-    "bank_account": "Bankverbindung: {0}",
-    "court": "Amtsgericht: {0}",
+    "amount": "Menge",
+    "bank_account": "Bankverbindung",
+    "code": "Code",
+    "court": "Amtsgericht",
     "create_new": "neues Dokument",
     "customer": "Kunde",
     "customer_address": "Adresse",
     "customer_id": "Kundennummer",
     "date": "Datum",
     "delete": "löschen",
-    "email": "E-Mail: {0}",
+    "email": "E-Mail",
     "gross_sum": "Brutto-Summe",
     "list": "Dokumente",
     "list_of": "Dokumente von {0}",
+    "net_price": "Nettopreis",
     "number": "Nummer",
+    "pos": "Pos",
     "select_company" : "Wählen Sie eine ihrer Firmen:",
     "select_customer": "Kunde auswählen",
     "sender": "Absender",
@@ -32,12 +36,16 @@
     "state_new":"neu",
     "state_payed": "bezahlt",
     "state_sent": "versendet",
-    "tax_id": "Steuernummer: {0}",
+    "tax_id": "Steuernummer",
+    "tax_rate": "Steuersatz",
+    "title_or_desc": "Titel/Beschreibung",
     "type": "Dokumententyp",
     "type_confirmation": "Bestätigung",
     "type_invoice": "Rechnung",
     "type_offer": "Angebot",
-    "type_reminder": "Erinnerung"
+    "type_reminder": "Erinnerung",
+    "unit": "Einheit",
+    "unit_price": "Preis/Einheit"
   },
   "footer": {
     "message" : "Umbrella ist ein Produkt von {0}."

web/src/main/resources/web/css/default.css

@@ -30,11 +30,12 @@ button{
     border-color: yellow red red yellow;
 }
 footer {
-  position: absolute;
+  position: sticky;
   bottom: 0;
   width: 100%;
   text-align: center;
   margin: 5px;
+  background: black;
 }
 nav {
   position: sticky;