From 2ca24b9f15063ea2b67819981c41a2fd73d7c422 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 18 Jul 2024 18:37:46 -0400
Subject: [PATCH] adventure card improvements

---
 .../src/lib/components/AdventureCard.svelte   | 94 ++++++++++---------
 .../src/lib/components/AdventureLink.svelte   |  6 +-
 frontend/src/routes/adventures/+page.svelte   |  1 +
 frontend/src/routes/collections/+page.svelte  |  2 +-
 .../src/routes/collections/[id]/+page.svelte  |  2 +
 frontend/src/routes/search/+page.svelte       |  7 +-
 6 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index 4824208..d8c1649 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { goto } from '$app/navigation';
-	import type { Adventure } from '$lib/types';
+	import type { Adventure, User } from '$lib/types';
 	const dispatch = createEventDispatcher();
 
 	import Launch from '~icons/mdi/launch';
@@ -20,6 +20,8 @@
 
 	export let type: string;
 
+	export let user: User | null;
+
 	let isCollectionModalOpen: boolean = false;
 
 	export let adventure: Adventure;
@@ -130,9 +132,9 @@
 				{adventure.name}
 			</h2>
 			<div>
-				{#if adventure.type == 'visited'}
+				{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
 					<div class="badge badge-primary">Visited</div>
-				{:else}
+				{:else if user?.pk == adventure.user_id}
 					<div class="badge badge-secondary">Planned</div>
 				{/if}
 				<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
@@ -162,48 +164,54 @@
 		<div class="card-actions justify-end mt-2">
 			<!-- action options dropdown -->
 			{#if type != 'link'}
-				<div class="dropdown dropdown-end">
-					<div tabindex="0" role="button" class="btn btn-neutral">
-						<DotsHorizontal class="w-6 h-6" />
+				{#if user?.pk == adventure.user_id}
+					<div class="dropdown dropdown-end">
+						<div tabindex="0" role="button" class="btn btn-neutral">
+							<DotsHorizontal class="w-6 h-6" />
+						</div>
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+						<ul
+							tabindex="0"
+							class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+						>
+							<button
+								class="btn btn-neutral mb-2"
+								on:click={() => goto(`/adventures/${adventure.id}`)}
+								><Launch class="w-6 h-6" />Open Details</button
+							>
+							<button class="btn btn-neutral mb-2" on:click={editAdventure}>
+								<FileDocumentEdit class="w-6 h-6" />Edit Adventure
+							</button>
+							{#if adventure.type == 'visited'}
+								<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
+									><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
+								>
+							{/if}
+							{#if adventure.type == 'planned'}
+								<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
+									><CheckBold class="w-6 h-6" />Mark Visited</button
+								>
+							{/if}
+							{#if adventure.collection}
+								<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
+									><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
+								>
+							{/if}
+							{#if !adventure.collection}
+								<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
+									><Plus class="w-6 h-6" />Add to Collection</button
+								>
+							{/if}
+							<button class="btn btn-warning" on:click={deleteAdventure}
+								><TrashCan class="w-6 h-6" />Delete</button
+							>
+						</ul>
 					</div>
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-					<ul
-						tabindex="0"
-						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+				{:else}
+					<button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
+						><Launch class="w-6 h-6" /></button
 					>
-						<button
-							class="btn btn-neutral mb-2"
-							on:click={() => goto(`/adventures/${adventure.id}`)}
-							><Launch class="w-6 h-6" />Open Details</button
-						>
-						<button class="btn btn-neutral mb-2" on:click={editAdventure}>
-							<FileDocumentEdit class="w-6 h-6" />Edit Adventure
-						</button>
-						{#if adventure.type == 'visited'}
-							<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
-								><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
-							>
-						{/if}
-						{#if adventure.type == 'planned'}
-							<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
-								><CheckBold class="w-6 h-6" />Mark Visited</button
-							>
-						{/if}
-						{#if adventure.collection}
-							<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
-								><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
-							>
-						{/if}
-						{#if !adventure.collection}
-							<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
-								><Plus class="w-6 h-6" />Add to Collection</button
-							>
-						{/if}
-						<button class="btn btn-warning" on:click={deleteAdventure}
-							><TrashCan class="w-6 h-6" />Delete</button
-						>
-					</ul>
-				</div>
+				{/if}
 			{/if}
 			{#if type == 'link'}
 				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
diff --git a/frontend/src/lib/components/AdventureLink.svelte b/frontend/src/lib/components/AdventureLink.svelte
index 53e57b2..71486ee 100644
--- a/frontend/src/lib/components/AdventureLink.svelte
+++ b/frontend/src/lib/components/AdventureLink.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { deserialize } from '$app/forms';
-	import type { Adventure } from '$lib/types';
+	import type { Adventure, User } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import type { ActionResult } from '@sveltejs/kit';
@@ -10,6 +10,8 @@
 
 	let adventures: Adventure[] = [];
 
+	export let user: User | null;
+
 	onMount(async () => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
 		if (modal) {
@@ -53,7 +55,7 @@
 		<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
 		<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 			{#each adventures as adventure}
-				<AdventureCard type="link" {adventure} on:link={add} />
+				<AdventureCard user={user ?? null} type="link" {adventure} on:link={add} />
 			{/each}
 			{#if adventures.length === 0}
 				<p class="text-center text-lg">
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 4eb087e..1221802 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -185,6 +185,7 @@
 				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 					{#each adventures as adventure}
 						<AdventureCard
+							user={data.user}
 							type={adventure.type}
 							{adventure}
 							on:delete={deleteAdventure}
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 113e761..83e231a 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -167,7 +167,7 @@
 		<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
 		<p class="text-center">This search returned {count} results.</p>
 		{#if collections.length === 0}
-			<NotFound />
+			<NotFound error={undefined} />
 		{/if}
 		<div class="p-4">
 			<button
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index 6e04b18..498c38c 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -77,6 +77,7 @@
 
 {#if isShowingCreateModal}
 	<AdventureLink
+		user={data?.user ?? null}
 		on:close={() => {
 			isShowingCreateModal = false;
 		}}
@@ -171,6 +172,7 @@
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}
 			<AdventureCard
+				user={data.user}
 				on:edit={editAdventure}
 				on:delete={deleteAdventure}
 				type={adventure.type}
diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte
index b3ff952..5ad6b0f 100644
--- a/frontend/src/routes/search/+page.svelte
+++ b/frontend/src/routes/search/+page.svelte
@@ -48,7 +48,12 @@
 	<h2 class="text-center font-bold text-2xl mb-4">AdventureLog Results</h2>
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}
-			<AdventureCard type={adventure.type} {adventure} on:delete={deleteAdventure} />
+			<AdventureCard
+				user={data.user}
+				type={adventure.type}
+				{adventure}
+				on:delete={deleteAdventure}
+			/>
 		{/each}
 	</div>
 	<div class="divider"></div>