Migrate job list view and filter components

- filters now inactive in user jobs, lists and analysis due to missing dispatch

web/frontend/src/generic/Filters.svelte

@@ -16,7 +16,6 @@
  -->
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import {
     DropdownItem,
     DropdownMenu,
@@ -37,14 +36,16 @@
   import Resources from "./filters/Resources.svelte";
   import Statistics from "./filters/Stats.svelte";
 
-  const dispatch = createEventDispatcher();
-
-  export let menuText = null;
-  export let filterPresets = {};
-  export let disableClusterSelection = false;
-  export let startTimeQuickSelect = false;
-  export let matchedJobs = -2;
-  export let showFilter = true;
+  // Svelte 5 Props
+  let {  
+    menuText = null,
+    filterPresets = {},
+    disableClusterSelection = false,
+    startTimeQuickSelect = false,
+    matchedJobs = -2,
+    showFilter = true,
+    applyFilters
+  } = $props();
 
   const startTimeSelectOptions = [
     { range: "", rangeLabel: "No Selection"},
@@ -92,7 +93,8 @@
     stats: [],
   };
 
-  let filters = {
+  // Svelte 5 Reactive Vars
+  let filters = $state({
     projectMatch: filterPresets.projectMatch || "contains",
     userMatch: filterPresets.userMatch || "contains",
     jobIdMatch: filterPresets.jobIdMatch || "eq",
@@ -126,19 +128,19 @@
     numAccelerators: filterPresets.numAccelerators || { from: null, to: null },
 
     stats: filterPresets.stats || [],
-  };
+  });
 
-  let isClusterOpen = false,
-    isJobStatesOpen = false,
-    isStartTimeOpen = false,
-    isTagsOpen = false,
-    isDurationOpen = false,
-    isEnergyOpen = false,
-    isResourcesOpen = false,
-    isStatsOpen = false,
-    isNodesModified = false,
-    isHwthreadsModified = false,
-    isAccsModified = false;
+  let isClusterOpen = $state(false)
+  let isJobStatesOpen = $state(false)
+  let isStartTimeOpen = $state(false)
+  let isTagsOpen = $state(false)
+  let isDurationOpen = $state(false)
+  let isEnergyOpen = $state(false)
+  let isResourcesOpen = $state(false)
+  let isStatsOpen = $state(false)
+  let isNodesModified = $state(false)
+  let isHwthreadsModified = $state(false)
+  let isAccsModified = $state(false)
 
   // Can be called from the outside to trigger a 'update' event from this component.
   // 'force' option empties existing filters and then applies only 'additionalFilters'
@@ -217,7 +219,7 @@
     if (filters.stats.length != 0)
       items.push({ metricStats: filters.stats.map((st) => { return { metricName: st.field, range: { from: st.from, to: st.to }} }) });
 
-    dispatch("update-filters", { filters: items });
+    applyFilters({ filters: items });
     changeURL();
     return items;
   }
@@ -296,7 +298,7 @@
 <!-- Dropdown-Button -->
 <ButtonGroup>
   {#if showFilter}
-    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
+    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style={(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}>
       <DropdownToggle outline caret color="success">
         <Icon name="sliders" />
         Filters

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

@@ -8,22 +8,21 @@
     - `refresh`: When fired, the upstream component refreshes its contents
  -->
 <script>
-  import { createEventDispatcher } from "svelte";
   import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
-
-  let refreshInterval = null;
+  let refreshInterval = $state(null);
   let refreshIntervalId = null;
+
   function refreshIntervalChanged() {
     if (refreshIntervalId != null) clearInterval(refreshIntervalId);
-
     if (refreshInterval == null) return;
-
     refreshIntervalId = setInterval(() => dispatch("refresh"), refreshInterval);
   }
 
-  export let initially = null;
+  let {
+    initially = null,
+    onRefresh
+  } = $props();
 
   if (initially != null) {
     refreshInterval = initially * 1000;
@@ -36,7 +35,7 @@
     type="select"
     title="Periodic refresh interval"
     bind:value={refreshInterval}
-    on:change={refreshIntervalChanged}
+    onchange={refreshIntervalChanged}
   >
     <option value={null}>No Interval</option>
     <option value={30 * 1000}>30 Seconds</option>
@@ -46,7 +45,7 @@
   </Input>
   <Button
     outline
-    on:click={() => dispatch("refresh")}
+    onclick={() => onRefresh()}
     disabled={refreshInterval != null}
     >
     <Icon name="arrow-clockwise" /> Refresh

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

@@ -12,16 +12,19 @@
 
 <script>
   import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { scramble, scrambleNames } from "../utils.js";
 
-  const dispatch = createEventDispatcher();
+  // If page with this component has project preset, keep preset until reset
+  let {
+    presetProject = "",
+    authlevel = null,
+    roles = null,
+    setFilter
+  } = $props();
+
+  let mode = $state(presetProject ? "jobName" : "project");
+  let term = $state("");
 
-  export let presetProject = ""; // If page with this component has project preset, keep preset until reset
-  export let authlevel = null;
-  export let roles = null;
-  let mode = presetProject ? "jobName" : "project";
-  let term = "";
   let user = "";
   let project = presetProject ? presetProject : "";
   let jobName = "";
@@ -52,7 +55,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           user,
           project,
           jobName
@@ -65,7 +68,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           project,
           jobName
         });
@@ -91,7 +94,7 @@
     class="form-select"
     title="Search Mode"
     bind:value={mode}
-    on:change={modeChanged}
+    onchange={modeChanged}
   >
     {#if !presetProject}
       <option value={"project"}>Project</option>
@@ -104,12 +107,12 @@
   <Input
     type="text"
     bind:value={term}
-    on:change={() => termChanged()}
-    on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
+    onchange={() => termChanged()}
+    onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
     placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}
-  <Button title="Reset Project" on:click={() => resetProject()}
+  <Button title="Reset Project" onclick={() => resetProject()}
     ><Icon name="arrow-counterclockwise" /></Button
   >
   {/if}