template work

frontend/src/routes/tags/Reference.svelte

@@ -1,21 +1,27 @@
 <script>
     import { onMount }       from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
     import { t }             from '../../translations.svelte.js';
 
     let { module, id } = $props();
+    let error          = $state(null);
+    let object         = $state(null);
+    let router         = useTinyRouter();
+    let task           = $state(null);
 
-    let task = $state(null);
-    let caption = $state(`${t(module)} ${id}`);
+    function go(){
+        router.navigate(`/${module}/${id}/view`);
+    }
 
     async function loadDefault(){
         const url  = api(`${module}/${id}`);
         const resp = await fetch(url,{credentials:'include'});
-        if (resp.ok){
-            var json = await resp.json();
-            if (json.name) caption = json.name;
-            if (json.type && json.number) caption = `${t(json.type)} ${json.number} (${json.customer.name.split('\n')[0]})`
+        if (resp.ok) {
+            object = await resp.json();
+        } else {
+            error = await resp.text();
         }
     }
 
@@ -26,4 +32,18 @@
     onMount(load);
 </script>
 
-{caption}
+{#if error}
+<span class="error">{error}</span>
+{/if}
+{#if object}
+{#if module=='bookmark'}
+<a href={object.url}>{object.url}</a>
+<div>{@html object.comment.rendered}</div>
+{:else if module=='task'}
+<span onclick={go}>{object.name}</span>
+{:else if module=='document'}
+<span onclick={go}>{t(object.type)} ${object.number} (${object.customer.name.split('\n')[0]})</span>
+{:else}
+No display defined in Reference.svelte for entities of type {module}.
+{/if}
+{/if}

frontend/src/routes/tags/TagList.svelte

@@ -21,6 +21,7 @@
             // when creating elements, they don`t have an id, yet
             tags.push(newTag);
             tags = tags.sort();
+            newTag = '';
             return;
         }
         const url = api(`tags/${module}/${id}`);

frontend/src/routes/tags/TagUses.svelte

@@ -1,15 +1,13 @@
 <script>
     import {onMount}         from 'svelte';
-    import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
     import { t }             from '../../translations.svelte.js';
 
-    import Reference            from './Reference.svelte';
+    import Reference         from './Reference.svelte';
 
     let { tag } = $props();
     let error   = $state(null);
-    let router  = useTinyRouter();
     let uses    = $state(null);
 
     async function loadUses(){
@@ -23,9 +21,6 @@
         }
     }
 
-    function go(module,id){
-        router.navigate(`/${module}/${id}/view`);
-    }
 
     onMount(loadUses);
 </script>
@@ -39,7 +34,7 @@
     <h2>{t(module.endsWith('s') ? module : `${module}s`)}</h2>
     <ul>
         {#each ids as id}
-        <li onclick={() => go(module,id)}><Reference {module} {id} /></li>
+        <li><Reference {module} {id} /></li>
         {/each}
     </ul>
     {/each}