ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-02-12 05:51:45 +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 jobFilters = $state([]);
let nameFilter = $state("");
let sorting = $state({ field: "totalJobs", direction: "down" });
let sorting = $state({ field: "totalJobs", direction: "desc" });
/* Derived Vars */
let stats = $derived(
@@ -67,21 +67,41 @@
);
/* Functions */
function changeSorting(field) {
sorting = { field, direction: sorting?.direction == "down" ? "up" : "down" };
function changeSorting(newField) {
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) {
const idCmp = sorting.direction == "up"
const idCmp = sorting.direction == "asc"
? (a, b) => b.id.localeCompare(a.id)
: (a, b) => a.id.localeCompare(b.id)
// 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 : (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) => b[sorting.field] - a[sorting.field];
@@ -141,7 +161,7 @@
>
{#if sorting?.field == "id"}
<!-- 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}
<Icon name="three-dots-vertical" />
{/if}
@@ -156,7 +176,7 @@
onclick={() => changeSorting("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}
<Icon name="three-dots-vertical" />
{/if}
@@ -172,7 +192,7 @@
>
{#if sorting?.field == "totalJobs"}
<!-- 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}
<Icon name="three-dots-vertical" />
{/if}
@@ -186,7 +206,7 @@
onclick={() => changeSorting("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}
<Icon name="three-dots-vertical" />
{/if}
@@ -200,7 +220,7 @@
onclick={() => changeSorting("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}
<Icon name="three-dots-vertical" />
{/if}
@@ -214,7 +234,7 @@
onclick={() => changeSorting("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}
<Icon name="three-dots-vertical" />
{/if}