Archive Collections

frontend/src/lib/components/CollectionCard.svelte

@@ -5,12 +5,15 @@
 	import TrashCanOutline from '~icons/mdi/trash-can-outline';
 
 	import FileDocumentEdit from '~icons/mdi/file-document-edit';
+	import ArchiveArrowDown from '~icons/mdi/archive-arrow-down';
+	import ArchiveArrowUp from '~icons/mdi/archive-arrow-up';
 
 	import { goto } from '$app/navigation';
 	import type { Collection } from '$lib/types';
 	import { addToast } from '$lib/toasts';
 
 	import Plus from '~icons/mdi/plus';
+	import { json } from '@sveltejs/kit';
 
 	const dispatch = createEventDispatcher();
 
@@ -22,6 +25,24 @@
 		dispatch('edit', collection);
 	}
 
+	async function archiveCollection(is_archived: boolean) {
+		console.log(JSON.stringify({ is_archived: is_archived }));
+		let res = await fetch(`/api/collections/${collection.id}/`, {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ is_archived: is_archived })
+		});
+		if (res.ok) {
+			console.log(`Collection ${is_archived ? 'archived' : 'unarchived'}`);
+			addToast('info', `Adventure ${is_archived ? 'archived' : 'unarchived'} successfully!`);
+			dispatch('delete', collection.id);
+		} else {
+			console.log('Error archiving adventure');
+		}
+	}
+
 	export let collection: Collection;
 
 	async function deleteCollection() {
@@ -61,15 +82,22 @@
 				) + 1}{' '}
 				days
 			</p>{/if}
-		<div class="badge badge-neutral">{collection.is_public ? 'Public' : 'Private'}</div>
+		<div class="inline-flex gap-2 mb-2">
+			<div class="badge badge-neutral">{collection.is_public ? 'Public' : 'Private'}</div>
+			{#if collection.is_archived}
+				<div class="badge badge-warning">Archived</div>
+			{/if}
+		</div>
 		<div class="card-actions justify-end">
 			{#if type != 'link'}
 				<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>
+				{#if !collection.is_archived}
+					<button class="btn btn-primary" on:click={editAdventure}>
+						<FileDocumentEdit class="w-6 h-6" />
+					</button>
+				{/if}
 				<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
 					><Launch class="w-5 h-5 mr-1" /></button
 				>
@@ -79,6 +107,15 @@
 					<Plus class="w-5 h-5 mr-1" />
 				</button>
 			{/if}
+			{#if collection.is_archived}
+				<button class="btn btn-primary" on:click={() => archiveCollection(false)}>
+					<ArchiveArrowUp class="w-5 h-5 mr-1" />
+				</button>
+			{:else}
+				<button class="btn btn-primary" on:click={() => archiveCollection(true)}>
+					<ArchiveArrowDown class="w-5 h-5 mr" />
+				</button>
+			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/types.ts

@@ -70,6 +70,7 @@ export type Collection = {
 	transportations?: Transportation[];
 	notes?: Note[];
 	checklists?: Checklist[];
+	is_archived?: boolean;
 };
 
 export type OpenStreetMapPlace = {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance, deserialize } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
@@ -247,6 +248,11 @@
 					<button type="submit" class="btn btn-success btn-primary mt-4">Filter</button>
 				</form>
 				<div class="divider"></div>
+				<button
+					type="submit"
+					class="btn btn-neutral btn-primary mt-4"
+					on:click={() => goto('/collections/archived')}>Archived Collections</button
+				>
 			</div>
 		</ul>
 	</div>

frontend/src/routes/collections/archived/+page.server.ts

@@ -0,0 +1,35 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let next = null;
+		let previous = null;
+		let count = 0;
+		let adventures: Adventure[] = [];
+		let initialFetch = await fetch(`${serverEndpoint}/api/collections/archived/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!initialFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let res = await initialFetch.json();
+			let visited = res as Adventure[];
+			adventures = [...adventures, ...visited];
+		}
+
+		return {
+			props: {
+				adventures
+			}
+		};
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/collections/archived/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { enhance, deserialize } from '$app/forms';
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import CollectionCard from '$lib/components/CollectionCard.svelte';
+	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditCollection from '$lib/components/EditCollection.svelte';
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import NewCollection from '$lib/components/NewCollection.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
+	import type { Adventure, Collection } from '$lib/types';
+
+	import Plus from '~icons/mdi/plus';
+
+	export let data: any;
+	console.log(data);
+
+	let collections: Collection[] = data.props.adventures || [];
+
+	function deleteCollection(event: CustomEvent<number>) {
+		collections = collections.filter((collection) => collection.id !== event.detail);
+	}
+</script>
+
+<div class="drawer lg:drawer-open">
+	<div class="drawer-content">
+		<!-- Page content -->
+		<h1 class="text-center font-bold text-4xl mb-6">Archived Collections</h1>
+		{#if collections.length === 0}
+			<NotFound error={undefined} />
+		{/if}
+		<div class="p-4">
+			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+				{#each collections as collection}
+					<CollectionCard type="" {collection} on:delete={deleteCollection} />
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<title>Collections</title>
+	<meta name="description" content="View your adventure collections." />
+</svelte:head>