Search options

packages/backend/src/services/SearchService.ts

@@ -35,7 +35,6 @@ export class SearchService {
 
     public async searchEmails(dto: SearchQuery): Promise<SearchResult> {
         const { query, filters, page = 1, limit = 10, matchingStrategy = 'last' } = dto;
-        console.log('matchingStrategy ', matchingStrategy);
         const index = await this.getIndex<EmailDocument>('emails');
 
         const searchParams: SearchParams = {

packages/frontend/src/routes/dashboard/search/+page.server.ts

@@ -1,7 +1,6 @@
-import type { PageServerLoad, Actions, RequestEvent } from './$types';
+import type { PageServerLoad, RequestEvent } from './$types';
 import { api } from '$lib/server/api';
 import type { SearchResult } from '@open-archiver/types';
-import { redirect } from '@sveltejs/kit';
 
 import type { MatchingStrategy } from '@open-archiver/types';
 
@@ -49,27 +48,3 @@ export const load: PageServerLoad = async (event) => {
         'last') as MatchingStrategy;
     return performSearch(keywords, page, matchingStrategy, event);
 };
-
-export const actions: Actions = {
-    default: async (event) => {
-        const formData = await event.request.formData();
-        const keywords = formData.get('keywords') as string;
-        const matchingStrategy = formData.get('matchingStrategy') as MatchingStrategy;
-
-        if (keywords) {
-            throw redirect(
-                303,
-                `/dashboard/search?keywords=${encodeURIComponent(
-                    keywords
-                )}&page=1&matchingStrategy=${matchingStrategy}`
-            );
-        }
-
-        return {
-            searchResult: null,
-            keywords: '',
-            page: 1,
-            matchingStrategy: 'last'
-        };
-    }
-};

packages/frontend/src/routes/dashboard/search/+page.svelte

@@ -11,15 +11,16 @@
 		CardDescription
 	} from '$lib/components/ui/card';
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { MatchingStrategy } from '@open-archiver/types';
 
 	let { data }: { data: PageData } = $props();
 	let searchResult = $derived(data.searchResult);
-	let keywords = $derived(data.keywords);
+	let keywords = $state(data.keywords || '');
 	let page = $derived(data.page);
 	let error = $derived(data.error);
-	let matchingStrategy: MatchingStrategy = $derived(
+	let matchingStrategy: MatchingStrategy = $state(
 		(data.matchingStrategy as MatchingStrategy) || 'last'
 	);
 
@@ -57,6 +58,14 @@
 		};
 	}
 
+	function handleSearch() {
+		const params = new URLSearchParams();
+		params.set('keywords', keywords);
+		params.set('page', '1');
+		params.set('matchingStrategy', matchingStrategy);
+		goto(`/dashboard/search?${params.toString()}`, { keepFocus: true });
+	}
+
 	function getHighlightedSnippets(text: string | undefined, snippetLength = 80): string[] {
 		if (!text || !text.includes('<em>')) {
 			return [];
@@ -163,30 +172,32 @@
 <div class="container mx-auto p-4 md:p-8">
 	<h1 class="mb-4 text-2xl font-bold">Email Search</h1>
 
-	<form method="POST" action="/dashboard/search?action=search" class="mb-8 flex flex-col space-y-2">
+	<form onsubmit={handleSearch} class="mb-8 flex flex-col space-y-2">
 		<div class="flex items-center gap-2">
 			<Input
 				type="search"
 				name="keywords"
 				placeholder="Search by keyword, sender, recipient..."
 				class=" h-12 flex-grow"
-				value={keywords}
+				bind:value={keywords}
 			/>
-
 			<Button type="submit" class="h-12 cursor-pointer">Search</Button>
 		</div>
-		<Select.Root type="single" name="matchingStrategy" bind:value={matchingStrategy}>
-			<Select.Trigger class=" w-[180px] cursor-pointer">
-				{triggerContent}
-			</Select.Trigger>
-			<Select.Content>
-				{#each strategies as strategy (strategy.value)}
-					<Select.Item value={strategy.value} label={strategy.label} class="cursor-pointer">
-						{strategy.label}
-					</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
+		<div class="mt-1 text-xs font-medium">Search options</div>
+		<div class="flex items-center gap-2">
+			<Select.Root type="single" name="matchingStrategy" bind:value={matchingStrategy}>
+				<Select.Trigger class=" w-[180px] cursor-pointer">
+					{triggerContent}
+				</Select.Trigger>
+				<Select.Content>
+					{#each strategies as strategy (strategy.value)}
+						<Select.Item value={strategy.value} label={strategy.label} class="cursor-pointer">
+							{strategy.label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
 	</form>
 
 	{#if error}