44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { mdiSortAscending, mdiSortDescending } from "@mdi/js";
|
|
|
|
import Icon from "$lib/components/ui/Icon.svelte";
|
|
|
|
export let key: string;
|
|
export let title: string;
|
|
export let sortData: string[] | undefined;
|
|
export let sortUpdate: (sort: string[] | undefined) => void = () => {};
|
|
|
|
// 1: asc, 2: desc, 0: not sorted
|
|
let sorting = 0;
|
|
$: index = sortData?.findIndex((itm) => itm.split(":", 1)[0] === key) ?? -1;
|
|
$: if (index !== -1) {
|
|
sorting = sortData![index].split(":", 2)[1] === "dsc" ? 2 : 1;
|
|
} else {
|
|
sorting = 0;
|
|
}
|
|
|
|
function onClick(): void {
|
|
if (!sortData) {
|
|
sortData = [key];
|
|
} else if (sorting === 2) {
|
|
delete sortData[index];
|
|
} else if (index !== -1) {
|
|
sortData[index] = sortData[index].split(":", 1) + ":dsc";
|
|
} else {
|
|
sortData.push(key);
|
|
}
|
|
sortUpdate(sortData);
|
|
}
|
|
</script>
|
|
|
|
<th>
|
|
<button class:text-primary={sorting > 0} on:click={onClick}>
|
|
{#if sorting > 0}
|
|
<Icon path={sorting === 1 ? mdiSortAscending : mdiSortDescending} size={1} />
|
|
{/if}
|
|
{#if sortData && sortData.length > 1 && index !== -1}
|
|
({index + 1})
|
|
{/if}
|
|
{title}
|
|
</button>
|
|
</th>
|