summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/forms
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
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/forms')
-rw-r--r--frontend/src/lib/forms/ArtistForm.svelte25
-rw-r--r--frontend/src/lib/forms/CharacterForm.svelte25
-rw-r--r--frontend/src/lib/forms/CircleForm.svelte25
-rw-r--r--frontend/src/lib/forms/ComicForm.svelte100
-rw-r--r--frontend/src/lib/forms/NamespaceForm.svelte28
-rw-r--r--frontend/src/lib/forms/TagForm.svelte42
-rw-r--r--frontend/src/lib/forms/WorldForm.svelte25
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>