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

feat(ui): add alias management to person edit page

Browse Source 
NameHistoryEditCard with add form (type dropdown + name fields),
delete with confirmation modal, and IDOR-safe client-side fetch
calls. Placed between Personendaten and DangerZone cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-07 13:31:41 +02:00
parent 002ee1010a
commit b910517690
3 changed files with 246 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/routes/persons/[id]/edit/+page.server.ts
View File

@@ -12,14 +12,17 @@ export async function load({ params, fetch, locals }) {
const { id } = params;
const api = createApiClient(fetch);
const result = await api.GET('/api/persons/{id}', { params: { path: { id } } });
const [result, aliasesResult] = await Promise.all([
api.GET('/api/persons/{id}', { params: { path: { id } } }),
api.GET('/api/persons/{id}/aliases', { params: { path: { id } } })
]);
if (!result.response.ok) {
const code = (result.error as unknown as { code?: string })?.code;
throw error(result.response.status, getErrorMessage(code));
}
return { person: result.data! };
return { person: result.data!, aliases: aliasesResult.data ?? [] };
}
export const actions = {

12
frontend/src/routes/persons/[id]/edit/+page.svelte
View File

@@ -3,6 +3,7 @@ import { m } from '$lib/paraglide/messages.js';
import { enhance } from '$app/forms';
import PersonEditForm from './PersonEditForm.svelte';
import PersonEditSaveBar from './PersonEditSaveBar.svelte';
import NameHistoryEditCard from './NameHistoryEditCard.svelte';
import PersonDangerZone from './PersonDangerZone.svelte';
let { data, form } = $props();
@@ -49,8 +50,15 @@ const person = $derived(data.person);
<PersonEditForm person={person} />
</div>
<PersonDangerZone person={person} form={form} />
<PersonEditSaveBar discardHref="/persons/{person.id}" />
</form>
<NameHistoryEditCard
personId={person.id}
personFirstName={person.firstName}
aliases={data.aliases}
canWrite={true}
/>
<PersonDangerZone person={person} form={form} />
</div>

231
frontend/src/routes/persons/[id]/edit/NameHistoryEditCard.svelte Normal file
View File

@@ -0,0 +1,231 @@
<script lang="ts">
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
interface Props {
personId: string;
personFirstName: string;
aliases: Array<{
id: string;
lastName: string;
firstName?: string | null;
type: string;
sortOrder: number;
}>;
canWrite: boolean;
}
let { personId, personFirstName, aliases: initialAliases, canWrite }: Props = $props();
let aliases = $state.raw(untrack(() => initialAliases.map((a) => ({ ...a }))));
let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));
let showDeleteModal = $state(false);
let deleteTargetId: string | null = $state(null);
let newType = $state('BIRTH');
let newLastName = $state('');
let newFirstName = $state('');
let addError = $state('');
function typeLabel(type: string): string {
switch (type) {
case 'BIRTH':
return m.person_alias_type_BIRTH();
case 'WIDOWED':
return m.person_alias_type_WIDOWED();
case 'DIVORCED':
return m.person_alias_type_DIVORCED();
default:
return m.person_alias_type_OTHER();
}
}
function confirmDelete(id: string) {
deleteTargetId = id;
showDeleteModal = true;
}
async function removeAlias() {
if (!deleteTargetId) return;
const aliasId = deleteTargetId;
try {
const res = await fetch(`/api/persons/${personId}/aliases/${aliasId}`, {
method: 'DELETE'
});
if (!res.ok) {
const body = await res.json().catch(() => null);
addError = body?.message ?? res.statusText;
return;
}
aliases = aliases.filter((a) => a.id !== aliasId);
} catch (e) {
addError = String(e);
} finally {
showDeleteModal = false;
deleteTargetId = null;
}
}
async function addAlias() {
addError = '';
const lastName = newLastName.trim();
if (!lastName) return;
try {
const res = await fetch(`/api/persons/${personId}/aliases`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
type: newType,
lastName,
firstName: newFirstName.trim() || null
})
});
if (!res.ok) {
const body = await res.json().catch(() => null);
addError = body?.message ?? res.statusText;
return;
}
const created = await res.json();
aliases = [...aliases, created];
newType = 'BIRTH';
newLastName = '';
newFirstName = '';
} catch (e) {
addError = String(e);
}
}
</script>
<div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.person_alias_heading()}
</h2>
{#if sorted.length === 0}
<p class="text-sm text-ink-2 italic">{m.person_alias_empty()}</p>
{:else}
<ul class="space-y-2">
{#each sorted as alias (alias.id)}
<li class="flex items-center justify-between">
<span>
<span class="text-ink-2 italic">{typeLabel(alias.type)}</span>
<span class="font-serif text-ink">
{alias.firstName ?? personFirstName}
{alias.lastName}
</span>
</span>
{#if canWrite}
<button
type="button"
onclick={() => confirmDelete(alias.id)}
aria-label={m.person_alias_btn_delete()}
class="ml-4 inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-red-400 transition-colors hover:text-red-600"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
{/if}
</li>
{/each}
</ul>
{/if}
{#if canWrite}
<div class="mt-4 border-t border-line pt-4">
<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.person_alias_add_heading()}
</h3>
{#if addError}
<p class="mb-3 text-sm text-red-600">{addError}</p>
{/if}
<div class="grid gap-3 md:grid-cols-2">
<label class="block">
<span class="text-xs font-medium text-ink-2">{m.person_alias_label_type()}</span>
<select
bind:value={newType}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
>
<option value="BIRTH">{m.person_alias_type_BIRTH()}</option>
<option value="WIDOWED">{m.person_alias_type_WIDOWED()}</option>
<option value="DIVORCED">{m.person_alias_type_DIVORCED()}</option>
<option value="OTHER">{m.person_alias_type_OTHER()}</option>
</select>
</label>
<label class="block">
<span class="text-xs font-medium text-ink-2">{m.person_alias_label_last_name()}</span>
<input
type="text"
bind:value={newLastName}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
/>
</label>
<label class="block">
<span class="text-xs font-medium text-ink-2">{m.person_alias_label_first_name()}</span>
<input
type="text"
bind:value={newFirstName}
class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
/>
</label>
<div class="flex items-end">
<button
type="button"
onclick={addAlias}
class="w-full rounded-sm bg-brand-navy px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-navy/90"
>
{m.person_alias_btn_add()}
</button>
</div>
</div>
</div>
{/if}
</div>
{#if showDeleteModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="mx-4 max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg">
<h3 class="mb-2 font-serif text-lg text-ink">{m.person_alias_delete_title()}</h3>
<p class="mb-6 text-sm text-ink-2">{m.person_alias_delete_body()}</p>
<div class="flex items-center justify-end gap-3">
<button
type="button"
onclick={() => { showDeleteModal = false; deleteTargetId = null; }}
class="rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-gray-50"
>
{m.btn_cancel()}
</button>
<button
type="button"
onclick={removeAlias}
class="rounded-sm bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
>
{m.person_alias_btn_delete()}
</button>
</div>
</div>
</div>
{/if}