implemented stock display from location tree to property list

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

frontend/src/routes/stock/Index.svelte

@@ -9,17 +9,19 @@
     import ItemProps        from './ItemProps.svelte';
 
 
+    let items = $derived.by(loadItems);
+    let item = $state(null);
+    let location = $state(null);
+    let properties = $state(null);
     let top_level = $state(null);
-    let selected = $state(null);
-    let items = $derived(loadItems(selected));
 
-    async function loadItems(loc){
-        if (!loc) return null;
-        const url = api(`stock/items_at/${loc.id}`)
+    async function loadItems(){
+        if (!location) return null;
+        const url = api(`stock/items_at/${location.id}`)
         const res = await fetch(url,{credentials:'include'});
         if (res.ok){
             yikes();
-            return loc.name;
+            return res.json();
         } else {
             error(res);
             return null;
@@ -47,22 +49,23 @@
                 {#each top_level as realm,idx}
                 <h3>{realm.name}</h3>
                 {#if realm.locations}
-                <Locations locations={realm.locations} bind:selected />
+                <Locations locations={realm.locations} bind:selected={location} />
                 {/if}
                 {/each}
                 {/if}
             </td>
             <td class="items">
-                {#if selected}
-                <h3>{selected.name}</h3>
+                {#await items}
+                <span>loading…</span>
+                {:then data}
+                {#if location}
+                <h3>{location.name}</h3>
                 {/if}
-                {#if items}
-                <pre>{JSON.stringify(items)}</pre>
-                {/if}
-                <ItemList />
+                <ItemList items={data.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
+                {/await}
             </td>
             <td class="properties">
-                <ItemProps />
+                <ItemProps {item} />
             </td>
         </tr>
     </tbody>

frontend/src/routes/stock/ItemList.svelte

@@ -1,13 +1,23 @@
 <script>
     import { t } from '../../translations.svelte';
+
+    let { items, selected = $bindable(null) } = $props();
 </script>
-<ul>
-    <li>
-        <a>
-            <span class="symbol"></span> {t('add_object',{object:'item'})}
-        </a>
-    </li>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-</ul>
+<table>
+    <thead>
+        <tr>
+            <th>{t('id')}</th>
+            <th>{t('code')}</th>
+            <th>{t('name')}</th>
+        </tr>
+    </thead>
+    <tbody>
+    {#each items as item}
+    <tr onclick={ev => selected = item}>
+        <td>{item.id}</td>
+        <td>{item.code}</td>
+        <td>{item.name}</td>
+    </tr>
+    {/each}
+    </tbody>
+</table>

frontend/src/routes/stock/ItemProps.svelte

@@ -1,5 +1,22 @@
-<ul>
-    <li>Prop 1</li>
-    <li>Prop 2</li>
-    <li>Prop 3</li>
-</ul>
+<script>
+    let { item } = $props();
+</script>
+
+{#if item}
+<h3>{item.name}</h3>
+<table>
+    <tbody>
+        {#each item.properties as prop}
+        <tr>
+            <td>
+                {prop.name}
+            </td>
+            <td>
+                {prop.value}
+                {prop.unit}
+            </td>
+        </tr>
+        {/each}
+    </tbody>
+</table>
+{/if}

frontend/src/routes/stock/Locations.svelte

@@ -26,7 +26,7 @@
 <ul>
     <li>
         <a>
-            <span class="symbol"></span> {t('add_object',{object:'location'})}
+            <span class="symbol"></span> {t('add_object',{object:t('location')})}
         </a>
     </li>
     {#each locations as location}