mirror of
https://github.com/Djeeberjr/fw-anwesenheit.git
synced 2025-07-01 16:54:17 +00:00
implemented sorting in ID table
This commit is contained in:
parent
d764e9699b
commit
7f94362069
@ -12,6 +12,30 @@
|
||||
: [],
|
||||
);
|
||||
|
||||
let sortKey: keyof (typeof rows)[0] = $state("last");
|
||||
let sortDirection: "asc" | "desc" = $state("asc");
|
||||
|
||||
let rowsSorted = $derived(
|
||||
[...rows].sort((a, b) => {
|
||||
let cmp = String(a[sortKey]).localeCompare(String(b[sortKey]));
|
||||
return sortDirection === "asc" ? cmp : -cmp;
|
||||
}),
|
||||
);
|
||||
|
||||
function handleSortClick(key: keyof (typeof rows)[0]) {
|
||||
if (sortKey === key) {
|
||||
sortDirection = sortDirection === "asc" ? "desc" : "asc";
|
||||
} else {
|
||||
sortKey = key;
|
||||
sortDirection = "asc";
|
||||
}
|
||||
}
|
||||
|
||||
function indicator(key: keyof (typeof rows)[0]) {
|
||||
if (sortKey !== key) return "";
|
||||
return sortDirection === "asc" ? "▲" : "▼";
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let res = await fetch("/api/mapping");
|
||||
|
||||
@ -20,21 +44,45 @@
|
||||
</script>
|
||||
|
||||
{#if data == null}
|
||||
Loading
|
||||
Loading...
|
||||
{:else}
|
||||
<div class="bg-indigo-500 p-2 rounded-2xl overflow-x-auto">
|
||||
<table>
|
||||
<div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
|
||||
<table class="px-10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left pr-5">ID</th>
|
||||
<th class="text-left pr-5">Nachname</th>
|
||||
<th class="text-left pr-5">Vorname</th>
|
||||
<th
|
||||
class="text-left pr-5 pl-2 cursor-pointer select-none"
|
||||
onclick={() => {
|
||||
handleSortClick("id");
|
||||
}}
|
||||
>
|
||||
ID
|
||||
<span class="indicator">{indicator("id")}</span>
|
||||
</th>
|
||||
<th
|
||||
class="text-left pr-5 cursor-pointer select-none"
|
||||
onclick={() => {
|
||||
handleSortClick("last");
|
||||
}}
|
||||
>
|
||||
Nachname
|
||||
<span class="indicator">{indicator("last")}</span>
|
||||
</th>
|
||||
<th
|
||||
class="text-left pr-5 cursor-pointer select-none"
|
||||
onclick={() => {
|
||||
handleSortClick("first");
|
||||
}}
|
||||
>Vorname
|
||||
|
||||
<span class="indicator">{indicator("first")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="">
|
||||
{#each rows as row}
|
||||
<tbody>
|
||||
{#each rowsSorted as row}
|
||||
<tr class="even:bg-indigo-600">
|
||||
<td class="whitespace-nowrap pr-5">{row.id}</td>
|
||||
<td class="whitespace-nowrap pr-5 pl-2 py-1">{row.id}</td>
|
||||
<td class="whitespace-nowrap pr-5">{row.last}</td>
|
||||
<td class="whitespace-nowrap pr-5">{row.first}</td>
|
||||
</tr>
|
||||
@ -43,3 +91,11 @@
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="css" scoped>
|
||||
@reference "../app.css";
|
||||
|
||||
.indicator {
|
||||
@apply ml-1 w-4 inline-block;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user