From 2ef1826b12066ac6fee20ecd57138ac7fbfdd56f Mon Sep 17 00:00:00 2001 From: Christoph Kluge Date: Fri, 30 Jan 2026 12:51:49 +0100 Subject: [PATCH] format nodeOverview state badges, review textFilter - textFilter now remains on compare --- web/frontend/src/Jobs.root.svelte | 5 +- web/frontend/src/generic/Filters.svelte | 13 ++- .../src/generic/helper/TextFilter.svelte | 108 ++++++++---------- web/frontend/src/systems/NodeOverview.svelte | 4 +- 4 files changed, 64 insertions(+), 66 deletions(-) diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte index 45c70bff..02d41712 100644 --- a/web/frontend/src/Jobs.root.svelte +++ b/web/frontend/src/Jobs.root.svelte @@ -155,8 +155,9 @@ {#if !showCompare} filterComponent.updateFilters(filter)} /> {/if} diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte index c79a56e4..74f55ca7 100644 --- a/web/frontend/src/generic/Filters.svelte +++ b/web/frontend/src/generic/Filters.svelte @@ -241,12 +241,15 @@ if (filters.project) opts.push(`project=${filters.project}`); if (filters.project && filters.projectMatch != "contains") // "contains" is default-case opts.push(`projectMatch=${filters.projectMatch}`); - if (filters.user.length != 0) - if (filters.userMatch != "in") { - opts.push(`user=${filters.user}`); - } else { - for (let singleUser of filters.user) opts.push(`user=${singleUser}`); + if (filters.user) { + if (filters.user.length != 0) { + if (filters.userMatch != "in") { + opts.push(`user=${filters.user}`); + } else { + for (let singleUser of filters.user) opts.push(`user=${singleUser}`); + } } + } if (filters.userMatch != "contains") // "contains" is default-case opts.push(`userMatch=${filters.userMatch}`); // Filter Modals diff --git a/web/frontend/src/generic/helper/TextFilter.svelte b/web/frontend/src/generic/helper/TextFilter.svelte index c38fe33d..6e263c4d 100644 --- a/web/frontend/src/generic/helper/TextFilter.svelte +++ b/web/frontend/src/generic/helper/TextFilter.svelte @@ -2,9 +2,10 @@ @component Search Field for Job-Lists with separate mode if project filter is active Properties: - - `presetProject String?`: Currently active project filter [Default: ''] + - `presetProject String?`: Currently active project filter preset [Default: ''] - `authlevel Number?`: The current users authentication level [Default: null] - `roles [Number]?`: Enum containing available roles [Default: null] + - `filterBuffer [Obj]?`: Currently active filters, if any. - `setFilter Func`: The callback function to apply current filter selection --> @@ -18,78 +19,69 @@ presetProject = "", authlevel = null, roles = null, + filterBuffer = [], setFilter } = $props(); /* Const Init*/ - const throttle = 500; + const throttle = 300; /* Var Init */ - let user = ""; - let jobName = ""; let timeoutId = null; - /* State Init */ - let term = $state(""); + /* Derived */ + const bufferProject = $derived.by(() => { + let bp = filterBuffer.find((fb) => + Object.keys(fb).includes("project") + ) + return bp?.project?.contains || null + }); - /* Derived */ - let project = $derived(presetProject ? presetProject : ""); - let mode = $derived(presetProject ? "jobName" : "project"); + const bufferUser = $derived.by(() => { + let bu = filterBuffer.find((fb) => + Object.keys(fb).includes("user") + ) + return bu?.user?.contains || null + }); + + const bufferJobName = $derived.by(() => { + let bjn = filterBuffer.find((fb) => + Object.keys(fb).includes("jobName") + ) + return bjn?.jobName?.contains || null + }); + + let mode = $derived.by(() => { + if (presetProject) return "jobName" // Search by jobName if presetProject set + else if (bufferUser) return "user" + else if (bufferJobName) return "jobName" + else return "project" + }); + + let term = $derived(bufferUser || bufferJobName || bufferProject || ""); /* Functions */ - function modeChanged() { + function inputChanged(sleep = throttle) { + if (timeoutId != null) clearTimeout(timeoutId); if (mode == "user") { - project = presetProject ? presetProject : ""; - jobName = ""; + timeoutId = setTimeout(() => { + setFilter({ user: term, project: (presetProject ? presetProject : null), jobName: null }); + }, sleep); } else if (mode == "project") { - user = ""; - jobName = ""; - } else { - project = presetProject ? presetProject : ""; - user = ""; - } - termChanged(0); - } - - // Compatibility: Handle "user role" and "no role" identically - function termChanged(sleep = throttle) { - if (roles && authlevel >= roles.manager) { - if (mode == "user") user = term; - else if (mode == "project") project = term; - else jobName = term; - - if (timeoutId != null) clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - setFilter({ - user, - project, - jobName - }); - }, sleep); - } else { - if (mode == "project") project = term; - else jobName = term; - - if (timeoutId != null) clearTimeout(timeoutId); - + setFilter({ project: term, user: null, jobName: null }); + }, sleep); + } else if (mode == "jobName") { timeoutId = setTimeout(() => { - setFilter({ - project, - jobName - }); - }, sleep); + setFilter({ jobName: term, user: null, project: (presetProject ? presetProject : null) }); + }, sleep); } } function resetProject () { - mode = "project" - term = "" - presetProject = "" - project = "" - jobName = "" - user = "" - termChanged(0); + presetProject = ""; + term = ""; + inputChanged(0); } @@ -100,12 +92,12 @@ class="form-select w-auto" title="Search Mode" bind:value={mode} - onchange={modeChanged} + onchange={() => inputChanged()} > {#if !presetProject} {/if} - {#if roles && authlevel >= roles.manager} + {#if roles && authlevel >= roles?.manager} {/if} @@ -113,8 +105,8 @@ termChanged()} - onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)} + onchange={() => inputChanged()} + onkeyup={(event) => inputChanged(event.key == "Enter" ? 0 : throttle)} placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`} /> {#if presetProject} diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte index 4622898c..bb58b833 100644 --- a/web/frontend/src/systems/NodeOverview.svelte +++ b/web/frontend/src/systems/NodeOverview.svelte @@ -156,7 +156,9 @@ > - {item?.state? item.state : 'notindb'} + + State: {item?.state? item.state.charAt(0).toUpperCase() + item.state.slice(1) : 'Not in DB'} + {#if item?.data}