From d40657dc64d35badc57e435b0fe36154e90df4b9 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 13 Jun 2025 17:05:07 +0200
Subject: [PATCH] Migrate pagination and jobinfo

---
 web/frontend/src/generic/JobList.svelte       |  2 +-
 .../src/generic/joblist/JobInfo.svelte        | 39 +++++----
 .../src/generic/joblist/Pagination.svelte     | 79 +++++++++++--------
 web/frontend/src/systems/NodeList.svelte      |  2 +-
 4 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/web/frontend/src/generic/JobList.svelte b/web/frontend/src/generic/JobList.svelte
index 978a582..be239d0 100644
--- a/web/frontend/src/generic/JobList.svelte
+++ b/web/frontend/src/generic/JobList.svelte
@@ -321,7 +321,7 @@
     {itemsPerPage}
     itemText="Jobs"
     totalItems={matchedListJobs}
-    on:update-paging={({ detail }) => {
+    updatePaging={(detail) => {
       if (detail.itemsPerPage != itemsPerPage) {
         updateConfiguration(detail.itemsPerPage.toString(), detail.page);
       } else {
diff --git a/web/frontend/src/generic/joblist/JobInfo.svelte b/web/frontend/src/generic/joblist/JobInfo.svelte
index ebf4811..5886c61 100644
--- a/web/frontend/src/generic/joblist/JobInfo.svelte
+++ b/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}
diff --git a/web/frontend/src/generic/joblist/Pagination.svelte b/web/frontend/src/generic/joblist/Pagination.svelte
index 953e4b8..1a04fd2 100644
--- a/web/frontend/src/generic/joblist/Pagination.svelte
+++ b/web/frontend/src/generic/joblist/Pagination.svelte
@@ -11,11 +11,51 @@
       - Dispatched once immediately and then each time page or itemsPerPage changes
  -->
 
+<script>
+    /* Svelte 5 Props */
+    let {
+        page = $bindable(1),
+        itemsPerPage = 10,
+        totalItems = 0,
+        itemText = "items",
+        pageSizes = [10,25,50],
+        updatePaging
+    } = $props();
+
+    /* Derived */
+    const backButtonDisabled = $derived((page === 1));
+    const nextButtonDisabled = $derived((page >= (totalItems / itemsPerPage)));
+
+    /* Functions */
+    function pageUp ( event ) {
+        event.preventDefault();
+        page += 1;
+        updatePaging({ itemsPerPage, page });
+    }
+    
+    function pageBack ( event ) {
+        event.preventDefault();
+        page -= 1;
+        updatePaging({ itemsPerPage, page });
+    }
+
+    function pageReset ( event ) {
+        event.preventDefault();
+        page = 1;
+        updatePaging({ itemsPerPage, page });
+    }
+
+    function updateItems ( event ) {
+        event.preventDefault();
+        updatePaging({ itemsPerPage, page });
+    }
+</script>
+
 <div class="cc-pagination" >
     <div class="cc-pagination-left">
         <label for="cc-pagination-select">{ itemText } per page:</label>
         <div class="cc-pagination-select-wrapper">
-            <select on:blur|preventDefault={reset} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
+            <select onblur={(e) => pageReset(e)} onchange={(e) => updateItems(e)} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
                 {#each pageSizes as size}
                     <option value="{size}">{size}</option>
                 {/each}
@@ -29,48 +69,17 @@
     <div class="cc-pagination-right">
         {#if !backButtonDisabled}
         <button aria-label="page-reset"  class="reset nav" type="button"
-            on:click|preventDefault={() => reset()}></button>
+            onclick={(e) => pageReset(e)}></button>
         <button aria-label="page-back" class="left nav" type="button"
-            on:click|preventDefault={() => { page -= 1; }}></button>
+            onclick={(e) => pageBack(e)}></button>
         {/if}
         {#if !nextButtonDisabled}
         <button aria-label="page-up" class="right nav" type="button"
-            on:click|preventDefault={() => { page += 1; }}></button>
+            onclick={(e) => pageUp(e)}></button>
         {/if}
     </div>
 </div>
 
-<script>
-    import { createEventDispatcher } from "svelte";
-    export let page = 1;
-    export let itemsPerPage = 10;
-    export let totalItems = 0;
-    export let itemText = "items";
-    export let pageSizes = [10,25,50];
-
-    let backButtonDisabled, nextButtonDisabled;
-
-    const dispatch = createEventDispatcher();
-
-    $: {
-        if (typeof page !== "number") {
-            page = Number(page);
-        }
-
-        if (typeof itemsPerPage !== "number") {
-            itemsPerPage = Number(itemsPerPage);
-        }
-
-        dispatch("update-paging", { itemsPerPage, page });
-    }
-    $: backButtonDisabled = (page === 1);
-    $: nextButtonDisabled = (page >= (totalItems / itemsPerPage));
-
-    function reset ( event ) {
-        page = 1;
-    }
-</script>
-
 <style>
     *, *::before, *::after {
         box-sizing: border-box;
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index 16d7755..b166ecd 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -266,7 +266,7 @@
     {itemsPerPage}
     itemText="Nodes"
     totalItems={matchedNodes}
-    on:update-paging={({ detail }) => {
+    updatePaging={(detail) => {
       if (detail.itemsPerPage != itemsPerPage) {
         updateConfiguration(detail.itemsPerPage, detail.page);
       } else {