search api

backend/server/adventures/views.py

@@ -140,6 +140,17 @@ class AdventureViewSet(viewsets.ModelViewSet):
        
         return Response(serializer.data)
     
+    @action(detail=False, methods=['get'])
+    def search(self, request):
+        query = self.request.query_params.get('query', '')
+        queryset = Adventure.objects.filter(
+    (Q(name__icontains=query) | Q(description__icontains=query) | Q(location__icontains=query) | Q(activity_types__icontains=query)) &
+    (Q(user_id=request.user.id) | Q(is_public=True))
+)
+        queryset = self.apply_sorting(queryset)
+        adventures = self.paginate_and_respond(queryset, request)
+        return adventures
+
     def paginate_and_respond(self, queryset, request):
         paginator = self.pagination_class()
         page = paginator.paginate_queryset(queryset, request)

docker-compose.yml

@@ -2,8 +2,8 @@ version: "3.9"
 
 services:
   web:
-    #build: ./frontend/
-    image: ghcr.io/seanmorley15/adventurelog-frontend:latest
+    build: ./frontend/
+    #image: ghcr.io/seanmorley15/adventurelog-frontend:latest
     environment:
       - PUBLIC_SERVER_URL=http://server:8000
       - ORIGIN=http://localhost:8080
@@ -23,8 +23,8 @@ services:
       - postgres_data:/var/lib/postgresql/data/
 
   server:
-    #build: ./backend/
-    image: ghcr.io/seanmorley15/adventurelog-backend:latest
+    build: ./backend/
+    #image: ghcr.io/seanmorley15/adventurelog-backend:latest
     environment:
       - PGHOST=db
       - PGDATABASE=database

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}