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
@@ -1,9 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, untrack } from 'svelte';
|
|
||||||
import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
|
import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
|
||||||
import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
|
import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
|
||||||
import FieldLabelBadge from '$lib/shared/primitives/FieldLabelBadge.svelte';
|
import FieldLabelBadge from '$lib/shared/primitives/FieldLabelBadge.svelte';
|
||||||
import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
|
import DatePrecisionField from '$lib/shared/primitives/DatePrecisionField.svelte';
|
||||||
import { m } from '$lib/paraglide/messages.js';
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
import type { components } from '$lib/generated/api';
|
import type { components } from '$lib/generated/api';
|
||||||
import type { DatePrecision } from '$lib/shared/utils/documentDate';
|
import type { DatePrecision } from '$lib/shared/utils/documentDate';
|
||||||
@@ -37,64 +36,6 @@ let {
|
|||||||
hideDate?: boolean;
|
hideDate?: boolean;
|
||||||
editMode?: boolean;
|
editMode?: boolean;
|
||||||
} = $props();
|
} = $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>
|
</script>
|
||||||
|
|
||||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||||
@@ -104,79 +45,22 @@ $effect(() => {
|
|||||||
|
|
||||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
|
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||||
{#if !hideDate}
|
{#if !hideDate}
|
||||||
<!-- Datum (required — row 1, col 1) -->
|
<!-- Datum + Präzision + Enddatum (shared primitive, #781). The three grid
|
||||||
<div data-testid="who-when-date">
|
cells slot directly into this grid; testids are forwarded so the
|
||||||
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
|
existing WhoWhenSection selectors survive the extraction. -->
|
||||||
>{m.form_label_date()}*</label
|
<DatePrecisionField
|
||||||
>
|
bind:dateIso={dateIso}
|
||||||
<input
|
bind:precision={precision}
|
||||||
id="documentDate"
|
bind:endDateIso={endDateIso}
|
||||||
type="text"
|
initialDateIso={initialDateIso}
|
||||||
inputmode="numeric"
|
suggestedDateIso={suggestedDateIso}
|
||||||
value={dateDisplay}
|
dateInputName="documentDate"
|
||||||
oninput={handleDateInput}
|
endDateInputName="metaDateEnd"
|
||||||
placeholder={m.form_placeholder_date()}
|
dateLabel={m.form_label_date()}
|
||||||
maxlength="10"
|
dateTestId="who-when-date"
|
||||||
class="block w-full rounded border border-line px-2 py-3 text-sm shadow-sm
|
precisionTestId="who-when-precision"
|
||||||
{dateInvalid
|
endDateInnerTestId="who-when-end-date"
|
||||||
? '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>
|
|
||||||
<!-- Datumsgenauigkeit (precision) -->
|
|
||||||
<div data-testid="who-when-precision">
|
|
||||||
<label for="metaDatePrecision" class="mb-1 block text-sm font-medium text-ink-2">
|
|
||||||
{m.form_label_date_precision()}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="metaDatePrecision"
|
|
||||||
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">
|
|
||||||
{#if showEndDate}
|
|
||||||
<div data-testid="who-when-end-date">
|
|
||||||
<label for="metaDateEnd" class="mb-1 block text-sm font-medium text-ink-2">
|
|
||||||
{m.form_label_date_end()}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="metaDateEnd"
|
|
||||||
type="text"
|
|
||||||
inputmode="numeric"
|
|
||||||
value={endDisplay}
|
|
||||||
oninput={handleEndDateInput}
|
|
||||||
placeholder={m.form_placeholder_date()}
|
|
||||||
maxlength="10"
|
|
||||||
aria-invalid={endBeforeStart ? 'true' : undefined}
|
|
||||||
aria-describedby={endBeforeStart ? 'end-date-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="end-date-error" class="mt-1 text-xs text-red-600">
|
|
||||||
<span aria-hidden="true">⚠ </span>{m.error_invalid_date_range()}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="metaDateEnd" value={showEndDate ? endDateIso : ''} />
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Absender (required in upload mode — row 1, col 2) -->
|
<!-- Absender (required in upload mode — row 1, col 2) -->
|
||||||
|
|||||||
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