Migrate jobTag management

web/frontend/src/generic/helper/TagManagement.svelte

@@ -33,26 +33,42 @@
   import { fuzzySearchTags } from "../utils.js";
   import Tag from "./Tag.svelte";
 
-  export let job;
+  /* Svelte 5 Props */
-  export let jobTags = job.tags;
+  let {
-  export let username;
+    jobTags = $bindable(),
-  export let authlevel;
+    job,
-  export let roles;
+    username,
-  export let renderModal = true;
+    authlevel,
+    roles,
+    renderModal = true,
+  } = $props();
 
-  let allTags = getContext("tags"),
+  /* Const Init */
-    initialized = getContext("initialized");
-  let newTagType = "",
-    newTagName = "",
-    newTagScope = username;
-  let filterTerm = "";
-  let pendingChange = false;
-  let isOpen = false;
   const isAdmin = (roles && authlevel == roles.admin);
   const isSupport = (roles && authlevel == roles.support);
-
   const client = getContextClient();
 
+  /* State Init */
+  let initialized = getContext("initialized")
+  let allTags = getContext("tags")
+  let newTagType = $state("");
+  let newTagName = $state("");
+  let newTagScope = $state(username);
+  let filterTerm = $state("");
+  let pendingChange = $state(false);
+  let isOpen = $state(false);
+
+  /* Derived Init */
+  const allTagsFiltered = $derived(($initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
+  const usedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport));
+  const unusedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport));
+
+  /* Effects */
+  $effect(() => {
+    updateNewTag(filterTerm)
+  });
+
+  /* Const Mutations */
   const createTagMutation = ({ type, name, scope }) => {
     return mutationStore({
       client: client,
@@ -104,19 +120,16 @@
     });
   };
 
-  $: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags));
+  /* Functions */
-  $: usedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport);
+  function updateNewTag(term) {
-  $: unusedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport);
-
-  $: {
     newTagType = "";
     newTagName = "";
-    let parts = filterTerm.split(":").map((s) => s.trim());
+    let parts = term.split(":").map((s) => s.trim());
     if (parts.length == 2 && parts.every((s) => s.length > 0)) {
       newTagType = parts[0];
       newTagName = parts[1];
-    }
+    };
-  }
+  };
 
   function matchJobTags(tags, availableTags, type, isAdmin, isSupport) {
     const jobTagIds = tags.map((t) => t.id)
@@ -183,7 +196,7 @@
 </script>
 
 {#if renderModal}
-  <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
+  <Modal {isOpen} toggle={() => {isOpen = !isOpen; filterTerm = "";}}>
     <ModalHeader>
       Manage Tags <Icon name="tags"/>
     </ModalHeader>
@@ -232,7 +245,7 @@
                       <Button
                         size="sm"
                         color="danger"
-                        on:click={() => removeTagFromJob(utag)}
+                        onclick={() => removeTagFromJob(utag)}
                       >
                         <Icon name="x" />
                       </Button>
@@ -282,7 +295,7 @@
                       <Button
                         size="sm"
                         color="success"
-                        on:click={() => addTagToJob(uutag)}
+                        onclick={() => addTagToJob(uutag)}
                       >
                         <Icon name="plus" />
                       </Button>
@@ -314,7 +327,7 @@
               outline
               style="width:100%;"
               color="success"
-              on:click={(e) => (
+              onclick={(e) => (
                 e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
               )}
             >
@@ -345,11 +358,11 @@
       {/if}
     </ModalBody>
     <ModalFooter>
-      <Button color="primary" on:click={() => (isOpen = false)}>Close</Button>
+      <Button color="primary" onclick={() => {isOpen = false; filterTerm = "";}}>Close</Button>
     </ModalFooter>
   </Modal>
 
-  <Button outline on:click={() => (isOpen = true)} size="sm" color="primary">
+  <Button outline onclick={() => (isOpen = true)} size="sm" color="primary">
     Manage {jobTags?.length ? jobTags.length : ''} Tags
   </Button>
 
@@ -387,7 +400,7 @@
                   <Button
                     size="sm"
                     color="danger"
-                    on:click={() => removeTagFromJob(utag)}
+                    onclick={() => removeTagFromJob(utag)}
                   >
                     <Icon name="x" />
                   </Button>
@@ -396,7 +409,7 @@
                 <Button
                   size="sm"
                   color="danger"
-                  on:click={() => removeTagFromJob(utag)}
+                  onclick={() => removeTagFromJob(utag)}
                 >
                   <Icon name="x" />
                 </Button>
@@ -435,7 +448,7 @@
                   <Button
                     size="sm"
                     color="success"
-                    on:click={() => addTagToJob(uutag)}
+                    onclick={() => addTagToJob(uutag)}
                   >
                     <Icon name="plus" />
                   </Button>
@@ -444,7 +457,7 @@
                 <Button
                   size="sm"
                   color="success"
-                  on:click={() => addTagToJob(uutag)}
+                  onclick={() => addTagToJob(uutag)}
                 >
                   <Icon name="plus" />
                 </Button>
@@ -475,7 +488,7 @@
           outline
           style="width:100%;"
           color="success"
-          on:click={(e) => (
+          onclick={(e) => (
             e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
           )}
         >