implemented tags for items

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

frontend/src/routes/notes/RelatedNotes.svelte

@@ -38,8 +38,8 @@
         router.navigate(`/${n.module}/${n.entity_id}/view`);
     }
 
-    async function load(){
-        const url = api(`notes/${module}/${entity_id}`);
+    async function load(id){
+        const url = api(`notes/${module}/${id}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const data = await resp.json();
@@ -87,7 +87,7 @@
         }
     }
 
-    onMount(load);
+    $effect(() => load(entity_id));
 </script>
 
 <List {authors} {module} {notes} />

frontend/src/routes/stock/Index.svelte

@@ -8,15 +8,21 @@
     import ItemList         from './ItemList.svelte';
     import ItemProps        from './ItemProps.svelte';
     import Notes            from '../notes/RelatedNotes.svelte';
+    import Tags             from '../tags/TagList.svelte';
 
 
-    let items = $derived.by(loadItems);
+    let loc_data = $derived.by(loadLocation);
     let item = $state(null);
     let location = $state(null);
+
+    $effect(() => {
+        // This effect runs whenever `location` changes
+        if (location !== null) item = null;
+    });
     let properties = $state(null);
     let top_level = $state(null);
 
-    async function loadItems(){
+    async function loadLocation(){
         if (!location) return null;
         const url = api(`stock/location/${location.id}`)
         const res = await fetch(url,{credentials:'include'});
@@ -59,6 +65,23 @@
     onMount(load);
 </script>
 
+<style>
+    .grid3 {
+        display: grid;
+        grid-template-columns: [left] 1fr [first] 1fr [second] 1fr [right]
+    }
+
+    .locations {
+        grid-row-end: span 3;
+    }
+    .notes, .tags{
+        grid-column-end: span 2;
+    }
+    .json {
+        grid-column-end: span 3;
+    }
+</style>
+
 <h2>{t('Stock')}</h2>
 <div class="grid3">
     <div class="locations">
@@ -71,20 +94,31 @@
         {/each}
         {/if}
     </div>
+    {#await loc_data}
+    <span>loading…</span>
+    {:then data}
     <div class="items">
-        {#await items}
-        <span>loading…</span>
-        {:then data}
         {#if location}
         <h3>{location.name}</h3>
         {/if}
-        <ItemList items={data?.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
-        {/await}
+        <ItemList items={data?.items.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
     </div>
     <div class="properties">
         <ItemProps {item} {properties} />
     </div>
     {#if item}
-    <Notes module="stock" entity_id={item.id} />
+    <div class="tags">
+        <span>{t('tags')}</span>
+        <Tags module="stock" id={item.id} user_list={data.users} />
+    </div>
+    <div class="notes">
+        <span>{t('notes')}</span>
+        <Notes module="stock" entity_id={item.id} />
+    </div>
+
+    <pre class="json">
+        {JSON.stringify(data.users,null,2)}
+    </pre>
     {/if}
+    {/await}
 </div>