feat(stammbaum): inline add-relationship form in side panel
Implements the inline-edit affordance from
docs/specs/stammbaum-tree-spec.html (section 3): a low-opacity
"+ Beziehung hinzufügen" button below the direct relationships list
expands into a compact form (type select, person typeahead,
optional Von/Bis Jahr inputs, Abbrechen + Speichern). On save the
form POSTs to /api/persons/{id}/relationships, reloads the panel's
own data, and calls invalidateAll() so the tree picks up the new
edge without a hard refresh.
The panel takes a new canWrite prop, plumbed through from the
+layout.server.ts data already exposed on page.data.
Also pins the /stammbaum canvas to the viewport (-my-6 cancels
<main>'s py-6, h-[calc(100dvh-4.25rem)] subtracts the navbar) so
the page no longer overflows below the fold.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -1,28 +1,55 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { inferredRelationshipLabel } from '$lib/relationshipLabels';
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.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;
|
||||
onClose: () => void;
|
||||
canWrite?: boolean;
|
||||
}
|
||||
|
||||
let { node, onClose }: Props = $props();
|
||||
let { node, onClose, canWrite = false }: Props = $props();
|
||||
|
||||
let directRels = $state<RelationshipDTO[]>([]);
|
||||
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) {
|
||||
@@ -46,6 +73,53 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
function chipLabel(rel: RelationshipDTO): string {
|
||||
const viewpointIsSubject = rel.personId === node.id;
|
||||
switch (rel.relationType) {
|
||||
@@ -84,7 +158,12 @@ onMount(() => {
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
});
|
||||
|
||||
const topDerived = $derived(derivedRels.slice(0, 5));
|
||||
const directOtherIds = $derived(
|
||||
new Set(directRels.map((r) => (r.personId === node.id ? r.relatedPersonId : r.personId)))
|
||||
);
|
||||
const topDerived = $derived(
|
||||
derivedRels.filter((d) => !directOtherIds.has(d.person.id)).slice(0, 5)
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col p-5">
|
||||
@@ -124,6 +203,92 @@ const topDerived = $derived(derivedRels.slice(0, 5));
|
||||
{/each}
|
||||
</ul>
|
||||
{/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="Typ"
|
||||
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="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>
|
||||
<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="Von Jahr"
|
||||
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="Bis Jahr"
|
||||
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}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if topDerived.length > 0}
|
||||
|
||||
@@ -15,6 +15,7 @@ interface Props {
|
||||
let { data }: Props = $props();
|
||||
|
||||
const focusId = $derived(page.url.searchParams.get('focus'));
|
||||
const canWrite = $derived<boolean>(page.data.canWrite ?? false);
|
||||
|
||||
let selectedId = $state<string | null>(null);
|
||||
$effect(() => {
|
||||
@@ -34,7 +35,10 @@ function zoomOut() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="-mt-6 flex h-full flex-col">
|
||||
<!-- 4.25rem = 4rem navbar (h-16) + 0.25rem accent strip (h-1).
|
||||
-my-6 cancels <main>'s py-6 so the canvas sits flush against the navbar
|
||||
on top and the viewport edge on the bottom. -->
|
||||
<div class="-my-6 flex h-[calc(100dvh-4.25rem)] flex-col">
|
||||
<header
|
||||
class="flex shrink-0 items-center justify-between border-b border-line bg-surface px-6 py-4"
|
||||
>
|
||||
@@ -102,7 +106,11 @@ function zoomOut() {
|
||||
</div>
|
||||
{#if selectedNode}
|
||||
<aside class="w-[268px] shrink-0 overflow-y-auto border-l border-line bg-surface">
|
||||
<StammbaumSidePanel node={selectedNode} onClose={() => (selectedId = null)} />
|
||||
<StammbaumSidePanel
|
||||
node={selectedNode}
|
||||
canWrite={canWrite}
|
||||
onClose={() => (selectedId = null)}
|
||||
/>
|
||||
</aside>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user