Share via modal

frontend/src/lib/components/CollectionCard.svelte

@@ -16,10 +16,12 @@
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
 	import TrashCan from '~icons/mdi/trashcan';
 	import DeleteWarning from './DeleteWarning.svelte';
+	import ShareModal from './ShareModal.svelte';
 
 	const dispatch = createEventDispatcher();
 
 	export let type: String | undefined | null;
+	let isShareModalOpen: boolean = false;
 
 	//   export let type: String;
 
@@ -77,6 +79,10 @@
 	/>
 {/if}
 
+{#if isShareModalOpen}
+	<ShareModal {collection} on:close={() => (isShareModalOpen = false)} />
+{/if}
+
 <div
 	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral text-neutral-content shadow-xl"
 >
@@ -135,6 +141,9 @@
 								<button class="btn btn-neutral mb-2" on:click={editAdventure}>
 									<FileDocumentEdit class="w-6 h-6" />Edit Collection
 								</button>
+								<button class="btn btn-neutral mb-2" on:click={() => (isShareModalOpen = true)}>
+									<FileDocumentEdit class="w-6 h-6" />Share
+								</button>
 							{/if}
 							{#if collection.is_archived}
 								<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(false)}>

frontend/src/lib/components/ShareModal.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { Collection, User } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	import UserCard from './UserCard.svelte';
+	import { addToast } from '$lib/toasts';
+	let modal: HTMLDialogElement;
+
+	export let collection: Collection;
+
+	let allUsers: User[] = [];
+
+	let sharedWithUsers: User[] = [];
+	let notSharedWithUsers: User[] = [];
+
+	async function share(user: User) {
+		let res = await fetch(`/api/collections/${collection.id}/share/${user.uuid}/`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		if (res.ok) {
+			sharedWithUsers = sharedWithUsers.concat(user);
+			collection.shared_with.push(user.uuid);
+			notSharedWithUsers = notSharedWithUsers.filter((u) => u.uuid !== user.uuid);
+			addToast('success', `Shared ${collection.name} with ${user.first_name} ${user.last_name}`);
+		}
+	}
+
+	async function unshare(user: User) {
+		let res = await fetch(`/api/collections/${collection.id}/unshare/${user.uuid}/`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		if (res.ok) {
+			notSharedWithUsers = notSharedWithUsers.concat(user);
+			collection.shared_with = collection.shared_with.filter((u) => u !== user.uuid);
+			sharedWithUsers = sharedWithUsers.filter((u) => u.uuid !== user.uuid);
+			addToast('success', `Unshared ${collection.name} with ${user.first_name} ${user.last_name}`);
+		}
+	}
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+		let res = await fetch(`/auth/users/`);
+		if (res.ok) {
+			let data = await res.json();
+			allUsers = data;
+			sharedWithUsers = allUsers.filter((user) => collection.shared_with.includes(user.uuid));
+			notSharedWithUsers = allUsers.filter((user) => !collection.shared_with.includes(user.uuid));
+			console.log(sharedWithUsers);
+			console.log(notSharedWithUsers);
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	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">
+		<h3 class="font-bold text-lg">Share {collection.name}</h3>
+		<p class="py-1">Share this collection with other users.</p>
+		<div class="divider"></div>
+		<h3 class="font-bold text-md">Shared With</h3>
+		<ul>
+			{#each sharedWithUsers as user}
+				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+					<UserCard
+						{user}
+						shared_with={collection.shared_with}
+						sharing={true}
+						on:share={(event) => share(event.detail)}
+						on:unshare={(event) => unshare(event.detail)}
+					/>
+				</div>
+			{/each}
+		</ul>
+		<div class="divider"></div>
+		<h3 class="font-bold text-md">Not Shared With</h3>
+		<ul>
+			{#each notSharedWithUsers as user}
+				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+					<UserCard
+						{user}
+						shared_with={collection.shared_with}
+						sharing={true}
+						on:share={(event) => share(event.detail)}
+						on:unshare={(event) => unshare(event.detail)}
+					/>
+				</div>
+			{/each}
+		</ul>
+		<button class="btn btn-primary mt-4" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/components/UserCard.svelte

@@ -7,6 +7,9 @@
 
 	import Calendar from '~icons/mdi/calendar';
 
+	export let sharing: boolean = false;
+	export let shared_with: string[] | undefined = undefined;
+
 	export let user: User;
 
 	async function nav() {
@@ -40,7 +43,13 @@
 			</p>
 		</div>
 		<div class="card-actions justify-end">
-			<button class="btn btn-primary" on:click={nav}>View</button>
+			{#if !sharing}
+				<button class="btn btn-primary" on:click={nav}>View</button>
+			{:else if shared_with && !shared_with.includes(user.uuid)}
+				<button class="btn btn-primary" on:click={() => dispatch('share', user)}>Share</button>
+			{:else}
+				<button class="btn btn-primary" on:click={() => dispatch('unshare', user)}>Unshare</button>
+			{/if}
 		</div>
 	</div>
 </div>