implemented editing of document in GUI + respective handlers in backend

frontend/src/routes/document/Position.svelte

@@ -5,33 +5,38 @@
     import LineEditor from '../../Components/LineEditor.svelte';
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import PriceEditor from '../../Components/PriceEditor.svelte';
-    var { currency, editable, pos = $bindable(null) } = $props();
-
-    console.log(pos);
+    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {} } = $props();
+    let prefix = `pos.${pos.number}`
 </script>
 {#if pos}
     <tr>
         <td>{pos.number}</td>
-        <td>
-            <LineEditor bind:value={pos.item} editable={editable} />
+        <td class="item">
+            <LineEditor bind:value={pos.item} editable={editable} onSet={(val) => submit(`${prefix}.item`,val)} />
         </td>
         <td class="title">
-            <LineEditor bind:value={pos.title} editable={editable} />
+            <LineEditor bind:value={pos.title} editable={editable} onSet={(val) => submit(`${prefix}.title`,val)} />
         </td>
-        <td>
-            <LineEditor bind:value={pos.amount} editable={editable} />
+        <td class="amount">
+            <LineEditor bind:value={pos.amount} editable={editable} onSet={(val) => submit(`${prefix}.amount`,val)} />
         </td>
-        <td>
-            <LineEditor bind:value={pos.unit} editable={editable} />
+        <td class="unit">
+            <LineEditor bind:value={pos.unit} editable={editable} onSet={(val) => submit(`${prefix}.unit`,val)} />
+        </td>
+        <td class="price">
+            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} onSet={(val) => submit(`${prefix}.unit_price`,val)} /></td>
+        <td class="price">
+            {Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}
+        </td>
+        <td class="tax">
+            {pos.tax}&nbsp;%
         </td>
-        <td>
-            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} /></td>
-        <td>{Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}</td>
-        <td>{pos.tax}&nbsp;%</td>
     </tr>
     <tr>
-        <td class="error">⏫<br/>⏬</td>
-        <td colspan="6"><MarkdownEditor bind:value={pos.description} editable={editable} /></td>
+        <td class="move">⏫<br/>⏬</td>
+        <td colspan="6" class="description">
+            <MarkdownEditor bind:value={pos.description} editable={editable} onSet={(val) => submit(`${prefix}.description`,val)} />
+        </td>
         <td></td>
     </tr>
 {/if}

frontend/src/routes/document/PositionList.svelte

@@ -4,7 +4,7 @@
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
 
-    var { document = $bindable(null) } = $props();
+    var { document = $bindable(null), submit = (key,newVal) => {} } = $props();
 
     let editable = $derived(document.state == 1);
 </script>
@@ -25,7 +25,7 @@
     </thead>
     <tbody>
         {#each Object.entries(document.positions) as [id,pos]}
-        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} />
+        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} />
         {/each}
         <tr class="sums">
             <td colspan="2"></td>

frontend/src/routes/document/View.svelte

@@ -25,8 +25,12 @@
         }
     }
 
-    function changeState(newVal){
+    async function changeState(newVal){
+        let success = false;
         if (doc.state == 1 || confirm(t('document.confirm_state'))){
+            success = await submit('state',newVal);
+        }
+        if (success) {
             doc.state = newVal;
         } else {
             const dummy = doc.state;
@@ -35,6 +39,28 @@
         }
     }
 
+    async function submit(path,newValue){
+        const parts = path.split('.');
+        if (parts.length<1) return false;
+        let data = newValue;
+        while (parts.length > 0){
+            const inner = data;
+            data = {};
+            data[parts.pop()] = inner;
+        }
+        try {
+            const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
+            const resp = await fetch(url,{
+                credentials:'include',
+                method:'PATCH',
+                body:JSON.stringify(data)
+            });
+            return resp.ok;
+        } catch (err){
+            return false;
+        }
+    }
+
     onMount(loadDoc);
 </script>
 
@@ -43,97 +69,110 @@
 {/if}
 
 {#if doc}
-    <fieldset class="left">
+    <fieldset class="customer">
         <legend>{t('document.customer')}</legend>
         <table>
             <tbody>
                 <tr>
                     <td colspan="2">
-                        <MultilineEditor bind:value={doc.customer.name} editable={editable} />
+                        <MultilineEditor bind:value={doc.customer.name} editable={editable} onSet={(val) => submit('customer.name',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.customer_id')}:</th>
                     <td>
-                        <LineEditor bind:value={doc.customer.id} editable={editable} />
+                        <LineEditor bind:value={doc.customer.id} editable={editable} onSet={(val) => submit('customer.id',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.tax_id')}:</th>
                     <td>
-                        <LineEditor bind:value={doc.customer.tax_id} editable={editable} />
+                        <LineEditor bind:value={doc.customer.tax_id} editable={editable} onSet={(val) => submit('customer.tax_id',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.email')}:</th>
                     <td>
-                        <LineEditor bind:value={doc.customer.email} editable={editable} />
+                        <LineEditor bind:value={doc.customer.email} editable={editable} onSet={(val) => submit('customer.email',val)} />
                     </td>
                 </tr>
             </tbody>
         </table>
     </fieldset>
-    <fieldset class="left">
+    <fieldset class="sender">
         <legend>{t('document.sender')}</legend>
         <table>
             <tbody>
                 <tr>
                     <td colspan="2">
-                        <MultilineEditor bind:value={doc.sender.name} editable={editable} />
+                        <MultilineEditor bind:value={doc.sender.name} editable={editable} onSet={(val) => submit('sender.name',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.court')}:</th>
                     <td>
-                        <LineEditor bind:value={doc.sender.court} editable={editable} />
+                        <LineEditor bind:value={doc.sender.court} editable={editable} onSet={(val) => submit('sender.court',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.tax_id')}:</th>
                     <td>
-                        <LineEditor bind:value={doc.sender.tax_id} editable={editable} />
+                        <LineEditor bind:value={doc.sender.tax_id} editable={editable} onSet={(val) => submit('sender.tax_id',val)} />
                     </td>
                 </tr>
                 <tr>
                     <th>{t('document.bank_account')}:</th>
                     <td>
-                        <MultilineEditor bind:value={doc.sender.bank_account} editable={editable} />
+                        <MultilineEditor bind:value={doc.sender.bank_account} editable={editable} onSet={(val) => submit('sender.bank_account',val)} />
                     </td>
                 </tr>
             </tbody>
         </table>
     </fieldset>
-    <fieldset class="left">
+    <fieldset class="invoice_data">
         <legend>{t('document.type_'+doc.type)}</legend>
-        <div>
-            {t('document.number')}:
-            <LineEditor bind:value={doc.number} editable={editable} />
-        </div>
-        <div>
-            {t('document.state')}:
-            <StateSelector selected={doc.state} onchange={changeState} />
-        </div>
-        <div>
-            {t('document.date')}:
-            <LineEditor bind:value={doc.date} editable={editable} />
-        </div>
-        <div>
-            {t('document.delivery')}:
-            <LineEditor bind:value={doc.delivery} editable={editable} />
-        </div>
-        <div>{t('document.template')}: <TemplateSelector company={doc.company.id} bind:value={doc.template.id} /></div>
+        <table>
+            <tbody>
+                <tr>
+                    <th>{t('document.number')}:</th>
+                    <td><LineEditor bind:value={doc.number} editable={editable} onSet={(val) => submit('number',val)} /></td>
+                </tr>
+                <tr>
+                    <th>{t('document.state')}:</th>
+                    <StateSelector selected={doc.state} onchange={changeState} onSet={(val) => submit('state',val)} />
+                </tr>
+                <tr>
+                    <th>{t('document.date')}:</th>
+                    <LineEditor bind:value={doc.date} editable={editable} onSet={(val) => submit('date',val)} />
+                </tr>
+                <tr>
+                    <th>{t('document.delivery')}:</th>
+                    <LineEditor bind:value={doc.delivery} editable={editable} onSet={(val) => submit('delivery',val)} />
+                </tr>
+                <tr>
+                    <th>{t('document.template')}:</th>
+                    <td>
+                    {#if editable}
+                    <TemplateSelector company={doc.company.id} bind:value={doc.template.id} onchange={() => submit('template_id',doc.template.id)} />
+                    {:else}
+                    {doc.template.name}
+                    {/if}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </fieldset>
     <fieldset class="clear">
         <legend>{t('document.head')}</legend>
-        <MarkdownEditor bind:value={doc.head} editable={editable} />
+        <MarkdownEditor bind:value={doc.head} editable={editable} onSet={(val) => submit('head',val)} />
     </fieldset>
     <fieldset>
         <legend>{t('document.positions')}</legend>
-        <PositionList bind:document={doc} />
+        <PositionList bind:document={doc} {submit} />
     </fieldset>
     <fieldset>
         <legend>{t('document.footer')}</legend>
-        <MarkdownEditor bind:value={doc.footer} editable={editable} />
+        <MarkdownEditor bind:value={doc.footer} editable={editable} onSet={(val) => submit('footer',val)} />
     </fieldset>
     <fieldset>
         <legend>{t('document.actions')}</legend>