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

refactor(stammbaum): StammbaumSidePanel composes AddRelationshipForm — removes inline form duplication
Some checks failed
CI / OCR Service Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Failing after 3m10s
Details
CI / OCR Service Tests (pull_request) Successful in 32s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m58s
Details

Browse Source 
Replaces the 86-line duplicated inline add-relationship form with
<AddRelationshipForm onSubmit={handleAddRelationship}>. The {#key node.id}
wrapper resets the form's open state when the selected tree node changes.
Year inputs now have <label> elements (WCAG 1.3.1) via the shared component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-28 19:25:02 +02:00
parent c8b2c8c0a3
commit dd505554ac
2 changed files with 38 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
frontend/src/lib/components/StammbaumSidePanel.svelte
View File

@@ -3,13 +3,13 @@ import { onMount } from 'svelte';
import { invalidateAll } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { chipLabel, otherName, inferredRelationshipLabel } from '$lib/relationshipLabels';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import AddRelationshipForm from '$lib/components/AddRelationshipForm.svelte';
import type { RelFormData } from '$lib/components/AddRelationshipForm.svelte';
import type { components } from '$lib/generated/api';
type PersonNodeDTO = components['schemas']['PersonNodeDTO'];
type RelationshipDTO = components['schemas']['RelationshipDTO'];
type InferredRelationshipWithPersonDTO = components['schemas']['InferredRelationshipWithPersonDTO'];
type RelationType = NonNullable<RelationshipDTO['relationType']>;
interface Props {
node: PersonNodeDTO;
@@ -24,32 +24,9 @@ let derivedRels = $state<InferredRelationshipWithPersonDTO[]>([]);
let loading = $state(false);
let error = $state<string | null>(null);
let addFormOpen = $state(false);
let addType = $state<RelationType>('PARENT_OF');
let addRelatedPersonId = $state('');
let addRelatedPersonName = $state('');
let addFromYear = $state('');
let addToYear = $state('');
let saving = $state(false);
let saveError = $state<string | null>(null);
const yearError = $derived.by(() => {
const from = addFromYear.trim();
const to = addToYear.trim();
if (!from || !to) return null;
const fromInt = parseInt(from, 10);
const toInt = parseInt(to, 10);
if (Number.isNaN(fromInt) || Number.isNaN(toInt)) return null;
return toInt < fromInt ? m.relation_year_error_bis_before_von() : null;
});
const submitDisabled = $derived(saving || addRelatedPersonId === '' || yearError !== null);
$effect(() => {
const id = node.id;
loadFor(id);
addFormOpen = false;
resetForm();
});
async function loadFor(id: string) {
@@ -73,51 +50,21 @@ async function loadFor(id: string) {
}
}
function resetForm() {
addType = 'PARENT_OF';
addRelatedPersonId = '';
addRelatedPersonName = '';
addFromYear = '';
addToYear = '';
saveError = null;
}
async function submitAdd(event: Event) {
event.preventDefault();
if (submitDisabled) return;
saving = true;
saveError = null;
try {
const body: Record<string, string | number> = {
relatedPersonId: addRelatedPersonId,
relationType: addType
};
if (addFromYear.trim()) {
const v = parseInt(addFromYear, 10);
if (!Number.isNaN(v)) body.fromYear = v;
}
if (addToYear.trim()) {
const v = parseInt(addToYear, 10);
if (!Number.isNaN(v)) body.toYear = v;
}
const res = await fetch(`/api/persons/${node.id}/relationships`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (!res.ok) {
saveError = m.error_internal_error();
return;
}
addFormOpen = false;
resetForm();
await loadFor(node.id);
await invalidateAll();
} catch {
saveError = m.error_internal_error();
} finally {
saving = false;
}
async function handleAddRelationship(data: RelFormData) {
const body: Record<string, string | number> = {
relatedPersonId: data.relatedPersonId,
relationType: data.relationType
};
if (data.fromYear !== undefined) body.fromYear = data.fromYear;
if (data.toYear !== undefined) body.toYear = data.toYear;
const res = await fetch(`/api/persons/${node.id}/relationships`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (!res.ok) throw new Error('Failed to add relationship');
await loadFor(node.id);
await invalidateAll();
}
function handleEscape(event: KeyboardEvent) {
@@ -196,89 +143,9 @@ const topDerived = $derived(
{/if}
{#if canWrite}
{#if !addFormOpen}
<button
type="button"
onclick={() => (addFormOpen = true)}
class="mt-2 font-sans text-xs font-bold text-primary opacity-50 transition-opacity hover:opacity-100"
>
{m.stammbaum_panel_add_rel()}
</button>
{:else}
<form onsubmit={submitAdd} class="mt-3 flex flex-col gap-2">
<select
bind:value={addType}
aria-label={m.relation_form_field_type()}
class="h-8 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
>
<optgroup label={m.relation_form_group_family()}>
<option value="PARENT_OF">{m.relation_parent_of()}</option>
<option value="SPOUSE_OF">{m.relation_spouse_of()}</option>
<option value="SIBLING_OF">{m.relation_sibling_of()}</option>
</optgroup>
<optgroup label={m.relation_form_group_social()}>
<option value="FRIEND">{m.relation_friend()}</option>
<option value="COLLEAGUE">{m.relation_colleague()}</option>
<option value="EMPLOYER">{m.relation_employer()}</option>
<option value="DOCTOR">{m.relation_doctor()}</option>
<option value="NEIGHBOR">{m.relation_neighbor()}</option>
<option value="OTHER">{m.relation_other()}</option>
</optgroup>
</select>
<PersonTypeahead
name="relatedPersonId"
label="Person"
placeholder="Person suchen…"
bind:value={addRelatedPersonId}
initialName={addRelatedPersonName}
excludePersonId={node.id}
compact
/>
<div class="flex gap-1.5">
<input
type="text"
inputmode="numeric"
pattern="[0-9]*"
placeholder={m.relation_form_field_from_year()}
bind:value={addFromYear}
class="h-8 min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
/>
<input
type="text"
inputmode="numeric"
pattern="[0-9]*"
placeholder={m.relation_form_field_to_year()}
bind:value={addToYear}
class="h-8 min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
/>
</div>
{#if yearError}
<p class="text-xs text-red-700" role="alert">{yearError}</p>
{/if}
{#if saveError}
<p class="text-xs text-red-700" role="alert">{saveError}</p>
{/if}
<div class="flex justify-end gap-2">
<button
type="button"
onclick={() => {
addFormOpen = false;
resetForm();
}}
class="rounded-sm border border-line bg-surface px-3 py-1 font-sans text-xs font-medium text-ink-2 transition hover:bg-muted"
>
{m.relation_btn_cancel()}
</button>
<button
type="submit"
disabled={submitDisabled}
class="rounded-sm bg-primary px-3 py-1 font-sans text-xs font-medium text-primary-fg transition hover:bg-primary/80 disabled:opacity-40"
>
{m.relation_btn_add()}
</button>
</div>
</form>
{/if}
{#key node.id}
<AddRelationshipForm personId={node.id} onSubmit={handleAddRelationship} />
{/key}
{/if}
</section>

18
frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
View File

@@ -4,6 +4,7 @@ import { page } from 'vitest/browser';
import StammbaumSidePanel from './StammbaumSidePanel.svelte';
vi.mock('$app/navigation', () => ({ invalidateAll: vi.fn() }));
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
vi.mock('$lib/components/PersonTypeahead.svelte', () => ({ default: () => null }));
const makeNode = () => ({
@@ -54,6 +55,23 @@ describe('StammbaumSidePanel', () => {
await expect.element(page.getByText('Noch keine Beziehungen bekannt.')).toBeInTheDocument();
});
it('year inputs inside the add form have label elements (canWrite=true)', async () => {
render(StammbaumSidePanel, { node: makeNode(), onClose: vi.fn(), canWrite: true });
await expect.element(page.getByText('Noch keine Beziehungen bekannt.')).toBeInTheDocument();
const addBtn = [...document.querySelectorAll<HTMLButtonElement>('button')].find((b) =>
/Beziehung hinzufügen/i.test(b.textContent ?? '')
);
addBtn!.click();
await expect.element(page.getByRole('combobox')).toBeInTheDocument();
const yearInputs = [...document.querySelectorAll('input')].filter(
(i) => i.inputMode === 'numeric'
);
expect(yearInputs.length).toBeGreaterThan(0);
for (const input of yearInputs) {
expect(input.closest('label')).not.toBeNull();
}
});
it('shows loading indicator while fetching', async () => {
let resolveFirst: (v: unknown) => void;
vi.stubGlobal(