1 files changed, 48 insertions, 0 deletions
diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte
new file mode 100644
index 0000000..13b5320
--- /dev/null
+++ b/frontend/src/lib/filter/ComicFilterForm.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries';
+	import { ComicFilterContext, getFilterContext } from '$lib/Filter';
+	import { getContextClient } from '@urql/svelte';
+	import ComicFilterGroup from './components/ComicFilterGroup.svelte';
+	import FilterForm from './components/FilterForm.svelte';
+
+	const client = getContextClient();
+
+	$: tagsQuery = comicTagList(client, { forFilter: true });
+	$: artistsQuery = artistList(client);
+	$: charactersQuery = characterList(client);
+	$: circlesQuery = circleList(client);
+	$: worldsQuery = worldList(client);
+
+	$: tags = $tagsQuery.data?.comicTags.edges;
+	$: artists = $artistsQuery.data?.artists.edges;
+	$: characters = $charactersQuery.data?.characters.edges;
+	$: circles = $circlesQuery.data?.circles.edges;
+	$: worlds = $worldsQuery.data?.worlds.edges;
+
+	const filter = getFilterContext<ComicFilterContext>();
+	const apply = () => $filter.apply($page.url.searchParams);
+</script>
+
+<FilterForm type="grid" on:submit={apply}>
+	<ComicFilterGroup
+		slot="include"
+		type="include"
+		bind:controls={$filter.include.controls}
+		{tags}
+		{artists}
+		{characters}
+		{circles}
+		{worlds}
+	/>
+	<ComicFilterGroup
+		slot="exclude"
+		type="exclude"
+		bind:controls={$filter.exclude.controls}
+		{tags}
+		{artists}
+		{characters}
+		{circles}
+		{worlds}
+	/>
+</FilterForm>