From 91538debbc43db3b5c8d5c25c93ef0c4ddc946b8 Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Mon, 9 Oct 2023 12:04:36 +0200
Subject: [PATCH] #16 - Refactored modal

---
 src/components/base/confirmModal.vue       | 28 ++++++++++++---
 src/components/base/modal.vue              | 31 ++++++++++++++---
 src/components/item/Browser.vue            | 40 +++++++++++-----------
 src/components/item/file/EditModal.vue     | 32 ++++++++++++-----
 src/components/item/file/File.vue          | 29 ++++++----------
 src/components/item/folder/CreateModal.vue | 39 +++++++++++++++------
 src/components/item/folder/EditModal.vue   | 39 +++++++++++++++------
 src/components/item/folder/Folder.vue      | 31 ++++++-----------
 src/lib/contextMenu.ts                     |  7 ++++
 src/lib/items/folders.ts                   | 39 ++++++++-------------
 src/stores/modal.ts                        |  3 ++
 11 files changed, 195 insertions(+), 123 deletions(-)
 create mode 100644 src/stores/modal.ts

diff --git a/src/components/base/confirmModal.vue b/src/components/base/confirmModal.vue
index 0ce0c9b..234a9bb 100644
--- a/src/components/base/confirmModal.vue
+++ b/src/components/base/confirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<BaseModal @close="emit('close')" class="text-center">
+	<BaseModal ref="modal" class="text-center">
 		<svg
 			class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200"
 			aria-hidden="true"
@@ -21,7 +21,10 @@
 		<div class="flex">
 			<button
 				type="button"
-				@click.prevent="$emit('confirm')"
+				@click.prevent="
+					modal?.close();
+					$emit('confirm');
+				"
 				:class="
 					classes +
 					' ml-auto mr-2 inline-flex items-center rounded-lg px-5 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4'
@@ -31,7 +34,7 @@
 			</button>
 			<button
 				type="button"
-				@click.prevent="$emit('close')"
+				@click.prevent="modal?.close()"
 				class="mr-auto rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-600"
 			>
 				{{ t('noCancel') }}
@@ -47,11 +50,11 @@ export enum ConfirmModalType {
 </script>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue';
+import { computed, ref, type PropType } from 'vue';
 import BaseModal from '@components/base/modal.vue';
 import { t } from '@lib/i18n';
 
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(['confirm']);
 const props = defineProps({
 	type: {
 		type: String as PropType<ConfirmModalType>,
@@ -59,10 +62,25 @@ const props = defineProps({
 	},
 });
 
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
 const classes = computed(() => {
 	switch (props.type) {
 		case ConfirmModalType.Danger:
 			return 'bg-red-600 hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-800';
 	}
 });
+
+function open() {
+	modal.value?.open();
+}
+
+function close() {
+	modal.value?.close(false);
+}
 </script>
diff --git a/src/components/base/modal.vue b/src/components/base/modal.vue
index 51d98ac..fdeef2d 100644
--- a/src/components/base/modal.vue
+++ b/src/components/base/modal.vue
@@ -1,5 +1,6 @@
 <template>
 	<div
+		v-if="showModal"
 		tabindex="-1"
 		aria-hidden="true"
 		class="fixed left-0 right-0 top-0 z-50 flex h-full max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50 p-4 md:inset-0"
@@ -11,7 +12,7 @@
 				<button
 					type="button"
 					class="absolute right-2.5 top-3 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-					@click="emit('close')"
+					@click="close()"
 				>
 					<svg
 						class="h-3 w-3"
@@ -39,15 +40,37 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, onKeyDown } from '@vueuse/core';
 import { ref } from 'vue';
+import { onClickOutside, onKeyDown } from '@vueuse/core';
+import { isModalOpen } from '@stores/modal';
+
+const showModal = ref(false);
 
 const emit = defineEmits(['close']);
+defineExpose({
+	open,
+	close,
+});
 
 const modal = ref<HTMLElement>();
-onClickOutside(modal, () => emit('close'));
 
+onClickOutside(modal, () => close());
 onKeyDown('Escape', () => {
-	emit('close');
+	close();
 });
+
+function open() {
+	isModalOpen.set(true);
+
+	showModal.value = true;
+}
+
+function close(emitClose: boolean = true) {
+	isModalOpen.set(false);
+	showModal.value = false;
+
+	if (emitClose) {
+		emit('close');
+	}
+}
 </script>
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index 5d5b78f..b22bb99 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="relative h-full w-full px-4 pt-6"
-		v-on:contextmenu.capture.prevent="fileBrowserContextMenu?.openMenu"
-	>
+	<div class="relative h-full w-full px-4 pt-6" v-on:contextmenu.capture="openContextMenu">
 		<!-- Files & Folders -->
 		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" />
 		<template v-else-if="items">
@@ -26,10 +23,7 @@
 				<li>
 					<a
 						href="javascript:void(0)"
-						@click="
-							showCreateFolderModal = true;
-							fileBrowserContextMenu?.closeMenu();
-						"
+						@click="createFolderModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 						>{{ t('fileBrowser.folder.createFolder') }}</a
 					>
@@ -50,18 +44,14 @@
 				</li>
 			</ul>
 		</ContextMenu>
+	</div>
 
-		<!-- Modals -->
-		<CreateFolderModal
-			v-if="showCreateFolderModal"
-			:parentFolder="props.modelValue"
-			@close="showCreateFolderModal = false"
-		/>
-
-		<!-- Toasts -->
-		<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
-			<BaseToast v-for="toast in toasts" :type="toast.type">{{ toast.message }}</BaseToast>
-		</div>
+	<!-- Modals -->
+	<CreateFolderModal ref="createFolderModal" :parentFolder="props.modelValue" />
+
+	<!-- Toasts -->
+	<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
+		<BaseToast v-for="toast in toasts" :type="toast.type">{{ toast.message }}</BaseToast>
 	</div>
 </template>
 <script setup lang="ts">
@@ -80,6 +70,7 @@ import { FileClass } from '@lib/items/files';
 import ContextMenu from '@components/base/contextMenu.vue';
 import BaseToast, { ToastType } from '@components/base/toast.vue';
 import { t } from '@lib/i18n';
+import { isModalOpen } from '@stores/modal';
 
 const props = defineProps({
 	modelValue: {
@@ -90,6 +81,15 @@ const props = defineProps({
 
 const fileBrowserContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
+function openContextMenu(e: MouseEvent) {
+	if (isModalOpen.get()) {
+		return;
+	}
+
+	e.preventDefault();
+	fileBrowserContextMenu?.value?.openMenu(e);
+}
+
 // TODO: Fix toasts
 const toasts = ref<{ message: string; type: ToastType }[]>([]);
 
@@ -143,7 +143,7 @@ async function getItems() {
 /**
  * Folders
  */
-const showCreateFolderModal = ref(false);
+const createFolderModal = ref<InstanceType<typeof CreateFolderModal>>();
 
 const folders = computed(() => {
 	return Object.values(items.value).filter((item) => item instanceof FolderClass) as FolderClass[];
diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue
index 21ad0c2..dac4d4a 100644
--- a/src/components/item/file/EditModal.vue
+++ b/src/components/item/file/EditModal.vue
@@ -1,10 +1,15 @@
 <template>
-	<BaseModal @close="closeUpdateFileModal">
+	<BaseModal ref="modal" @close="close">
 		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.file.renameFile') }}</h3>
 		<form class="space-y-6" @submit.prevent="updateFile" ref="form">
-			<BaseInput id="fileName" type="text" v-model="file.name" :required="true">{{
-				t('fileBrowser.file.name')
-			}}</BaseInput>
+			<BaseInput
+				id="fileName"
+				type="text"
+				v-model="file.name"
+				:required="true"
+				:errors="errorObject?.errors.name"
+				>{{ t('fileBrowser.file.name') }}</BaseInput
+			>
 			<BaseButton type="submit" :color="ButtonColor.Primary">{{
 				t('fileBrowser.folder.edit')
 			}}</BaseButton>
@@ -23,7 +28,6 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { FileClass } from '@lib/items/files';
 
-const emit = defineEmits(['close']);
 const props = defineProps({
 	file: {
 		type: Object as PropType<FileClass>,
@@ -31,6 +35,13 @@ const props = defineProps({
 	},
 });
 
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
 const file = ref<{ name: string }>({
 	name: props.file.name,
 });
@@ -54,15 +65,18 @@ async function updateFile() {
 
 		// TODO: Show success toast
 
-		closeUpdateFileModal();
+		close();
 	} catch (e) {}
 }
 
-function closeUpdateFileModal() {
+function open() {
+	modal.value?.open();
+}
+
+function close() {
 	file.value = {
 		name: props.file.name,
 	};
-
-	emit('close');
+	modal.value?.close(false);
 }
 </script>
diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
index 6e13352..1672645 100644
--- a/src/components/item/file/File.vue
+++ b/src/components/item/file/File.vue
@@ -18,8 +18,7 @@
 					<a
 						href="javascript:void(0)"
 						@click="
-							showEditModal = true;
-							fileContextMenu?.closeMenu();
+							editFileModal?.open();
 						"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 						>{{ t('fileBrowser.file.rename') }}</a
@@ -39,26 +38,20 @@
 				<a
 					href="javascript:void(0)"
 					@click="
-						showDeleteModal = true;
-						fileContextMenu?.closeMenu();
+						deleteFileModal?.open();
 					"
 					class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-100 dark:text-red-500 dark:hover:bg-gray-600"
 					>{{ t('fileBrowser.file.delete') }}</a
 				>
 			</div>
 		</ContextMenu>
-
-		<!-- Modals -->
-		<BaseConfirmModal
-			v-if="showDeleteModal"
-			:type="ConfirmModalType.Danger"
-			@confirm="deleteFile"
-			@close="showDeleteModal = false"
-		>
-			{{ t('fileBrowser.file.areYouSureYouWantToDeleteThisFile') }}</BaseConfirmModal
-		>
-		<EditFileModal v-if="showEditModal" :file="modelValue" @close="showEditModal = false" />
 	</div>
+
+	<!-- Modals -->
+	<BaseConfirmModal ref="deleteFileModal" :type="ConfirmModalType.Danger" @confirm="deleteFile">
+		{{ t('fileBrowser.file.areYouSureYouWantToDeleteThisFile') }}</BaseConfirmModal
+	>
+	<EditFileModal ref="editFileModal" :file="modelValue" />
 </template>
 
 <script setup lang="ts">
@@ -80,7 +73,7 @@ const props = defineProps({
 	},
 });
 
-const showDeleteModal = ref(false);
+const deleteFileModal = ref<InstanceType<typeof BaseConfirmModal>>();
 async function deleteFile() {
 	try {
 		await props.modelValue.delete();
@@ -93,9 +86,7 @@ async function deleteFile() {
 
 		// TODO: Show error toast
 	}
-
-	showDeleteModal.value = false;
 }
 
-const showEditModal = ref(false);
+const editFileModal = ref<InstanceType<typeof EditFileModal>>();
 </script>
diff --git a/src/components/item/folder/CreateModal.vue b/src/components/item/folder/CreateModal.vue
index a9690df..eee6849 100644
--- a/src/components/item/folder/CreateModal.vue
+++ b/src/components/item/folder/CreateModal.vue
@@ -1,11 +1,21 @@
 <template>
-	<BaseModal @close="closeCreateFolderModal">
+	<BaseModal ref="modal" @close="close">
 		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.folder.createFolder') }}</h3>
 		<form class="space-y-6" @submit.prevent="createFolder" ref="form">
-			<BaseInput id="folderName" type="text" v-model="folder.name" :required="true">{{
-				t('fileBrowser.folder.name')
-			}}</BaseInput>
-			<BaseSelect id="folderColor" v-model="folder.color" :required="true">
+			<BaseInput
+				id="folderName"
+				type="text"
+				v-model="folder.name"
+				:required="true"
+				:errors="errorObject?.errors.name"
+				>{{ t('fileBrowser.folder.name') }}</BaseInput
+			>
+			<BaseSelect
+				id="folderColor"
+				v-model="folder.color"
+				:required="true"
+				:errors="errorObject?.errors.color"
+			>
 				<template v-slot:label>
 					<div class="flex">
 						<span>{{ t('fileBrowser.folder.color.name') }}</span>
@@ -43,7 +53,6 @@ import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 
-const emit = defineEmits(['close']);
 const props = defineProps({
 	parentFolder: {
 		type: Object as PropType<FolderType | undefined>,
@@ -51,6 +60,13 @@ const props = defineProps({
 	},
 });
 
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
 const folder = ref<{ name: string; color: FolderColor | '' }>({ name: '', color: '' });
 const form = ref<HTMLFormElement>();
 const errorObject = ref<null | ErrorObject>(null);
@@ -85,13 +101,16 @@ async function createFolder() {
 
 		// TODO: Show success toast
 
-		closeCreateFolderModal();
+		close();
 	} catch (e) {}
 }
 
-function closeCreateFolderModal() {
-	folder.value = { name: '', color: '' };
+function open() {
+	modal.value?.open();
+}
 
-	emit('close');
+function close() {
+	folder.value = { name: '', color: '' };
+	modal.value?.close(false);
 }
 </script>
diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue
index 9b49922..f19495a 100644
--- a/src/components/item/folder/EditModal.vue
+++ b/src/components/item/folder/EditModal.vue
@@ -1,11 +1,21 @@
 <template>
-	<BaseModal @close="closeUpdateFolderModal">
+	<BaseModal ref="modal" @close="close">
 		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.folder.editFolder') }}</h3>
 		<form class="space-y-6" @submit.prevent="updateFolder" ref="form">
-			<BaseInput id="folderName" type="text" v-model="folder.name" :required="true">{{
-				t('fileBrowser.folder.name')
-			}}</BaseInput>
-			<BaseSelect id="folderColor" v-model="folder.color" :required="true">
+			<BaseInput
+				id="folderName"
+				type="text"
+				v-model="folder.name"
+				:required="true"
+				:errors="errorObject?.errors.name"
+				>{{ t('fileBrowser.folder.name') }}</BaseInput
+			>
+			<BaseSelect
+				id="folderColor"
+				v-model="folder.color"
+				:required="true"
+				:errors="errorObject?.errors.color"
+			>
 				<template v-slot:label>
 					<div class="flex">
 						<span>{{ t('fileBrowser.folder.color.name') }}</span>
@@ -43,7 +53,6 @@ import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 
-const emit = defineEmits(['close']);
 const props = defineProps({
 	folder: {
 		type: Object as PropType<FolderClass>,
@@ -51,6 +60,13 @@ const props = defineProps({
 	},
 });
 
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
 const folder = ref<{ name: string; color: FolderColor | '' }>({
 	name: props.folder.name,
 	color: props.folder.color,
@@ -87,16 +103,19 @@ async function updateFolder() {
 
 		// TODO: Show success toast
 
-		closeUpdateFolderModal();
+		close();
 	} catch (e) {}
 }
 
-function closeUpdateFolderModal() {
+function open() {
+	modal.value?.open();
+}
+
+function close() {
 	folder.value = {
 		name: props.folder.name,
 		color: props.folder.color,
 	};
-
-	emit('close');
+	modal.value?.close(false);
 }
 </script>
diff --git a/src/components/item/folder/Folder.vue b/src/components/item/folder/Folder.vue
index 66151b9..c49b26d 100644
--- a/src/components/item/folder/Folder.vue
+++ b/src/components/item/folder/Folder.vue
@@ -29,8 +29,7 @@
 					<a
 						href="javascript:void(0)"
 						@click="
-							showEditModal = true;
-							folderContextMenu?.closeMenu();
+							editFolderModal?.open();
 						"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 						>{{ t('fileBrowser.folder.edit') }}</a
@@ -49,27 +48,19 @@
 			<div class="py-2">
 				<a
 					href="javascript:void(0)"
-					@click="
-						showDeleteModal = true;
-						folderContextMenu?.closeMenu();
-					"
+					@click="deleteFolderModal?.open()"
 					class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-100 dark:text-red-500 dark:hover:bg-gray-600"
 					>{{ t('fileBrowser.folder.delete') }}</a
 				>
 			</div>
 		</ContextMenu>
-
-		<!-- Modals -->
-		<BaseConfirmModal
-			v-if="showDeleteModal"
-			:type="ConfirmModalType.Danger"
-			@confirm="deleteFolder"
-			@close="showDeleteModal = false"
-		>
-			{{ t('fileBrowser.folder.areYouSureYouWantToDeleteThisFolder') }}</BaseConfirmModal
-		>
-		<EditFolderModal v-if="showEditModal" :folder="modelValue" @close="showEditModal = false" />
 	</div>
+
+	<!-- Modals -->
+	<BaseConfirmModal ref="deleteFolderModal" :type="ConfirmModalType.Danger" @confirm="deleteFolder">
+		{{ t('fileBrowser.folder.areYouSureYouWantToDeleteThisFolder') }}</BaseConfirmModal
+	>
+	<EditFolderModal ref="editFolderModal" :folder="modelValue" />
 </template>
 
 <script setup lang="ts">
@@ -96,7 +87,7 @@ const classes = computed(() => {
 	return props.modelValue.colorClass;
 });
 
-const showDeleteModal = ref(false);
+const deleteFolderModal = ref<InstanceType<typeof BaseConfirmModal>>();
 async function deleteFolder() {
 	try {
 		await props.modelValue.delete();
@@ -109,9 +100,7 @@ async function deleteFolder() {
 
 		// TODO: Show error toast
 	}
-
-	showDeleteModal.value = false;
 }
 
-const showEditModal = ref(false);
+const editFolderModal = ref<InstanceType<typeof EditFolderModal>>();
 </script>
diff --git a/src/lib/contextMenu.ts b/src/lib/contextMenu.ts
index 62bf6ac..56f65cf 100644
--- a/src/lib/contextMenu.ts
+++ b/src/lib/contextMenu.ts
@@ -1,7 +1,14 @@
 import { useEventBus, type EventBusKey } from '@vueuse/core';
+import { isModalOpen } from '@stores/modal';
 
 const contextMenuOpenEvent: EventBusKey<{ name: 'contextMenuOpen' }> = Symbol('contextMenuOpen');
 
 const bus = useEventBus(contextMenuOpenEvent);
 
+isModalOpen.listen((isOpen) => {
+	if (isOpen) {
+		bus.emit();
+	}
+});
+
 export default bus;
diff --git a/src/lib/items/folders.ts b/src/lib/items/folders.ts
index 5a1e966..ac06f04 100644
--- a/src/lib/items/folders.ts
+++ b/src/lib/items/folders.ts
@@ -11,7 +11,7 @@ export class FolderClass extends ItemClass {
 	}
 
 	static async create(input: { name: string; parent: FolderType | null; color: FolderColor }) {
-		const returnedFolder = await fetch(api('folder'), {
+		const response = await fetch(api('folder'), {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
@@ -22,30 +22,19 @@ export class FolderClass extends ItemClass {
 				parentId: input.parent?.id ?? null,
 				color: input.color,
 			}),
-		})
-			.then(async (response) => {
-				if (!response.ok) {
-					if (response.status >= 400 && response.status < 500) {
-						const json = await response.json();
-
-						throw new Error(json.error);
-					}
-
-					throw new Error(await response.text());
-				}
-
-				return response.json();
-			})
-			.then((data) => {
-				console.log('Success:', data);
-
-				return data;
-			})
-			.catch((error) => {
-				console.error('Error:', error);
-			});
-
-		return new FolderClass(returnedFolder);
+		});
+
+		if (!response.ok) {
+			if (response.status >= 400 && response.status < 500) {
+				const json = await response.json();
+
+				throw new Error(json.error);
+			}
+
+			throw new Error(await response.text());
+		}
+
+		return new FolderClass(await response.json());
 	}
 
 	async update(input: { name: string; color: FolderColor }) {
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
new file mode 100644
index 0000000..7312a06
--- /dev/null
+++ b/src/stores/modal.ts
@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const isModalOpen = atom(false);