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

feat(stammbaum): AddRelationshipForm accepts onSubmit callback prop for fetch-based submission

Browse Source 
When onSubmit is provided the form has no server action and calls the
callback with typed RelFormData instead. Uses a shared {#snippet} for
the form body so the two submission paths share one template.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-28 19:22:10 +02:00
committed by marcel
parent a81323a7a1
commit 3cfaae06da
2 changed files with 133 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
frontend/src/lib/components/AddRelationshipForm.svelte
View File

@@ -7,11 +7,19 @@ import type { components } from '$lib/generated/api';
type RelationshipDTO = components['schemas']['RelationshipDTO'];
type RelationType = NonNullable<RelationshipDTO['relationType']>;
export type RelFormData = {
relatedPersonId: string;
relationType: RelationType;
fromYear?: number;
toYear?: number;
};
interface Props {
personId: string;
onSubmit?: (data: RelFormData) => Promise<void>;
}
let { personId }: Props = $props();
let { personId, onSubmit }: Props = $props();
let open = $state(false);
let addType = $state<RelationType>('PARENT_OF');
@@ -19,6 +27,7 @@ let addRelatedPersonId = $state('');
let addRelatedPersonName = $state('');
let addFromYear = $state('');
let addToYear = $state('');
let callbackError = $state<string | null>(null);
const yearError = $derived.by(() => {
const from = addFromYear.trim();
@@ -44,14 +53,123 @@ function reset() {
addRelatedPersonName = '';
addFromYear = '';
addToYear = '';
callbackError = null;
}
function cancel() {
open = false;
reset();
}
async function handleCallbackSubmit(event: Event) {
event.preventDefault();
if (submitDisabled || !onSubmit) return;
const data: RelFormData = { relatedPersonId: addRelatedPersonId, relationType: addType };
const from = parseInt(addFromYear.trim(), 10);
if (!Number.isNaN(from)) data.fromYear = from;
const to = parseInt(addToYear.trim(), 10);
if (!Number.isNaN(to)) data.toYear = to;
try {
await onSubmit(data);
open = false;
reset();
} catch {
callbackError = m.error_internal_error();
}
}
</script>
{#snippet formFields()}
<div class="grid gap-3 md:grid-cols-2">
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2">{m.relation_form_field_type()}</span>
<select
name="relationType"
bind:value={addType}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
>
<optgroup label={m.relation_form_group_family()}>
<option value="PARENT_OF">{m.relation_parent_of()}</option>
<option value="SPOUSE_OF">{m.relation_spouse_of()}</option>
<option value="SIBLING_OF">{m.relation_sibling_of()}</option>
</optgroup>
<optgroup label={m.relation_form_group_social()}>
<option value="FRIEND">{m.relation_friend()}</option>
<option value="COLLEAGUE">{m.relation_colleague()}</option>
<option value="EMPLOYER">{m.relation_employer()}</option>
<option value="DOCTOR">{m.relation_doctor()}</option>
<option value="NEIGHBOR">{m.relation_neighbor()}</option>
<option value="OTHER">{m.relation_other()}</option>
</optgroup>
</select>
</label>
<div>
<PersonTypeahead
name="relatedPersonId"
label="Person"
bind:value={addRelatedPersonId}
initialName={addRelatedPersonName}
excludePersonId={personId}
compact
/>
</div>
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2"
>{m.relation_form_field_from_year()}</span
>
<input
type="text"
name="fromYear"
inputmode="numeric"
pattern="[0-9]*"
bind:value={addFromYear}
placeholder={m.relation_form_year_placeholder()}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
/>
</label>
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2">{m.relation_form_field_to_year()}</span
>
<input
type="text"
name="toYear"
inputmode="numeric"
pattern="[0-9]*"
bind:value={addToYear}
aria-describedby={yearError ? 'add-rel-year-error' : undefined}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
/>
{#if yearError}
<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
{yearError}
</p>
{/if}
</label>
</div>
{#if selfError}
<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
{/if}
{#if callbackError}
<p class="mt-2 text-xs text-red-700" role="alert">{callbackError}</p>
{/if}
<div class="mt-3 flex items-center justify-end gap-2">
<button
type="button"
onclick={cancel}
class="rounded-sm border border-line bg-surface px-3 py-1.5 font-sans text-xs font-medium text-ink-2 transition hover:bg-muted"
>
{m.relation_btn_cancel()}
</button>
<button
type="submit"
disabled={submitDisabled}
class="rounded-sm bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg transition hover:bg-primary/80 disabled:opacity-40"
>
{m.relation_btn_add()}
</button>
</div>
{/snippet}
{#if !open}
<button
type="button"
@@ -60,6 +178,10 @@ function cancel() {
>
{m.stammbaum_panel_add_rel()}
</button>
{:else if onSubmit}
<form onsubmit={handleCallbackSubmit} class="mt-3 rounded-sm border border-line bg-muted/40 p-3">
{@render formFields()}
</form>
{:else}
<form
method="POST"
@@ -75,91 +197,6 @@ function cancel() {
}}
class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
>
<div class="grid gap-3 md:grid-cols-2">
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2">{m.relation_form_field_type()}</span>
<select
name="relationType"
bind:value={addType}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
>
<optgroup label={m.relation_form_group_family()}>
<option value="PARENT_OF">{m.relation_parent_of()}</option>
<option value="SPOUSE_OF">{m.relation_spouse_of()}</option>
<option value="SIBLING_OF">{m.relation_sibling_of()}</option>
</optgroup>
<optgroup label={m.relation_form_group_social()}>
<option value="FRIEND">{m.relation_friend()}</option>
<option value="COLLEAGUE">{m.relation_colleague()}</option>
<option value="EMPLOYER">{m.relation_employer()}</option>
<option value="DOCTOR">{m.relation_doctor()}</option>
<option value="NEIGHBOR">{m.relation_neighbor()}</option>
<option value="OTHER">{m.relation_other()}</option>
</optgroup>
</select>
</label>
<div>
<PersonTypeahead
name="relatedPersonId"
label="Person"
bind:value={addRelatedPersonId}
initialName={addRelatedPersonName}
excludePersonId={personId}
compact
/>
</div>
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2"
>{m.relation_form_field_from_year()}</span
>
<input
type="text"
name="fromYear"
inputmode="numeric"
pattern="[0-9]*"
bind:value={addFromYear}
placeholder={m.relation_form_year_placeholder()}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
/>
</label>
<label class="block">
<span class="font-sans text-xs font-medium text-ink-2"
>{m.relation_form_field_to_year()}</span
>
<input
type="text"
name="toYear"
inputmode="numeric"
pattern="[0-9]*"
bind:value={addToYear}
aria-describedby={yearError ? 'add-rel-year-error' : undefined}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
/>
{#if yearError}
<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
{yearError}
</p>
{/if}
</label>
</div>
{#if selfError}
<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
{/if}
<div class="mt-3 flex items-center justify-end gap-2">
<button
type="button"
onclick={cancel}
class="rounded-sm border border-line bg-surface px-3 py-1.5 font-sans text-xs font-medium text-ink-2 transition hover:bg-muted"
>
{m.relation_btn_cancel()}
</button>
<button
type="submit"
disabled={submitDisabled}
class="rounded-sm bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg transition hover:bg-primary/80 disabled:opacity-40"
>
{m.relation_btn_add()}
</button>
</div>
{@render formFields()}
</form>
{/if}

9
frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts
View File

@@ -38,6 +38,15 @@ describe('AddRelationshipForm', () => {
await expect.element(page.getByRole('button', { name: /^Hinzufügen$/i })).toBeDisabled();
});
it('form has no server action when onSubmit prop is provided', async () => {
const onSubmit = vi.fn().mockResolvedValue(undefined);
render(AddRelationshipForm, { personId: 'person-1', onSubmit });
document.querySelector<HTMLButtonElement>('button')!.click();
await expect.element(page.getByRole('combobox')).toBeInTheDocument();
const form = document.querySelector('form');
expect(form?.hasAttribute('action')).toBe(false);
});
it('shows year-range error when toYear is before fromYear', async () => {
render(AddRelationshipForm, { personId: 'person-1' });
document.querySelector<HTMLButtonElement>('button')!.click();