feat(persons): clean filterable paginated directory with crash fix
Rewrite /persons: server-side filter chips (type, family-only, has-documents) that AND within the clean reader default (familyMember OR documentCount > 0), a writer-only show-all/Zu-prüfen toggle, and reused Pagination. Extract PersonCard (fixes the null-lastName render crash and never shows a "?" initial — provisional/UNKNOWN/"?" entries get a neutral placeholder avatar + a text+icon "unbestätigt" badge, WCAG 1.4.1) and PersonFilterBar (44px aria-pressed chips, role=switch toggle with the count in its accessible name). The loader applies the reader restriction unless review=1 and surfaces a cheap needsReviewCount. i18n keys added for de/en/es. Refs #667 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
146
frontend/src/lib/person/PersonCard.svelte
Normal file
146
frontend/src/lib/person/PersonCard.svelte
Normal file
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { formatLifeDateRange } from '$lib/person/personLifeDates';
|
||||
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Person = components['schemas']['PersonSummaryDTO'];
|
||||
|
||||
let { person }: { person: Person } = $props();
|
||||
|
||||
// A card is "unconfirmed" when the importer could not identify the person: the explicit
|
||||
// provisional flag, the placeholder UNKNOWN type, or a literal "?" name from the spreadsheet.
|
||||
const isUnconfirmed = $derived(
|
||||
person.provisional === true ||
|
||||
person.personType === 'UNKNOWN' ||
|
||||
person.lastName === '?' ||
|
||||
(person.lastName ?? '').trim() === ''
|
||||
);
|
||||
|
||||
// A non-PERSON type (institution/group) gets a glyph; everything that is a real, confirmed
|
||||
// person gets initials. Unconfirmed persons never get a "?" initial — they get the neutral
|
||||
// placeholder glyph instead. Reading lastName[0] on a null/empty name would throw, so the
|
||||
// initials branch is gated on a non-empty name.
|
||||
const showGlyph = $derived(
|
||||
isUnconfirmed || (person.personType != null && person.personType !== 'PERSON')
|
||||
);
|
||||
|
||||
const initials = $derived.by(() => {
|
||||
const first = person.firstName?.[0] ?? '';
|
||||
const last = person.lastName?.[0] ?? '';
|
||||
return (first || last) + last;
|
||||
});
|
||||
|
||||
const documentCount = $derived(person.documentCount ?? 0);
|
||||
</script>
|
||||
|
||||
<a href="/persons/{person.id}" class="group block">
|
||||
<div
|
||||
class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
|
||||
>
|
||||
<!-- Avatar: confirmed persons get a primary-coloured initials disc; institutions/groups
|
||||
and unconfirmed entries get a neutral, muted glyph so "unverified" is pre-attentive. -->
|
||||
<div
|
||||
class={[
|
||||
'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full font-serif text-base font-bold transition-colors',
|
||||
isUnconfirmed ? 'bg-muted text-ink-2' : 'bg-primary text-primary-fg'
|
||||
]}
|
||||
>
|
||||
{#if showGlyph}
|
||||
{#if person.personType === 'INSTITUTION'}
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-2M5 21H3m2 0v-2m4-12h2m-2 4h2m4-4h2m-2 4h2"
|
||||
/>
|
||||
</svg>
|
||||
{:else if person.personType === 'GROUP'}
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<!-- Neutral person glyph for unconfirmed / UNKNOWN entries (never a "?" initial). -->
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-6 w-6 opacity-70"
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
{initials}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<p class="font-serif text-sm font-bold text-ink group-hover:underline">
|
||||
{person.displayName}
|
||||
</p>
|
||||
|
||||
{#if isUnconfirmed}
|
||||
<!-- State conveyed by text + the muted placeholder shape, never colour alone (WCAG 1.4.1). -->
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-xs font-semibold text-ink-2"
|
||||
aria-label={m.person_badge_unconfirmed()}
|
||||
>
|
||||
<svg
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m0 3.75h.008M10.34 3.94l-7.5 12.99A1.5 1.5 0 004.14 19.5h15.72a1.5 1.5 0 001.3-2.57l-7.5-12.99a1.5 1.5 0 00-2.62 0z"
|
||||
/>
|
||||
</svg>
|
||||
{m.person_badge_unconfirmed()}
|
||||
</span>
|
||||
{:else if person.personType && person.personType !== 'PERSON'}
|
||||
<PersonTypeBadge personType={person.personType} />
|
||||
{/if}
|
||||
|
||||
<!-- Alias -->
|
||||
{#if person.alias}
|
||||
<p class="font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
|
||||
{/if}
|
||||
|
||||
<!-- Life dates -->
|
||||
{#if person.birthYear || person.deathYear}
|
||||
<p class="font-sans text-sm text-ink-3">
|
||||
{formatLifeDateRange(person.birthYear, person.deathYear)}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- Doc count chip -->
|
||||
{#if documentCount > 0}
|
||||
<span
|
||||
class="mt-1 inline-flex items-center rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-sm font-semibold text-ink-2"
|
||||
>
|
||||
{documentCount === 1
|
||||
? m.person_card_doc_count_one()
|
||||
: m.person_card_doc_count_many({ count: documentCount })}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
66
frontend/src/lib/person/PersonCard.svelte.test.ts
Normal file
66
frontend/src/lib/person/PersonCard.svelte.test.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import PersonCard from './PersonCard.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Person = components['schemas']['PersonSummaryDTO'];
|
||||
|
||||
const makePerson = (overrides: Partial<Person> = {}): Person => ({
|
||||
id: 'p-1',
|
||||
firstName: 'Anna',
|
||||
lastName: 'Schmidt',
|
||||
displayName: 'Anna Schmidt',
|
||||
personType: 'PERSON',
|
||||
familyMember: false,
|
||||
provisional: false,
|
||||
documentCount: 0,
|
||||
...overrides
|
||||
});
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('PersonCard — confirmed person', () => {
|
||||
it('renders the display name', async () => {
|
||||
render(PersonCard, { props: { person: makePerson() } });
|
||||
await expect.element(page.getByText('Anna Schmidt')).toBeVisible();
|
||||
});
|
||||
|
||||
it('does not show an unconfirmed badge for a confirmed person', async () => {
|
||||
render(PersonCard, { props: { person: makePerson() } });
|
||||
await expect.element(page.getByText('unbestätigt')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('PersonCard — unconfirmed / malformed (regression: null-lastName crash)', () => {
|
||||
it('renders without throwing when lastName is null', async () => {
|
||||
// Before the fix, `lastName[0]` threw at render for a null lastName.
|
||||
const person = makePerson({
|
||||
lastName: null as unknown as string,
|
||||
displayName: '?',
|
||||
provisional: true
|
||||
});
|
||||
render(PersonCard, { props: { person } });
|
||||
// No throw + the placeholder avatar (an <img>) is present, never a "?" initial.
|
||||
await expect.element(page.getByText('unbestätigt')).toBeVisible();
|
||||
});
|
||||
|
||||
it('shows an unbestätigt badge for a provisional person', async () => {
|
||||
render(PersonCard, { props: { person: makePerson({ provisional: true }) } });
|
||||
await expect.element(page.getByText('unbestätigt')).toBeVisible();
|
||||
});
|
||||
|
||||
it('shows a placeholder (no "?" initial) for a "?" name', async () => {
|
||||
render(PersonCard, {
|
||||
props: { person: makePerson({ firstName: undefined, lastName: '?', displayName: '?' }) }
|
||||
});
|
||||
await expect.element(page.getByText('unbestätigt')).toBeVisible();
|
||||
});
|
||||
|
||||
it('treats an UNKNOWN type as unconfirmed', async () => {
|
||||
render(PersonCard, {
|
||||
props: { person: makePerson({ personType: 'UNKNOWN', displayName: 'Unklar' }) }
|
||||
});
|
||||
await expect.element(page.getByText('unbestätigt')).toBeVisible();
|
||||
});
|
||||
});
|
||||
160
frontend/src/lib/person/PersonFilterBar.svelte
Normal file
160
frontend/src/lib/person/PersonFilterBar.svelte
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
type PersonType = 'PERSON' | 'INSTITUTION' | 'GROUP';
|
||||
|
||||
interface Props {
|
||||
type?: PersonType;
|
||||
familyOnly: boolean;
|
||||
hasDocuments: boolean;
|
||||
review: boolean;
|
||||
needsReviewCount: number;
|
||||
canWrite: boolean;
|
||||
}
|
||||
|
||||
let { type, familyOnly, hasDocuments, review, needsReviewCount, canWrite }: Props = $props();
|
||||
|
||||
const typeChips: { value: PersonType; label: () => string }[] = [
|
||||
{ value: 'PERSON', label: m.persons_filter_type_person },
|
||||
{ value: 'GROUP', label: m.persons_filter_type_group },
|
||||
{ value: 'INSTITUTION', label: m.persons_filter_type_institution }
|
||||
];
|
||||
|
||||
// Compose the next URL from the live params so a chip toggle never wipes q / page / other
|
||||
// active chips. Any filter change resets to page 0.
|
||||
function navigate(mutate: (params: SvelteURLSearchParams) => void) {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams);
|
||||
params.delete('page');
|
||||
mutate(params);
|
||||
const qs = params.toString();
|
||||
goto(qs ? `/persons?${qs}` : '/persons', { keepFocus: true, noScroll: true });
|
||||
}
|
||||
|
||||
function toggleType(value: PersonType) {
|
||||
navigate((params) => {
|
||||
if (type === value) params.delete('type');
|
||||
else params.set('type', value);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFlag(key: 'familyOnly' | 'hasDocuments', active: boolean) {
|
||||
navigate((params) => {
|
||||
if (active) params.delete(key);
|
||||
else params.set(key, 'true');
|
||||
});
|
||||
}
|
||||
|
||||
function setReview(next: boolean) {
|
||||
navigate((params) => {
|
||||
if (next) params.set('review', 'true');
|
||||
else params.delete('review');
|
||||
});
|
||||
}
|
||||
|
||||
const chipBase =
|
||||
'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-2 font-sans text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
|
||||
const chipActive = 'border-brand-navy bg-brand-navy text-white';
|
||||
const chipInactive = 'border-line bg-surface text-ink hover:bg-muted';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<!-- Type + boolean filter chips -->
|
||||
<div role="group" aria-label={m.persons_filter_group_label()} class="flex flex-wrap gap-2">
|
||||
{#each typeChips as chip (chip.value)}
|
||||
{@const active = type === chip.value}
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
class={[chipBase, active ? chipActive : chipInactive]}
|
||||
onclick={() => toggleType(chip.value)}
|
||||
>
|
||||
{#if active}
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
{chip.label()}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={familyOnly}
|
||||
class={[chipBase, familyOnly ? chipActive : chipInactive]}
|
||||
onclick={() => toggleFlag('familyOnly', familyOnly)}
|
||||
>
|
||||
{#if familyOnly}
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
{m.persons_filter_family_only()}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={hasDocuments}
|
||||
class={[chipBase, hasDocuments ? chipActive : chipInactive]}
|
||||
onclick={() => toggleFlag('hasDocuments', hasDocuments)}
|
||||
>
|
||||
{#if hasDocuments}
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
{m.persons_filter_has_documents()}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Show-all / Zu prüfen toggle: transcriber-only, reveals the import noise. -->
|
||||
{#if canWrite}
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={review}
|
||||
aria-label={m.persons_toggle_needs_review({ count: needsReviewCount })}
|
||||
class={[chipBase, 'sm:ml-auto', review ? chipActive : chipInactive]}
|
||||
onclick={() => setReview(!review)}
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
{review ? m.persons_toggle_show_all() : m.persons_toggle_needs_review({ count: needsReviewCount })}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
90
frontend/src/lib/person/PersonFilterBar.svelte.test.ts
Normal file
90
frontend/src/lib/person/PersonFilterBar.svelte.test.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page as browserPage } from 'vitest/browser';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import PersonFilterBar from './PersonFilterBar.svelte';
|
||||
|
||||
vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
|
||||
vi.mock('$app/state', () => ({ page: { url: new URL('http://localhost/persons') } }));
|
||||
|
||||
const gotoMock = vi.mocked(goto);
|
||||
|
||||
function setUrl(search: string) {
|
||||
(page as unknown as { url: URL }).url = new URL(`http://localhost/persons${search}`);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
gotoMock.mockClear();
|
||||
setUrl('');
|
||||
});
|
||||
afterEach(cleanup);
|
||||
|
||||
const baseProps = {
|
||||
type: undefined,
|
||||
familyOnly: false,
|
||||
hasDocuments: false,
|
||||
review: false,
|
||||
needsReviewCount: 12,
|
||||
canWrite: true
|
||||
};
|
||||
|
||||
describe('PersonFilterBar — chip activation', () => {
|
||||
it('activating a type chip sets type and resets page', async () => {
|
||||
setUrl('?page=3&q=Anna');
|
||||
render(PersonFilterBar, { props: baseProps });
|
||||
|
||||
await browserPage.getByRole('button', { name: 'Institution' }).click();
|
||||
|
||||
expect(gotoMock).toHaveBeenCalled();
|
||||
const target = gotoMock.mock.calls.at(-1)![0] as string;
|
||||
const url = new URL(target, 'http://localhost');
|
||||
expect(url.searchParams.get('type')).toBe('INSTITUTION');
|
||||
expect(url.searchParams.get('q')).toBe('Anna'); // preserved
|
||||
expect(url.searchParams.get('page')).toBeNull(); // reset
|
||||
});
|
||||
|
||||
it('activating "Nur Familie" sets familyOnly=true', async () => {
|
||||
render(PersonFilterBar, { props: baseProps });
|
||||
|
||||
await browserPage.getByRole('button', { name: 'Nur Familie' }).click();
|
||||
|
||||
const target = gotoMock.mock.calls.at(-1)![0] as string;
|
||||
const url = new URL(target, 'http://localhost');
|
||||
expect(url.searchParams.get('familyOnly')).toBe('true');
|
||||
});
|
||||
|
||||
it('deactivating an already-active chip removes the param', async () => {
|
||||
render(PersonFilterBar, { props: { ...baseProps, hasDocuments: true } });
|
||||
|
||||
await browserPage.getByRole('button', { name: 'Mit Dokumenten' }).click();
|
||||
|
||||
const target = gotoMock.mock.calls.at(-1)![0] as string;
|
||||
const url = new URL(target, 'http://localhost');
|
||||
expect(url.searchParams.get('hasDocuments')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('PersonFilterBar — review toggle', () => {
|
||||
it('renders a switch with the needs-review count in its accessible name', async () => {
|
||||
render(PersonFilterBar, { props: baseProps });
|
||||
await expect
|
||||
.element(browserPage.getByRole('switch', { name: /Zu prüfen \(12\)/ }))
|
||||
.toBeVisible();
|
||||
});
|
||||
|
||||
it('is hidden for users without write permission', async () => {
|
||||
render(PersonFilterBar, { props: { ...baseProps, canWrite: false } });
|
||||
await expect.element(browserPage.getByRole('switch')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('toggling on sets review=true', async () => {
|
||||
render(PersonFilterBar, { props: baseProps });
|
||||
|
||||
await browserPage.getByRole('switch').click();
|
||||
|
||||
const target = gotoMock.mock.calls.at(-1)![0] as string;
|
||||
const url = new URL(target, 'http://localhost');
|
||||
expect(url.searchParams.get('review')).toBe('true');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user