#20 - Added toasts to CRUD

HF6-PROJECT · Oct 18, 2023 · f2d0197 · f2d0197
1 parent 86299c9
commit f2d0197
Show file tree

Hide file tree

Showing 13 changed files with 257 additions and 39 deletions.
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
@@ -190,10 +190,16 @@ async function uploadFiles(e: Event) {
 	Array.from(fileInput.files).forEach(async (file) => {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
+
+			addToast({
+				id: uuid(),
+				message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
+				type: ToastType.Success,
+			});
 		} catch (error) {
 			addToast({
 				id: uuid(),
-				message: t('fileBrowser.file.toast.upload.failed') + ' ' + file.name,
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
 		}
@@ -226,17 +232,6 @@ channel.bind('update', (data: ItemType) => {
 
 	if (item === null) return;
 
-	const isNew = items.value[item.id] === undefined;
-	const isOwner = item.ownerId === props.user.id;
-
-	if (isNew && isOwner) {
-		addToast({
-			id: uuid(),
-			message: item.name + ' ' + t('fileBrowser.file.toast.upload.success'),
-			type: ToastType.Success,
-		});
-	}
-
 	addItem(item);
 });
 

diff --git a/src/components/item/ShareItemModal.vue b/src/components/item/ShareItemModal.vue
@@ -97,6 +97,9 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { ItemClass } from '@lib/items/items';
 import { fetchFromApi, getInitialsByName, getUserColorByInitials } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	item: {
@@ -205,8 +208,18 @@ async function shareFile() {
 
 		getItem();
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.create.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.create.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 async function deleteSharing(sharingId: number | undefined) {
@@ -235,8 +248,18 @@ async function deleteSharing(sharingId: number | undefined) {
 
 		getItem().catch(() => close());
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.delete.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('shareItemModal.toast.delete.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {

diff --git a/src/components/item/docs/CreateModal.vue b/src/components/item/docs/CreateModal.vue
@@ -28,7 +28,9 @@ import BaseInput from '@components/base/input.vue';
 import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
 import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -61,10 +63,20 @@ async function createDocs() {
 
 		addItem(createdDocs);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.create.failed') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {

diff --git a/src/components/item/docs/Docs.vue b/src/components/item/docs/Docs.vue
@@ -68,6 +68,9 @@ import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
 import type { DocsClass } from '@lib/items/docs';
 import { url } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const docsContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -86,11 +89,19 @@ async function deleteDocs() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.docs.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.delete.success') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 

diff --git a/src/components/item/docs/EditModal.vue b/src/components/item/docs/EditModal.vue
@@ -27,6 +27,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { DocsClass } from '@lib/items/docs';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	docs: {
@@ -61,11 +64,20 @@ async function updateFile() {
 
 		updateItem(updatedDocs);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
 	} catch (e) {
 		console.error('Error: ' + e);
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.docs.toast.update.success') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 

diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue
@@ -27,6 +27,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { FileClass } from '@lib/items/files';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	file: {
@@ -63,10 +66,20 @@ async function updateFile() {
 
 		updateItem(updatedFile);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: file.value.name + ' ' + t('fileBrowser.file.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.file.toast.update.failed') + ' ' + file.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {

diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
@@ -65,12 +65,15 @@ import { ref, type PropType } from 'vue';
 
 // Helpers
 import { t } from '@lib/i18n';
+import { v4 as uuid } from 'uuid';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
+import { ToastType } from '@components/base/toast.vue';
 
 // Stores
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
 
 // File
 import { FileClass } from '@lib/items/files';
@@ -105,11 +108,19 @@ async function deleteFile() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.file.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.file.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 

diff --git a/src/components/item/file/NoFiles.vue b/src/components/item/file/NoFiles.vue
@@ -36,6 +36,10 @@
 import { FileClass } from '@lib/items/files';
 import type { FolderType } from '@lib/items/folders';
 import { ref, type PropType } from 'vue';
+import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	modelValue: {
@@ -60,10 +64,18 @@ async function uploadFiles(e: Event) {
 			setTimeout(async () => {
 				window.location.reload();
 
-				// TODO: Toast
-			}, 1000);
+				addToast({
+					id: uuid(),
+					message: file.name + ' ' + t('fileBrowser.file.toast.create.success'),
+					type: ToastType.Success,
+				});
+			}, 5000);
 		} catch (error) {
-			// TODO: Toast
+			addToast({
+				id: uuid(),
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
+				type: ToastType.Danger,
+			});
 		}
 	});
 }

diff --git a/src/components/item/folder/CreateModal.vue b/src/components/item/folder/CreateModal.vue
@@ -52,6 +52,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -99,10 +102,20 @@ async function createFolder() {
 
 		addItem(createdFolder);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: folder.value.name + ' ' + t('fileBrowser.folder.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.failed.success') + ' ' + folder.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {

diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue
@@ -52,6 +52,9 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	folder: {
@@ -101,10 +104,20 @@ async function updateFolder() {
 
 		updateItem(updatedFolder);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.folder.name + ' ' + t('fileBrowser.folder.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.update.failed') + ' ' + props.folder.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {

diff --git a/src/components/item/folder/Folder.vue b/src/components/item/folder/Folder.vue
@@ -71,6 +71,9 @@ import EditFolderModal from './EditModal.vue';
 import ShareItemModal from '../ShareItemModal.vue';
 import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
+import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const folderContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -93,11 +96,19 @@ async function deleteFolder() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			id: uuid(),
+			message: props.modelValue.name + ' ' + t('fileBrowser.folder.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			id: uuid(),
+			message: t('fileBrowser.folder.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }