marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(persons): add type selector + title + conditional fields to new-person form

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-25 21:50:39 +02:00
parent e54240ea1b
commit 8770ca874b
2 changed files with 138 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/routes/persons/new/+page.server.ts
View File

@@ -1,5 +1,6 @@
import { error, fail, redirect } from '@sveltejs/kit';
import { createApiClient } from '$lib/api.server';
import { getErrorMessage } from '$lib/errors';
export async function load({ locals }: { locals: App.Locals }) {
const canWrite =
@@ -12,6 +13,12 @@ export async function load({ locals }: { locals: App.Locals }) {
export const actions = {
default: async ({ request, fetch }) => {
const formData = await request.formData();
const personType = (formData.get('personType')?.toString() ?? 'PERSON') as
| 'PERSON'
| 'INSTITUTION'
| 'GROUP'
| 'UNKNOWN';
const title = formData.get('title')?.toString().trim() || undefined;
const firstName = formData.get('firstName')?.toString().trim();
const lastName = formData.get('lastName')?.toString().trim();
const alias = formData.get('alias')?.toString().trim() || undefined;
@@ -19,8 +26,25 @@ export const actions = {
const deathYearStr = formData.get('deathYear')?.toString().trim();
const notes = formData.get('notes')?.toString().trim() || undefined;
if (!firstName || !lastName) {
return fail(400, { error: 'Vor- und Nachname sind Pflichtfelder.' });
if (!lastName) {
return fail(400, {
error: 'Nachname ist Pflichtfeld.',
personType,
title,
firstName,
lastName: '',
alias
});
}
if (personType === 'PERSON' && !firstName) {
return fail(400, {
error: 'Vorname ist Pflichtfeld.',
personType,
title,
firstName: '',
lastName,
alias
});
}
const birthYear = birthYearStr ? parseInt(birthYearStr, 10) : undefined;
@@ -29,8 +53,10 @@ export const actions = {
const api = createApiClient(fetch);
const result = await api.POST('/api/persons', {
body: {
firstName,
lastName,
personType,
...(title ? { title } : {}),
...(firstName ? { firstName } : {}),
lastName: lastName!,
...(alias ? { alias } : {}),
...(birthYear ? { birthYear } : {}),
...(deathYear ? { deathYear } : {}),
@@ -39,7 +65,15 @@ export const actions = {
});
if (!result.response.ok) {
return fail(result.response.status, { error: 'Person konnte nicht gespeichert werden.' });
const code = (result.error as unknown as { code?: string })?.code;
return fail(result.response.status, {
error: getErrorMessage(code),
personType,
title,
firstName,
lastName: lastName!,
alias
});
}
throw redirect(303, `/persons/${result.data!.id}`);

162
frontend/src/routes/persons/new/+page.svelte
View File

@@ -1,11 +1,35 @@
<script lang="ts">
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/components/BackButton.svelte';
import PersonTypeSelector from '$lib/components/PersonTypeSelector.svelte';
type PersonType = 'PERSON' | 'INSTITUTION' | 'GROUP' | 'UNKNOWN';
const TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
let { form } = $props();
let selectedType = $state<PersonType>(
untrack(() =>
TYPES.includes((form?.personType as PersonType) ?? 'PERSON')
? ((form?.personType as PersonType) ?? 'PERSON')
: 'PERSON'
)
);
const isPerson = $derived(selectedType === 'PERSON');
const lastNameLabel = $derived(
selectedType === 'INSTITUTION' || selectedType === 'GROUP'
? m.form_label_name()
: m.form_label_last_name()
);
const inputCls =
'block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
const labelCls = 'mb-1 block text-sm font-medium text-ink-2';
</script>
<div class="mx-auto max-w-2xl px-4 py-8">
<!-- Heading -->
<div class="mb-6">
<BackButton />
<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
@@ -22,79 +46,92 @@ let { form } = $props();
</h2>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div>
<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_first_name()} *</label
>
<input
id="firstName"
name="firstName"
type="text"
required
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
<div class="md:col-span-2">
<p class={labelCls}>{m.form_label_person_type()}</p>
<PersonTypeSelector
value={selectedType}
name="personType"
onchange={(type: PersonType) => (selectedType = type)}
/>
</div>
<div>
<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_last_name()} *</label
>
{#if isPerson}
<div>
<label for="title" class={labelCls}>{m.form_label_title()}</label>
<input
id="title"
name="title"
type="text"
maxlength="50"
value={form?.title ?? ''}
class={inputCls}
/>
</div>
<div>
<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
<input
id="firstName"
name="firstName"
type="text"
required
value={form?.firstName ?? ''}
class={inputCls}
/>
</div>
{/if}
<div class={!isPerson ? 'md:col-span-2' : ''}>
<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
<input
id="lastName"
name="lastName"
type="text"
required
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
value={form?.lastName ?? ''}
class={inputCls}
/>
</div>
{#if isPerson}
<div class="md:col-span-2">
<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
<input
id="alias"
name="alias"
type="text"
placeholder={m.form_placeholder_alias()}
value={form?.alias ?? ''}
class={inputCls}
/>
</div>
<div>
<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
<input
id="birthYear"
name="birthYear"
type="number"
min="1"
max="2100"
placeholder={m.person_placeholder_year()}
class={inputCls}
/>
</div>
<div>
<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
<input
id="deathYear"
name="deathYear"
type="number"
min="1"
max="2100"
placeholder={m.person_placeholder_year()}
class={inputCls}
/>
</div>
{/if}
<div class="md:col-span-2">
<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_alias()}</label
>
<input
id="alias"
name="alias"
type="text"
placeholder={m.form_placeholder_alias()}
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
<div>
<label for="birthYear" class="mb-1 block text-sm font-medium text-ink-2"
>{m.person_label_birth_year()}</label
>
<input
id="birthYear"
name="birthYear"
type="number"
min="1"
max="2100"
placeholder={m.person_placeholder_year()}
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
<div>
<label for="deathYear" class="mb-1 block text-sm font-medium text-ink-2"
>{m.person_label_death_year()}</label
>
<input
id="deathYear"
name="deathYear"
type="number"
min="1"
max="2100"
placeholder={m.person_placeholder_year()}
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
<div class="md:col-span-2">
<label for="notes" class="mb-1 block text-sm font-medium text-ink-2"
>{m.person_label_notes()}</label
>
<label for="notes" class={labelCls}>{m.person_label_notes()}</label>
<textarea
id="notes"
name="notes"
@@ -106,7 +143,6 @@ let { form } = $props();
</div>
</div>
<!-- Save Bar -->
<div
class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
>