Update variable naming for filter implementation

This commit is contained in:
Christoph Kluge 2023-06-06 17:03:08 +02:00
parent b63969e5cc
commit dbebecfcdb

View File

@ -29,12 +29,17 @@
"Invalid list type provided!" "Invalid list type provided!"
); );
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = [];
let nameFilter = "";
let sorting = { field: "totalJobs", direction: "down" };
const client = getContextClient(); const client = getContextClient();
$: stats = queryStore({ $: stats = queryStore({
client: client, client: client,
query: gql` query: gql`
query($filters: [JobFilter!]!) { query($jobFilters: [JobFilter!]!) {
rows: jobsStatistics(filter: $filters, groupBy: ${type}) { rows: jobsStatistics(filter: $jobFilters, groupBy: ${type}) {
id id
name name
totalJobs totalJobs
@ -42,13 +47,9 @@
totalCoreHours totalCoreHours
} }
}`, }`,
variables: { filters } variables: { jobFilters }
}); });
let filters;
let nameFilter = "";
let sorting = { field: "totalJobs", direction: "down" };
function changeSorting(event, field) { function changeSorting(event, field) {
let target = event.target; let target = event.target;
while (target.tagName != "BUTTON") target = target.parentElement; while (target.tagName != "BUTTON") target = target.parentElement;
@ -73,7 +74,7 @@
return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp); return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
} }
onMount(() => filters.update()); onMount(() => filterComponent.update());
</script> </script>
<Row> <Row>
@ -93,12 +94,12 @@
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<Filters <Filters
bind:this={filters} bind:this={filterComponent}
{filterPresets} {filterPresets}
startTimeQuickSelect={true} startTimeQuickSelect={true}
menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up" menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
on:update={({ detail }) => { on:update={({ detail }) => {
filters = detail.filters; jobFilters = detail.filters;
}} }}
/> />
</Col> </Col>