blob: 9f0d89381ca79ccf5dd0cff77df4d5cfe0770485 (
plain) (
tree)
|
|
<script lang="ts">
import { deleteArtists } from '$gql/Mutations';
import { artistsQuery, fetchArtist } from '$gql/Queries';
import type { Artist } from '$gql/graphql';
import { ArtistSortLabel } 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 AddArtist from '$lib/dialogs/AddArtist.svelte';
import EditArtist from '$lib/dialogs/EditArtist.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 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(artistsQuery(client, { ...data }));
let artists = $derived($result.data?.artists);
let selection = initSelectionContext<Artist>('Artist', (a) => a.name);
$effect(() => {
if (artists) {
selection.view = artists.edges;
}
});
let filter = $state(new BasicFilterContext(data.filter));
$effect(() => {
filter = new BasicFilterContext(data.filter);
});
const edit = (id: number) => {
fetchArtist(client, id)
.then((artist) => modals.open(EditArtist, { artist }))
.catch(toastFinally);
};
const quickFilter = (id: number) => quickComicFilter(id, 'artists');
</script>
<Head section="artists" />
<Column>
<Toolbar>
{#snippet start()}
<SelectionControls>
<DeleteSelection mutation={deleteArtists} />
</SelectionControls>
{/snippet}
{#snippet center()}
<Search name="Artists" {filter} bind:field={filter.include.name.contains} />
<SelectSort {sort} labels={ArtistSortLabel} />
<SelectItems {pagination} />
{/snippet}
{#snippet end()}
<AddButton title="Add Artist" onclick={() => modals.open(AddArtist)} />
{/snippet}
</Toolbar>
{#if artists}
<Pagination {pagination} total={artists.count} />
<main>
<Cardlets>
{#each artists.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={artists.count} />
{:else}
<Guard {result} />
{/if}
</Column>
|
