diff options
Diffstat (limited to 'frontend/src/lib/forms/ComicForm.svelte')
| -rw-r--r-- | frontend/src/lib/forms/ComicForm.svelte | 100 |
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> |