-
diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index 98cfe42d..b498e820 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -1,129 +1,126 @@
- {#each selectedPersons as person}
-
- {person.firstName} {person.lastName}
-
-
- {/each}
+
- {#if showDropdown && (results.length > 0 || loading)}
-
+ {#each selectedPersons as person (person.id)}
+
+ {person.firstName}
+ {person.lastName}
+
+
+ {/each}
- { updateDropdownPosition(); showDropdown = true; }}
- placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
- class="flex-1 min-w-[120px] border-none p-1 focus:ring-0 text-sm bg-transparent outline-none"
- />
-
+ { updateDropdownPosition(); showDropdown = true; }}
+ placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
+ class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
+ />
+
- {#if loading}
-
- {/if}
+ {#if showDropdown && (results.length > 0 || loading)}
+ {m.comp_multiselect_loading()}
- {:else}
- {#each results as person}
- selectPerson(person)}
- onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
- role="button"
- tabindex="0"
- >
- {person.lastName}, {person.firstName}
-
- {/each}
- {/if}
-
+ {#if loading}
+
+ {/if}
{m.comp_multiselect_loading()}
+ {:else}
+ {#each results as person (person.id)}
+ selectPerson(person)}
+ onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
+ role="button"
+ tabindex="0"
+ >
+ {person.lastName}, {person.firstName}
+
+ {/each}
+ {/if}
+
-
+
-
+
- { updateDropdownPosition(); showDropdown = true; }}
- placeholder={m.comp_typeahead_placeholder()}
- class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2 focus:ring-blue-500 focus:border-blue-500"
- />
+ { updateDropdownPosition(); showDropdown = true; }}
+ placeholder={m.comp_typeahead_placeholder()}
+ class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+ />
- {#if showDropdown && (results.length > 0 || loading)}
-
diff --git a/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts b/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts
index 40be1179..6a1ba331 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts
+++ b/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, it, vi, afterEach } from 'vitest';
import { render } from 'vitest-browser-svelte';
-import { page, userEvent } from 'vitest/browser';
+import { page } from 'vitest/browser';
import PersonTypeahead from './PersonTypeahead.svelte';
const waitForDebounce = () => new Promise((r) => setTimeout(r, 350));
diff --git a/frontend/src/lib/components/TagInput.svelte b/frontend/src/lib/components/TagInput.svelte
index 81ede1a2..fd6728a5 100644
--- a/frontend/src/lib/components/TagInput.svelte
+++ b/frontend/src/lib/components/TagInput.svelte
@@ -1,150 +1,154 @@
- {#if loading}
-
- {/if}
+ {#if showDropdown && (results.length > 0 || loading)}
+ {m.comp_typeahead_loading()}
- {:else}
- {#each results as person}
- selectPerson(person)}
- onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
- role="button"
- tabindex="0"
- >
-
- {/each}
- {/if}
-
-
- {person.lastName}, {person.firstName}
-
-
-
+ {#if loading}
+
+ {/if}
{m.comp_typeahead_loading()}
+ {:else}
+ {#each results as person (person.id)}
+ selectPerson(person)}
+ onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/each}
+ {/if}
+
+
+ {person.lastName}, {person.firstName}
+
+
+
-
-
diff --git a/frontend/src/lib/components/TagInput.svelte.spec.ts b/frontend/src/lib/components/TagInput.svelte.spec.ts
index 5c267a04..8d140aaa 100644
--- a/frontend/src/lib/components/TagInput.svelte.spec.ts
+++ b/frontend/src/lib/components/TagInput.svelte.spec.ts
@@ -32,17 +32,13 @@ afterEach(() => {
describe('TagInput – rendering', () => {
it('shows creation placeholder when allowCreation=true and no tags', async () => {
render(TagInput, { tags: [], allowCreation: true });
- await expect
- .element(page.getByPlaceholder('Schlagworte hinzufügen...'))
- .toBeInTheDocument();
+ await expect.element(page.getByPlaceholder('Schlagworte hinzufügen...')).toBeInTheDocument();
await page.screenshot({ path: 'test-results/screenshots/tag-input-empty.png' });
});
it('shows filter placeholder when allowCreation=false', async () => {
render(TagInput, { tags: [], allowCreation: false });
- await expect
- .element(page.getByPlaceholder('Nach Schlagworten filtern...'))
- .toBeInTheDocument();
+ await expect.element(page.getByPlaceholder('Nach Schlagworten filtern...')).toBeInTheDocument();
});
it('renders existing tags as chips', async () => {
diff --git a/frontend/src/lib/errors.ts b/frontend/src/lib/errors.ts
index de577eb5..e3a16bc5 100644
--- a/frontend/src/lib/errors.ts
+++ b/frontend/src/lib/errors.ts
@@ -5,20 +5,20 @@ import * as m from '$lib/paraglide/messages.js';
* Keep in sync with backend/src/main/java/org/raddatz/familienarchiv/exception/ErrorCode.java
*/
export type ErrorCode =
- | 'DOCUMENT_NOT_FOUND'
- | 'DOCUMENT_NO_FILE'
- | 'FILE_NOT_FOUND'
- | 'FILE_UPLOAD_FAILED'
- | 'USER_NOT_FOUND'
- | 'IMPORT_ALREADY_RUNNING'
- | 'UNAUTHORIZED'
- | 'FORBIDDEN'
- | 'VALIDATION_ERROR'
- | 'INTERNAL_ERROR';
+ | 'DOCUMENT_NOT_FOUND'
+ | 'DOCUMENT_NO_FILE'
+ | 'FILE_NOT_FOUND'
+ | 'FILE_UPLOAD_FAILED'
+ | 'USER_NOT_FOUND'
+ | 'IMPORT_ALREADY_RUNNING'
+ | 'UNAUTHORIZED'
+ | 'FORBIDDEN'
+ | 'VALIDATION_ERROR'
+ | 'INTERNAL_ERROR';
export interface BackendError {
- code: ErrorCode;
- message: string; // English developer message — not shown to users
+ code: ErrorCode;
+ message: string; // English developer message — not shown to users
}
/**
@@ -26,29 +26,39 @@ export interface BackendError {
* Returns null if the body is not valid JSON or does not contain a code field.
*/
export async function parseBackendError(res: Response): Promise
-
- {#each tags as tag, i}
-
- {tag}
-
-
- {/each}
+
+
+ {#if allowCreation}
+
+
+ {#each tags as tag, i (i)}
+
+ {tag}
+
+
+ {/each}
-
-
+
- fetchSuggestions(inputVal)}
- onkeydown={handleKeydown}
- onfocus={() => fetchSuggestions(inputVal)}
- placeholder={tags.length === 0
+
+
- {#if allowCreation}
-
+ fetchSuggestions(inputVal)}
+ onkeydown={handleKeydown}
+ onfocus={() => fetchSuggestions(inputVal)}
+ placeholder={tags.length === 0
? allowCreation
? m.comp_taginput_placeholder_create()
: m.comp_taginput_placeholder_filter()
: ''}
- class="w-full h-full border-none p-1 focus:ring-0 text-sm bg-transparent outline-none"
- />
+ class="h-full w-full border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
+ />
-
- {#if showSuggestions && suggestions.length > 0}
-
- -
- {#each suggestions as suggestion, i}
-
- + {#each suggestions as suggestion, i (i)} +
- addTag(suggestion)} - onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)} - > - {suggestion} - - {/each} -
{m.comp_taginput_create_hint()}
- {/if} + onclick={() => addTag(suggestion)} + onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)} + > + {suggestion} + + {/each} + + {/if} +{m.comp_taginput_create_hint()}
+ {/if}
+ {#if !page.url.pathname.startsWith('/login')}
+
+
+
- {#if !page.url.pathname.startsWith('/login')}
-
-
-
+
- {/if}
-
-
- {@render children()}
-
+
+ {@render children()}
+
diff --git a/frontend/src/routes/+page.server.ts b/frontend/src/routes/+page.server.ts
index 991fbbb9..b9ed284a 100644
--- a/frontend/src/routes/+page.server.ts
+++ b/frontend/src/routes/+page.server.ts
@@ -2,59 +2,60 @@ import { redirect } from '@sveltejs/kit';
import { createApiClient } from '$lib/api.server';
export async function load({ url, fetch }) {
- const q = url.searchParams.get('q') || '';
- const from = url.searchParams.get('from') || '';
- const to = url.searchParams.get('to') || '';
- const senderId = url.searchParams.get('senderId') || '';
- const receiverId = url.searchParams.get('receiverId') || '';
- const tags = url.searchParams.getAll('tag');
+ const q = url.searchParams.get('q') || '';
+ const from = url.searchParams.get('from') || '';
+ const to = url.searchParams.get('to') || '';
+ const senderId = url.searchParams.get('senderId') || '';
+ const receiverId = url.searchParams.get('receiverId') || '';
+ const tags = url.searchParams.getAll('tag');
- const api = createApiClient(fetch);
+ const api = createApiClient(fetch);
- try {
- const [docsResult, personsResult] = await Promise.all([
- api.GET('/api/documents/search', {
- params: {
- query: {
- q: q || undefined,
- from: from || undefined,
- to: to || undefined,
- senderId: senderId || undefined,
- receiverId: receiverId || undefined,
- tag: tags.length ? tags : undefined
- }
- }
- }),
- api.GET('/api/persons')
- ]);
+ try {
+ const [docsResult, personsResult] = await Promise.all([
+ api.GET('/api/documents/search', {
+ params: {
+ query: {
+ q: q || undefined,
+ from: from || undefined,
+ to: to || undefined,
+ senderId: senderId || undefined,
+ receiverId: receiverId || undefined,
+ tag: tags.length ? tags : undefined
+ }
+ }
+ }),
+ api.GET('/api/persons')
+ ]);
- if (docsResult.response.status === 401 || personsResult.response.status === 401) {
- throw redirect(302, '/login');
- }
+ if (docsResult.response.status === 401 || personsResult.response.status === 401) {
+ throw redirect(302, '/login');
+ }
- const documents = docsResult.data ?? [];
- const allPersons: { id: string; firstName: string; lastName: string }[] = personsResult.data ?? [];
+ const documents = docsResult.data ?? [];
+ const allPersons: { id: string; firstName: string; lastName: string }[] =
+ personsResult.data ?? [];
- const senderObj = allPersons.find(p => p.id === senderId);
- const receiverObj = allPersons.find(p => p.id === receiverId);
+ const senderObj = allPersons.find((p) => p.id === senderId);
+ const receiverObj = allPersons.find((p) => p.id === receiverId);
- return {
- documents,
- initialValues: {
- senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}` : '',
- receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}` : ''
- },
- filters: { q, from, to, senderId, receiverId, tags },
- error: null as string | null
- };
- } catch (e) {
- if ((e as { status?: number }).status) throw e;
- console.error('Error loading data:', e);
- return {
- documents: [],
- initialValues: { senderName: '', receiverName: '' },
- filters: { q, from, to, senderId, receiverId, tags },
- error: 'Daten konnten nicht geladen werden.' as string | null
- };
- }
+ return {
+ documents,
+ initialValues: {
+ senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}` : '',
+ receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}` : ''
+ },
+ filters: { q, from, to, senderId, receiverId, tags },
+ error: null as string | null
+ };
+ } catch (e) {
+ if ((e as { status?: number }).status) throw e;
+ console.error('Error loading data:', e);
+ return {
+ documents: [],
+ initialValues: { senderName: '', receiverName: '' },
+ filters: { q, from, to, senderId, receiverId, tags },
+ error: 'Daten konnten nicht geladen werden.' as string | null
+ };
+ }
}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 55c1be94..d595f52f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -4,6 +4,7 @@ import { goto } from '$app/navigation';
import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
import { untrack } from 'svelte';
+import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
@@ -28,7 +29,7 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
function triggerSearch() {
- const params = new URLSearchParams();
+ const params = new SvelteURLSearchParams();
if (q) params.set('q', q);
if (from) params.set('from', from);
@@ -88,7 +89,12 @@ $effect(() => {
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
+
-
+
+
+
+ {/if}
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
+ ? 'rounded bg-brand-purple/15 text-brand-navy'
+ : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
+ >
+ {m.nav_admin()}
+
+ {/if}
+
+
-
-
+
+
- {#each locales as locale}
-
+ >
+ {locale}
+
+ {/each}
+
-
+
@@ -97,7 +103,12 @@ $effect(() => {
onclick={() => (showAdvanced = !showAdvanced)}
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
>
-
+
{m.docs_btn_filter()}
@@ -107,7 +118,12 @@ $effect(() => {
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
title={m.docs_btn_reset_title()}
>
-
+
+ 
+ 
+ 
- {m.docs_btn_new()}
- 
+ 
+