feat: add jobname filter to joblist textfilter

- allows combination of filters now including jobname
- rename component

web/frontend/src/Jobs.root.svelte

@@ -14,7 +14,7 @@
   import Refresher from "./joblist/Refresher.svelte";
   import Sorting from "./joblist/SortSelection.svelte";
   import MetricSelection from "./MetricSelection.svelte";
-  import UserOrProject from "./filters/UserOrProject.svelte";
+  import TextFilter from "./filters/TextFilter.svelte";
 
   const { query: initq } = init();
 
@@ -86,7 +86,7 @@
   </Col>
 
   <Col xs="3" style="margin-left: auto;">
-    <UserOrProject
+    <TextFilter
       bind:authlevel
       bind:roles
       on:update={({ detail }) => filterComponent.update(detail)}

web/frontend/src/filters/TextFilter.svelte

@@ -4,21 +4,25 @@
 
   const dispatch = createEventDispatcher();
 
-  export let user = "";
-  export let project = "";
   export let authlevel;
   export let roles;
-  let mode = "user",
+  let mode = "user";
-    term = "";
+  let term = "";
+  let user = "";
+  let project = "";
+  let jobName = "";
   const throttle = 500;
 
   function modeChanged() {
     if (mode == "user") {
       project = term;
       term = user;
-    } else {
+    } else if (mode == "project") {
       user = term;
       term = project;
+    } else {
+      jobName = term;
+      term = jobName;
     }
     termChanged(0);
   }
@@ -28,7 +32,8 @@
   function termChanged(sleep = throttle) {
     if (authlevel >= roles.manager) {
       if (mode == "user") user = term;
-      else project = term;
+      else if (mode == "project") project = term;
+      else jobName = term;
 
       if (timeoutId != null) clearTimeout(timeoutId);
 
@@ -36,49 +41,44 @@
         dispatch("update", {
           user,
           project,
+          jobName
         });
       }, sleep);
     } else {
-      project = term;
+      if (mode == "project") project = term;
+      else jobName = term;
+
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
         dispatch("update", {
           project,
+          jobName
         });
       }, sleep);
     }
   }
 </script>
 
-{#if authlevel >= roles.manager}
+<InputGroup>
-  <InputGroup>
+  <select
-    <select
+    style="max-width: 175px;"
-      style="max-width: 175px;"
+    class="form-select"
-      class="form-select"
+    bind:value={mode}
-      bind:value={mode}
+    on:change={modeChanged}
-      on:change={modeChanged}
+  >
-    >
+    {#if authlevel >= roles.manager}
       <option value={"user"}>Search User</option>
-      <option value={"project"}>Search Project</option>
+    {/if}
-    </select>
+    <option value={"project"}>Search Project</option>
-    <Input
+    <option value={"jobName"}>Search Jobname</option>
-      type="text"
+  </select>
-      bind:value={term}
+  <Input
-      on:change={() => termChanged()}
+    type="text"
-      on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
+    bind:value={term}
-      placeholder={mode == "user" ? "filter username..." : "filter project..."}
+    on:change={() => termChanged()}
-    />
+    on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
-  </InputGroup>
+    placeholder={`filter ${mode}...`}
-{:else}
+  />
-  <!-- Compatibility: Handle "user role" and "no role" identically-->
+</InputGroup>
-  <InputGroup>
+
-    <Input
-      type="text"
-      bind:value={term}
-      on:change={() => termChanged()}
-      on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
-      placeholder="filter project..."
-    />
-  </InputGroup>
-{/if}