working on adding new properties to existing items

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

frontend/src/routes/stock/Index.svelte

@@ -17,7 +17,7 @@
 
     async function loadItems(){
         if (!location) return null;
-        const url = api(`stock/items_at/${location.id}`)
+        const url = api(`stock/location/${location.id}`)
         const res = await fetch(url,{credentials:'include'});
         if (res.ok){
             yikes();
@@ -28,7 +28,19 @@
         }
     }
 
-    async function load(){
+    async function loadProperties(){
+        const url = api('stock/properties')
+        const res = await fetch(url,{credentials:'include'});
+        if (res.ok){
+            var json = await res.json();
+            var dict = {}
+            for (var entry of json.sort((a,b) => b.id - a.id)) dict[entry.name+'.'+entry.unit] = entry;
+            properties = Object.values(dict).sort((a,b) => a.name.localeCompare(b.name));
+            yikes();
+        } else error(res);
+    }
+
+    async function loadUserLocations(){
         const url = api('stock/locations/of_user')
         const res = await fetch(url,{credentials:'include'});
         if (res.ok){
@@ -37,6 +49,11 @@
         } else error(res);
     }
 
+    function load(){
+        loadUserLocations();
+        loadProperties();
+    }
+
     onMount(load);
 </script>
 
@@ -63,20 +80,6 @@
         {/await}
     </div>
     <div class="properties">
-        <ItemProps {item} />
+        <ItemProps {item} {properties} />
     </div>
-</div>
-<table>
-    <tbody>
-        <tr>
-            <td class="locations">
-            </td>
-            <td class="items">
-
-            </td>
-            <td class="properties">
-
-            </td>
-        </tr>
-    </tbody>
-</table>
+</div>

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>