From 94bbda81dca10783dade4ad344ef40cea40215b0 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Thu, 30 Nov 2023 13:22:38 +0000
Subject: [PATCH] web/satellite/vuetify-poc: add delete action to file preview

This change adds a menu to the file preview dialog with an action to
delete files.

Issue: #6553

Change-Id: I3b282696077b884df4171a85dee6a62dc9fb0513
---
 .../components/dialogs/DeleteFileDialog.vue   |  2 +
 .../components/dialogs/FilePreviewDialog.vue  | 42 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
index f24c9e1cf..f3452179f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
@@ -92,6 +92,7 @@ const props = defineProps<{
 const emit = defineEmits<{
     'update:modelValue': [value: boolean],
     'contentRemoved': [],
+    'fileDeleted': [],
 }>();
 
 const model = computed<boolean>({
@@ -131,6 +132,7 @@ async function onDeleteClick(): Promise<void> {
             return;
         }
 
+        emit('fileDeleted');
         notify.success(`${fileType.value.charAt(0).toUpperCase() + fileType.value.slice(1)} deleted.`);
         model.value = false;
     });
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
index b01a27965..8ffe68b2b 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
@@ -54,6 +54,18 @@
                         >
                             More
                         </v-tooltip>
+                        <v-menu activator="parent">
+                            <v-list class="pa-1">
+                                <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="onDeleteFileClick">
+                                    <template #prepend>
+                                        <icon-trash bold />
+                                    </template>
+                                    <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
+                                        Delete
+                                    </v-list-item-title>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
                     </v-btn>
                     <v-btn icon size="small" color="white" @click="model = false">
                         <img src="@poc/assets/icon-close.svg" width="18" alt="Close">
@@ -111,6 +123,12 @@
 
     <share-dialog v-model="isShareDialogShown" :bucket-name="bucketName" :file="currentFile" />
     <geographic-distribution-dialog v-model="isGeographicDistributionDialogShown" />
+    <delete-file-dialog
+        v-if="fileToDelete"
+        v-model="isDeleteFileDialogShown"
+        :file="fileToDelete"
+        @file-deleted="onDeleteComplete"
+    />
 </template>
 
 <script setup lang="ts">
@@ -122,6 +140,10 @@ import {
     VCarouselItem,
     VDialog,
     VIcon,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VMenu,
     VToolbar,
     VToolbarTitle,
     VTooltip,
@@ -137,6 +159,8 @@ import IconDistribution from '@poc/components/icons/IconDistribution.vue';
 import FilePreviewItem from '@poc/components/dialogs/filePreviewComponents/FilePreviewItem.vue';
 import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
 import GeographicDistributionDialog from '@poc/components/dialogs/GeographicDistributionDialog.vue';
+import IconTrash from '@poc/components/icons/IconTrash.vue';
+import DeleteFileDialog from '@poc/components/dialogs/DeleteFileDialog.vue';
 
 const obStore = useObjectBrowserStore();
 const bucketsStore = useBucketsStore();
@@ -146,6 +170,8 @@ const carousel = ref<VCarousel | null>(null);
 const isDownloading = ref<boolean>(false);
 const isShareDialogShown = ref<boolean>(false);
 const isGeographicDistributionDialogShown = ref<boolean>(false);
+const fileToDelete = ref<BrowserObject | null>(null);
+const isDeleteFileDialogShown = ref<boolean>(false);
 
 const folderType = 'folder';
 
@@ -280,6 +306,22 @@ async function focusOnCarousel(): Promise<void> {
     carousel.value?.$el.focus();
 }
 
+/**
+ * Handles delete button click event for files.
+ */
+function onDeleteFileClick(): void {
+    fileToDelete.value = currentFile.value;
+    isDeleteFileDialogShown.value = true;
+}
+
+/**
+ * Closes the preview on file delete.
+ */
+function onDeleteComplete(): void {
+    fileToDelete.value = null;
+    model.value = false;
+}
+
 /**
  * Watch for changes on the filepath and changes the current carousel item accordingly.
  */