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

feat(person): show received docs, role badges, stats bar, co-correspondents

Browse Source 
- Split document list into Gesendete / Empfangene Dokumente sections
- Add role badges (Gesendet / Empfangen) on each document card
- Add statistics strip showing total count and year range
- Add co-correspondents section with frequency-sorted chips
- Single sort toggle applies to both sections

Closes #1 Closes #19 Closes #21 Closes #22
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-20 09:39:50 +01:00
parent 1fdde95b09
commit 55ffaa1c5c
2 changed files with 166 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/e2e/persons.spec.ts
View File

@@ -114,6 +114,19 @@ test.describe('Person detail — sort toggle', () => {
});
});
test.describe('Person detail — sent and received documents', () => {
test('shows both sent and received document sections', async ({ page }) => {
await page.goto('/persons');
const firstPerson = page.locator('a[href^="/persons/"]:not([href="/persons/new"])').first();
await firstPerson.click();
await page.waitForSelector('[data-hydrated]');
await expect(page.getByRole('heading', { name: /Gesendete Dokumente/i })).toBeVisible();
await expect(page.getByRole('heading', { name: /Empfangene Dokumente/i })).toBeVisible();
await page.screenshot({ path: 'test-results/e2e/person-sent-received.png' });
});
});
test.describe('Person detail — conversations link', () => {
test('has a conversations link that pre-fills the person', async ({ page }) => {
await page.goto('/persons');

176
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -7,10 +7,48 @@
let { data, form } = $props();
const person = $derived(data.person);
const documents = $derived(data.documents);
const sentDocuments = $derived(data.sentDocuments);
const receivedDocuments = $derived(data.receivedDocuments);
let sortDir = $state<SortDir>('DESC');
const sortedDocuments = $derived(sortDocumentsByDate(documents, sortDir));
const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir));
const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir));
const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
const docStats = $derived(() => {
const dated = allDocuments.filter(d => d.documentDate);
const years = dated.map(d => parseInt(d.documentDate!.substring(0, 4)));
return {
total: allDocuments.length,
minYear: years.length ? Math.min(...years) : null,
maxYear: years.length ? Math.max(...years) : null,
};
});
const coCorrespondents = $derived(() => {
const freq = new Map<string, { id: string; name: string; count: number }>();
for (const doc of sentDocuments) {
for (const receiver of doc.receivers ?? []) {
const key = receiver.id;
const existing = freq.get(key);
if (existing) existing.count++;
else freq.set(key, { id: receiver.id, name: `${receiver.firstName} ${receiver.lastName}`, count: 1 });
}
}
for (const doc of receivedDocuments) {
if (doc.sender && doc.sender.id !== person.id) {
const key = doc.sender.id;
const existing = freq.get(key);
if (existing) existing.count++;
else freq.set(key, { id: doc.sender.id, name: `${doc.sender.firstName} ${doc.sender.lastName}`, count: 1 });
}
}
return [...freq.values()].sort((a, b) => b.count - a.count).slice(0, 5);
});
let editMode = $state(false);
let mergeTargetId = $state('');
@@ -261,33 +299,66 @@
</div>
{/key}
<!-- Linked Documents Section -->
<div>
<div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
<div class="flex items-center gap-3">
<h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
{documents.length}
</span>
</div>
{#if documents.length > 0}
<button
onclick={() => (sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC')}
class="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
aria-label={m.conv_sort_label()}
>
{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
<!-- Co-Correspondents Section -->
{#if coCorrespondents().length > 0}
<div class="mb-6">
<h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
<div class="flex flex-wrap gap-2">
{#each coCorrespondents() as c}
<a href="/persons/{c.id}"
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
{c.name}
<span class="text-xs text-gray-400 font-sans">({c.count})</span>
</a>
{/each}
</div>
</div>
{/if}
<!-- Document Statistics Bar -->
{#if docStats().total > 0}
<div class="mb-8 px-4 py-3 bg-brand-sand/30 rounded-sm flex items-center gap-2 font-sans text-sm text-brand-navy/70">
<span>{docStats().total} Dokumente</span>
{#if docStats().minYear !== null}
<span class="text-brand-mint">·</span>
{#if docStats().minYear === docStats().maxYear}
<span>{docStats().minYear}</span>
{:else}
<span>{docStats().minYear} – {docStats().maxYear}</span>
{/if}
{/if}
</div>
{/if}
<!-- Sort control -->
{#if allDocuments.length > 0}
<div class="flex justify-end mb-4">
<button
onclick={() => (sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC')}
class="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
aria-label={m.conv_sort_label()}
>
{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
</div>
{/if}
<!-- Sent Documents Section -->
<div class="mb-10">
<div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
<h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
{sentDocuments.length}
</span>
</div>
{#if documents.length === 0}
{#if sentDocuments.length === 0}
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
<p class="text-gray-500 font-sans">{m.person_no_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
{#each sortedDocuments as doc}
{#each sortedSentDocuments as doc}
<li class="group">
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
<div class="flex items-center justify-between">
@@ -308,14 +379,73 @@
</div>
</div>
</div>
<div class="flex items-center flex-shrink-0 pl-4">
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
<span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-navy text-white">
{m.person_role_sender()}
</span>
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
{doc.status === 'UPLOADED'
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
{doc.status}
</span>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-4 opacity-40 group-hover:opacity-100 transition-opacity" />
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
</div>
</div>
</a>
</li>
{/each}
</ul>
{/if}
</div>
<!-- Received Documents Section -->
<div>
<div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
<h2 class="text-xl font-serif text-brand-navy">{m.person_received_docs_heading()}</h2>
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
{receivedDocuments.length}
</span>
</div>
{#if receivedDocuments.length === 0}
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
<p class="text-gray-500 font-sans">{m.person_no_received_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
{#each sortedReceivedDocuments as doc}
<li class="group">
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</div>
<div class="min-w-0">
<div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
{doc.title || doc.originalFilename}
</div>
<div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
<span>{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : m.doc_no_date()}</span>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span>{doc.location}</span>
{/if}
</div>
</div>
</div>
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
<span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-mint text-brand-navy">
{m.person_role_receiver()}
</span>
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
{doc.status === 'UPLOADED'
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
{doc.status}
</span>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
</div>
</div>
</a>