ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-02-11 21:41:46 +01:00
Code Issues Packages Releases Activity

add default orders on list sorting change

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-31 11:25:16 +01:00
parent a71341064e
commit 1791e665aa
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/frontend/src/List.root.svelte
View File

@@ -45,7 +45,7 @@
let filterComponent = $state(); // 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 filterComponent = $state(); // 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 = $state([]); let jobFilters = $state([]);
let nameFilter = $state(""); let nameFilter = $state("");
let sorting = $state({ field: "totalJobs", direction: "down" }); let sorting = $state({ field: "totalJobs", direction: "desc" });
/* Derived Vars */ /* Derived Vars */
let stats = $derived( let stats = $derived(
@@ -67,21 +67,41 @@
); );
/* Functions */ /* Functions */
function changeSorting(field) { function changeSorting(newField) {
sorting = { field, direction: sorting?.direction == "down" ? "up" : "down" }; if (sorting.field == newField) {
// Same Field, Change Direction
sorting = { field: newField, direction: sorting.direction == "desc" ? "asc" : "desc" };
} else {
// Change Field, Apply Field Dependent Default
switch (newField) {
case "id":
case "name":
case "totalJobs":
case "totalWalltime":
sorting = { field: newField, direction: "desc" };
break
case "totalCoreHours":
case "totalAccHours":
sorting = { field: newField, direction: "asc" };
break
default:
// Fallback: Change only Field
sorting = { field: newField, direction: sorting.direction };
}
}
} }
function sort(stats, sorting, nameFilter) { function sort(stats, sorting, nameFilter) {
const idCmp = sorting.direction == "up" const idCmp = sorting.direction == "asc"
? (a, b) => b.id.localeCompare(a.id) ? (a, b) => b.id.localeCompare(a.id)
: (a, b) => a.id.localeCompare(b.id) : (a, b) => a.id.localeCompare(b.id)
// Force empty or undefined strings to the end of the list // Force empty or undefined strings to the end of the list
const nameCmp = sorting.direction == "up" const nameCmp = sorting.direction == "asc"
? (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (b.name.localeCompare(a.name))) ? (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (b.name.localeCompare(a.name)))
: (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (a.name.localeCompare(b.name))) : (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (a.name.localeCompare(b.name)))
const intCmp = sorting.direction == "up" const intCmp = sorting.direction == "asc"
? (a, b) => a[sorting.field] - b[sorting.field] ? (a, b) => a[sorting.field] - b[sorting.field]
: (a, b) => b[sorting.field] - a[sorting.field]; : (a, b) => b[sorting.field] - a[sorting.field];
@@ -141,7 +161,7 @@
> >
{#if sorting?.field == "id"} {#if sorting?.field == "id"}
<!-- Note on Icon-Name: Arrow-indicator always down, only alpha-indicator switches --> <!-- Note on Icon-Name: Arrow-indicator always down, only alpha-indicator switches -->
<Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} /> <Icon name={`sort-alpha-${sorting?.direction == 'desc' ? 'down' : 'down-alt'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}
@@ -156,7 +176,7 @@
onclick={() => changeSorting("name")} onclick={() => changeSorting("name")}
> >
{#if sorting?.field == "name"} {#if sorting?.field == "name"}
<Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} /> <Icon name={`sort-alpha-${sorting?.direction == 'desc' ? 'down' : 'down-alt'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}
@@ -172,7 +192,7 @@
> >
{#if sorting?.field == "totalJobs"} {#if sorting?.field == "totalJobs"}
<!-- Note on Icon-Name: Arrow-indicator always down, only numeric-indicator switches --> <!-- Note on Icon-Name: Arrow-indicator always down, only numeric-indicator switches -->
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} /> <Icon name={`sort-numeric-${sorting?.direction == 'desc' ? 'down-alt' : 'down'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}
@@ -186,7 +206,7 @@
onclick={() => changeSorting("totalWalltime")} onclick={() => changeSorting("totalWalltime")}
> >
{#if sorting?.field == "totalWalltime"} {#if sorting?.field == "totalWalltime"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} /> <Icon name={`sort-numeric-${sorting?.direction == 'desc' ? 'down-alt' : 'down'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}
@@ -200,7 +220,7 @@
onclick={() => changeSorting("totalCoreHours")} onclick={() => changeSorting("totalCoreHours")}
> >
{#if sorting?.field == "totalCoreHours"} {#if sorting?.field == "totalCoreHours"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} /> <Icon name={`sort-numeric-${sorting?.direction == 'desc' ? 'down-alt' : 'down'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}
@@ -214,7 +234,7 @@
onclick={() => changeSorting("totalAccHours")} onclick={() => changeSorting("totalAccHours")}
> >
{#if sorting?.field == "totalAccHours"} {#if sorting?.field == "totalAccHours"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} /> <Icon name={`sort-numeric-${sorting?.direction == 'desc' ? 'down-alt' : 'down'}`} />
{:else} {:else}
<Icon name="three-dots-vertical" /> <Icon name="three-dots-vertical" />
{/if} {/if}