From 4bbb9f10f674add900fca8cb847738cc0c81e540 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 4 Aug 2024 13:33:49 -0400
Subject: [PATCH] notes

---
 frontend/src/lib/components/NoteCard.svelte   |  17 +-
 frontend/src/lib/components/NoteModal.svelte  | 265 +++++++++++-------
 .../src/routes/collections/[id]/+page.svelte  |   3 +
 3 files changed, 172 insertions(+), 113 deletions(-)

diff --git a/frontend/src/lib/components/NoteCard.svelte b/frontend/src/lib/components/NoteCard.svelte
index d64a532..218a5b0 100644
--- a/frontend/src/lib/components/NoteCard.svelte
+++ b/frontend/src/lib/components/NoteCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { addToast } from '$lib/toasts';
-	import type { Note } from '$lib/types';
+	import type { Note, User } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -9,6 +9,7 @@
 	import TrashCan from '~icons/mdi/trash-can';
 
 	export let note: Note;
+	export let user: User | null = null;
 
 	function editNote() {
 		dispatch('edit', note);
@@ -39,12 +40,14 @@
 			<button class="btn btn-neutral mb-2" on:click={editNote}>
 				<Launch class="w-6 h-6" />Open
 			</button>
-			<button
-				id="delete_adventure"
-				data-umami-event="Delete Adventure"
-				class="btn btn-warning"
-				on:click={deleteNote}><TrashCan class="w-6 h-6" />Delete</button
-			>
+			{#if note.user_id == user?.pk}
+				<button
+					id="delete_adventure"
+					data-umami-event="Delete Adventure"
+					class="btn btn-warning"
+					on:click={deleteNote}><TrashCan class="w-6 h-6" />Delete</button
+				>
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/NoteModal.svelte b/frontend/src/lib/components/NoteModal.svelte
index 4af4731..67efc1b 100644
--- a/frontend/src/lib/components/NoteModal.svelte
+++ b/frontend/src/lib/components/NoteModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isValidUrl } from '$lib';
-	import type { Collection, Note } from '$lib/types';
+	import type { Collection, Note, User } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
@@ -8,6 +8,7 @@
 
 	export let note: Note | null = null;
 	export let collection: Collection;
+	export let user: User | null = null;
 
 	let warning: string | null = '';
 
@@ -112,112 +113,164 @@
 			<p class="font-semibold text-md mb-2">Editing note {initialName}</p>
 		{/if}
 
-		<form on:submit|preventDefault>
-			<div class="form-control mb-2">
-				<label for="name">Name</label>
-				<input
-					type="text"
-					id="name"
-					class="input input-bordered w-full max-w-xs"
-					bind:value={newNote.name}
-				/>
-			</div>
-			<div class="form-control mb-2">
-				<label for="content">Date</label>
-				<input
-					type="date"
-					id="date"
-					name="date"
-					min={collection.start_date || ''}
-					max={collection.end_date || ''}
-					bind:value={newNote.date}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-			</div>
-			<div class="form-control mb-2">
-				<label for="content">Content</label>
-				<textarea
-					id="content"
-					class="textarea textarea-bordered"
-					bind:value={newNote.content}
-					rows="5"
-				></textarea>
-			</div>
-			<div class="form-control mb-2">
-				<label for="content">Links</label>
-				<input
-					type="url"
-					class="input input-bordered w-full mb-1"
-					placeholder="Add a link (e.g. https://example.com)"
-					bind:value={newLink}
-					on:keydown={(e) => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-							addLink();
-						}
-					}}
-				/>
-				<button type="button" class="btn btn-sm btn-primary" on:click={addLink}>Add</button>
-			</div>
-			{#if newNote.links.length > 0}
-				<ul class="list-none">
-					{#each newNote.links as link, i}
-						<li class="mb-1">
-							<a href={link} target="_blank">{link}</a>
-							<button
-								type="button"
-								class="btn btn-sm btn-error"
-								on:click={() => {
-									newNote.links = newNote.links.filter((_, index) => index !== i);
-								}}
-							>
-								Remove
-							</button>
-						</li>
-					{/each}
-				</ul>
-			{/if}
-
-			{#if warning}
-				<div role="alert" class="alert alert-error">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						fill="none"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
-					<span>{warning}</span>
+		{#if user?.pk == note?.user_id}
+			<form on:submit|preventDefault>
+				<div class="form-control mb-2">
+					<label for="name">Name</label>
+					<input
+						type="text"
+						id="name"
+						class="input input-bordered w-full max-w-xs"
+						bind:value={newNote.name}
+					/>
 				</div>
-			{/if}
-
-			<button class="btn btn-primary" on:click={save}>Save</button>
-			<button class="btn btn-neutral" on:click={close}>Close</button>
-
-			{#if collection.is_public}
-				<div role="alert" class="alert alert-info mt-4">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						class="h-6 w-6 shrink-0 stroke-current"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-						></path>
-					</svg>
-					<span>New software update available.</span>
+				<div class="form-control mb-2">
+					<label for="content">Date</label>
+					<input
+						type="date"
+						id="date"
+						name="date"
+						min={collection.start_date || ''}
+						max={collection.end_date || ''}
+						bind:value={newNote.date}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
 				</div>
-			{/if}
-		</form>
+				<div class="form-control mb-2">
+					<label for="content">Content</label>
+					<textarea
+						id="content"
+						class="textarea textarea-bordered"
+						bind:value={newNote.content}
+						rows="5"
+					></textarea>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Links</label>
+					<input
+						type="url"
+						class="input input-bordered w-full mb-1"
+						placeholder="Add a link (e.g. https://example.com)"
+						bind:value={newLink}
+						on:keydown={(e) => {
+							if (e.key === 'Enter') {
+								e.preventDefault();
+								addLink();
+							}
+						}}
+					/>
+					<button type="button" class="btn btn-sm btn-primary" on:click={addLink}>Add</button>
+				</div>
+				{#if newNote.links.length > 0}
+					<ul class="list-none">
+						{#each newNote.links as link, i}
+							<li class="mb-1">
+								<a href={link} target="_blank">{link}</a>
+								<button
+									type="button"
+									class="btn btn-sm btn-error"
+									on:click={() => {
+										newNote.links = newNote.links.filter((_, index) => index !== i);
+									}}
+								>
+									Remove
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+
+				{#if warning}
+					<div role="alert" class="alert alert-error">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{warning}</span>
+					</div>
+				{/if}
+
+				<button class="btn btn-primary" on:click={save}>Save</button>
+				<button class="btn btn-neutral" on:click={close}>Close</button>
+
+				{#if collection.is_public}
+					<div role="alert" class="alert alert-info mt-4">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+						<span>This note is public because it is in a public collection.</span>
+					</div>
+				{/if}
+			</form>
+		{:else}
+			<form>
+				<div class="form-control mb-2">
+					<label for="name">Name</label>
+					<input
+						type="text"
+						id="name"
+						class="input input-bordered w-full max-w-xs"
+						bind:value={newNote.name}
+						readonly
+					/>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Date</label>
+					<input
+						type="date"
+						id="date"
+						name="date"
+						min={collection.start_date || ''}
+						max={collection.end_date || ''}
+						bind:value={newNote.date}
+						class="input input-bordered w-full max-w-xs mt-1"
+						readonly
+					/>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Content</label>
+					<textarea
+						id="content"
+						class="textarea textarea-bordered"
+						bind:value={newNote.content}
+						rows="5"
+						readonly
+					></textarea>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Links</label>
+				</div>
+				{#if newNote.links.length > 0}
+					<ul class="list-none">
+						{#each newNote.links as link, i}
+							<li class="mb-1">
+								<a href={link} target="_blank">{link}</a>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+
+				<button class="btn btn-neutral" on:click={close}>Close</button>
+			</form>
+		{/if}
 	</div>
 </dialog>
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index bbf7e93..eb06cd0 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -246,6 +246,7 @@
 {#if isNoteModalOpen}
 	<NoteModal
 		note={noteToEdit}
+		user={data.user}
 		on:close={() => (isNoteModalOpen = false)}
 		{collection}
 		on:save={(event) => {
@@ -468,6 +469,7 @@
 			{#each notes as note}
 				<NoteCard
 					{note}
+					user={data.user || null}
 					on:edit={(event) => {
 						noteToEdit = event.detail;
 						isNoteModalOpen = true;
@@ -540,6 +542,7 @@
 					{#each dayNotes as note}
 						<NoteCard
 							{note}
+							user={data.user || null}
 							on:edit={(event) => {
 								noteToEdit = event.detail;
 								isNoteModalOpen = true;