implemented selector for document state

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>