familienarchiv/frontend/src/lib/components/document/WhoWhenSection.svelte

<script lang="ts">
import { untrack } from 'svelte';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
import { m } from '$lib/paraglide/messages.js';

interface Person {
	id: string;
	firstName: string;
	lastName: string;
}

let {
	senderId = $bindable(''),
	selectedReceivers = $bindable<Person[]>([]),
	initialDateIso = '',
	initialLocation = '',
	initialSenderName = '',
	suggestedDateIso = '',
	suggestedSenderName = ''
}: {
	senderId?: string;
	selectedReceivers?: Person[];
	initialDateIso?: string;
	initialLocation?: string;
	initialSenderName?: string;
	suggestedDateIso?: string;
	suggestedSenderName?: string;
} = $props();

let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso)));
let dateIso = $state(untrack(() => initialDateIso));
let dateDirty = $state(false);

const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');

function handleDateInput(e: Event) {
	const result = handleGermanDateInput(e);
	dateDisplay = result.display;
	dateIso = result.iso;
	dateDirty = true;
}

$effect(() => {
	const suggested = suggestedDateIso;
	if (suggested && !untrack(() => dateDirty)) {
		dateDisplay = isoToGerman(suggested);
		dateIso = suggested;
	}
});
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.doc_section_who_when()}
	</h2>

	<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
		<!-- Datum -->
		<div>
			<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
				>{m.form_label_date()}</label
			>
			<input
				id="documentDate"
				type="text"
				inputmode="numeric"
				value={dateDisplay}
				oninput={handleDateInput}
				placeholder={m.form_placeholder_date()}
				maxlength="10"
				class="block w-full rounded border border-line p-2 text-sm shadow-sm
                       {dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
				aria-describedby={dateInvalid ? 'date-error' : undefined}
			/>
			<input type="hidden" name="documentDate" value={dateIso} />
			{#if dateInvalid}
				<p id="date-error" class="mt-1 text-xs text-red-600">{m.form_date_error()}</p>
			{/if}
		</div>

		<!-- Ort -->
		<div>
			<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
				>{m.form_label_location()}</label
			>
			<input
				id="location"
				type="text"
				name="location"
				value={initialLocation}
				placeholder={m.form_placeholder_location()}
				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>

		<!-- Absender -->
		<div>
			<PersonTypeahead
				name="senderId"
				label={m.form_label_sender()}
				bind:value={senderId}
				initialName={initialSenderName}
				suggestedName={suggestedSenderName}
			/>
		</div>

		<!-- Empfänger -->
		<div>
			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
			<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
		</div>
	</div>
</div>