reverted back to svelte-headless-table
This commit is contained in:
parent
61f8f5dd84
commit
1a083deb54
@ -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",
|
||||
|
||||
@ -23,9 +23,15 @@
|
||||
} from "../mal/types/MALTypes";
|
||||
import type { SimklAnime } from "../simkl/types/simklTypes";
|
||||
import { writable } from "svelte/store";
|
||||
import type { StatusOption, StatusOptions } from "../helperTypes/StatusTypes";
|
||||
import type {
|
||||
StatusOption,
|
||||
StatusOptions,
|
||||
} from "../helperTypes/StatusTypes";
|
||||
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
|
||||
import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
|
||||
import {
|
||||
convertDateStringToAniList,
|
||||
convertDateToAniList,
|
||||
} from "../helperFunctions/convertDateToAniList";
|
||||
import {
|
||||
AniListDeleteEntry,
|
||||
AniListUpdateEntry,
|
||||
@ -77,7 +83,8 @@
|
||||
{ id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" },
|
||||
];
|
||||
let startingAnilistStatusOption: StatusOption = statusOptions.filter(
|
||||
(option) => currentAniListAnime.data.MediaList.status === option.aniList,
|
||||
(option) =>
|
||||
currentAniListAnime.data.MediaList.status === option.aniList,
|
||||
)[0];
|
||||
let startedAtDate: Date | null = convertAniListDateToDate(
|
||||
currentAniListAnime.data.MediaList.startedAt,
|
||||
@ -108,11 +115,15 @@
|
||||
let startDate = "";
|
||||
let finishDate = "";
|
||||
if (currentMalAnime.my_list_status.start_date !== "") {
|
||||
const startArray = re.exec(currentMalAnime.my_list_status.start_date);
|
||||
const startArray = re.exec(
|
||||
currentMalAnime.my_list_status.start_date,
|
||||
);
|
||||
startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
|
||||
}
|
||||
if (currentMalAnime.my_list_status.finish_date !== "") {
|
||||
const finishArray = re.exec(currentMalAnime.my_list_status.finish_date);
|
||||
const finishArray = re.exec(
|
||||
currentMalAnime.my_list_status.finish_date,
|
||||
);
|
||||
finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
|
||||
}
|
||||
AddAnimeServiceToTable({
|
||||
@ -189,7 +200,10 @@
|
||||
submitData[key] = value;
|
||||
}
|
||||
|
||||
if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) {
|
||||
if (
|
||||
isAniListLoggedIn &&
|
||||
currentAniListAnime.data.MediaList.mediaId !== 0
|
||||
) {
|
||||
let body: AniListUpdateVariables = {
|
||||
mediaId: currentAniListAnime.data.MediaList.mediaId,
|
||||
progress: submitData.episodes,
|
||||
@ -200,7 +214,8 @@
|
||||
startedAt: convertDateToAniList(startedAtDate),
|
||||
completedAt: convertDateToAniList(completedAtDate),
|
||||
};
|
||||
await AniListUpdateEntry(body).then((value: AniListGetSingleAnime) => {
|
||||
await AniListUpdateEntry(body).then(
|
||||
(value: AniListGetSingleAnime) => {
|
||||
/* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug
|
||||
where tags break the SaveMediaListEntry return, you'll want to use this delete line
|
||||
delete value.data.MediaList.media.tags */
|
||||
@ -224,7 +239,8 @@
|
||||
repeat: currentAniListAnime.data.MediaList.repeat,
|
||||
notes: currentAniListAnime.data.MediaList.notes,
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (malLoggedIn && currentMalAnime.id !== 0) {
|
||||
@ -241,7 +257,8 @@
|
||||
(malAnimeReturn: MalListStatus) => {
|
||||
malAnime.update((value) => {
|
||||
value.my_list_status.status = malAnimeReturn.status;
|
||||
value.my_list_status.is_rewatching = malAnimeReturn.is_rewatching;
|
||||
value.my_list_status.is_rewatching =
|
||||
malAnimeReturn.is_rewatching;
|
||||
value.my_list_status.score = malAnimeReturn.score;
|
||||
value.my_list_status.num_episodes_watched =
|
||||
malAnimeReturn.num_episodes_watched;
|
||||
@ -268,12 +285,14 @@
|
||||
id: `m-${currentMalAnime.id}`,
|
||||
title: currentMalAnime.title,
|
||||
service: "MyAnimeList",
|
||||
progress: currentMalAnime.my_list_status.num_episodes_watched,
|
||||
progress:
|
||||
currentMalAnime.my_list_status.num_episodes_watched,
|
||||
status: currentMalAnime.my_list_status.status,
|
||||
startedAt: startDate,
|
||||
completedAt: finishDate,
|
||||
score: currentMalAnime.my_list_status.score,
|
||||
repeat: currentMalAnime.my_list_status.num_times_rewatched,
|
||||
repeat: currentMalAnime.my_list_status
|
||||
.num_times_rewatched,
|
||||
notes: currentMalAnime.my_list_status.comments,
|
||||
});
|
||||
},
|
||||
@ -281,9 +300,13 @@
|
||||
}
|
||||
|
||||
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
|
||||
if (currentSimklAnime.watched_episodes_count !== submitData.episodes) {
|
||||
await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then(
|
||||
(value: SimklAnime) => {
|
||||
if (
|
||||
currentSimklAnime.watched_episodes_count !== submitData.episodes
|
||||
) {
|
||||
await SimklSyncEpisodes(
|
||||
currentSimklAnime,
|
||||
submitData.episodes,
|
||||
).then((value: SimklAnime) => {
|
||||
AddAnimeServiceToTable({
|
||||
id: `s-${value.show.ids.simkl}`,
|
||||
title: value.show.title,
|
||||
@ -300,13 +323,14 @@
|
||||
newValue = value;
|
||||
return newValue;
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (currentSimklAnime.user_rating !== submitData.rating) {
|
||||
await SimklSyncRating(currentSimklAnime, submitData.rating).then(
|
||||
(value) => {
|
||||
await SimklSyncRating(
|
||||
currentSimklAnime,
|
||||
submitData.rating,
|
||||
).then((value) => {
|
||||
AddAnimeServiceToTable({
|
||||
id: `s-${value.show.ids.simkl}`,
|
||||
title: value.show.title,
|
||||
@ -323,13 +347,14 @@
|
||||
newValue = value;
|
||||
return newValue;
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (currentSimklAnime.status !== submitData.status.simkl) {
|
||||
await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(
|
||||
(value) => {
|
||||
await SimklSyncStatus(
|
||||
currentSimklAnime,
|
||||
submitData.status.simkl,
|
||||
).then((value) => {
|
||||
AddAnimeServiceToTable({
|
||||
id: `s-${value.show.ids.simkl}`,
|
||||
title: value.show.title,
|
||||
@ -346,8 +371,7 @@
|
||||
newValue = value;
|
||||
return newValue;
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -358,7 +382,10 @@
|
||||
|
||||
const deleteEntries = async () => {
|
||||
submitting.set(true);
|
||||
if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) {
|
||||
if (
|
||||
isAniListLoggedIn &&
|
||||
currentAniListAnime.data.MediaList.mediaId !== 0
|
||||
) {
|
||||
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
|
||||
AddAnimeServiceToTable({
|
||||
id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
|
||||
@ -418,7 +445,8 @@
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0
|
||||
) {
|
||||
max =
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1;
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
|
||||
1;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -479,18 +507,22 @@
|
||||
id="episodes"
|
||||
class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
|
||||
{currentAniListAnime.data.MediaList.progress < 0 ||
|
||||
(currentAniListAnime.data.MediaList.media.episodes > 0 &&
|
||||
(currentAniListAnime.data.MediaList.media.episodes >
|
||||
0 &&
|
||||
currentAniListAnime.data.MediaList.progress >
|
||||
currentAniListAnime.data.MediaList.media.episodes) ||
|
||||
(currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode > 0 &&
|
||||
currentAniListAnime.data.MediaList.media
|
||||
.episodes) ||
|
||||
(currentAniListAnime.data.MediaList.media
|
||||
.nextAiringEpisode.episode > 0 &&
|
||||
currentAniListAnime.data.MediaList.progress >
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode -
|
||||
currentAniListAnime.data.MediaList.media
|
||||
.nextAiringEpisode.episode -
|
||||
1)
|
||||
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
|
||||
: 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
|
||||
bind:value={currentAniListAnime.data.MediaList.progress}
|
||||
bind:value={
|
||||
currentAniListAnime.data.MediaList.progress
|
||||
}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
@ -519,15 +551,16 @@
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
/ {currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode !== 0
|
||||
? currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode - 1
|
||||
/ {currentAniListAnime.data.MediaList.media
|
||||
.nextAiringEpisode.episode !== 0
|
||||
? currentAniListAnime.data.MediaList.media
|
||||
.nextAiringEpisode.episode - 1
|
||||
: currentAniListAnime.data.MediaList.media.episodes}
|
||||
</div>
|
||||
{#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0}
|
||||
<div>
|
||||
of {currentAniListAnime.data.MediaList.media.episodes}
|
||||
of {currentAniListAnime.data.MediaList.media
|
||||
.episodes}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -600,7 +633,8 @@
|
||||
name="repeat"
|
||||
min="0"
|
||||
id="repeat"
|
||||
class="border {currentAniListAnime.data.MediaList.repeat < 0
|
||||
class="border {currentAniListAnime.data.MediaList
|
||||
.repeat < 0
|
||||
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
|
||||
: 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
|
||||
bind:value={currentAniListAnime.data.MediaList.repeat}
|
||||
|
||||
@ -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";
|
||||
createRender,
|
||||
createTable,
|
||||
Render,
|
||||
Subscribe,
|
||||
} from "svelte-headless-table";
|
||||
// @ts-ignore
|
||||
import { addSortBy } from "svelte-headless-table/plugins";
|
||||
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
import type { TableItem, TableItems } from "../helperTypes/TableTypes";
|
||||
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 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",
|
||||
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",
|
||||
},
|
||||
{
|
||||
accessorKey: "startedAt",
|
||||
accessor: "status",
|
||||
}),
|
||||
table.column({
|
||||
header: "Started At",
|
||||
},
|
||||
{
|
||||
accessorKey: "completedAt",
|
||||
accessor: "startedAt",
|
||||
}),
|
||||
table.column({
|
||||
header: "Completed At",
|
||||
},
|
||||
{
|
||||
accessorKey: "score",
|
||||
accessor: "completedAt",
|
||||
}),
|
||||
table.column({
|
||||
header: "Rating",
|
||||
},
|
||||
{
|
||||
accessorKey: "repeat",
|
||||
accessor: "score",
|
||||
}),
|
||||
table.column({
|
||||
header: "Repeat",
|
||||
},
|
||||
{
|
||||
accessorKey: "notes",
|
||||
accessor: "repeat",
|
||||
}),
|
||||
table.column({
|
||||
header: "Notes",
|
||||
},
|
||||
];
|
||||
accessor: "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()}
|
||||
<table
|
||||
class="w-full text-sm text-left rtl:text-right text-gray-400"
|
||||
{...$tableAttrs}
|
||||
>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
/>
|
||||
{#if header.column.getIsSorted().toString() === "asc"}
|
||||
⬆️
|
||||
{:else if header.column.getIsSorted().toString() === "desc"}
|
||||
<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>
|
||||
{/if}
|
||||
</th>
|
||||
</Subscribe>
|
||||
{/each}
|
||||
</tr>
|
||||
</Subscribe>
|
||||
{/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(),
|
||||
)}
|
||||
/>
|
||||
<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}
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user