blob: 353d69cd598686345d2b22a87f7e8a8d06594cc7 (
plain) (
tree)
|
|
<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>
|
