refactor(shared): extract DatePrecisionField primitive from WhoWhenSection
Pulls the date + precision + RANGE-end-date region into a generic primitive in $lib/shared/primitives/ so both document/ (WhoWhenSection) and timeline/ (EventForm, #781) can consume it without a cross-domain import. Preserves the aria-live="polite" outer wrapper, onMount one-time seeding, $bindable precision/endDateIso, the PRECISIONS array, and forwards data-testid attributes so the existing WhoWhenSection spec selectors survive. WhoWhenSection spec stays green (7/7). Refs #781 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
191
frontend/src/lib/shared/primitives/DatePrecisionField.svelte
Normal file
191
frontend/src/lib/shared/primitives/DatePrecisionField.svelte
Normal file
@@ -0,0 +1,191 @@
|
||||
<script lang="ts">
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import type { DatePrecision } from '$lib/shared/utils/documentDate';
|
||||
|
||||
/**
|
||||
* Generic date + precision input primitive shared by two domains:
|
||||
* `document/` (via WhoWhenSection) and `timeline/` (via EventForm).
|
||||
*
|
||||
* Renders three grid cells — a German `dd.mm.yyyy` text input backed by a hidden
|
||||
* ISO input, a precision <select>, and a progressively-disclosed end-date input
|
||||
* shown only for RANGE. Living in `$lib/shared/primitives/` keeps it out of either
|
||||
* consumer's domain so neither incurs a cross-domain import (eslint boundaries).
|
||||
*
|
||||
* Exposed (shared contract — both WhoWhenSection and EventForm depend on it):
|
||||
* - dateIso, precision, endDateIso — $bindable; the parent's binding IS the
|
||||
* state (no redundant $state mirror).
|
||||
* - dateInputName / endDateInputName — names of the hidden ISO inputs.
|
||||
* - initialDateIso / suggestedDateIso — seeding inputs (see onMount + $effect).
|
||||
* - dateTestId / precisionTestId / endDateInnerTestId — forwarded data-testid
|
||||
* attributes so existing WhoWhenSection selectors survive the extraction.
|
||||
* - `end-date-region` is always on the OUTER aria-live wrapper of the end block.
|
||||
*/
|
||||
let {
|
||||
dateIso = $bindable(''),
|
||||
precision = $bindable<DatePrecision>('DAY'),
|
||||
endDateIso = $bindable(''),
|
||||
dateInputName = 'documentDate',
|
||||
endDateInputName = 'metaDateEnd',
|
||||
initialDateIso = '',
|
||||
suggestedDateIso = '',
|
||||
dateLabel = m.form_label_date(),
|
||||
dateRequired = true,
|
||||
dateTestId = undefined,
|
||||
precisionTestId = undefined,
|
||||
endDateInnerTestId = undefined
|
||||
}: {
|
||||
dateIso?: string;
|
||||
precision?: DatePrecision;
|
||||
endDateIso?: string;
|
||||
dateInputName?: string;
|
||||
endDateInputName?: string;
|
||||
initialDateIso?: string;
|
||||
suggestedDateIso?: string;
|
||||
dateLabel?: string;
|
||||
dateRequired?: boolean;
|
||||
dateTestId?: string;
|
||||
precisionTestId?: string;
|
||||
endDateInnerTestId?: string;
|
||||
} = $props();
|
||||
|
||||
const PRECISIONS: { value: DatePrecision; label: () => string }[] = [
|
||||
{ value: 'DAY', label: m.date_precision_option_day },
|
||||
{ value: 'MONTH', label: m.date_precision_option_month },
|
||||
{ value: 'SEASON', label: m.date_precision_option_season },
|
||||
{ value: 'YEAR', label: m.date_precision_option_year },
|
||||
{ value: 'RANGE', label: m.date_precision_option_range },
|
||||
{ value: 'APPROX', label: m.date_precision_option_approx },
|
||||
{ value: 'UNKNOWN', label: m.date_precision_option_unknown }
|
||||
];
|
||||
|
||||
const showEndDate = $derived(precision === 'RANGE');
|
||||
|
||||
// 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);
|
||||
let endDisplay = $state('');
|
||||
|
||||
onMount(() => {
|
||||
const seed = dateIso || initialDateIso;
|
||||
if (seed) {
|
||||
dateDisplay = isoToGerman(seed);
|
||||
if (!dateIso) dateIso = seed;
|
||||
}
|
||||
if (endDateIso) endDisplay = isoToGerman(endDateIso);
|
||||
});
|
||||
|
||||
const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
|
||||
|
||||
// Inline mirror of the server guard (#678). ISO YYYY-MM-DD strings compare
|
||||
// lexicographically, so no Date object is needed. Server stays the gate —
|
||||
// this only surfaces the error early; it never disables Save.
|
||||
const endBeforeStart = $derived(
|
||||
showEndDate && endDateIso !== '' && dateIso !== '' && endDateIso < dateIso
|
||||
);
|
||||
|
||||
function handleDateInput(e: Event) {
|
||||
const result = handleGermanDateInput(e);
|
||||
dateDisplay = result.display;
|
||||
dateIso = result.iso;
|
||||
dateDirty = true;
|
||||
}
|
||||
|
||||
function handleEndDateInput(e: Event) {
|
||||
const result = handleGermanDateInput(e);
|
||||
endDisplay = result.display;
|
||||
endDateIso = result.iso;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const suggested = suggestedDateIso;
|
||||
if (suggested && !untrack(() => dateDirty)) {
|
||||
dateDisplay = isoToGerman(suggested);
|
||||
dateIso = suggested;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Datum (required) -->
|
||||
<div data-testid={dateTestId}>
|
||||
<label for={dateInputName} class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{dateLabel}{#if dateRequired}*{/if}</label
|
||||
>
|
||||
<input
|
||||
id={dateInputName}
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
value={dateDisplay}
|
||||
oninput={handleDateInput}
|
||||
placeholder={m.form_placeholder_date()}
|
||||
maxlength="10"
|
||||
aria-required={dateRequired ? 'true' : undefined}
|
||||
class="block min-h-[48px] 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-invalid={dateInvalid ? 'true' : undefined}
|
||||
aria-describedby={dateInvalid ? `${dateInputName}-error` : undefined}
|
||||
/>
|
||||
<input type="hidden" name={dateInputName} value={dateIso} />
|
||||
{#if dateInvalid}
|
||||
<p id="{dateInputName}-error" class="mt-1 text-xs text-red-600">
|
||||
<span aria-hidden="true">⚠ </span>{m.form_date_error()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Datumsgenauigkeit (precision) -->
|
||||
<div data-testid={precisionTestId}>
|
||||
<label for="{dateInputName}Precision" class="mb-1 block text-sm font-medium text-ink-2">
|
||||
{m.form_label_date_precision()}
|
||||
</label>
|
||||
<select
|
||||
id="{dateInputName}Precision"
|
||||
name="metaDatePrecision"
|
||||
bind:value={precision}
|
||||
class="block min-h-[48px] 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"
|
||||
>
|
||||
{#each PRECISIONS as p (p.value)}
|
||||
<option value={p.value}>{p.label()}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Enddatum: progressive disclosure, revealed only for RANGE, announced politely. -->
|
||||
<div aria-live="polite" data-testid="end-date-region">
|
||||
{#if showEndDate}
|
||||
<div data-testid={endDateInnerTestId}>
|
||||
<label for="{dateInputName}End" class="mb-1 block text-sm font-medium text-ink-2">
|
||||
{m.form_label_date_end()}
|
||||
</label>
|
||||
<input
|
||||
id="{dateInputName}End"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
value={endDisplay}
|
||||
oninput={handleEndDateInput}
|
||||
placeholder={m.form_placeholder_date()}
|
||||
maxlength="10"
|
||||
aria-invalid={endBeforeStart ? 'true' : undefined}
|
||||
aria-describedby={endBeforeStart ? `${dateInputName}-end-error` : undefined}
|
||||
class="block min-h-[48px] w-full rounded border border-line px-2 py-3 text-sm shadow-sm
|
||||
{endBeforeStart
|
||||
? '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'}"
|
||||
/>
|
||||
{#if endBeforeStart}
|
||||
<!-- Non-colour cue (WCAG 1.4.1): warning glyph + text, not red alone. -->
|
||||
<p id="{dateInputName}-end-error" class="mt-1 text-xs text-red-600">
|
||||
<span aria-hidden="true">⚠ </span>{m.error_invalid_date_range()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Off-RANGE submits an empty string so a stale end-date never persists; the
|
||||
form action converts '' → null before sending the request body. -->
|
||||
<input type="hidden" name={endDateInputName} value={showEndDate ? endDateIso : ''} />
|
||||
Reference in New Issue
Block a user