feat(persons): add transcriber triage view at /persons/review
New WRITE-gated triage route lists provisional persons (one PersonReviewRow each) with Merge (reuses POST /merge), Umbenennen (PUT), Bestätigen (PATCH /confirm) and Löschen (DELETE behind the focus-trapped, Escape-dismissible ConfirmDialog service). Actions run as form actions via use:enhance so they work without JS and stay server-side permission-guarded; the loader is READ_ALL. Refs #667 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
158
frontend/src/lib/person/PersonReviewRow.svelte
Normal file
158
frontend/src/lib/person/PersonReviewRow.svelte
Normal file
@@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { getConfirmService } from '$lib/shared/services/confirm.svelte.js';
|
||||
import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Person = components['schemas']['PersonSummaryDTO'];
|
||||
|
||||
let { person }: { person: Person } = $props();
|
||||
|
||||
const { confirm } = getConfirmService();
|
||||
|
||||
let mode = $state<'idle' | 'rename' | 'merge'>('idle');
|
||||
let renameFirstName = $state(person.firstName ?? '');
|
||||
let renameLastName = $state(person.lastName ?? '');
|
||||
let mergeTargetId = $state('');
|
||||
|
||||
const documentCount = $derived(person.documentCount ?? 0);
|
||||
|
||||
const actionBtn =
|
||||
'inline-flex min-h-[44px] items-center justify-center rounded-sm border border-line bg-surface px-3 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
|
||||
const deleteBtn =
|
||||
'inline-flex min-h-[44px] items-center justify-center rounded-sm border border-danger px-3 py-2 font-sans text-sm font-semibold text-danger transition-colors hover:bg-danger/10 focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2 focus-visible:outline-none';
|
||||
</script>
|
||||
|
||||
<li class="flex flex-col gap-3 rounded-sm border border-line bg-surface p-4 shadow-sm">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Neutral placeholder avatar — these rows are unconfirmed by definition. -->
|
||||
<div
|
||||
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted text-ink-2"
|
||||
>
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate font-serif text-base font-bold text-ink">{person.displayName}</p>
|
||||
<p class="font-sans text-sm text-ink-2">
|
||||
{documentCount === 1
|
||||
? m.person_card_doc_count_one()
|
||||
: m.person_card_doc_count_many({ count: documentCount })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class={actionBtn}
|
||||
onclick={() => (mode = mode === 'merge' ? 'idle' : 'merge')}
|
||||
>
|
||||
{m.persons_review_action_merge()}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={actionBtn}
|
||||
onclick={() => (mode = mode === 'rename' ? 'idle' : 'rename')}
|
||||
>
|
||||
{m.persons_review_action_rename()}
|
||||
</button>
|
||||
<form method="POST" action="?/confirm" use:enhance>
|
||||
<input type="hidden" name="id" value={person.id} />
|
||||
<button type="submit" class={actionBtn}>{m.persons_review_action_confirm()}</button>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/delete"
|
||||
use:enhance={async ({ cancel }) => {
|
||||
const ok = await confirm({
|
||||
title: m.persons_review_delete_confirm_title(),
|
||||
body: m.persons_review_delete_confirm_text(),
|
||||
confirmLabel: m.persons_review_delete_confirm_button(),
|
||||
destructive: true
|
||||
});
|
||||
if (!ok) cancel();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={person.id} />
|
||||
<button type="submit" class={deleteBtn}>{m.persons_review_action_delete()}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if mode === 'rename'}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/rename"
|
||||
use:enhance={() => {
|
||||
return () => {
|
||||
mode = 'idle';
|
||||
};
|
||||
}}
|
||||
class="flex flex-wrap items-end gap-2"
|
||||
>
|
||||
<input type="hidden" name="id" value={person.id} />
|
||||
<input type="hidden" name="personType" value={person.personType ?? 'PERSON'} />
|
||||
<label class="flex flex-col gap-1 text-sm">
|
||||
<span class="font-sans text-ink-2">{m.persons_filter_type_person()}</span>
|
||||
<input
|
||||
name="firstName"
|
||||
bind:value={renameFirstName}
|
||||
class="rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-1 flex-col gap-1 text-sm">
|
||||
<span class="font-sans text-ink-2">{m.persons_section_details()}</span>
|
||||
<input
|
||||
name="lastName"
|
||||
required
|
||||
bind:value={renameLastName}
|
||||
class="rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" class={actionBtn}>{m.persons_review_action_save()}</button>
|
||||
<button type="button" class={actionBtn} onclick={() => (mode = 'idle')}>
|
||||
{m.persons_review_action_cancel()}
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if mode === 'merge'}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/merge"
|
||||
use:enhance={() => {
|
||||
return () => {
|
||||
mode = 'idle';
|
||||
};
|
||||
}}
|
||||
class="flex flex-wrap items-end gap-2"
|
||||
>
|
||||
<input type="hidden" name="id" value={person.id} />
|
||||
<input type="hidden" name="targetPersonId" bind:value={mergeTargetId} />
|
||||
<div class="flex-1">
|
||||
<PersonTypeahead
|
||||
name="_mergeTargetDisplay"
|
||||
label={m.persons_review_merge_label()}
|
||||
value={mergeTargetId}
|
||||
onchange={(value) => (mergeTargetId = value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!mergeTargetId}
|
||||
class="{actionBtn} disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{m.persons_review_action_merge()}
|
||||
</button>
|
||||
<button type="button" class={actionBtn} onclick={() => (mode = 'idle')}>
|
||||
{m.persons_review_action_cancel()}
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</li>
|
||||
109
frontend/src/routes/persons/review/+page.server.ts
Normal file
109
frontend/src/routes/persons/review/+page.server.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import { createApiClient, extractErrorCode } from '$lib/shared/api.server';
|
||||
import { getErrorMessage } from '$lib/shared/errors';
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
export async function load({ url, fetch, locals }) {
|
||||
const canWrite =
|
||||
(locals.user as { groups?: { permissions: string[] }[] } | undefined)?.groups?.some((g) =>
|
||||
g.permissions.includes('WRITE_ALL')
|
||||
) ?? false;
|
||||
|
||||
const page = Math.max(0, Number.parseInt(url.searchParams.get('page') ?? '0', 10) || 0);
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.GET('/api/persons', {
|
||||
params: { query: { provisional: true, review: true, page, size: PAGE_SIZE } }
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
throw error(result.response.status, getErrorMessage(undefined));
|
||||
}
|
||||
|
||||
const data = result.data!;
|
||||
|
||||
return {
|
||||
persons: data.items,
|
||||
totalElements: data.totalElements,
|
||||
totalPages: data.totalPages,
|
||||
pageNumber: data.pageNumber,
|
||||
canWrite
|
||||
};
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
confirm: async ({ request, fetch }) => {
|
||||
const id = (await request.formData()).get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.PATCH('/api/persons/{id}/confirm', {
|
||||
params: { path: { id } }
|
||||
});
|
||||
if (!result.response.ok) {
|
||||
return fail(result.response.status, {
|
||||
error: getErrorMessage(extractErrorCode(result.error))
|
||||
});
|
||||
}
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
delete: async ({ request, fetch }) => {
|
||||
const id = (await request.formData()).get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.DELETE('/api/persons/{id}', {
|
||||
params: { path: { id } }
|
||||
});
|
||||
if (!result.response.ok) {
|
||||
return fail(result.response.status, {
|
||||
error: getErrorMessage(extractErrorCode(result.error))
|
||||
});
|
||||
}
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
merge: async ({ request, fetch }) => {
|
||||
const formData = await request.formData();
|
||||
const id = formData.get('id') as string;
|
||||
const targetPersonId = formData.get('targetPersonId') as string;
|
||||
if (!targetPersonId) {
|
||||
return fail(400, { error: getErrorMessage('INVALID_INPUT') });
|
||||
}
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.POST('/api/persons/{id}/merge', {
|
||||
params: { path: { id } },
|
||||
body: { targetPersonId }
|
||||
});
|
||||
if (!result.response.ok) {
|
||||
return fail(result.response.status, {
|
||||
error: getErrorMessage(extractErrorCode(result.error))
|
||||
});
|
||||
}
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
rename: async ({ request, fetch }) => {
|
||||
const formData = await request.formData();
|
||||
const id = formData.get('id') as string;
|
||||
const firstName = (formData.get('firstName') as string)?.trim() || undefined;
|
||||
const lastName = (formData.get('lastName') as string)?.trim();
|
||||
const personType = (formData.get('personType') as string) || 'PERSON';
|
||||
if (!lastName) {
|
||||
return fail(400, { error: getErrorMessage('INVALID_INPUT') });
|
||||
}
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.PUT('/api/persons/{id}', {
|
||||
params: { path: { id } },
|
||||
body: {
|
||||
firstName,
|
||||
lastName,
|
||||
personType: personType as 'PERSON' | 'INSTITUTION' | 'GROUP' | 'UNKNOWN'
|
||||
}
|
||||
});
|
||||
if (!result.response.ok) {
|
||||
return fail(result.response.status, {
|
||||
error: getErrorMessage(extractErrorCode(result.error))
|
||||
});
|
||||
}
|
||||
return { success: true };
|
||||
}
|
||||
};
|
||||
56
frontend/src/routes/persons/review/+page.svelte
Normal file
56
frontend/src/routes/persons/review/+page.svelte
Normal file
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import BackButton from '$lib/shared/primitives/BackButton.svelte';
|
||||
import Pagination from '$lib/shared/primitives/Pagination.svelte';
|
||||
import PersonReviewRow from '$lib/person/PersonReviewRow.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
function buildPageHref(targetPage: number): string {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams);
|
||||
params.set('page', String(targetPage));
|
||||
return `/persons/review?${params.toString()}`;
|
||||
}
|
||||
|
||||
const hasResults = $derived(data.persons.length > 0);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{m.persons_review_heading()}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<BackButton />
|
||||
|
||||
<div class="mt-4 mb-8 border-b border-ink/10 pb-6">
|
||||
<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_review_heading()}</h1>
|
||||
<p class="mt-2 font-sans text-sm text-ink-2">{m.persons_review_intro()}</p>
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
<p
|
||||
class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
|
||||
role="alert"
|
||||
>
|
||||
{form.error}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if !hasResults}
|
||||
<div
|
||||
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
|
||||
>
|
||||
<p class="font-serif text-lg text-ink">{m.persons_review_empty()}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="flex flex-col gap-3">
|
||||
{#each data.persons as person (person.id)}
|
||||
<PersonReviewRow person={person} />
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<Pagination page={data.pageNumber} totalPages={data.totalPages} makeHref={buildPageHref} />
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user