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

feat(persons): add transcriber triage view at /persons/review

Browse Source 
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
2026-05-27 13:55:45 +02:00
parent 888adcb185
commit 9d859dcb05
3 changed files with 323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
frontend/src/lib/person/PersonReviewRow.svelte Normal file
View 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>