|
|
<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 LabelledBlock from '$lib/components/LabelledBlock.svelte';
import Select from '$lib/components/Select.svelte';
import { getContextClient } from '@urql/svelte';
import { type Snippet } from 'svelte';
const client = getContextClient();
interface Props {
input: OmitIdentifiers<FullComicFragment>;
submit: (input: UpdateComicInput) => void;
children?: Snippet;
}
let { input = $bindable(), submit, children }: Props = $props();
let tagsQuery = $derived(comicTagList(client));
let artistsQuery = $derived(artistList(client));
let charactersQuery = $derived(characterList(client));
let circlesQuery = $derived(circleList(client));
let worldsQuery = $derived(worldList(client));
let tags = $derived($tagsQuery.data?.comicTags.edges);
let artists = $derived($artistsQuery.data?.artists.edges);
let characters = $derived($charactersQuery.data?.characters.edges);
let circles = $derived($circlesQuery.data?.circles.edges);
let worlds = $derived($worldsQuery.data?.worlds.edges);
function onsubmit(event: SubmitEvent) {
event.preventDefault();
submit({
direction: input.direction,
layout: input.layout,
rating: input.rating,
category: input.category,
censorship: input.censorship,
title: input.title,
originalTitle: input.originalTitle,
url: input.url,
date: input.date === '' ? null : input.date,
language: input.language,
tags: { ids: input.tags.map((t) => t.id) },
artists: { ids: input.artists.map((a) => a.id) },
characters: { ids: input.characters.map((c) => c.id) },
circles: { ids: input.circles.map((c) => c.id) },
worlds: { ids: input.worlds.map((w) => w.id) }
});
}
</script>
<form {onsubmit}>
<div class="grid-labels">
<label class="self-center" for="title">Title</label>
<input required id="title" bind:value={input.title} title={input.title} />
<label class="self-center" for="original-title">Original Title</label>
<input id="original-title" bind:value={input.originalTitle} title={input.originalTitle} />
<label class="self-center" for="url">URL</label>
<input id="url" bind:value={input.url} />
<label class="self-center" for="date">Date</label>
<input id="date" type="date" bind:value={input.date} pattern={'d{4}-d{2}-d{2}'} />
<label class="self-center" for="category">Category</label>
<Select id="category" options={categories} bind:value={input.category} />
<label class="self-center" for="rating">Rating</label>
<Select id="rating" options={ratings} bind:value={input.rating} />
<label class="self-center" for="censorship">Censorship</label>
<Select id="censorship" options={censorships} bind:value={input.censorship} />
<label class="self-center" for="language">Language</label>
<Select id="language" options={languages} bind:value={input.language} />
<label class="self-center" for="direction">Direction</label>
<Select id="direction" options={directions} bind:value={input.direction} />
<label class="self-center" for="layout">Layout</label>
<Select id="layout" options={layouts} bind:value={input.layout} />
</div>
<LabelledBlock label="Artists">
{#snippet children({ id })}
<Select multi object {id} options={artists} bind:value={input.artists} />
{/snippet}
</LabelledBlock>
<LabelledBlock label="Circles">
{#snippet children({ id })}
<Select multi object {id} options={circles} bind:value={input.circles} />
{/snippet}
</LabelledBlock>
<LabelledBlock label="Characters">
{#snippet children({ id })}
<Select multi object {id} options={characters} bind:value={input.characters} />
{/snippet}
</LabelledBlock>
<LabelledBlock label="Worlds">
{#snippet children({ id })}
<Select multi object {id} options={worlds} bind:value={input.worlds} />
{/snippet}
</LabelledBlock>
<LabelledBlock label="Tags">
{#snippet children({ id })}
<Select multi object {id} options={tags} bind:value={input.tags} />
{/snippet}
</LabelledBlock>
{@render children?.()}
</form>
|
