<script lang="ts"> import { deleteCharacters } from '$gql/Mutations'; import { charactersQuery, fetchCharacter } from '$gql/Queries'; import type { Character } from '$gql/graphql'; import { CharacterSortLabel } from '$lib/Enums'; import { BasicFilterContext } from '$lib/Filter.svelte'; import { quickComicFilter } from '$lib/Navigation'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; import Empty from '$lib/components/Empty.svelte'; import Guard from '$lib/components/Guard.svelte'; import Head from '$lib/components/Head.svelte'; import Cardlets from '$lib/containers/Cardlets.svelte'; import Column from '$lib/containers/Column.svelte'; import AddCharacter from '$lib/dialogs/AddCharacter.svelte'; import EditCharacter from '$lib/dialogs/EditCharacter.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import FilterOrphaned from '$lib/toolbar/FilterOrphaned.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 Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; import { modals } from 'svelte-modals'; import type { PageProps } from './$types'; let { data }: PageProps = $props(); let pagination = $derived(data.pagination); let sort = $derived(data.sort); const client = getContextClient(); let result = $derived(charactersQuery(client, { ...data })); let characters = $derived($result.data?.characters); let selection = initSelectionContext<Character>('Character', (a) => a.name); $effect(() => { if (characters) { selection.view = characters.edges; } }); let filter = $state(new BasicFilterContext(data.filter)); $effect(() => { filter = new BasicFilterContext(data.filter); }); const edit = (id: number) => { fetchCharacter(client, id) .then((character) => modals.open(EditCharacter, { character })) .catch(toastFinally); }; const quickFilter = (id: number) => quickComicFilter(id, 'characters'); </script> <Head section="characters" /> <Column> <Toolbar> {#snippet start()} <SelectionControls> <DeleteSelection mutation={deleteCharacters} /> </SelectionControls> {/snippet} {#snippet center()} <Search name="Characters" {filter} bind:field={filter.include.name.contains} /> <FilterOrphaned {filter} /> <SelectSort {sort} labels={CharacterSortLabel} /> <SelectItems {pagination} /> {/snippet} {#snippet end()} <AddButton title="Add Character" onclick={() => modals.open(AddCharacter)} /> {/snippet} </Toolbar> {#if characters} <Pagination {pagination} total={characters.count} /> <main> <Cardlets> {#each characters.edges as { id, name }, index (id)} <Selectable {index} {id} onclick={edit} onauxclick={quickFilter}> {#snippet children({ onclick, onauxclick, selected })} <Cardlet {name} {onclick} {onauxclick}> {#snippet overlay()} <SelectionOverlay position="right" centered {selected} /> {/snippet} </Cardlet> {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> <Pagination {pagination} total={characters.count} /> {:else} <Guard {result} /> {/if} </Column>