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>
|
||||
Reference in New Issue
Block a user