search api

frontend/src/routes/adventures/+page.svelte

@@ -193,6 +193,44 @@
 					{/each}
 				</div>
 			{/if}
+			{#if currentView == 'table'}
+				<table class="table table-compact w-full">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Date</th>
+							<th>Rating</th>
+							<th>Type</th>
+							<th>Actions</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each adventures as adventure}
+							<tr>
+								<td>{adventure.name}</td>
+								<td>{adventure.date}</td>
+								<td>{adventure.rating}</td>
+								<td>{adventure.type}</td>
+								<td>
+									<button
+										class="btn btn-sm btn-primary"
+										on:click={() => editAdventure(new CustomEvent('edit', { detail: adventure }))}
+									>
+										Edit
+									</button>
+									<button
+										class="btn btn-sm btn-error"
+										on:click={() =>
+											deleteAdventure(new CustomEvent('delete', { detail: adventure.id }))}
+									>
+										Delete
+									</button>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
 			<div class="join flex items-center justify-center mt-4">
 				{#if next || previous}
 					<div class="join">

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

@@ -0,0 +1,39 @@
+import type { Adventure } from '$lib/types';
+import type { PageServerLoad } from './$types';
+
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	// get url param query
+	const query = event.url.searchParams.get('query');
+
+	if (!query) {
+		return { data: [] };
+	}
+
+	let res = await fetch(`${serverEndpoint}/api/adventures/search/?query=${query}`, {
+		headers: {
+			'Content-Type': 'application/json',
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+
+	if (res.ok) {
+		let data = await res.json();
+		console.log('Search data:', data);
+
+		return {
+			props: {
+				adventures: data.results as Adventure[],
+				nextPage: data.next,
+				prevPage: data.previous,
+				total: data.count,
+				query
+			}
+		};
+	} else {
+		console.error('Failed to fetch search data');
+		return { data: [] };
+	}
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
+	import type { Adventure } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	console.log(data);
+	let adventures: Adventure[] = [];
+	if (data.props) {
+		adventures = data.props.adventures;
+	}
+</script>
+
+{#if adventures.length === 0}
+	<NotFound />
+{:else}
+	{#each adventures as adventure}
+		<AdventureCard type={adventure.type} {adventure} />
+	{/each}
+{/if}