familienarchiv/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte

<script lang="ts">
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import PersonTypeSelector from '$lib/components/PersonTypeSelector.svelte';

type PersonType = 'PERSON' | 'INSTITUTION' | 'GROUP' | 'UNKNOWN';

let {
	person
}: {
	person: {
		personType?: string | null;
		title?: string | null;
		firstName?: string | null;
		lastName: string;
		alias?: string | null;
		birthYear?: number | null;
		deathYear?: number | null;
		notes?: string | null;
	};
} = $props();

const TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
let selectedType = $state<PersonType>(
	untrack(() =>
		TYPES.includes(person.personType as PersonType) ? (person.personType as PersonType) : 'PERSON'
	)
);

const isPerson = $derived(selectedType === 'PERSON');
const lastNameLabel = $derived(
	selectedType === 'INSTITUTION' || selectedType === 'GROUP'
		? m.form_label_name()
		: m.form_label_last_name()
);
</script>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="md:col-span-2">
		<p class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.form_label_person_type()}
		</p>
		<PersonTypeSelector
			value={selectedType}
			name="personType"
			onchange={(type: PersonType) => (selectedType = type)}
		/>
	</div>

	{#if isPerson}
		<div>
			<label for="title" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
				>{m.form_label_title()}</label
			>
			<input
				id="title"
				name="title"
				type="text"
				maxlength="50"
				value={person.title ?? ''}
				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>
		<div>
			<label
				for="firstName"
				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
				>{m.form_label_first_name()} *</label
			>
			<input
				id="firstName"
				name="firstName"
				type="text"
				required
				value={person.firstName ?? ''}
				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>
	{/if}

	<div class={!isPerson ? 'md:col-span-2' : ''}>
		<label for="lastName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{lastNameLabel} *</label
		>
		<input
			id="lastName"
			name="lastName"
			type="text"
			required
			value={person.lastName}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>

	{#if isPerson}
		<div class="md:col-span-2">
			<label for="alias" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
				>{m.form_label_alias()}</label
			>
			<input
				id="alias"
				name="alias"
				type="text"
				value={person.alias ?? ''}
				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>
		<div>
			<label
				for="birthYear"
				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
				>{m.person_label_birth_year()}</label
			>
			<input
				id="birthYear"
				name="birthYear"
				type="number"
				min="1"
				max="2100"
				placeholder={m.person_placeholder_year()}
				value={person.birthYear ?? ''}
				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>
		<div>
			<label
				for="deathYear"
				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
				>{m.person_label_death_year()}</label
			>
			<input
				id="deathYear"
				name="deathYear"
				type="number"
				min="1"
				max="2100"
				placeholder={m.person_placeholder_year()}
				value={person.deathYear ?? ''}
				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>
	{/if}

	<div class="md:col-span-2">
		<label for="notes" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.person_label_notes()}</label
		>
		<textarea
			id="notes"
			name="notes"
			rows="4"
			placeholder={m.person_placeholder_notes()}
			class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			>{person.notes ?? ''}</textarea
		>
	</div>
</div>