implemented moving of document positions

frontend/src/routes/document/Position.svelte

@@ -5,11 +5,30 @@
     import LineEditor from '../../Components/LineEditor.svelte';
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import PriceEditor from '../../Components/PriceEditor.svelte';
-    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {} } = $props();
+    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {}, movePos = (number,step) => {} } = $props();
     let prefix = `pos.${pos.number}`
+
+    function moveup(){
+        movePos(pos.number,-1);
+    }
+
+    function movedown(){
+        movePos(pos.number,1);
+    }
 </script>
+
+<style>
+    .move{
+        vertical-align: middle;
+    }
+</style>
 {#if pos}
     <tr>
+        <td class="move">
+            {#if editable && pos.number>1}
+            <span onclick={moveup}>⏫</span>
+            {/if}
+        </td>
         <td>{pos.number}</td>
         <td class="item">
             <LineEditor bind:value={pos.item} editable={editable} onSet={(val) => submit(`${prefix}.item`,val)} />
@@ -33,7 +52,11 @@
         </td>
     </tr>
     <tr>
-        <td class="move">⏫<br/>⏬</td>
+        <td class="move">
+            {#if editable}
+            <span onclick={movedown}>⏬</span>
+            {/if}
+        </td>
         <td colspan="6" class="description">
             <MarkdownEditor bind:value={pos.description} editable={editable} onSet={(val) => submit(`${prefix}.description`,val)} />
         </td>

frontend/src/routes/document/PositionList.svelte

@@ -4,15 +4,33 @@
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
 
-    var { document = $bindable(null), submit = (key,newVal) => {} } = $props();
+    var { document = $bindable(null), submit = (key,newVal) => {}, error = $bindable(null) } = $props();
 
     let editable = $derived(document.state == 1);
+
+    async function movePos(number,step){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
+        const resp = await fetch(url,{
+            method: 'PATCH',
+            credentials:'include',
+            body:JSON.stringify({position:number,move:step})
+        });
+        if (resp.ok){
+            let json = await resp.json();
+            document.positions = {};
+            setTimeout(() => document.positions = json,10)
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
 </script>
 
 {#if document.positions}
 <table class="positions">
     <thead>
         <tr>
+            <th></th>
             <th>{t('document.pos')}</th>
             <th>{t('document.code')}</th>
             <th>{t('document.title_or_desc')}</th>
@@ -25,9 +43,10 @@
     </thead>
     <tbody>
         {#each Object.entries(document.positions) as [id,pos]}
-        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} />
+        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} {movePos} />
         {/each}
         <tr class="sums">
+            <td></td>
             <td colspan="2"></td>
             <td>{t('document.net_sum')}</td>
             <td>{document.net_sum/100}&nbsp;{document.currency}</td>

frontend/src/routes/document/View.svelte

@@ -22,6 +22,7 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             doc = await resp.json();
+            error = null;
         } else {
             error = await resp.text();
         }
@@ -72,6 +73,7 @@
         });
         if (resp.ok){
             doc.positions = await resp.json();
+            error = null;
         } else {
             error = await resp.text();
         }
@@ -189,7 +191,7 @@
             <button onclick={() => position_select = true}>{t('document.add_position')}</button>
             {/if}
         </legend>
-        <PositionList bind:document={doc} {submit} />
+        <PositionList bind:document={doc} {submit} bind:error={error} />
     </fieldset>
     <fieldset>
         <legend>{t('document.footer')}</legend>