fix(forms): correct required/optional field markers and divider placement
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / OCR Service Tests (push) Has been cancelled

- Add * to Datum and Absender labels (both are required fields)
- Add required prop to PersonTypeahead to show * in its label
- Move "Optional" divider in DescriptionSection to after Titel (the only
  required field), so Tags and Inhalt appear below the divider where they belong

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #267.
This commit is contained in:
Marcel
2026-04-18 20:12:41 +02:00
committed by marcel
parent 208c1adc3e
commit fced33e033
3 changed files with 16 additions and 13 deletions

View File

@@ -16,6 +16,7 @@ interface Props {
compact?: boolean;
large?: boolean;
autofocus?: boolean;
required?: boolean;
restrictToCorrespondentsOf?: string;
onchange?: (value: string) => void;
onfocused?: () => void;
@@ -31,6 +32,7 @@ let {
compact = false,
large = false,
autofocus = false,
required = false,
restrictToCorrespondentsOf,
onchange,
onfocused
@@ -114,7 +116,7 @@ function selectPerson(person: Person) {
class={compact
? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
: 'block text-sm font-medium text-ink-2'}
>{label}</label
>{label}{#if required}*{/if}</label
>
<input type="hidden" name={name} bind:value={value} />

View File

@@ -56,14 +56,23 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
</div>
{/if}
<!-- Schlagworte -->
<!-- Optional divider -->
<div class="my-3 flex items-center gap-2">
<div class="flex-1 border-t border-line"></div>
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.label_optional()}</span
>
<div class="flex-1 border-t border-line"></div>
</div>
<!-- Schlagworte (optional) -->
<div>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.map((t) => t.name).join(',')} />
</div>
<!-- Inhalt -->
<!-- Inhalt (optional) -->
<div>
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_content()}</label
@@ -78,15 +87,6 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
>
</div>
<!-- Optional divider -->
<div class="my-3 flex items-center gap-2">
<div class="flex-1 border-t border-line"></div>
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.label_optional()}</span
>
<div class="flex-1 border-t border-line"></div>
</div>
<!-- Aufbewahrungsort (optional) -->
<div>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"

View File

@@ -59,7 +59,7 @@ $effect(() => {
<!-- Datum (required — row 1, col 1) -->
<div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label
>{m.form_label_date()}*</label
>
<input
id="documentDate"
@@ -85,6 +85,7 @@ $effect(() => {
<PersonTypeahead
name="senderId"
label={m.form_label_sender()}
required={true}
bind:value={senderId}
initialName={initialSenderName}
suggestedName={suggestedSenderName}