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

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

type Person = components['schemas']['Person'];

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

// dateDisplay seeds from the bindable's value or initialDateIso once at mount
// and is then user-driven. onMount runs exactly once, so this never stomps
// the parent's dateIso on a later prop change.
let dateDisplay = $state('');
let dateDirty = $state(false);

onMount(() => {
	const seed = dateIso || initialDateIso;
	if (seed) {
		dateDisplay = isoToGerman(seed);
		if (!dateIso) dateIso = seed;
	}
});

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">
		{#if !hideDate}
			<!-- Datum (required — row 1, col 1) -->
			<div data-testid="who-when-date">
				<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 px-2 py-3 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>
		{/if}

		<!-- Absender (required in upload mode — row 1, col 2) -->
		<div>
			<PersonTypeahead
				name="senderId"
				label={m.form_label_sender()}
				required={!editMode}
				bind:value={senderId}
				initialName={initialSenderName}
				suggestedName={suggestedSenderName}
				badge={editMode ? 'replace' : undefined}
			/>
		</div>

		<!-- Empfänger (optional — row 2, col 1) -->
		<div>
			<p class="mb-1 block text-sm font-medium text-ink-2">
				{m.form_label_receivers()}
				{#if editMode}<FieldLabelBadge variant="additive" />{/if}
			</p>
			<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
		</div>

		{#if !editMode}
			<!-- Ort (optional — row 2, col 2). Hidden in editMode: meta_location is
				 NOT bulk-editable per the issue spec; the three editable location
				 fields live in DescriptionSection. -->
			<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 px-2 py-3 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
				/>
			</div>
		{/if}
	</div>
</div>