7 files changed, 270 insertions, 0 deletions
diff --git a/frontend/src/lib/forms/ArtistForm.svelte b/frontend/src/lib/forms/ArtistForm.svelte
new file mode 100644
index 0000000..7df5e8b
--- /dev/null
+++ b/frontend/src/lib/forms/ArtistForm.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { type ArtistInput } from '$gql/Mutations';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import { type Artist } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ submit: ArtistInput }>();
+
+	export let artist: OmitIdentifiers<Artist>;
+
+	function submit() {
+		dispatch('submit', { name: artist.name });
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input autofocus required {id} bind:value={artist.name} />
+		</Labelled>
+	</div>
+	<slot />
+</form>
diff --git a/frontend/src/lib/forms/CharacterForm.svelte b/frontend/src/lib/forms/CharacterForm.svelte
new file mode 100644
index 0000000..4cec37c
--- /dev/null
+++ b/frontend/src/lib/forms/CharacterForm.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { type CharacterInput } from '$gql/Mutations';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import { type Character } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ submit: CharacterInput }>();
+
+	export let character: OmitIdentifiers<Character>;
+
+	function submit() {
+		dispatch('submit', { name: character.name });
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input autofocus required {id} bind:value={character.name} />
+		</Labelled>
+	</div>
+	<slot />
+</form>
diff --git a/frontend/src/lib/forms/CircleForm.svelte b/frontend/src/lib/forms/CircleForm.svelte
new file mode 100644
index 0000000..b71256c
--- /dev/null
+++ b/frontend/src/lib/forms/CircleForm.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { type CircleInput } from '$gql/Mutations';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import { type Circle } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ submit: CircleInput }>();
+
+	export let circle: OmitIdentifiers<Circle>;
+
+	function submit() {
+		dispatch('submit', { name: circle.name });
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input required autofocus {id} bind:value={circle.name} />
+		</Labelled>
+	</div>
+	<slot />
+</form>
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>
diff --git a/frontend/src/lib/forms/NamespaceForm.svelte b/frontend/src/lib/forms/NamespaceForm.svelte
new file mode 100644
index 0000000..c05b6d8
--- /dev/null
+++ b/frontend/src/lib/forms/NamespaceForm.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { type NamespaceInput } from '$gql/Mutations';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import { type Namespace } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ submit: NamespaceInput }>();
+
+	export let namespace: OmitIdentifiers<Namespace>;
+
+	function submit() {
+		dispatch('submit', { name: namespace.name, sortName: namespace.sortName });
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input required autofocus {id} bind:value={namespace.name} />
+		</Labelled>
+		<Labelled label="Sort name" let:id>
+			<input {id} bind:value={namespace.sortName} />
+		</Labelled>
+	</div>
+	<slot />
+</form>
diff --git a/frontend/src/lib/forms/TagForm.svelte b/frontend/src/lib/forms/TagForm.svelte
new file mode 100644
index 0000000..6cc2227
--- /dev/null
+++ b/frontend/src/lib/forms/TagForm.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { TagInput } from '$gql/Mutations';
+	import { namespaceList } from '$gql/Queries';
+	import type { OmitIdentifiers } from '$gql/Utils';
+	import type { FullTag } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import Select from '$lib/components/Select.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const client = getContextClient();
+	const dispatch = createEventDispatcher<{ submit: TagInput }>();
+
+	export let tag: OmitIdentifiers<FullTag>;
+
+	$: namespaceQuery = namespaceList(client);
+	$: namespaces = $namespaceQuery.data?.namespaces.edges;
+
+	function submit() {
+		dispatch('submit', {
+			name: tag.name,
+			description: tag.description,
+			namespaces: { ids: tag.namespaces.map((n) => n.id) }
+		});
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input autofocus required {id} bind:value={tag.name} />
+		</Labelled>
+		<Labelled label="Description" let:id>
+			<textarea rows={3} {id} bind:value={tag.description} />
+		</Labelled>
+		<Labelled label="Namespaces" let:id>
+			<Select multi object {id} options={namespaces} bind:value={tag.namespaces} />
+		</Labelled>
+	</div>
+	<slot />
+</form>
diff --git a/frontend/src/lib/forms/WorldForm.svelte b/frontend/src/lib/forms/WorldForm.svelte
new file mode 100644
index 0000000..103dd5b
--- /dev/null
+++ b/frontend/src/lib/forms/WorldForm.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { type WorldInput } from '$gql/Mutations';
+	import { type OmitIdentifiers } from '$gql/Utils';
+	import { type World } from '$gql/graphql';
+	import Labelled from '$lib/components/Labelled.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ submit: WorldInput }>();
+
+	export let world: OmitIdentifiers<World>;
+
+	function submit() {
+		dispatch('submit', { name: world.name });
+	}
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<div class="grid-labels">
+		<Labelled label="Name" let:id>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input autofocus required {id} bind:value={world.name} />
+		</Labelled>
+	</div>
+	<slot />
+</form>