blob: b8be75b12e6f1415920e679d4855e2e5727ec1f8 (
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
|
<script lang="ts">
import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries';
import { categories, censorships, languages, ratings } from '$lib/Enums';
import { ComicFilterContext } from '$lib/Filter.svelte';
import { accelerator } from '$lib/Shortcuts';
import { getContextClient } from '@urql/svelte';
import Filter from './components/Filter.svelte';
import FilterForm from './components/FilterForm.svelte';
const client = getContextClient();
let { filter }: { filter: ComicFilterContext } = $props();
let tagsQuery = $derived(comicTagList(client, { forFilter: true }));
let artistsQuery = $derived(artistList(client));
let charactersQuery = $derived(characterList(client));
let circlesQuery = $derived(circleList(client));
let worldsQuery = $derived(worldList(client));
let tags = $derived($tagsQuery.data?.comicTags.edges);
let artists = $derived($artistsQuery.data?.artists.edges);
let characters = $derived($charactersQuery.data?.characters.edges);
let circles = $derived($circlesQuery.data?.circles.edges);
let worlds = $derived($worldsQuery.data?.worlds.edges);
let inc = $derived(filter.include);
let exc = $derived(filter.exclude);
</script>
<FilterForm type="grid" apply={filter.apply}>
{#snippet include(type)}
<Filter {type} wide title="Tags" options={tags} filter={inc.tags} accel="it" />
<Filter {type} title="Artists" options={artists} filter={inc.artists} accel="ia" />
<Filter {type} title="Circles" options={circles} filter={inc.circles} accel="ii" />
<Filter {type} title="Characters" options={characters} filter={inc.characters} accel="ih" />
<Filter {type} title="Worlds" options={worlds} filter={inc.worlds} accel="iw" />
<Filter {type} title="Categories" options={categories} filter={inc.categories} accel="ig" />
<Filter {type} title="Ratings" options={ratings} filter={inc.ratings} accel="ir" />
<Filter {type} title="Censorship" options={censorships} filter={inc.censorships} accel="is" />
<Filter {type} title="Languages" options={languages} filter={inc.languages} accel="il" />
<div class="flex flex-col">
<label for="include-url">URL</label>
<input
use:accelerator={'iu'}
id="include-url"
class="h-full"
placeholder="Contains..."
bind:value={inc.url.contains}
/>
</div>
{/snippet}
{#snippet exclude(type)}
<Filter {type} wide title="Tags" options={tags} filter={exc.tags} accel="et" />
<Filter {type} title="Artists" options={artists} filter={exc.artists} accel="ea" />
<Filter {type} title="Circles" options={circles} filter={exc.circles} accel="ei" />
<Filter {type} title="Characters" options={characters} filter={exc.characters} accel="eh" />
<Filter {type} title="Worlds" options={worlds} filter={exc.worlds} accel="ew" />
<Filter {type} title="Categories" options={categories} filter={exc.categories} accel="eg" />
<Filter {type} title="Ratings" options={ratings} filter={exc.ratings} accel="er" />
<Filter {type} title="Censorship" options={censorships} filter={exc.censorships} accel="es" />
<Filter {type} title="Languages" options={languages} filter={exc.languages} accel="el" />
<div class="flex flex-col">
<label for="exclude-url">URL</label>
<input
use:accelerator={'eu'}
id="exclude-url"
class="h-full border border-red-900 outline-none focus:border-red-500"
placeholder="Does not contain..."
bind:value={exc.url.contains}
/>
</div>
{/snippet}
</FilterForm>
|
