implemented selector for document state

frontend/src/routes/document/List.svelte

@@ -85,8 +85,7 @@
                 <th>{t('document.state')}</th>
                 <th>
                     {t('document.actions')}
-                    {docType}
-                    <TypeSelector caption={t('document.create_new')} bind:value={docType} onchange={createDoc}/>
+                    <TypeSelector caption={t('document.create_new')} bind:value={docType} onchange={createDoc} />
                 </th>
             </tr>
         </thead>

frontend/src/routes/document/StateSelector.svelte

@@ -1,7 +1,30 @@
 <script>
-    import { t } from '../../translations.svelte.js';
+    import {onMount} from 'svelte';
+    import {t} from '../../translations.svelte.js';
+    let { caption = t('document.select_state'), selected = $bindable(0), onchange = (val) => console.log('changed to '+val)} = $props();
+
+    let message = $state(t('document.loading'));
+    let states = $state(null);
+
+    async function loadStates(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/states`;
+        var resp = await fetch(url,{credentials: 'include'});
+        if (resp.ok){
+            states = await resp.json();
+        } else {
+            message = await resp.text();
+        }
+    }
+
+    onMount(loadStates)
 </script>
 
-<select>
-    <option>{t('document.select_type')}</option>
-</select>
+{#if states}
+<select bind:value={selected} onchange={() => onchange(selected)}>
+    {#each Object.entries(states) as [k,s]}
+    <option value={+k}>{t('document.state_'+s.toLowerCase())}</option>
+    {/each}
+</select>
+{:else}
+<span>{message}</span>
+{/if}

frontend/src/routes/document/TypeSelector.svelte

@@ -7,7 +7,7 @@
 
     async function loadTypes(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`;
-        var resp = await fetch(url,{ credentials: 'include'});
+        var resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             types = await resp.json();
         } else {
@@ -16,8 +16,6 @@
     }
 
     onMount(loadTypes)
-
-
 </script>
 
 {#if types}

frontend/src/routes/document/View.svelte

@@ -17,6 +17,16 @@
         }
     }
 
+    function changeState(newVal){
+        if (doc.state == 1 || confirm(t('document.confirm_state'))){
+            doc.state = newVal;
+        } else {
+            const dummy = doc.state;
+            doc.state = null; // we need to alter in between,
+            doc.state = dummy; // otherwise the state will not be re-set
+        }
+    }
+
     onMount(loadDoc);
 </script>
 
@@ -25,7 +35,7 @@
 {/if}
 
 {#if doc}
-    <fieldset>
+    <fieldset class="left">
         <legend>{t('document.customer')}</legend>
         <div>
             {#each doc.customer.name.split("\n") as line}
@@ -42,7 +52,7 @@
             <span>{t('document.email',doc.customer.email)}</span>
         </div>
     </fieldset>
-    <fieldset>
+    <fieldset class="left">
         <legend>{t('document.sender')}</legend>
         <div>
             {#each doc.sender.name.split("\n") as line}
@@ -56,18 +66,23 @@
             <span>{t('document.tax_id',doc.sender.tax_id)}</span>
         </div>
         <div>
-            <span>{t('document.bank_account',doc.sender.bank_account)}</span>
+            <span>
+                {t('document.bank_account')}:
+                {#each doc.sender.bank_account.split("\n") as line}
+                {line}<br/>
+                {/each}
+            </span>
         </div>
     </fieldset>
-    <fieldset>
+    <fieldset class="left">
         <legend>{t('document.type_'+doc.type)}</legend>
         <div>{t('document.number')}: {doc.number}</div>
-        <div>{t('document.state')}: <StateSelector /></div>
+        <div>{t('document.state')}: <StateSelector selected={doc.state} onchange={changeState} /></div>
         <div>{t('document.date')}: {doc.date}</div>
         <div>{t('document.delivery')}: {doc.delivery}</div>
         <div>{t('document.template')}: {doc.template.name} <span class="error">SElektor hier!</span></div>
     </fieldset>
-    <fieldset>
+    <fieldset class="clear">
         <legend>{t('document.head')}</legend>
         {doc.head}
     </fieldset>