familienarchiv/frontend/src/lib/components/AddRelationshipForm.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
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, onSubmit }: Props = $props();

let open = $state(false);
let addType = $state<RelationType>('PARENT_OF');
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();
	const to = addToYear.trim();
	if (!from || !to) return null;
	const fromInt = parseInt(from, 10);
	const toInt = parseInt(to, 10);
	if (Number.isNaN(fromInt) || Number.isNaN(toInt)) return null;
	return toInt < fromInt ? m.relation_year_error_bis_before_von() : null;
});

const selfError = $derived(
	addRelatedPersonId !== '' && addRelatedPersonId === personId ? m.relation_error_self() : null
);

const submitDisabled = $derived(
	yearError !== null || selfError !== null || addRelatedPersonId === ''
);

function reset() {
	addType = 'PARENT_OF';
	addRelatedPersonId = '';
	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"
		onclick={() => (open = true)}
		class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
	>
		{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"
		action="?/addRelationship"
		use:enhance={() => {
			return async ({ result, update }) => {
				await update();
				if (result.type === 'success') {
					open = false;
					reset();
				}
			};
		}}
		class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
	>
		{@render formFields()}
	</form>
{/if}