working on adding new properties to existing items

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/stock/ItemProps.svelte

@@ -1,10 +1,42 @@
 <script>
-    import { t} from '../../translations.svelte';
-    let { item } = $props();
+    import { onMount }      from 'svelte';
+    import { api }          from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import { t }            from '../../translations.svelte';
+
+    let { item, properties } = $props();
+
+    let add_prop = $state({
+        existing_prop_id : 0,
+        new_prop : {
+            name: null,
+            unit: null
+        }
+    });
+
+    async function onclick(){
+        const url = api('stock/property');
+        const data = {
+            item : {
+                id : item.id,
+                owner : item.owner
+            },
+            add_prop : add_prop
+        }
+        const res = await fetch(url,{
+            credentials:'include',
+            method:'POST',
+            body:JSON.stringify(data)
+        });
+        if (res.ok){
+            yikes();
+        } else error(res);
+    }
 </script>
 
 {#if item}
 <h3>{item.name}</h3>
+
 <table>
     <tbody>
         {#each item.properties as prop}
@@ -20,16 +52,27 @@
         {/each}
         <tr>
             <td>
-                <select>
-                    <option>this is an existing property</option>
-                    <option>B</option>
-                    <option>C</option>
+                <select bind:value={add_prop.existing_prop_id}>
+                    <option value={0}>{t('select_property')}</option>
+                    {#each properties as p}
+                    <option value={p.id}>
+                        {p.name}
+                        {#if p.unit}({p.unit}){/if}
+                    </option>
+                    {/each}
                 </select><br/>
-                <input type="text" placeholder="new prop"/>
+                {#if !add_prop.existing_prop_id}
+                <input type="text" placeholder="new prop" bind:value={add_prop.new_prop.name} />
+                {/if}
             </td>
             <td>
-                <input type="text" />
-                <button>{t('save')}</button>
+                <input type="text" placeholder="value" bind:value={add_prop.value} />
+                {#if !add_prop.existing_prop_id}
+                <input type="text" placeholder="unit" bind:value={add_prop.new_prop.unit} />
+                {:else}
+                {properties.filter(p => p.id == add_prop.existing_prop_id)[0].unit}
+                {/if}
+                <button {onclick}>{t('save')}</button>
             </td>
         </tr>
     </tbody>