Initial commit0.1.0

1 files changed, 100 insertions, 0 deletions

diff --git a/frontend/src/lib/forms/ComicForm.svelte b/frontend/src/lib/forms/ComicForm.svelte
new file mode 100644
index 0000000..74051c8
--- /dev/null
+++ b/frontend/src/lib/forms/ComicForm.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import type { FullComicFragment, UpdateComicInput } from '$gql/graphql';
+	import { categories, censorships, directions, languages, layouts, ratings } from '$lib/Enums';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import LabelledBlock from '$lib/components/LabelledBlock.svelte';
+	import Select from '$lib/components/Select.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const client = getContextClient();
+	const dispatch = createEventDispatcher<{ submit: UpdateComicInput }>();
+
+	export let comic: OmitIdentifiers<FullComicFragment>;
+
+	$: tagsQuery = comicTagList(client);
+	$: 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;
+
+	function submit() {
+		dispatch('submit', {
+			direction: comic.direction,
+			layout: comic.layout,
+			rating: comic.rating,
+			category: comic.category,
+			censorship: comic.censorship,
+			title: comic.title,
+			originalTitle: comic.originalTitle,
+			url: comic.url,
+			date: comic.date === '' ? null : comic.date,
+			language: comic.language,
+			tags: { ids: comic.tags.map((t) => t.id) },
+			artists: { ids: comic.artists.map((a) => a.id) },
+			characters: { ids: comic.characters.map((c) => c.id) },
+			circles: { ids: comic.circles.map((c) => c.id) },
+			worlds: { ids: comic.worlds.map((w) => w.id) }
+		});
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Title" let:id>
+			<input required {id} bind:value={comic.title} title={comic.title} />
+		</Labelled>
+		<Labelled label="Original Title" let:id>
+			<input {id} bind:value={comic.originalTitle} title={comic.originalTitle} />
+		</Labelled>
+		<Labelled label="URL" let:id>
+			<input {id} bind:value={comic.url} />
+		</Labelled>
+		<Labelled label="Date" let:id>
+			<input {id} type="date" bind:value={comic.date} pattern={'d{4}-d{2}-d{2}'} />
+		</Labelled>
+		<Labelled label="Category" let:id>
+			<Select {id} options={categories} bind:value={comic.category} />
+		</Labelled>
+		<Labelled label="Rating" let:id>
+			<Select {id} options={ratings} bind:value={comic.rating} />
+		</Labelled>
+		<Labelled label="Censorship" let:id>
+			<Select {id} options={censorships} bind:value={comic.censorship} />
+		</Labelled>
+		<Labelled label="Language" let:id>
+			<Select {id} options={languages} bind:value={comic.language} />
+		</Labelled>
+		<Labelled label="Direction" let:id>
+			<Select {id} options={directions} bind:value={comic.direction} />
+		</Labelled>
+		<Labelled label="Layout" let:id>
+			<Select {id} options={layouts} bind:value={comic.layout} />
+		</Labelled>
+	</div>
+
+	<LabelledBlock label="Artists" let:id>
+		<Select multi object {id} options={artists} bind:value={comic.artists} />
+	</LabelledBlock>
+	<LabelledBlock label="Circles" let:id>
+		<Select multi object {id} options={circles} bind:value={comic.circles} />
+	</LabelledBlock>
+	<LabelledBlock label="Characters" let:id>
+		<Select multi object {id} options={characters} bind:value={comic.characters} />
+	</LabelledBlock>
+	<LabelledBlock label="Worlds" let:id>
+		<Select multi object {id} options={worlds} bind:value={comic.worlds} />
+	</LabelledBlock>
+	<LabelledBlock label="Tags" let:id>
+		<Select multi object {id} options={tags} bind:value={comic.tags} />
+	</LabelledBlock>
+	<slot />
+</form>