feat: add jobname filter to joblist textfilter

- allows combination of filters now including jobname
- rename component
This commit is contained in:
Christoph Kluge 2024-05-22 18:22:35 +02:00
parent 061c9f0979
commit 575753038b
2 changed files with 39 additions and 39 deletions

View File

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

View File

@ -4,21 +4,25 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let user = "";
export let project = "";
export let authlevel; export let authlevel;
export let roles; export let roles;
let mode = "user", let mode = "user";
term = ""; let term = "";
let user = "";
let project = "";
let jobName = "";
const throttle = 500; const throttle = 500;
function modeChanged() { function modeChanged() {
if (mode == "user") { if (mode == "user") {
project = term; project = term;
term = user; term = user;
} else { } else if (mode == "project") {
user = term; user = term;
term = project; term = project;
} else {
jobName = term;
term = jobName;
} }
termChanged(0); termChanged(0);
} }
@ -28,7 +32,8 @@
function termChanged(sleep = throttle) { function termChanged(sleep = throttle) {
if (authlevel >= roles.manager) { if (authlevel >= roles.manager) {
if (mode == "user") user = term; if (mode == "user") user = term;
else project = term; else if (mode == "project") project = term;
else jobName = term;
if (timeoutId != null) clearTimeout(timeoutId); if (timeoutId != null) clearTimeout(timeoutId);
@ -36,49 +41,44 @@
dispatch("update", { dispatch("update", {
user, user,
project, project,
jobName
}); });
}, sleep); }, sleep);
} else { } else {
project = term; if (mode == "project") project = term;
else jobName = term;
if (timeoutId != null) clearTimeout(timeoutId); if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => { timeoutId = setTimeout(() => {
dispatch("update", { dispatch("update", {
project, project,
jobName
}); });
}, sleep); }, sleep);
} }
} }
</script> </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={"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}