working on document editor

frontend/src/Components/LineEditor.svelte

@@ -0,0 +1,19 @@
+<script>
+    let { editable = false, value = $bindable(null) } = $props();
+    let editing = $state(false);
+
+    function toggleEdit(){
+        editing = !editing;
+    }
+
+    function typed(ev){
+        if (ev.keyCode == 13) toggleEdit();
+    }
+</script>
+
+{#if editable && editing}
+<input bind:value onkeyup={typed} />
+{:else}
+<div onclick={toggleEdit}>{value}</div>
+{/if}
+

frontend/src/Components/MarkdownEditor.svelte

@@ -0,0 +1,20 @@
+<script>
+    let { editable = false, value = $bindable(null) } = $props();
+    let editing = $state(false);
+
+    function toggleEdit(){
+        editing = !editing;
+    }
+</script>
+
+<style>
+    textarea{
+        width: 100%;
+        min-height: 100px;
+    }
+</style>
+
+{#if editable && editing}
+<textarea bind:value></textarea>
+{/if}
+<div onclick={toggleEdit}>{@html value}</div>

frontend/src/Components/PriceEditor.svelte

@@ -0,0 +1,29 @@
+<script>
+    let { editable = false, currency, value = $bindable(null) } = $props();
+    let editing = $state(false);
+
+    function toggleEdit(){
+        editing = !editing;
+        if (editing){
+            value /= 100;
+        }
+    }
+
+    function typed(ev){
+        if (ev.keyCode == 13) {
+            toggleEdit();
+            value *= 100;
+        }
+    }
+</script>
+
+<style>
+    input{width:100px}
+</style>
+
+{#if editable && editing}
+<input type="number" step=".01" bind:value onkeyup={typed} />&nbsp;{currency}
+{:else}
+<div onclick={toggleEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
+{/if}
+

frontend/src/routes/document/Position.svelte

@@ -2,25 +2,36 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
-
+    import LineEditor from '../../Components/LineEditor.svelte';
-    var { currency, pos = $bindable(null) } = $props();
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+    import PriceEditor from '../../Components/PriceEditor.svelte';
+    var { currency, editable, pos = $bindable(null) } = $props();
 
     console.log(pos);
 </script>
 {#if pos}
     <tr>
         <td>{pos.number}</td>
-        <td>{pos.item}</td>
+        <td>
-        <td class="title">{pos.title}</td>
+            <LineEditor bind:value={pos.item} editable={editable} />
-        <td>{pos.amount}</td>
+        </td>
-        <td>{pos.unit}</td>
+        <td class="title">
-        <td>{pos.unit_price/100}&nbsp;{currency}</td>
+            <LineEditor bind:value={pos.title} editable={editable} />
-        <td>{pos.net_price/100}&nbsp;{currency}</td>
+        </td>
+        <td>
+            <LineEditor bind:value={pos.amount} editable={editable} />
+        </td>
+        <td>
+            <LineEditor bind:value={pos.unit} editable={editable} />
+        </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">{@html pos.description}</td>
+        <td colspan="6"><MarkdownEditor bind:value={pos.description} editable={editable} /></td>
         <td></td>
     </tr>
 {/if}

frontend/src/routes/document/PositionList.svelte

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