marcel/familienarchiv
1
0
Fork 0
Code Issues 116 Pull Requests 2 Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): reorder WhoWhenSection grid, expose dateIso bindable, add autofocus

Browse Source 
Required fields (Datum, Absender) move to row 1; optional fields (Empfänger, Ort)
to row 2. dateIso is now bindable for the progress bar. Autofocus lands on the
first empty required field on page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-18 13:54:26 +02:00
committed by marcel
parent 1d9990715d
commit 047b7c71ff
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/lib/components/document/WhoWhenSection.svelte
View File

@@ -14,6 +14,7 @@ interface Person {
let { let {
senderId = $bindable(''), senderId = $bindable(''),
selectedReceivers = $bindable<Person[]>([]), selectedReceivers = $bindable<Person[]>([]),
dateIso = $bindable(''),
initialDateIso = '', initialDateIso = '',
initialLocation = '', initialLocation = '',
initialSenderName = '', initialSenderName = '',
@@ -22,6 +23,7 @@ let {
}: { }: {
senderId?: string; senderId?: string;
selectedReceivers?: Person[]; selectedReceivers?: Person[];
dateIso?: string;
initialDateIso?: string; initialDateIso?: string;
initialLocation?: string; initialLocation?: string;
initialSenderName?: string; initialSenderName?: string;
@@ -30,7 +32,7 @@ let {
} = $props(); } = $props();
let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso))); let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso)));
let dateIso = $state(untrack(() => initialDateIso)); dateIso = untrack(() => initialDateIso);
let dateDirty = $state(false); let dateDirty = $state(false);
const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === ''); const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
@@ -57,7 +59,7 @@ $effect(() => {
</h2> </h2>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum --> <!-- Datum (required — row 1, col 1) -->
<div> <div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2" <label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label >{m.form_label_date()}</label
@@ -70,6 +72,7 @@ $effect(() => {
oninput={handleDateInput} oninput={handleDateInput}
placeholder={m.form_placeholder_date()} placeholder={m.form_placeholder_date()}
maxlength="10" maxlength="10"
autofocus={!initialDateIso}
class="block w-full rounded border border-line p-2 text-sm shadow-sm 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'}" {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} aria-describedby={dateInvalid ? 'date-error' : undefined}
@@ -80,7 +83,25 @@ $effect(() => {
{/if} {/if}
</div> </div>
<!-- Ort --> <!-- Absender (required — row 1, col 2) -->
<div>
<PersonTypeahead
name="senderId"
label={m.form_label_sender()}
bind:value={senderId}
initialName={initialSenderName}
suggestedName={suggestedSenderName}
autofocus={!!initialDateIso}
/>
</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()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div>
<!-- Ort (optional — row 2, col 2) -->
<div> <div>
<label for="location" class="mb-1 block text-sm font-medium text-ink-2" <label for="location" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_location()}</label >{m.form_label_location()}</label
@@ -94,22 +115,5 @@ $effect(() => {
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" 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> </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>
</div> </div>