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

refactor(admin): replace window.confirm with ConfirmService in admin group delete

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-12 14:06:54 +02:00
parent 0d1401ce4f
commit 14fc5cbc54
2 changed files with 79 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/routes/admin/groups/[id]/+page.svelte
View File

@@ -2,12 +2,24 @@
import { enhance } from '$app/forms';
import { beforeNavigate, goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/services/confirm.svelte.js';
let { data, form } = $props();
const { confirm } = getConfirmService();
let isDirty = $state(false);
let showUnsavedWarning = $state(false);
let discardTarget: string | null = $state(null);
let deleteFormEl = $state<HTMLFormElement | null>(null);
async function handleDelete() {
const confirmed = await confirm({
title: m.admin_group_delete_confirm(),
destructive: true
});
if (confirmed) deleteFormEl!.requestSubmit();
}
beforeNavigate(({ cancel, to }) => {
if (isDirty) {
@@ -59,18 +71,10 @@ const ADMIN_PERMISSIONS = $derived([
<h2 class="flex-1 font-sans text-sm font-bold text-ink">
{m.admin_group_edit_heading({ name: data.group.name })}
</h2>
<form
method="POST"
action="?/delete"
use:enhance={({ cancel }) => {
if (!confirm(m.admin_group_delete_confirm())) cancel();
return async ({ update }) => {
await update();
};
}}
>
<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
<button
type="submit"
type="button"
onclick={handleDelete}
class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
>
{m.btn_delete()}

77
frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
View File

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import Page from './+page.svelte';
import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
@@ -11,24 +12,35 @@ import { beforeNavigate, goto } from '$app/navigation';
const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
const baseData = { group: baseGroup };
type PageProps = { data: typeof baseData; form: Record<string, unknown> | null };
function renderPage(props: PageProps) {
const service = createConfirmService();
const result = render(Page, {
props,
context: new Map([[CONFIRM_KEY, service]])
});
return { ...result, service };
}
afterEach(cleanup);
// ─── Rendering ────────────────────────────────────────────────────────────────
describe('Admin edit group page – rendering', () => {
it('renders the heading with group name', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText(/Gruppe: Editoren/i)).toBeInTheDocument();
});
it('pre-fills the name input', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const input = document.querySelector<HTMLInputElement>('input[name="name"]');
expect(input?.value).toBe('Editoren');
});
it('pre-checks permissions that the group already has', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const checkbox = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
);
@@ -36,14 +48,14 @@ describe('Admin edit group page – rendering', () => {
});
it('renders the cancel link pointing to /admin/groups', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect
.element(page.getByRole('link', { name: /Abbrechen/i }))
.toHaveAttribute('href', '/admin/groups');
});
it('renders a READ_ALL checkbox in the standard permissions section', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const cb = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
);
@@ -51,7 +63,7 @@ describe('Admin edit group page – rendering', () => {
});
it('renders an ANNOTATE_ALL checkbox in the standard permissions section', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const cb = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
);
@@ -60,7 +72,7 @@ describe('Admin edit group page – rendering', () => {
it('pre-checks READ_ALL when group has it', async () => {
const data = { group: { id: 'g2', name: 'Leser', permissions: ['READ_ALL'] } };
render(Page, { data, form: null });
renderPage({ data, form: null });
const cb = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
);
@@ -71,7 +83,7 @@ describe('Admin edit group page – rendering', () => {
const data = {
group: { id: 'g3', name: 'Annotatoren', permissions: ['READ_ALL', 'ANNOTATE_ALL'] }
};
render(Page, { data, form: null });
renderPage({ data, form: null });
const cb = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
);
@@ -79,18 +91,57 @@ describe('Admin edit group page – rendering', () => {
});
});
// ─── Delete confirmation ──────────────────────────────────────────────────────
describe('Admin edit group page – delete confirmation', () => {
it('delete button has type=button (does not submit natively)', async () => {
renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
expect(deleteBtn.type).toBe('button');
});
it('does not submit delete form when user cancels', async () => {
const { service } = renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(false);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(requestSubmit).not.toHaveBeenCalled();
});
it('submits delete form when user confirms', async () => {
const { service } = renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(true);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(requestSubmit).toHaveBeenCalledOnce();
});
});
// ─── Unsaved-changes guard ────────────────────────────────────────────────────
describe('Admin edit group page – unsaved-changes guard', () => {
beforeEach(() => vi.clearAllMocks());
it('does not show unsaved warning initially', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
});
it('cancels navigation and shows warning when form is dirty', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document
@@ -105,7 +156,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
});
it('does not cancel navigation when form is clean', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
const cancel = vi.fn();
@@ -115,7 +166,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
});
it('discard button calls goto with the target URL', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document
@@ -130,7 +181,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
});
it('clears dirty state when form saves successfully', async () => {
const { rerender } = render(Page, { data: baseData, form: null });
const { rerender } = renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document