diff options
Diffstat (limited to 'frontend/src/routes/comics/+page.svelte')
| -rw-r--r-- | frontend/src/routes/comics/+page.svelte | 116 |
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> |