Migrate pagination and jobinfo

web/frontend/src/generic/joblist/JobInfo.svelte

@@ -12,15 +12,22 @@
   import Tag from "../helper/Tag.svelte";
   import TagManagement from "../helper/TagManagement.svelte";
 
-  export let job;
-  export let jobTags = job.tags;
-  export let showTagedit = false;
-  export let username = null;
-  export let authlevel= null;
-  export let roles = null;
-  export let isSelected = null;
-  export let showSelect = false;
+  /* Svelte 5 Props */
+  let {
+    job,
+    jobTags = job.tags,
+    showTagedit = false,
+    username = null,
+    authlevel= null,
+    roles = null,
+    isSelected = null,
+    showSelect = false,
+  } = $props();
 
+  /* State Init */
+  let displayCheck = $state(false);
+
+  /* Functions */
   function formatDuration(duration) {
     const hours = Math.floor(duration / 3600);
     duration -= hours * 3600;
@@ -41,9 +48,8 @@
     }
   }
 
-  let displayCheck = false;
   function clipJobId(jid) {
-    displayCheck = true;
+    
     // Navigator clipboard api needs a secure context (https)
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard
@@ -65,9 +71,6 @@
           textArea.remove();
       }
     }
-    setTimeout(function () {
-      displayCheck = false;
-    }, 1000);
   }
 </script>
 
@@ -81,7 +84,7 @@
       <span>
         {#if showSelect}
           <Button id={`${job.cluster}-${job.jobId}-select`} outline={!isSelected} color={isSelected? `success`: `secondary`} size="sm" class="mr-2"
-            on:click={() => {
+            onclick={() => {
               isSelected = !isSelected
             }}>
             {#if isSelected}
@@ -98,7 +101,13 @@
               { 'Add or Remove Job to/from Comparison Selection' }
           </Tooltip>
         {/if}
-        <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
+        <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" onclick={() => {
+          displayCheck = true;
+          clipJobId(job.jobId);
+          setTimeout(function () {
+            displayCheck = false;
+          }, 1000);
+        }}>
           {#if displayCheck}
             <Icon name="clipboard2-check-fill"/>
           {:else}