From 3cfaae06da483d7006cadcd965593c5af41e918b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 28 Apr 2026 19:22:10 +0200
Subject: [PATCH] feat(stammbaum): AddRelationshipForm accepts onSubmit
 callback prop for fetch-based submission

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>
---
 .../lib/components/AddRelationshipForm.svelte | 211 ++++++++++--------
 .../AddRelationshipForm.svelte.spec.ts        |   9 +
 2 files changed, 133 insertions(+), 87 deletions(-)

diff --git a/frontend/src/lib/components/AddRelationshipForm.svelte b/frontend/src/lib/components/AddRelationshipForm.svelte
index b7a82583..7c5ee2e4 100644
--- a/frontend/src/lib/components/AddRelationshipForm.svelte
+++ b/frontend/src/lib/components/AddRelationshipForm.svelte
@@ -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}
diff --git a/frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts b/frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts
index 9ddfd8a2..f542d7de 100644
--- a/frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts
+++ b/frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts
@@ -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();