summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/forms/ComicForm.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/forms/ComicForm.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/forms/ComicForm.svelte')
-rw-r--r--frontend/src/lib/forms/ComicForm.svelte100
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>