switched tanstack query
This commit is contained in:
@ -2,32 +2,20 @@
|
||||
import type {TableItem} from "../helperTypes/TableTypes";
|
||||
import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte"
|
||||
|
||||
export function AddAnimeServiceToTable(tableItem: TableItem) {
|
||||
let tableLoaded: TableItem[]
|
||||
tableItems.subscribe(value => tableLoaded = value)
|
||||
console.log(tableLoaded.length)
|
||||
if(tableLoaded.length === 0) {
|
||||
tableItems.update(table => {
|
||||
table.push(tableItem)
|
||||
return table
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
for (const [index, entry] of tableLoaded.entries()) {
|
||||
console.log(entry)
|
||||
if (entry.service === tableItem.service) {
|
||||
tableItems.update(value => {
|
||||
value[index] = tableItem
|
||||
return value
|
||||
})
|
||||
export function AddAnimeServiceToTable(animeItem: TableItem) {
|
||||
tableItems.update((table) => {
|
||||
if (table.length === 0) {
|
||||
table.push(animeItem)
|
||||
} else {
|
||||
tableItems.update(table => {
|
||||
table.push(tableItem)
|
||||
return table
|
||||
})
|
||||
for (const [index, tableItem] of table.entries()) {
|
||||
if(tableItem.service === animeItem.service) {
|
||||
table[index] = animeItem
|
||||
return table
|
||||
}
|
||||
}
|
||||
table.push(animeItem)
|
||||
}
|
||||
}
|
||||
return
|
||||
return table
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,68 +1,151 @@
|
||||
<script lang="ts">
|
||||
import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import type {TableItems} from "../helperTypes/TableTypes";
|
||||
import {writable} from 'svelte/store'
|
||||
import type {ColumnDef, TableOptions} from '@tanstack/svelte-table'
|
||||
import {
|
||||
createSvelteTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
type OnChangeFn,
|
||||
type SortingState,
|
||||
} from '@tanstack/svelte-table'
|
||||
import {tableItems} from "./GlobalVariablesAndHelperFunctions.svelte"
|
||||
import type {TableItem, TableItems} from "../helperTypes/TableTypes";
|
||||
|
||||
export let items: TableItems
|
||||
// tableItems.subscribe(value => items = value)
|
||||
let tableItemsView: TableItems
|
||||
tableItems.subscribe(value => tableItemsView = 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
|
||||
const defaultColumns: ColumnDef<TableItem>[] = [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: () => "Service Id",
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'service',
|
||||
header: () => 'Service',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'progress',
|
||||
header: () => 'Episode Progress',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: () => 'Status',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'startedAt',
|
||||
header: () => 'Started At',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'completedAt',
|
||||
header: () => 'Completed At',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'score',
|
||||
header: () => 'Rating',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'repeat',
|
||||
header: () => 'Repeat',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'notes',
|
||||
header: () => 'Notes',
|
||||
cell: info => info.getValue(),
|
||||
},
|
||||
]
|
||||
|
||||
// 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);
|
||||
let sorting: SortingState = []
|
||||
|
||||
const setSorting: OnChangeFn<SortingState> = updater => {
|
||||
if (updater instanceof Function) {
|
||||
sorting = updater(sorting)
|
||||
} else {
|
||||
sortKey.set(key);
|
||||
sortDirection.set(1);
|
||||
sorting = updater
|
||||
}
|
||||
};
|
||||
|
||||
$: {
|
||||
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);
|
||||
options.update(old => ({
|
||||
...old,
|
||||
state: {
|
||||
...old.state,
|
||||
sorting,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
const options = writable<TableOptions<TableItem>>({
|
||||
data: tableItemsView,
|
||||
columns: defaultColumns,
|
||||
state: {
|
||||
sorting,
|
||||
},
|
||||
onSortingChange: setSorting,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
})
|
||||
|
||||
const rerender = () => {
|
||||
console.log(tableItemsView)
|
||||
options.update(options => ({
|
||||
...options,
|
||||
data: tableItemsView,
|
||||
}))
|
||||
}
|
||||
|
||||
const table = createSvelteTable(options)
|
||||
</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>
|
||||
<div class="relative overflow-x-auto rounded-lg mb-5">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr>
|
||||
{#each headerGroup.headers as header}
|
||||
<th class="px-6 py-3">
|
||||
{#if !header.isPlaceholder}
|
||||
<button
|
||||
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}
|
||||
</button>
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td class="px-6 py-4">
|
||||
<svelte:component
|
||||
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<button on:click={() => rerender()} class="border p-2 mb-3"> Rerender</button>
|
||||
</div>
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
|
||||
let currentLocation: any
|
||||
location.subscribe(value => currentLocation = value)
|
||||
console.log(currentLocation)
|
||||
</script>
|
||||
|
||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||
|
||||
Reference in New Issue
Block a user