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>