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
|
<script lang="ts">
import { deleteTags } from '$gql/Mutations';
import { fetchTag, tagsQuery } from '$gql/Queries';
import { type Tag } from '$gql/graphql';
import { TagSortLabel } from '$lib/Enums';
import { TagFilterContext, initFilterContext } from '$lib/Filter';
import { initPaginationContext } from '$lib/Pagination';
import { initSelectionContext } from '$lib/Selection';
import { initSortContext } from '$lib/Sort';
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 AddTag from '$lib/dialogs/AddTag.svelte';
import EditTag from '$lib/dialogs/EditTag.svelte';
import UpdateTagsDialog from '$lib/dialogs/UpdateTags.svelte';
import TagFilterForm from '$lib/filter/TagFilterForm.svelte';
import Pagination from '$lib/pagination/Pagination.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 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 { openModal } from 'svelte-modals';
import type { PageData } from './$types';
const client = getContextClient();
export let data: PageData;
$: result = tagsQuery(client, {
pagination: data.pagination,
filter: data.filter,
sort: data.sort
});
$: tags = $result.data?.tags;
const selection = initSelectionContext<Tag>('Tag', (t) => t.name);
$: if (tags) {
$selection.view = tags.edges;
$pagination.total = tags.count;
}
const filter = initFilterContext<TagFilterContext>();
$: $filter = new TagFilterContext(data.filter);
const sort = initSortContext(data.sort, TagSortLabel);
$: $sort.update = data.sort;
const pagination = initPaginationContext();
$: $pagination.update = data.pagination;
const edit = (id: number) => {
fetchTag(client, id)
.then((tag) => openModal(EditTag, { tag }))
.catch(toastFinally);
};
</script>
<Head section="Tags" />
<Column>
<Toolbar>
<SelectionControls slot="start">
<EditSelection dialog={UpdateTagsDialog} />
<DeleteSelection mutation={deleteTags} />
</SelectionControls>
<svelte:fragment slot="center">
<Search name="Tags" bind:field={$filter.include.controls.name.contains} />
<ToggleAdvancedFilters />
<SelectSort />
<SelectItems />
</svelte:fragment>
<svelte:fragment slot="end">
<AddButton title="Add Tag" on:click={() => openModal(AddTag)} />
</svelte:fragment>
<TagFilterForm />
</Toolbar>
{#if tags}
<Pagination />
<main>
<Cardlets>
{#each tags.edges as { id, name, description }, index (id)}
<Selectable {index} {id} {edit} let:handle let:selected>
<Cardlet {name} title={description} on:click={handle} filter="tags" id={`:${id}`}>
<SelectionOverlay slot="overlay" position="right" centered {selected} />
</Cardlet>
</Selectable>
{:else}
<Empty />
{/each}
</Cardlets>
</main>
<Pagination />
{:else}
<Guard {result} />
{/if}
</Column>
|
