john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

reverted back to svelte-headless-table

Browse Source
This commit is contained in:
John O'Keefe 2025-02-15 21:12:36 -05:00
parent 61f8f5dd84
commit 1a083deb54
3 changed files with 851 additions and 865 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/package.json
View File

@ -16,8 +16,7 @@
"postcss": "^8.4.45",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"svelte-headless-table": "^0.18.2",
"@tanstack/svelte-table": "^8.20.5",
"svelte-headless-table": "^0.18.3",
"svelte-preprocess": "^5.0.3",
"svelte-spa-router": "^4.0.1",
"tailwind-merge": "^2.5.2",

1448
frontend/src/helperComponents/Anime.svelte
View File

File diff suppressed because it is too large Load Diff

265
frontend/src/helperComponents/AnimeTable.svelte
View File

@ -1,166 +1,119 @@
<script lang="ts">
import { writable } from "svelte/store";
import {
createSvelteTable,
flexRender,
getCoreRowModel,
getSortedRowModel,
type OnChangeFn,
renderComponent,
} from "@tanstack/svelte-table";
import type {
ColumnDef,
SortingState,
TableOptions,
Updater,
} from "@tanstack/svelte-table";
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import type { TableItem, TableItems } from "../helperTypes/TableTypes";
import WebsiteLink from "./WebsiteLink.svelte";
import {
createRender,
createTable,
Render,
Subscribe,
} from "svelte-headless-table";
// @ts-ignore
import { addSortBy } from "svelte-headless-table/plugins";
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import WebsiteLink from "./WebsiteLink.svelte";
let currentTableItems: TableItems;
//when adding sort here is code { sort: addSortBy() }
const table = createTable(tableItems, { sort: addSortBy() });
tableItems.subscribe((value: TableItems) => (currentTableItems = value));
const columns = table.createColumns([
table.column({
header: "Service Id",
cell: ({ value }) => createRender(WebsiteLink, { id: value }),
accessor: "id",
}),
table.column({
header: "Anime Title",
accessor: "title",
}),
table.column({
header: "Service",
accessor: "service",
}),
table.column({
header: "Episode Progress",
accessor: "progress",
}),
table.column({
header: "Status",
accessor: "status",
}),
table.column({
header: "Started At",
accessor: "startedAt",
}),
table.column({
header: "Completed At",
accessor: "completedAt",
}),
table.column({
header: "Rating",
accessor: "score",
}),
table.column({
header: "Repeat",
accessor: "repeat",
}),
table.column({
header: "Notes",
accessor: "notes",
}),
]);
const defaultColumns: ColumnDef<TableItem>[] = [
{
accessorKey: "id",
cell: (cell) => {
return renderComponent(WebsiteLink, { id: cell.renderValue() });
},
header: () => "Service ID",
},
{
accessorKey: "title",
header: () => "Anime Title",
},
{
accessorKey: "service",
header: () => "Service",
},
{
accessorKey: "progress",
header: () => "Episode Progress",
},
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "startedAt",
header: "Started At",
},
{
accessorKey: "completedAt",
header: "Completed At",
},
{
accessorKey: "score",
header: "Rating",
},
{
accessorKey: "repeat",
header: "Repeat",
},
{
accessorKey: "notes",
header: "Notes",
},
];
//sorting info
let sorting: SortingState[] = [];
const setSorting: OnChangeFn<SortingState> = (updater) => {
if (updater instanceof Function) {
sorting = updater(sorting);
} else {
sorting = updater;
}
options.update((old) => ({
...old,
state: {
...old.state,
sorting,
},
}));
};
const options = writable<TableOptions<TableItem>>({
data: currentTableItems,
columns: defaultColumns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
});
const rerender = () => {
options.update((options) => ({
...options,
data: currentTableItems,
}));
};
const table = createSvelteTable(options);
//add pluginStates when add sort back
const { headerRows, rows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns);
</script>
<div>
<div class="relative overflow-x-auto rounded-lg mb-5">
<table class="w-full text-sm text-left rtl:text-right text-gray-400">
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan} class="px-6 py-3">
{#if !header.isPlaceholder}
<div
class:cursor-pointer={header.column.getCanSort()}
class:select-none={header.column.getCanSort()}
on:click={header.column.getToggleSortingHandler()}
>
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext(),
)}
/>
{#if header.column.getIsSorted().toString() === "asc"}
⬆️
{:else if header.column.getIsSorted().toString() === "desc"}
⬇️
{/if}
</div>
{/if}
</th>
<div class="relative overflow-x-auto rounded-lg mb-5">
<table
class="w-full text-sm text-left rtl:text-right text-gray-400"
{...$tableAttrs}
>
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
{#each $headerRows as headerRow (headerRow.id)}
<Subscribe attrs={headerRow.attrs()} let:attrs>
<tr {...attrs}>
{#each headerRow.cells as cell (cell.id)}
<Subscribe
attrs={cell.attrs()}
let:attrs
props={cell.props()}
let:props
>
<th
{...attrs}
on:click={props.sort.toggle}
class:sorted={props.sort.order !==
undefined}
class="px-6 py-3"
>
<div>
<Render of={cell.render()} />
{#if props.sort.order === "asc"}
⬇️
{:else if props.sort.order === "desc"}
⬆️
{/if}
</div>
</th>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</tr>
{/each}
</thead>
<tbody class="bg-gray-800 border-gray-700">
{#each $table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td class="px-6 py-4">
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
/>
</td>
</thead>
<tbody {...$tableBodyAttrs}>
{#each $rows as row (row.id)}
<Subscribe attrs={row.attrs()} let:attrs>
<tr {...attrs} class="bg-gray-800 border-gray-700">
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs} class="px-6 py-4">
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</tr>
{/each}
</tbody>
</tbody>
</table>
</div>
<!-- <button -->
<!-- class="text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" -->
<!-- on:click={() => rerender()} -->
<!-- > -->
<!-- Rerender -->
<!-- </button> -->
</div>