From f86f534b9afe570ccd96d97aa5dcef2d3edac590 Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Wed, 26 Jun 2024 10:12:09 -0700
Subject: [PATCH] Add Navigation to Delete button

---
 frontend/src/components/bucket/BucketTable.vue        |  5 +++--
 frontend/src/components/object/DeleteObjectButton.vue | 10 ++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 9276f7b4..db9fb74f 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -65,6 +65,7 @@ const showPermissions = async (bucketId: string, bucketName: string) => {
 };
 
 const confirmDeleteBucket = (bucketId: string) => {
+  focusedElement.value = document.activeElement;
   confirm.require({
     message:
       'Are you sure you want to delete this folder in BCBox? \
@@ -73,7 +74,8 @@ const confirmDeleteBucket = (bucketId: string) => {
     header: 'Delete folder',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',
-    accept: () => deleteBucket(bucketId)
+    accept: () => deleteBucket(bucketId),
+    onHide: () => onDialogHide()
   });
 };
 
@@ -344,7 +346,6 @@ watch(getBuckets, () => {
             class="p-button-lg p-button-text p-button-danger"
             aria-label="Delete folder"
             @click="confirmDeleteBucket(node.data.bucketId)"
-            @keyup.enter="confirmDeleteBucket(node.data.bucketId)"
           >
             <font-awesome-icon icon="fa-solid fa-trash" />
           </Button>
diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 22ef6b70..26a848e0 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import { Button, Dialog, useConfirm } from '@/lib/primevue';
-import { useObjectStore } from '@/store/objectStore';
+//import { useObjectStore } from '@/store/objectStore';
+import { useNavStore, useObjectStore } from '@/store';
 import { ButtonMode } from '@/utils/enums';
+import { onDialogHide } from '@/utils/utils';
 
 // Props
 type Props = {
@@ -23,6 +26,7 @@ const emit = defineEmits(['on-deleted-success', 'on-deleted-error']);
 
 // Store
 const objectStore = useObjectStore();
+const { focusedElement } = storeToRefs(useNavStore());
 
 // State
 const displayNoFileDialog = ref(false);
@@ -31,6 +35,7 @@ const displayNoFileDialog = ref(false);
 const confirm = useConfirm();
 
 const confirmDelete = () => {
+  focusedElement.value = document.activeElement;
   if (props.ids.length) {
     const item = props.versionId ? 'version' : 'object';
     const msgContext = props.ids.length > 1 ? `the selected ${props.ids.length} ${item}s` : `this ${item}`;
@@ -46,7 +51,8 @@ const confirmDelete = () => {
             .then(() => emit('on-deleted-success', props.versionId))
             .catch(() => {});
         });
-      }
+      },
+      onHide: () => onDialogHide()
     });
   } else {
     displayNoFileDialog.value = true;