implemented deletion of positions

frontend/src/routes/document/Position.svelte

@@ -5,7 +5,7 @@
     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) => {}, movePos = (number,step) => {} } = $props();
+    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {}, movePos = (number,step) => {}, drop = (number) => {} } = $props();
     let prefix = `pos.${pos.number}`
 
     function moveup(){
@@ -21,14 +21,14 @@
     .move{
         vertical-align: middle;
     }
+
+    tr > *:nth-child(1){
+        text-align: right;
+    }
+
 </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)} />
@@ -54,6 +54,10 @@
     <tr>
         <td class="move">
             {#if editable}
+            {#if pos.number>1}
+            <span onclick={moveup}>⏫</span>
+            {/if}
+            <span onclick={() => drop(pos.number)}>❌</span>
             <span onclick={movedown}>⏬</span>
             {/if}
         </td>

frontend/src/routes/document/PositionList.svelte

@@ -8,6 +8,13 @@
 
     let editable = $derived(document.state == 1);
 
+    async function updatePositions(resp){
+        let json = await resp.json();
+        document.positions = {};
+        setTimeout(() => document.positions = json,100)
+        error = null;
+    }
+
     async function movePos(number,step){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
         const resp = await fetch(url,{
@@ -16,10 +23,21 @@
             body:JSON.stringify({position:number,move:step})
         });
         if (resp.ok){
-            let json = await resp.json();
-            document.positions = {};
-            setTimeout(() => document.positions = json,10)
-            error = null;
+            updatePositions(resp);
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    async function drop(number){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
+        const resp = await fetch(url,{
+            method: 'DELETE',
+            credentials:'include',
+            body:JSON.stringify({position:number})
+        });
+        if (resp.ok){
+            updatePositions(resp);
         } else {
             error = await resp.text();
         }
@@ -30,7 +48,6 @@
 <table class="positions">
     <thead>
         <tr>
-            <th></th>
             <th>{t('document.pos')}</th>
             <th>{t('document.code')}</th>
             <th>{t('document.title_or_desc')}</th>
@@ -43,10 +60,9 @@
     </thead>
     <tbody>
         {#each Object.entries(document.positions) as [id,pos]}
-        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} {movePos} />
+        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} {movePos} {drop} />
         {/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>