refactor(stammbaum): extract RelationshipChip and AddRelationshipForm
Split StammbaumCard from 366 to 196 lines by extracting: - RelationshipChip.svelte — single relationship list item with optional delete - AddRelationshipForm.svelte — self-contained add-relationship form with open/close state Both components have browser-mode spec tests covering rendering and interaction. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
161
frontend/src/lib/components/AddRelationshipForm.svelte
Normal file
161
frontend/src/lib/components/AddRelationshipForm.svelte
Normal file
@@ -0,0 +1,161 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type RelationshipDTO = components['schemas']['RelationshipDTO'];
|
||||
type RelationType = NonNullable<RelationshipDTO['relationType']>;
|
||||
|
||||
interface Props {
|
||||
personId: string;
|
||||
}
|
||||
|
||||
let { personId }: Props = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let addType = $state<RelationType>('PARENT_OF');
|
||||
let addRelatedPersonId = $state('');
|
||||
let addRelatedPersonName = $state('');
|
||||
let addFromYear = $state('');
|
||||
let addToYear = $state('');
|
||||
|
||||
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 selfError = $derived(
|
||||
addRelatedPersonId !== '' && addRelatedPersonId === personId ? m.relation_error_self() : null
|
||||
);
|
||||
|
||||
const submitDisabled = $derived(
|
||||
yearError !== null || selfError !== null || addRelatedPersonId === ''
|
||||
);
|
||||
|
||||
function reset() {
|
||||
addType = 'PARENT_OF';
|
||||
addRelatedPersonId = '';
|
||||
addRelatedPersonName = '';
|
||||
addFromYear = '';
|
||||
addToYear = '';
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
open = false;
|
||||
reset();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !open}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (open = true)}
|
||||
class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
|
||||
>
|
||||
{m.stammbaum_panel_add_rel()}
|
||||
</button>
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addRelationship"
|
||||
use:enhance={() => {
|
||||
return async ({ result, update }) => {
|
||||
await update();
|
||||
if (result.type === 'success') {
|
||||
open = false;
|
||||
reset();
|
||||
}
|
||||
};
|
||||
}}
|
||||
class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
|
||||
>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Typ</span>
|
||||
<select
|
||||
name="relationType"
|
||||
bind:value={addType}
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
>
|
||||
<optgroup label="Familie">
|
||||
<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="Sozial">
|
||||
<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>
|
||||
</label>
|
||||
<div>
|
||||
<PersonTypeahead
|
||||
name="relatedPersonId"
|
||||
label="Person"
|
||||
bind:value={addRelatedPersonId}
|
||||
initialName={addRelatedPersonName}
|
||||
excludePersonId={personId}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Von Jahr</span>
|
||||
<input
|
||||
type="text"
|
||||
name="fromYear"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
bind:value={addFromYear}
|
||||
placeholder="z.B. 1920"
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Bis Jahr</span>
|
||||
<input
|
||||
type="text"
|
||||
name="toYear"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
bind:value={addToYear}
|
||||
aria-describedby={yearError ? 'add-rel-year-error' : undefined}
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
/>
|
||||
{#if yearError}
|
||||
<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
|
||||
{yearError}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
{#if selfError}
|
||||
<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
|
||||
{/if}
|
||||
<div class="mt-3 flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={cancel}
|
||||
class="rounded-sm border border-line bg-surface px-3 py-1.5 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.5 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}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { describe, it, expect, afterEach, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import AddRelationshipForm from './AddRelationshipForm.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
vi.mock('$lib/components/PersonTypeahead.svelte', () => ({ default: () => null }));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('AddRelationshipForm', () => {
|
||||
it('shows add-relationship button initially and no form', async () => {
|
||||
render(AddRelationshipForm, { personId: 'person-1' });
|
||||
await expect.element(page.getByRole('button')).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('combobox')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows relationType select when add button is clicked', async () => {
|
||||
render(AddRelationshipForm, { personId: 'person-1' });
|
||||
document.querySelector<HTMLButtonElement>('button')!.click();
|
||||
await expect.element(page.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides form and shows button when cancel is clicked', async () => {
|
||||
render(AddRelationshipForm, { personId: 'person-1' });
|
||||
document.querySelector<HTMLButtonElement>('button')!.click();
|
||||
await expect.element(page.getByRole('combobox')).toBeInTheDocument();
|
||||
const cancelBtn = [...document.querySelectorAll<HTMLButtonElement>('button')].find(
|
||||
(b) => b.type === 'button' && /abbrechen/i.test(b.textContent ?? '')
|
||||
);
|
||||
cancelBtn!.click();
|
||||
await expect.element(page.getByRole('combobox')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('submit is disabled when no person is selected', async () => {
|
||||
render(AddRelationshipForm, { personId: 'person-1' });
|
||||
document.querySelector<HTMLButtonElement>('button')!.click();
|
||||
await expect.element(page.getByRole('button', { name: /^Hinzufügen$/i })).toBeDisabled();
|
||||
});
|
||||
});
|
||||
49
frontend/src/lib/components/RelationshipChip.svelte
Normal file
49
frontend/src/lib/components/RelationshipChip.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
interface Props {
|
||||
chipLabel: string;
|
||||
otherName: string;
|
||||
yearRange?: string;
|
||||
canWrite: boolean;
|
||||
relId: string;
|
||||
}
|
||||
|
||||
let { chipLabel, otherName, yearRange = '', canWrite, relId }: Props = $props();
|
||||
</script>
|
||||
|
||||
<li class="flex items-center gap-2 py-2">
|
||||
<span
|
||||
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
|
||||
>
|
||||
{chipLabel}
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate font-serif text-sm text-ink">
|
||||
{otherName}
|
||||
</span>
|
||||
{#if yearRange}
|
||||
<span class="shrink-0 font-sans text-xs text-ink-3" data-testid="year-range">{yearRange}</span>
|
||||
{/if}
|
||||
{#if canWrite}
|
||||
<form method="POST" action="?/deleteRelationship" use:enhance class="shrink-0">
|
||||
<input type="hidden" name="relId" value={relId} />
|
||||
<button
|
||||
type="submit"
|
||||
aria-label="{m.btn_delete()} — {otherName}"
|
||||
class="inline-flex h-8 w-8 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</li>
|
||||
48
frontend/src/lib/components/RelationshipChip.svelte.spec.ts
Normal file
48
frontend/src/lib/components/RelationshipChip.svelte.spec.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { describe, it, expect, afterEach, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import RelationshipChip from './RelationshipChip.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const baseProps = {
|
||||
chipLabel: 'Elternteil',
|
||||
otherName: 'Anna Schmidt',
|
||||
yearRange: '',
|
||||
canWrite: false,
|
||||
relId: 'rel-1'
|
||||
};
|
||||
|
||||
describe('RelationshipChip', () => {
|
||||
it('renders the chip label', async () => {
|
||||
render(RelationshipChip, baseProps);
|
||||
await expect.element(page.getByText('Elternteil')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the other person name', async () => {
|
||||
render(RelationshipChip, baseProps);
|
||||
await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows year range when provided', async () => {
|
||||
render(RelationshipChip, { ...baseProps, yearRange: '1920–1980' });
|
||||
await expect.element(page.getByText('1920–1980')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show year range span when empty', async () => {
|
||||
render(RelationshipChip, { ...baseProps, yearRange: '' });
|
||||
expect(document.querySelector('[data-testid="year-range"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows delete button when canWrite is true', async () => {
|
||||
render(RelationshipChip, { ...baseProps, canWrite: true });
|
||||
await expect.element(page.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides delete button when canWrite is false', async () => {
|
||||
render(RelationshipChip, { ...baseProps, canWrite: false });
|
||||
expect(document.querySelector('button')).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
import RelationshipChip from '$lib/components/RelationshipChip.svelte';
|
||||
import AddRelationshipForm from '$lib/components/AddRelationshipForm.svelte';
|
||||
import { inferredRelationshipLabel } from '$lib/relationshipLabels';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
@@ -26,33 +27,8 @@ let {
|
||||
relationshipError = null
|
||||
}: Props = $props();
|
||||
|
||||
let addFormOpen = $state(false);
|
||||
let addType = $state<RelationType>('PARENT_OF');
|
||||
let addRelatedPersonId = $state('');
|
||||
let addRelatedPersonName = $state('');
|
||||
let addFromYear = $state('');
|
||||
let addToYear = $state('');
|
||||
|
||||
type RelationType = NonNullable<RelationshipDTO['relationType']>;
|
||||
|
||||
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 selfError = $derived(
|
||||
addRelatedPersonId !== '' && addRelatedPersonId === personId ? m.relation_error_self() : null
|
||||
);
|
||||
|
||||
const submitDisabled = $derived(
|
||||
yearError !== null || selfError !== null || addRelatedPersonId === ''
|
||||
);
|
||||
|
||||
const sortedDirect = $derived([...relationships].sort(byTypeThenYear));
|
||||
const topDerived = $derived(inferredRelationships.slice(0, 5));
|
||||
|
||||
@@ -113,14 +89,6 @@ function yearRange(rel: RelationshipDTO): string {
|
||||
if (to) return m.relation_year_to({ year: to });
|
||||
return '';
|
||||
}
|
||||
|
||||
function resetAddForm() {
|
||||
addType = 'PARENT_OF';
|
||||
addRelatedPersonId = '';
|
||||
addRelatedPersonName = '';
|
||||
addFromYear = '';
|
||||
addToYear = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
@@ -186,156 +154,19 @@ function resetAddForm() {
|
||||
{:else}
|
||||
<ul class="mb-2 divide-y divide-line">
|
||||
{#each sortedDirect as rel (rel.id)}
|
||||
<li class="flex items-center gap-2 py-2">
|
||||
<span
|
||||
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
|
||||
>
|
||||
{chipLabel(rel)}
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate font-serif text-sm text-ink">
|
||||
{otherName(rel)}
|
||||
</span>
|
||||
{#if yearRange(rel)}
|
||||
<span class="shrink-0 font-sans text-xs text-ink-3">{yearRange(rel)}</span>
|
||||
{/if}
|
||||
{#if canWrite}
|
||||
<form method="POST" action="?/deleteRelationship" use:enhance class="shrink-0">
|
||||
<input type="hidden" name="relId" value={rel.id} />
|
||||
<button
|
||||
type="submit"
|
||||
aria-label="{m.btn_delete()} — {otherName(rel)}"
|
||||
class="inline-flex h-8 w-8 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</li>
|
||||
<RelationshipChip
|
||||
chipLabel={chipLabel(rel)}
|
||||
otherName={otherName(rel)}
|
||||
yearRange={yearRange(rel)}
|
||||
canWrite={canWrite}
|
||||
relId={rel.id}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<!-- Add-rel button + inline form -->
|
||||
{#if canWrite}
|
||||
{#if !addFormOpen}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (addFormOpen = true)}
|
||||
class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
|
||||
>
|
||||
{m.stammbaum_panel_add_rel()}
|
||||
</button>
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addRelationship"
|
||||
use:enhance={() => {
|
||||
return async ({ result, update }) => {
|
||||
await update();
|
||||
if (result.type === 'success') {
|
||||
addFormOpen = false;
|
||||
resetAddForm();
|
||||
}
|
||||
};
|
||||
}}
|
||||
class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
|
||||
>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Typ</span>
|
||||
<select
|
||||
name="relationType"
|
||||
bind:value={addType}
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
>
|
||||
<optgroup label="Familie">
|
||||
<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="Sozial">
|
||||
<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>
|
||||
</label>
|
||||
<div>
|
||||
<PersonTypeahead
|
||||
name="relatedPersonId"
|
||||
label="Person"
|
||||
bind:value={addRelatedPersonId}
|
||||
initialName={addRelatedPersonName}
|
||||
excludePersonId={personId}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Von Jahr</span>
|
||||
<input
|
||||
type="text"
|
||||
name="fromYear"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
bind:value={addFromYear}
|
||||
placeholder="z.B. 1920"
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="font-sans text-xs font-medium text-ink-2">Bis Jahr</span>
|
||||
<input
|
||||
type="text"
|
||||
name="toYear"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
bind:value={addToYear}
|
||||
aria-describedby={yearError ? 'add-rel-year-error' : undefined}
|
||||
class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
|
||||
/>
|
||||
{#if yearError}
|
||||
<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
|
||||
{yearError}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
{#if selfError}
|
||||
<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
|
||||
{/if}
|
||||
<div class="mt-3 flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
addFormOpen = false;
|
||||
resetAddForm();
|
||||
}}
|
||||
class="rounded-sm border border-line bg-surface px-3 py-1.5 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.5 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}
|
||||
<AddRelationshipForm personId={personId} />
|
||||
{/if}
|
||||
|
||||
<!-- Abgeleitete Beziehungen -->
|
||||
|
||||
Reference in New Issue
Block a user