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

refactor(geschichte): extract delete handler to [id]/+page.svelte, pass via ondelete prop

Browse Source 
Moves the confirm-then-delete flow out of StoryReader and JourneyReader into
the single [id]/+page.svelte owner. Both reader components gain an optional
ondelete prop — the delete button calls ondelete?.() so the handler is opt-in
and never duplicated. Tests verify the prop is called on click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-08 23:24:33 +02:00
parent 91d9dae6fd
commit 4c24bbb002
5 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/lib/geschichte/StoryReader.svelte
View File

@@ -1,9 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { safeHtml } from '$lib/shared/utils/sanitize';
import { getConfirmService } from '$lib/shared/services/confirm.svelte';
import { csrfFetch } from '$lib/shared/cookies';
import type { components } from '$lib/generated/api';
type GeschichteView = components['schemas']['GeschichteView'];
@@ -11,32 +8,16 @@ type GeschichteView = components['schemas']['GeschichteView'];
interface Props {
geschichte: GeschichteView;
canBlogWrite: boolean;
ondelete?: () => Promise<void>;
}
let { geschichte: g, canBlogWrite }: Props = $props();
let { geschichte: g, canBlogWrite, ondelete }: Props = $props();
const sanitized = $derived(safeHtml(g.body));
const confirm = getConfirmService();
function personName(p: { firstName?: string; lastName?: string }): string {
return [p.firstName, p.lastName].filter(Boolean).join(' ').trim();
}
async function handleDelete() {
const ok = await confirm.confirm({
title: m.geschichte_delete_confirm_title(),
body: m.geschichte_delete_confirm_body(),
confirmLabel: m.btn_delete(),
cancelLabel: m.btn_cancel(),
destructive: true
});
if (!ok) return;
const res = await csrfFetch(`/api/geschichten/${g.id}`, { method: 'DELETE' });
if (res.ok) {
goto('/geschichten');
}
}
</script>
<!--
@@ -65,7 +46,7 @@ async function handleDelete() {
<li>
<a
href="/persons/{p.id}"
class="inline-flex items-center rounded-full bg-muted px-3 py-1 font-sans text-sm text-ink hover:bg-accent-bg"
class="inline-flex min-h-[44px] items-center rounded-full bg-muted px-3 py-2.5 font-sans text-sm text-ink hover:bg-accent-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
{personName(p)}
</a>
@@ -111,7 +92,7 @@ async function handleDelete() {
</a>
<button
type="button"
onclick={handleDelete}
onclick={() => ondelete?.()}
class="inline-flex h-11 items-center rounded font-sans text-sm font-medium text-danger hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
{m.btn_delete()}