rewrote the Anime.svelte to move out helper functions and clean up code

2024-09-05 15:29:42 -04:00
parent aeec8f79b2
commit 77e361b5b2
20 changed files with 616 additions and 473 deletions
--- a/frontend/src/helperComponents/AnimeTable.svelte
+++ b/frontend/src/helperComponents/AnimeTable.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
+    import {writable} from "svelte/store";
+    import type {TableItems} from "../helperTypes/TableTypes";
+
+    export let items: TableItems
+    // tableItems.subscribe(value => items = value)
+
+    const sortKey = writable('service'); // default sort key
+    const sortDirection = writable(1); // default sort direction (ascending)
+    const sortItems = writable(items.slice()); // make a copy of the items array
+
+    // Define a function to sort the items
+    const sortTable = (key: any) => {
+        // If the same key is clicked, reverse the sort direction
+        if ($sortKey === key) {
+            sortDirection.update((val) => -val);
+        } else {
+            sortKey.set(key);
+            sortDirection.set(1);
+        }
+    };
+
+    $: {
+        const key = $sortKey;
+        const direction = $sortDirection;
+        const sorted = [...$sortItems].sort((a, b) => {
+            const aVal = a[key];
+            const bVal = b[key];
+            if (aVal < bVal) {
+                return -direction;
+            } else if (aVal > bVal) {
+                return direction;
+            }
+            return 0;
+        });
+        sortItems.set(sorted);
+    }
+</script>
+
+<Table hoverable={true}>
+    <TableHead>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('id')}>ID</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('service')}>Service</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('progress')}>Episode Progress</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('status')}>Status</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('startedAt')}>Date Started</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('completedAt')}>Date Completed</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('score')}>Rating</TableHeadCell>
+        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('repeat')}>Rewatches</TableHeadCell>
+        <TableHeadCell>Notes</TableHeadCell>
+    </TableHead>
+    <TableBody tableBodyClass="divide-y">
+        {#each $sortItems as item}
+            <TableBodyRow>
+                <TableBodyCell class="overflow-x-auto">{item.id}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.service}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.progress}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.status}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.startedAt}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.completedAt}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.score}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.repeat}</TableBodyCell>
+                <TableBodyCell class="overflow-x-auto">{item.notes}</TableBodyCell>
+            </TableBodyRow>
+        {/each}
+    </TableBody>
+</Table>