familienarchiv/frontend/src/routes/documents/+page.svelte

<script lang="ts">
import { goto } from '$app/navigation';
import { navigating } from '$app/state';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import SearchFilterBar from '../SearchFilterBar.svelte';
import DocumentList from '../DocumentList.svelte';
import Pagination from '$lib/components/Pagination.svelte';
import BulkSelectionBar from '$lib/components/document/BulkSelectionBar.svelte';
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
import * as m from '$lib/paraglide/messages.js';

let { data } = $props();

// Local state initialised from server-returned filter values.
// untrack() prevents infinite reactive loops during initialisation.
let q = $state(untrack(() => data.q || ''));
let qFocused = $state(false);
let from = $state(untrack(() => data.from || ''));
let to = $state(untrack(() => data.to || ''));
let senderId = $state(untrack(() => data.senderId || ''));
let receiverId = $state(untrack(() => data.receiverId || ''));
let tagNames = $state<{ name: string; id?: string; color?: string; parentId?: string }[]>(
	untrack(() => (data.tags || []).map((name: string) => ({ name })))
);
let sort = $state(untrack(() => data.sort || 'DATE'));
let dir = $state(untrack(() => data.dir || 'desc'));
let tagQ = $state(untrack(() => data.tagQ || ''));
let tagOperator = $state<'AND' | 'OR'>(untrack(() => (data.tagOp as 'AND' | 'OR') || 'AND'));

function hasAdvancedFilters() {
	return (
		(data.tags?.length ?? 0) > 0 || !!data.senderId || !!data.receiverId || !!data.from || !!data.to
	);
}

let showAdvanced = $state(untrack(hasAdvancedFilters));

let searchTimer: ReturnType<typeof setTimeout>;

type FilterSnapshot = {
	q: string;
	from: string;
	to: string;
	senderId: string;
	receiverId: string;
	tags: string[];
	sort: string;
	dir: string;
	tagQ: string;
	tagOp: 'AND' | 'OR';
};

/**
 * Builds a URLSearchParams from a filter snapshot. Single source of truth for
 * which params the `/documents` URL understands — add a filter here and both
 * filter-change nav (triggerSearch) and page nav (buildPageHref) will pick it
 * up. `page` is appended only when > 0 so the default page 0 stays out of the
 * URL, keeping the filter-change-resets-to-page-0 behaviour implicit.
 */
function buildSearchParams(filters: FilterSnapshot, targetPage?: number): SvelteURLSearchParams {
	const params = new SvelteURLSearchParams();
	if (filters.q) params.set('q', filters.q);
	if (filters.from) params.set('from', filters.from);
	if (filters.to) params.set('to', filters.to);
	if (filters.senderId) params.set('senderId', filters.senderId);
	if (filters.receiverId) params.set('receiverId', filters.receiverId);
	filters.tags.forEach((tag) => params.append('tag', tag));
	if (filters.sort) params.set('sort', filters.sort);
	if (filters.dir) params.set('dir', filters.dir);
	if (filters.tagQ) params.set('tagQ', filters.tagQ);
	if (filters.tagOp === 'OR') params.set('tagOp', 'OR');
	if (targetPage !== undefined && targetPage > 0) params.set('page', String(targetPage));
	return params;
}

/**
 * Rebuilds the URL from the CURRENT local filter state. `page` is intentionally
 * not carried over — any filter change implicitly resets back to page 0.
 */
function triggerSearch() {
	const params = buildSearchParams({
		q,
		from,
		to,
		senderId,
		receiverId,
		tags: tagNames.map((t) => t.name),
		sort,
		dir,
		tagQ,
		tagOp: tagOperator
	});
	goto(`/documents?${params.toString()}`, { keepFocus: true, noScroll: true });
}

/**
 * Builds the href for a Pagination prev/next link. Preserves every filter
 * param from server `data` and updates `page`. Uses a normal <a href> (not
 * goto) so SvelteKit's default scroll restoration brings the user to the top
 * of the new slice — the expected behaviour for page navigation.
 */
function buildPageHref(targetPage: number): string {
	const params = buildSearchParams(
		{
			q: data.q || '',
			from: data.from || '',
			to: data.to || '',
			senderId: data.senderId || '',
			receiverId: data.receiverId || '',
			tags: data.tags || [],
			sort: data.sort || '',
			dir: data.dir || '',
			tagQ: data.tagQ || '',
			tagOp: (data.tagOp as 'AND' | 'OR') || 'AND'
		},
		targetPage
	);
	const qs = params.toString();
	return qs ? `/documents?${qs}` : '/documents';
}

function handleTextSearch() {
	clearTimeout(searchTimer);
	searchTimer = setTimeout(() => triggerSearch(), 500);
}

function handleImmediateSearch() {
	clearTimeout(searchTimer);
	triggerSearch();
}

// Trigger search reactively when the tag list changes.
let prevTagStr = untrack(() => tagNames.map((t) => t.name).join(','));
$effect(() => {
	const cur = tagNames.map((t) => t.name).join(',');
	if (cur !== prevTagStr) {
		prevTagStr = cur;
		triggerSearch();
	}
});

let editingAll = $state(false);

/**
 * Fast path: replace the current selection with every document matching the
 * active filter (across all pages) and jump to the bulk-edit screen. The
 * /api/documents/ids endpoint is uncapped — chunking happens at PATCH time
 * inside the bulk-edit page's save handler.
 */
async function editAllMatching() {
	if (editingAll) return;
	editingAll = true;
	try {
		const params = buildSearchParams({
			q: data.q || '',
			from: data.from || '',
			to: data.to || '',
			senderId: data.senderId || '',
			receiverId: data.receiverId || '',
			tags: data.tags || [],
			sort: '',
			dir: '',
			tagQ: data.tagQ || '',
			tagOp: (data.tagOp as 'AND' | 'OR') || 'AND'
		});
		params.delete('sort');
		params.delete('dir');
		const res = await fetch(`/api/documents/ids?${params.toString()}`);
		if (!res.ok) {
			editingAll = false;
			return;
		}
		const ids: string[] = await res.json();
		bulkSelectionStore.setAll(ids);
		await goto('/documents/bulk-edit');
	} finally {
		editingAll = false;
	}
}

// Keep local filter state in sync with server data after navigation completes.
// Guard q: skip overwrite while the user is actively typing.
$effect(() => {
	if (!qFocused) q = data.q || '';
	from = data.from || '';
	to = data.to || '';
	senderId = data.senderId || '';
	receiverId = data.receiverId || '';
	tagNames = (data.tags || []).map((name: string) => ({ name }));
	sort = data.sort || 'DATE';
	dir = data.dir || 'desc';
	tagQ = data.tagQ || '';
	tagOperator = (data.tagOp as 'AND' | 'OR') || 'AND';
	if (hasAdvancedFilters()) showAdvanced = true;
});
</script>

<svelte:head>
	<title>{m.nav_documents()} – Familienarchiv</title>
</svelte:head>

<main class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
	<h1 class="sr-only">{m.nav_documents()}</h1>

	<SearchFilterBar
		bind:q={q}
		bind:from={from}
		bind:to={to}
		bind:senderId={senderId}
		bind:receiverId={receiverId}
		bind:tagNames={tagNames}
		bind:showAdvanced={showAdvanced}
		bind:sort={sort}
		bind:dir={dir}
		bind:tagQ={tagQ}
		bind:tagOperator={tagOperator}
		isLoading={navigating.to !== null}
		onSearch={handleTextSearch}
		onSearchImmediate={handleImmediateSearch}
		onfocus={() => (qFocused = true)}
		onblur={() => (qFocused = false)}
	/>

	{#if data.canWrite && data.totalElements > 0}
		<div class="mb-2 flex justify-end">
			<button
				type="button"
				onclick={editAllMatching}
				disabled={editingAll}
				class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink disabled:opacity-50"
				data-testid="bulk-edit-all-x"
			>
				{m.bulk_edit_all_x({ count: data.totalElements })}
			</button>
		</div>
	{/if}

	<DocumentList
		items={data.items}
		total={data.totalElements}
		q={data.q}
		canWrite={data.canWrite}
		error={data.error}
		sort={sort}
	/>

	<Pagination page={data.pageNumber} totalPages={data.totalPages} makeHref={buildPageHref} />
</main>

<BulkSelectionBar canWrite={data.canWrite} />