70 lines
1.9 KiB
Svelte
70 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
|
|
import { browser } from "$app/environment";
|
|
|
|
import { defaults, superForm } from "sveltekit-superforms";
|
|
import { zod } from "sveltekit-superforms/adapters";
|
|
|
|
import type { Category } from "$lib/shared/model";
|
|
import { ZCategoryNew } from "$lib/shared/model/validation";
|
|
import { superformConfig } from "$lib/shared/util";
|
|
|
|
import FormField from "$lib/components/ui/FormField.svelte";
|
|
import Header from "$lib/components/ui/Header.svelte";
|
|
|
|
const schema = zod(ZCategoryNew);
|
|
|
|
export let category: Category | null = null;
|
|
export let formData = defaults(schema);
|
|
|
|
const {
|
|
form, errors, constraints, enhance, tainted,
|
|
} = superForm(formData, {
|
|
validators: schema,
|
|
resetForm: category === null,
|
|
...superformConfig("Kategorie"),
|
|
});
|
|
</script>
|
|
|
|
<Header backHref="/categories" title={category ? `Kategorie #${category.id}` : "Neue Kategorie"} />
|
|
|
|
<form class="flex flex-col gap-4" method="POST" use:enhance>
|
|
<FormField errors={$errors.name} label="Name">
|
|
<input
|
|
name="name"
|
|
aria-invalid={Boolean($errors.name)}
|
|
type="text"
|
|
bind:value={$form.name}
|
|
{...$constraints.name}
|
|
/>
|
|
</FormField>
|
|
<FormField errors={$errors.color} label="Farbe">
|
|
<input
|
|
name="color"
|
|
aria-invalid={Boolean($errors.color)}
|
|
type="color"
|
|
bind:value={$form.color}
|
|
{...$constraints.color}
|
|
/>
|
|
</FormField>
|
|
<FormField errors={$errors.description} label="Beschreibung">
|
|
<input
|
|
name="description"
|
|
aria-invalid={Boolean($errors.description)}
|
|
type="text"
|
|
bind:value={$form.description}
|
|
{...$constraints.description}
|
|
/>
|
|
</FormField>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
class="btn btn-primary max-w-32"
|
|
disabled={browser && category && $tainted === undefined}
|
|
type="submit"
|
|
>
|
|
Speichern
|
|
</button>
|
|
<slot />
|
|
</div>
|
|
</form>
|