Migrate pagination and jobinfo

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 {

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;
+  /* Svelte 5 Props */
-  export let jobTags = job.tags;
+  let {
-  export let showTagedit = false;
+    job,
-  export let username = null;
+    jobTags = job.tags,
-  export let authlevel= null;
+    showTagedit = false,
-  export let roles = null;
+    username = null,
-  export let isSelected = null;
+    authlevel= null,
-  export let showSelect = false;
+    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}

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;

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 {