feat(search): wire sort/dir/tagQ state into page.svelte and URL params
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,6 +19,9 @@ let to = $state(untrack(() => data.filters?.to || ''));
|
|||||||
let senderId = $state(untrack(() => data.filters?.senderId || ''));
|
let senderId = $state(untrack(() => data.filters?.senderId || ''));
|
||||||
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
|
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
|
||||||
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
|
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
|
||||||
|
let sort = $state(untrack(() => data.filters?.sort || 'DATE'));
|
||||||
|
let dir = $state(untrack(() => data.filters?.dir || 'desc'));
|
||||||
|
let tagQ = $state(untrack(() => data.filters?.tagQ || ''));
|
||||||
|
|
||||||
const hasAdvancedFilters = (filters: typeof data.filters) =>
|
const hasAdvancedFilters = (filters: typeof data.filters) =>
|
||||||
(filters?.tags?.length ?? 0) > 0 ||
|
(filters?.tags?.length ?? 0) > 0 ||
|
||||||
@@ -39,6 +42,9 @@ function triggerSearch() {
|
|||||||
if (senderId) params.set('senderId', senderId);
|
if (senderId) params.set('senderId', senderId);
|
||||||
if (receiverId) params.set('receiverId', receiverId);
|
if (receiverId) params.set('receiverId', receiverId);
|
||||||
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
|
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
|
||||||
|
if (sort) params.set('sort', sort);
|
||||||
|
if (dir) params.set('dir', dir);
|
||||||
|
if (tagQ) params.set('tagQ', tagQ);
|
||||||
goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
|
goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -66,6 +72,9 @@ $effect(() => {
|
|||||||
senderId = data.filters?.senderId || '';
|
senderId = data.filters?.senderId || '';
|
||||||
receiverId = data.filters?.receiverId || '';
|
receiverId = data.filters?.receiverId || '';
|
||||||
tagNames = data.filters?.tags || [];
|
tagNames = data.filters?.tags || [];
|
||||||
|
sort = data.filters?.sort || 'DATE';
|
||||||
|
dir = data.filters?.dir || 'desc';
|
||||||
|
tagQ = data.filters?.tagQ || '';
|
||||||
if (hasAdvancedFilters(data.filters)) showAdvanced = true;
|
if (hasAdvancedFilters(data.filters)) showAdvanced = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -88,6 +97,9 @@ const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?
|
|||||||
bind:receiverId={receiverId}
|
bind:receiverId={receiverId}
|
||||||
bind:tagNames={tagNames}
|
bind:tagNames={tagNames}
|
||||||
bind:showAdvanced={showAdvanced}
|
bind:showAdvanced={showAdvanced}
|
||||||
|
bind:sort={sort}
|
||||||
|
bind:dir={dir}
|
||||||
|
bind:tagQ={tagQ}
|
||||||
initialSenderName={data.initialValues?.senderName}
|
initialSenderName={data.initialValues?.senderName}
|
||||||
initialReceiverName={data.initialValues?.receiverName}
|
initialReceiverName={data.initialValues?.receiverName}
|
||||||
onSearch={handleTextSearch}
|
onSearch={handleTextSearch}
|
||||||
|
|||||||
@@ -239,3 +239,27 @@ describe('Home page – error state', () => {
|
|||||||
await page.screenshot({ path: 'test-results/screenshots/home-error.png' });
|
await page.screenshot({ path: 'test-results/screenshots/home-error.png' });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ─── Sort controls ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('Home page – sort controls', () => {
|
||||||
|
it('pre-fills sort from filters.sort', async () => {
|
||||||
|
const data = {
|
||||||
|
...emptyData,
|
||||||
|
filters: { ...emptyData.filters, sort: 'TITLE', dir: 'asc', tagQ: '' }
|
||||||
|
};
|
||||||
|
render(Page, { data });
|
||||||
|
const select = page.getByRole('combobox');
|
||||||
|
await expect.element(select).toHaveValue('TITLE');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders direction toggle with asc indicator when dir is asc', async () => {
|
||||||
|
const data = {
|
||||||
|
...emptyData,
|
||||||
|
filters: { ...emptyData.filters, sort: 'DATE', dir: 'asc', tagQ: '' }
|
||||||
|
};
|
||||||
|
render(Page, { data });
|
||||||
|
const btn = page.getByRole('button', { name: /aufsteigend/i });
|
||||||
|
await expect.element(btn).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user