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

feat(dashboard): redesign needs-metadata with row anatomy + totalCount

Browse Source 
Switches to two props — topDocs (max 5, capped by caller) and totalCount —
so the footer link can surface "Alle 12 anzeigen →" even when only 5
items are shown. Each row gets a generic document icon, title, relative
upload time and a chevron, wrapped in a single <a> per the issue spec.

Still returns null when topDocs is empty, keeping the empty dashboard
clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-20 21:34:23 +02:00
parent 727569aa32
commit 01e72611f0
2 changed files with 83 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/lib/components/DashboardNeedsMetadata.svelte
View File

@@ -1,37 +1,73 @@
<script lang="ts"> <script lang="ts">
import * as m from '$lib/paraglide/messages.js'; import * as m from '$lib/paraglide/messages.js';
import { relativeTimeDe } from '$lib/relativeTime';
type IncompleteDocumentDTO = { type IncompleteDoc = {
id: string; id: string;
title: string; title: string;
uploadedAt: string;
}; };
interface Props { interface Props {
incompleteDocs: IncompleteDocumentDTO[]; topDocs: IncompleteDoc[];
totalCount: number;
} }
let { incompleteDocs }: Props = $props(); let { topDocs, totalCount }: Props = $props();
const showFooter = $derived(totalCount > 5);
</script> </script>
{#if incompleteDocs.length > 0} {#if topDocs.length > 0}
<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6"> <div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"> <h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.dashboard_needs_metadata_heading()} {m.dashboard_needs_metadata_heading()}
</h2> </h2>
{#each incompleteDocs as doc (doc.id)} <ul class="divide-y divide-line">
<div class="flex items-center border-b border-line py-2 last:border-0"> {#each topDocs as doc (doc.id)}
<li>
<a
href="/enrich/{doc.id}"
class="group flex items-center gap-3 py-3 text-ink hover:bg-accent-bg/40"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0 opacity-50 group-hover:opacity-80"
/>
<div class="min-w-0 flex-1">
<div class="truncate font-serif text-base text-ink group-hover:underline">
{doc.title}
</div>
<div class="font-sans text-xs text-ink-3">
{relativeTimeDe(new Date(doc.uploadedAt))}
</div>
</div>
<svg
class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
{/each}
</ul>
{#if showFooter}
<div class="mt-4">
<a <a
href="/enrich/{doc.id}" href="/enrich"
class="font-serif text-lg text-ink hover:text-ink-2 hover:underline" class="font-sans text-sm font-medium text-ink-2 hover:text-ink hover:underline"
> >
{doc.title} {m.dashboard_needs_metadata_show_all_count({ count: totalCount })}
</a> </a>
</div> </div>
{/each} {/if}
<div class="mt-4">
<a href="/enrich" class="font-sans text-sm text-ink-2 hover:text-ink hover:underline"
>{m.dashboard_needs_metadata_show_all()}</a
>
</div>
</div> </div>
{/if} {/if}

56
frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
View File

@@ -6,44 +6,52 @@ import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
afterEach(cleanup); afterEach(cleanup);
type IncompleteDocumentDTO = { type IncompleteDoc = { id: string; title: string; uploadedAt: string };
id: string;
title: string;
};
function makeDoc(id: string, title: string): IncompleteDocumentDTO { function makeDoc(id: string, title: string, uploadedAt = '2026-04-20T12:00:00'): IncompleteDoc {
return { id, title }; return { id, title, uploadedAt };
} }
describe('DashboardNeedsMetadata', () => { describe('DashboardNeedsMetadata', () => {
it('renders nothing when incompleteDocs is empty', async () => { it('renders nothing when topDocs is empty', async () => {
render(DashboardNeedsMetadata, { incompleteDocs: [] }); render(DashboardNeedsMetadata, { topDocs: [], totalCount: 0 });
const widget = page.getByTestId('dashboard-needs-metadata'); const widget = page.getByTestId('dashboard-needs-metadata');
await expect.element(widget).not.toBeInTheDocument(); await expect.element(widget).not.toBeInTheDocument();
}); });
it('shows the widget when incompleteDocs are present', async () => { it('shows the widget when topDocs is present', async () => {
render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Taufschein')] }); render(DashboardNeedsMetadata, { topDocs: [makeDoc('d1', 'Taufschein')], totalCount: 1 });
const widget = page.getByTestId('dashboard-needs-metadata'); await expect.element(page.getByTestId('dashboard-needs-metadata')).toBeInTheDocument();
await expect.element(widget).toBeInTheDocument();
}); });
it('renders a link to /enrich/{id} for each document', async () => { it('renders one link per row pointing at /enrich/{id}', async () => {
const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')]; const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')];
render(DashboardNeedsMetadata, { incompleteDocs: docs }); render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 2 });
const links = page.getByRole('link'); await expect
await expect.element(links.nth(0)).toHaveAttribute('href', '/enrich/d1'); .element(page.getByRole('link', { name: /Taufschein/ }))
await expect.element(links.nth(1)).toHaveAttribute('href', '/enrich/d2'); .toHaveAttribute('href', '/enrich/d1');
await expect
.element(page.getByRole('link', { name: /Heiratsurkunde/ }))
.toHaveAttribute('href', '/enrich/d2');
}); });
it('shows the document title in each row', async () => { it('hides the footer link when totalCount is 5 or fewer', async () => {
render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Sterbeurkunde 1930')] }); const docs = Array.from({ length: 5 }, (_, i) => makeDoc(`d${i}`, `Dok ${i}`));
await expect.element(page.getByText('Sterbeurkunde 1930')).toBeInTheDocument(); render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 5 });
const footer = page.getByRole('link', { name: /Alle/i });
await expect.element(footer).not.toBeInTheDocument();
}); });
it('shows a "Alle anzeigen" link to /enrich', async () => { it('shows the footer link with totalCount when totalCount > 5', async () => {
render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Dok')] }); const docs = Array.from({ length: 5 }, (_, i) => makeDoc(`d${i}`, `Dok ${i}`));
const allLink = page.getByRole('link', { name: /Alle anzeigen/i }); render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 12 });
await expect.element(allLink).toHaveAttribute('href', '/enrich'); const footer = page.getByRole('link', { name: /12/ });
await expect.element(footer).toHaveAttribute('href', '/enrich');
});
it('uses totalCount in the footer even when topDocs has fewer items', async () => {
const docs = [makeDoc('d1', 'Only one')];
render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 50 });
await expect.element(page.getByRole('link', { name: /50/ })).toBeInTheDocument();
}); });
}); });