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

refactor(frontend): apply formatDate utility and fix derived/error handling
Some checks failed
CI / Unit & Component Tests (push) Failing after 1m37s
Details
CI / Backend Unit Tests (push) Successful in 2m2s
Details
CI / E2E Tests (push) Has started running
Details

Browse Source 
- Replace 5 inline Intl.DateTimeFormat blocks with formatDate() across
  home, conversations, persons detail, and document detail pages
- Fix coCorrespondents: $derived(() => ...) → $derived.by(...) —
  the old form typed the value as a function, breaking template call sites
- Persons list: throw error on API failure instead of silently returning []

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-20 12:11:42 +01:00
parent 4771832492
commit 11f6f9e2a2
5 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/routes/+page.svelte
View File

@@ -5,6 +5,7 @@ import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
let { data } = $props();
@@ -240,7 +241,7 @@ $effect(() => {
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
<div class="flex items-center">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
</div>
{#if doc.location}
<div class="flex items-center">

3
frontend/src/routes/conversations/+page.svelte
View File

@@ -3,6 +3,7 @@
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
let { data } = $props();
@@ -231,7 +232,7 @@
: 'text-gray-500'}"
>
<span class="flex items-center">
{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
</span>
{#if doc.location}
<span class="flex items-center">

3
frontend/src/routes/documents/[id]/+page.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
let { data } = $props();
@@ -119,7 +120,7 @@
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
</span>
<span class="text-xs font-sans text-gray-500">{m.doc_label_document_date()}</span>
</div>

10
frontend/src/routes/persons/+page.server.ts
View File

@@ -1,12 +1,18 @@
import { error } from '@sveltejs/kit';
import { createApiClient } from '$lib/api.server';
import { getErrorMessage } from '$lib/errors';
export async function load({ url, fetch }) {
const q = url.searchParams.get('q') || '';
const api = createApiClient(fetch);
const { data } = await api.GET('/api/persons', {
const result = await api.GET('/api/persons', {
params: { query: { q: q || undefined } }
});
return { persons: data ?? [], q };
if (!result.response.ok) {
throw error(result.response.status, getErrorMessage(undefined));
}
return { persons: result.data!, q };
}

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

@@ -3,6 +3,7 @@
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { m } from '$lib/paraglide/messages.js';
import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
import { formatDate } from '$lib/utils/date';
let { data, form } = $props();
@@ -38,7 +39,7 @@
const sentYearRange = $derived(yearRange(sentDocuments));
const receivedYearRange = $derived(yearRange(receivedDocuments));
const coCorrespondents = $derived(() => {
const coCorrespondents = $derived.by(() => {
const freq = new Map<string, { id: string; name: string; count: number }>();
for (const doc of sentDocuments) {
@@ -312,11 +313,11 @@
{/if}
<!-- Co-Correspondents Section -->
{#if coCorrespondents().length > 0}
{#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}
{#each coCorrespondents as c}
<a href="/conversations?senderId={person.id}&receiverId={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}
@@ -366,7 +367,7 @@
{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>
<span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span>{doc.location}</span>
@@ -438,7 +439,7 @@
{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>
<span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span>{doc.location}</span>