From 166e65d36953f2aec110b3a025e939f3d14881dc Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Wed, 30 Jul 2025 21:28:19 +0200
Subject: [PATCH] preparing to list uses of tag

---
 frontend/src/App.svelte                 |  2 ++
 frontend/src/routes/tags/TagList.svelte | 35 ++++++++++++++++---------
 frontend/src/routes/tags/TagUses.svelte | 30 +++++++++++++++++++++
 translations/src/main/resources/de.json |  1 +
 4 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/routes/tags/TagUses.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index b97b2a1..4b4e998 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -22,6 +22,7 @@
     import ResetPw     from "./routes/user/ResetPw.svelte";
     import Search      from "./routes/search/Search.svelte";
     import SendDoc     from "./routes/document/Send.svelte";
+    import TagUses     from "./routes/tags/TagUses.svelte";
     import User        from "./routes/user/User.svelte";
     import ViewDoc     from "./routes/document/View.svelte";
     import ViewPrj     from "./routes/project/View.svelte";
@@ -61,6 +62,7 @@
             <Route path="/project/:id/kanban"          component={Kanban} />
             <Route path="/project/:id/view"            component={ViewPrj} />
             <Route path="/search"                      component={Search} />
+            <Route path="/tags/use/:tag"                component={TagUses} />
             <Route path="/task/:parent_task_id/add_subtask" component={AddTask} />
             <Route path="/task/:id/view"               component={ViewTask} />
             <Route path="/user"                        component={User} />
diff --git a/frontend/src/routes/tags/TagList.svelte b/frontend/src/routes/tags/TagList.svelte
index d4fefc7..8dafa27 100644
--- a/frontend/src/routes/tags/TagList.svelte
+++ b/frontend/src/routes/tags/TagList.svelte
@@ -1,11 +1,10 @@
 <script>
-    import {onMount} from 'svelte';
+    import {onMount}         from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }   from '../../urls.svelte.js';
-    import { t }     from '../../translations.svelte.js';
-    import { user }  from '../../user.svelte.js'
-
-    import Editor    from '../../Components/LineEditor.svelte';
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+    import { user }          from '../../user.svelte.js'
 
     let {
         id        = null,
@@ -15,11 +14,12 @@
     } = $props();
     let error  = $state(null);
     let newTag = $state('');
+    let router = useTinyRouter();
 
-    async function addTag(tag){
+    async function addTag(){
         if (!id) {
             // when creating elements, they don`t have an id, yet
-            tags.push(tag);
+            tags.push(newTag);
             tags = tags.sort();
             return;
         }
@@ -27,13 +27,14 @@
         const resp = await fetch(url,{
             credentials : 'include',
             method      : 'POST',
-            body        : JSON.stringify({tag:tag,user_list:user_list})
+            body        : JSON.stringify({tag:newTag,user_list:user_list})
         });
         if (resp.ok){
-            tag = await resp.text();
-            tags.push(tag);
+            newTag = await resp.text();
+            tags.push(newTag);
             tags  = tags.sort();
             error = null;
+            newTag = '';
         } else {
             error = await resp.text();
         }
@@ -72,6 +73,14 @@
         }
     }
 
+    function show(tag){
+        router.navigate(`/tags/use/${tag}`);
+    }
+
+    function typed(ev){
+        if (ev.keyCode == 13) addTag();
+    }
+
     $effect(() => loadTags(id));
 </script>
 
@@ -93,11 +102,11 @@
 <div class="taglist">
     {#each tags as tag,idx}
     <span class="tag">
-        {tag}
+        <span onclick={() => show(tag)}>{tag}</span>
         <button onclick={() => drop(tag)} class="symbol"></button>
     </span>
     {/each}
     <span class="tag editor">
-        <Editor editable="true" bind:value={newTag} onSet={addTag} type="span" />
+        <input type="text" bind:value={newTag} onkeyup={typed} autofocus />
     </span>
 </div>
\ No newline at end of file
diff --git a/frontend/src/routes/tags/TagUses.svelte b/frontend/src/routes/tags/TagUses.svelte
new file mode 100644
index 0000000..bcc142c
--- /dev/null
+++ b/frontend/src/routes/tags/TagUses.svelte
@@ -0,0 +1,30 @@
+<script>
+    import {onMount}         from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+
+    let { tag } = $props();
+    let error   = $state(null);
+    let uses    = $state(null);
+
+    async function loadUses(){
+        const url  = api(`tags/uses/${tag}`);
+        const resp = await fetch(api,{credentials:'include'});
+        if (resp.ok){
+            uses = await resp.json;
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(loadUses);
+</script>
+<fieldset>
+    <legend>{t('tag_uses',{tag:tag})}</legend>
+    {#if error}
+    <span class="error">{error}</span>
+    {/if}
+</fieldset>
\ No newline at end of file
diff --git a/translations/src/main/resources/de.json b/translations/src/main/resources/de.json
index 9b0b867..2630405 100644
--- a/translations/src/main/resources/de.json
+++ b/translations/src/main/resources/de.json
@@ -214,6 +214,7 @@
   "subject": "Betreff",
   "subtasks": "Unteraufgaben",
 
+  "tag_uses": "Verwendung des Tags „{tag}“",
   "tags": "Tags",
   "task": "Aufgabe",
   "tasks": "Aufgaben",