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