Share via modal

backend/server/users/serializers.py

@@ -1,7 +1,7 @@
 from rest_framework import serializers
 from django.contrib.auth import get_user_model
 
-from adventures.models import Adventure
+from adventures.models import Adventure, Collection
 from users.forms import CustomAllAuthPasswordResetForm
 from dj_rest_auth.serializers import PasswordResetSerializer
 from rest_framework.exceptions import PermissionDenied
@@ -133,8 +133,6 @@ class UserDetailsSerializer(serializers.ModelSerializer):
     @staticmethod
     def validate_username(username):
         if 'allauth.account' not in settings.INSTALLED_APPS:
-            # We don't need to call the all-auth
-            # username validator unless it's installed
             return username
 
         from allauth.account.adapter import get_adapter
@@ -144,10 +142,7 @@ class UserDetailsSerializer(serializers.ModelSerializer):
     class Meta:
         extra_fields = ['profile_pic', 'uuid', 'public_profile']
         profile_pic = serializers.ImageField(required=False)
-        # see https://github.com/iMerica/dj-rest-auth/issues/181
+
-        # UserModel.XYZ causing attribute error while importing other
-        # classes from `serializers.py`. So, we need to check whether the auth model has
-        # the attribute or not
         if hasattr(UserModel, 'USERNAME_FIELD'):
             extra_fields.append(UserModel.USERNAME_FIELD)
         if hasattr(UserModel, 'EMAIL_FIELD'):
@@ -171,6 +166,21 @@ class UserDetailsSerializer(serializers.ModelSerializer):
         fields = ('pk', *extra_fields)
         read_only_fields = ('email', 'date_joined', 'is_staff', 'is_superuser', 'is_active', 'pk')
 
+    def handle_public_profile_change(self, instance, validated_data):
+        """Remove user from `shared_with` if public profile is set to False."""
+        if 'public_profile' in validated_data and not validated_data['public_profile']:
+            for collection in Collection.objects.filter(shared_with=instance):
+                collection.shared_with.remove(instance)
+
+    def update(self, instance, validated_data):
+        self.handle_public_profile_change(instance, validated_data)
+        return super().update(instance, validated_data)
+
+    def partial_update(self, instance, validated_data):
+        self.handle_public_profile_change(instance, validated_data)
+        return super().partial_update(instance, validated_data)
+
+
 class CustomUserDetailsSerializer(UserDetailsSerializer):
 
 

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">
+			{#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>

frontend/src/lib/types.ts

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