summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/routes/comics/+page.svelte
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--frontend/src/routes/comics/+page.svelte116
1 files changed, 116 insertions, 0 deletions
diff --git a/frontend/src/routes/comics/+page.svelte b/frontend/src/routes/comics/+page.svelte
new file mode 100644
index 0000000..353d69c
--- /dev/null
+++ b/frontend/src/routes/comics/+page.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+ import { deleteComics, updateComics } from '$gql/Mutations';
+ import { comicsQuery } from '$gql/Queries';
+ import { type ComicFragment } from '$gql/graphql';
+ import { ComicSortLabel } from '$lib/Enums';
+ import { ComicFilterContext, initFilterContext } from '$lib/Filter';
+ import { initPaginationContext } from '$lib/Pagination';
+ import { initSelectionContext } from '$lib/Selection';
+ import { initSortContext } from '$lib/Sort';
+ import Card, { comicCard } from '$lib/components/Card.svelte';
+ import Empty from '$lib/components/Empty.svelte';
+ import Guard from '$lib/components/Guard.svelte';
+ import Head from '$lib/components/Head.svelte';
+ import Cards from '$lib/containers/Cards.svelte';
+ import Column from '$lib/containers/Column.svelte';
+ import UpdateComicsDialog from '$lib/dialogs/UpdateComics.svelte';
+ import ComicFilterForm from '$lib/filter/ComicFilterForm.svelte';
+ import Pagination from '$lib/pagination/Pagination.svelte';
+ import ComicPills from '$lib/pills/ComicPills.svelte';
+ import Selectable from '$lib/selection/Selectable.svelte';
+ import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
+ import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
+ import EditSelection from '$lib/toolbar/EditSelection.svelte';
+ import FilterBookmarked from '$lib/toolbar/FilterBookmarked.svelte';
+ import FilterFavourites from '$lib/toolbar/FilterFavourites.svelte';
+ import FilterOrganized from '$lib/toolbar/FilterOrganized.svelte';
+ import MarkBookmark from '$lib/toolbar/MarkBookmark.svelte';
+ import MarkFavourite from '$lib/toolbar/MarkFavourite.svelte';
+ import MarkOrganized from '$lib/toolbar/MarkOrganized.svelte';
+ import MarkSelection from '$lib/toolbar/MarkSelection.svelte';
+ import Search from '$lib/toolbar/Search.svelte';
+ import SelectItems from '$lib/toolbar/SelectItems.svelte';
+ import SelectSort from '$lib/toolbar/SelectSort.svelte';
+ import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
+ import ToggleAdvancedFilters from '$lib/toolbar/ToggleAdvancedFilters.svelte';
+ import Toolbar from '$lib/toolbar/Toolbar.svelte';
+ import { getContextClient } from '@urql/svelte';
+ import type { PageData } from './$types';
+
+ export let data: PageData;
+
+ const client = getContextClient();
+
+ $: result = comicsQuery(client, {
+ pagination: data.pagination,
+ filter: data.filter,
+ sort: data.sort
+ });
+
+ $: comics = $result.data?.comics;
+
+ const selection = initSelectionContext<ComicFragment>('Comic', (c) => c.title);
+ $: if (comics) {
+ $selection.view = comics.edges;
+ $pagination.total = comics.count;
+ }
+
+ const filter = initFilterContext<ComicFilterContext>();
+ $: $filter = new ComicFilterContext(data.filter);
+
+ const sort = initSortContext(data.sort, ComicSortLabel);
+ $: $sort.update = data.sort;
+
+ const pagination = initPaginationContext();
+ $: $pagination.update = data.pagination;
+</script>
+
+<Head section="Comics" />
+
+<Column>
+ <Toolbar>
+ <SelectionControls slot="start">
+ <MarkSelection>
+ <MarkFavourite mutation={updateComics} />
+ <hr class="col-span-2 border-slate-600" />
+ <MarkBookmark mutation={updateComics} />
+ <hr class="col-span-2 border-slate-600" />
+ <MarkOrganized mutation={updateComics} />
+ </MarkSelection>
+ <EditSelection dialog={UpdateComicsDialog} />
+ <DeleteSelection mutation={deleteComics} />
+ </SelectionControls>
+ <svelte:fragment slot="center">
+ <Search name="Comics" bind:field={$filter.include.controls.title.contains} />
+ <ToggleAdvancedFilters />
+ <div class="rounded-group flex">
+ <FilterFavourites />
+ <FilterBookmarked />
+ <FilterOrganized />
+ </div>
+ <SelectSort />
+ <SelectItems />
+ </svelte:fragment>
+ <ComicFilterForm />
+ </Toolbar>
+ {#if comics}
+ <Pagination />
+ <main>
+ <Cards>
+ {#each comics.edges as comic, index (comic.id)}
+ <Selectable {index} id={comic.id} let:handle let:selected>
+ <Card {...comicCard(comic)} on:click={handle}>
+ <SelectionOverlay position="left" {selected} slot="overlay" />
+ <ComicPills {comic} />
+ </Card>
+ </Selectable>
+ {:else}
+ <Empty />
+ {/each}
+ </Cards>
+ </main>
+ <Pagination />
+ {:else}
+ <Guard {result} />
+ {/if}
+</Column>