collection management and type change

backend/server/adventures/views.py

@@ -120,7 +120,7 @@ class AdventureViewSet(viewsets.ModelViewSet):
         #         Q(is_public=True) | Q(user_id=request.user.id), collection=None
         #     )
         queryset = Adventure.objects.filter(
-            Q(is_public=True) | Q(user_id=request.user.id)
+            Q(user_id=request.user.id)
         )
         
         queryset = self.apply_sorting(queryset)
@@ -167,6 +167,29 @@ class CollectionViewSet(viewsets.ModelViewSet):
 
         return queryset.order_by(ordering)
     
+    def list(self, request, *args, **kwargs):
+        # make sure the user is authenticated
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=400)
+        queryset = self.get_queryset()
+        queryset = self.apply_sorting(queryset)
+        collections = self.paginate_and_respond(queryset, request)
+        return collections
+    
+    @action(detail=False, methods=['get'])
+    def all(self, request):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=400)
+       
+        queryset = Collection.objects.filter(
+            Q(user_id=request.user.id)
+        )
+        
+        queryset = self.apply_sorting(queryset)
+        serializer = self.get_serializer(queryset, many=True)
+       
+        return Response(serializer.data)
+    
     # this make the is_public field of the collection cascade to the adventures
     @transaction.atomic
     def update(self, request, *args, **kwargs):

frontend/src/lib/components/AdventureCard.svelte

@@ -11,9 +11,16 @@
 	import MapMarker from '~icons/mdi/map-marker';
 	import { addToast } from '$lib/toasts';
 	import Link from '~icons/mdi/link-variant';
+	import CheckBold from '~icons/mdi/check-bold';
+	import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square';
+	import LinkVariantRemove from '~icons/mdi/link-variant-remove';
+	import Plus from '~icons/mdi/plus';
+	import CollectionLink from './CollectionLink.svelte';
 
 	export let type: string;
 
+	let isCollectionModalOpen: boolean = false;
+
 	export let adventure: Adventure;
 
 	async function deleteAdventure() {
@@ -32,6 +39,61 @@
 		}
 	}
 
+	async function removeFromCollection() {
+		let res = await fetch(`/api/adventures/${adventure.id}`, {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ collection: null })
+		});
+		if (res.ok) {
+			console.log('Adventure removed from collection');
+			addToast('info', 'Adventure removed from collection successfully!');
+			dispatch('delete', adventure.id);
+		} else {
+			console.log('Error removing adventure from collection');
+		}
+	}
+
+	function changeType(newType: string) {
+		return async () => {
+			let res = await fetch(`/api/adventures/${adventure.id}/`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ type: newType })
+			});
+			if (res.ok) {
+				console.log('Adventure type changed');
+				addToast('info', 'Adventure type changed successfully!');
+				adventure.type = newType;
+			} else {
+				console.log('Error changing adventure type');
+			}
+		};
+	}
+
+	async function linkCollection(event: CustomEvent<number>) {
+		let collectionId = event.detail;
+		let res = await fetch(`/api/adventures/${adventure.id}`, {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ collection: collectionId })
+		});
+		if (res.ok) {
+			console.log('Adventure linked to collection');
+			addToast('info', 'Adventure linked to collection successfully!');
+			isCollectionModalOpen = false;
+			dispatch('delete', adventure.id);
+		} else {
+			console.log('Error linking adventure to collection');
+		}
+	}
+
 	function editAdventure() {
 		dispatch('edit', adventure);
 	}
@@ -41,6 +103,10 @@
 	}
 </script>
 
+{#if isCollectionModalOpen}
+	<CollectionLink on:link={linkCollection} on:close={() => (isCollectionModalOpen = false)} />
+{/if}
+
 <div
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
@@ -61,6 +127,11 @@
 		<h2 class="card-title break-words text-wrap">
 			{adventure.name}
 		</h2>
+		{#if adventure.type == 'visited'}
+			<div class="badge badge-primary">Visited</div>
+		{:else}
+			<div class="badge badge-secondary">Planned</div>
+		{/if}
 		{#if adventure.location && adventure.location !== ''}
 			<div class="inline-flex items-center">
 				<MapMarker class="w-5 h-5 mr-1" />
@@ -108,6 +179,27 @@
 			{#if type == 'link'}
 				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
 			{/if}
+			{#if adventure.type == 'visited'}
+				<button class="btn btn-secondary" on:click={changeType('planned')}
+					><FormatListBulletedSquare class="w-6 h-6" /></button
+				>
+			{/if}
+
+			{#if adventure.type == 'planned'}
+				<button class="btn btn-secondary" on:click={changeType('visited')}
+					><CheckBold class="w-6 h-6" /></button
+				>
+			{/if}
+			{#if adventure.collection}
+				<button class="btn btn-secondary" on:click={removeFromCollection}
+					><LinkVariantRemove class="w-6 h-6" /></button
+				>
+			{/if}
+			{#if !adventure.collection}
+				<button class="btn btn-secondary" on:click={() => (isCollectionModalOpen = true)}
+					><Plus class="w-6 h-6" /></button
+				>
+			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/components/CollectionCard.svelte

@@ -9,8 +9,13 @@
 	import { goto } from '$app/navigation';
 	import type { Collection } from '$lib/types';
 	import { addToast } from '$lib/toasts';
+
+	import Plus from '~icons/mdi/plus';
+
 	const dispatch = createEventDispatcher();
 
+	export let type: String;
+
 	//   export let type: String;
 
 	function editAdventure() {
@@ -43,15 +48,22 @@
 		<h2 class="card-title overflow-ellipsis">{collection.name}</h2>
 		<p>{collection.adventures.length} Adventures</p>
 		<div class="card-actions justify-end">
-			<button on:click={deleteCollection} class="btn btn-secondary"
+			{#if type != 'link'}
-				><TrashCanOutline class="w-5 h-5 mr-1" /></button
+				<button on:click={deleteCollection} class="btn btn-secondary"
-			>
+					><TrashCanOutline class="w-5 h-5 mr-1" /></button
-			<button class="btn btn-primary" on:click={editAdventure}>
+				>
-				<FileDocumentEdit class="w-6 h-6" />
+				<button class="btn btn-primary" on:click={editAdventure}>
-			</button>
+					<FileDocumentEdit class="w-6 h-6" />
-			<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
+				</button>
-				><Launch class="w-5 h-5 mr-1" /></button
+				<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
-			>
+					><Launch class="w-5 h-5 mr-1" /></button
+				>
+			{/if}
+			{#if type == 'link'}
+				<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
+					<Plus class="w-5 h-5 mr-1" />
+				</button>
+			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/components/CollectionLink.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Adventure, Collection } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	import CollectionCard from './CollectionCard.svelte';
+	let modal: HTMLDialogElement;
+
+	let collections: Collection[] = [];
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+		let res = await fetch(`/api/collections/all/`, {
+			method: 'GET'
+		});
+
+		let result = await res.json();
+		collections = result as Collection[];
+
+		if (result.type === 'success' && result.data) {
+			collections = result.data.adventures as Collection[];
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function link(event: CustomEvent<number>) {
+		dispatch('link', event.detail);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box w-11/12 max-w-5xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
+		<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+			{#each collections as collection}
+				<CollectionCard {collection} type="link" on:link={link} />
+			{/each}
+			{#if collections.length === 0}
+				<p class="text-center text-lg">No collections found to add this adventure to.</p>
+			{/if}
+		</div>
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/routes/api/[...path]/+server.ts

@@ -12,11 +12,23 @@ export async function POST({ url, params, request, fetch, cookies }) {
 	return handleRequest(url, params, request, fetch, cookies);
 }
 
+export async function PATCH({ url, params, request, fetch, cookies }) {
+	return handleRequest(url, params, request, fetch, cookies);
+}
+
+export async function PUT({ url, params, request, fetch, cookies }) {
+	return handleRequest(url, params, request, fetch, cookies);
+}
+
+export async function DELETE({ url, params, request, fetch, cookies }) {
+	return handleRequest(url, params, request, fetch, cookies);
+}
+
 // Implement other HTTP methods as needed (PUT, DELETE, etc.)
 
 async function handleRequest(url: any, params: any, request: any, fetch: any, cookies: any) {
 	const path = params.path;
-	const targetUrl = `${endpoint}/api/${path}${url.search}&format=json`;
+	const targetUrl = `${endpoint}/api/${path}${url.search}/`;
 
 	const headers = new Headers(request.headers);