blob: 11289e7ce5f66e340a59ec21955c47327fbb345a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<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 } from '$lib/Filter.svelte';
import ComicCard from '$lib/components/ComicCard.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 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 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 { PageProps } from './$types';
let { data }: PageProps = $props();
let pagination = $derived(data.pagination);
let sort = $derived(data.sort);
const client = getContextClient();
let result = $derived(comicsQuery(client, { ...data }));
let comics = $derived($result.data?.comics);
const selection = initSelectionContext<ComicFragment>('Comic', (c) => c.title);
$effect(() => {
if (comics) {
selection.view = comics.edges;
}
});
let filter = $state(new ComicFilterContext(data.filter));
let filterSize = $derived(filter.includes + filter.excludes);
$effect(() => {
filter = new ComicFilterContext(data.filter);
});
</script>
<Head section="Comics" />
<Column>
<Toolbar expand={filterSize > 0}>
{#snippet start()}
<SelectionControls>
<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>
{/snippet}
{#snippet center({ expanded, toggle })}
<Search name="Comics" {filter} bind:field={filter.include.title.contains} />
<ToggleAdvancedFilters {expanded} {toggle} filterSize={filter.includes + filter.excludes} />
<div class="rounded-group flex">
<FilterFavourites {filter} />
<FilterBookmarked {filter} />
<FilterOrganized {filter} />
</div>
<SelectSort {sort} labels={ComicSortLabel} />
<SelectItems {pagination} />
{/snippet}
{#snippet expansion()}
<ComicFilterForm {filter} />
{/snippet}
</Toolbar>
{#if comics}
<Pagination {pagination} total={comics.count} />
<main>
<Cards>
{#each comics.edges as comic, index (comic.id)}
<Selectable {index} id={comic.id}>
{#snippet children({ onclick, selected })}
<ComicCard {comic} {onclick}>
{#snippet overlay()}
<SelectionOverlay position="left" {selected} />
{/snippet}
</ComicCard>
{/snippet}
</Selectable>
{:else}
<Empty />
{/each}
</Cards>
</main>
<Pagination {pagination} total={comics.count} />
{:else}
<Guard {result} />
{/if}
</Column>
|
