fix(documents): sync filter display state with URL on navigation
Some checks failed
CI / Unit & Component Tests (push) Failing after 4m8s
CI / OCR Service Tests (push) Successful in 57s
CI / Backend Unit Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 4m2s
CI / OCR Service Tests (pull_request) Successful in 44s
CI / Backend Unit Tests (pull_request) Failing after 3m22s

Three root causes prevented filters from reflecting the URL after SvelteKit
client-side navigation:

1. +page.server.ts now resolves sender/receiver display names in parallel with
   the document search (UUID validation + silent 404 drop), so initialSenderName
   / initialReceiverName land in server data ready for the UI to use.

2. +page.svelte passes initialSenderName, initialReceiverName, and navKey
   (incremented via untrack on every navigation) down to SearchFilterBar.
   The untrack() prevents the effect from re-running due to its own navKey write.

3. SearchFilterBar forwards navKey as resetKey to each PersonTypeahead, which
   already had a void resetKey guard added in the previous commit.

Together these ensure that after navigating to /documents?senderId=<uuid> the
typeahead shows the person's display name, and clicking × reset clears it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-09 10:29:19 +02:00
parent a58f22f663
commit e8cabf4390
6 changed files with 142 additions and 18 deletions

View File

@@ -3,6 +3,20 @@ import { createApiClient } from '$lib/shared/api.server';
import { getErrorMessage } from '$lib/shared/errors';
import type { components } from '$lib/generated/api';
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
async function resolvePersonName(id: string, fetch: typeof globalThis.fetch): Promise<string> {
if (!UUID_RE.test(id)) return '';
try {
const res = await fetch(`/api/persons/${id}`);
if (!res.ok) return '';
const person = await res.json();
return person.displayName ?? '';
} catch {
return '';
}
}
type DocumentSearchItem = components['schemas']['DocumentSearchItem'];
const VALID_SORTS = ['DATE', 'TITLE', 'SENDER', 'RECEIVER', 'UPLOAD_DATE', 'RELEVANCE'] as const;
@@ -34,25 +48,30 @@ export async function load({ url, fetch }) {
const api = createApiClient(fetch);
let result;
let initialSenderName = '';
let initialReceiverName = '';
try {
result = await 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,
tagQ: tagQ && !tags.length ? tagQ : undefined,
tagOp: tagOp === 'OR' ? 'OR' : undefined,
sort,
dir: dir || undefined,
page,
size: PAGE_SIZE
[result, [initialSenderName, initialReceiverName]] = 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,
tagQ: tagQ && !tags.length ? tagQ : undefined,
tagOp: tagOp === 'OR' ? 'OR' : undefined,
sort,
dir: dir || undefined,
page,
size: PAGE_SIZE
}
}
}
});
}),
Promise.all([resolvePersonName(senderId, fetch), resolvePersonName(receiverId, fetch)])
]);
} catch {
return {
items: [] as DocumentSearchItem[],
@@ -65,6 +84,8 @@ export async function load({ url, fetch }) {
to,
senderId,
receiverId,
initialSenderName: '',
initialReceiverName: '',
tags,
sort,
dir,
@@ -94,6 +115,8 @@ export async function load({ url, fetch }) {
to,
senderId,
receiverId,
initialSenderName,
initialReceiverName,
tags,
sort,
dir,