Add delete modal to confirm deletion of objects

#13

src/components/BucketView.vue

@@ -17,6 +17,7 @@ import CopyObjectModal from "@/components/Modals/CopyObjectModal.vue";
 import PermissionModal from "@/components/Modals/PermissionModal.vue";
 import ObjectDetailModal from "@/components/Modals/ObjectDetailModal.vue";
 import CreateFolderModal from "@/components/Modals/CreateFolderModal.vue";
+import DeleteModal from "@/components/Modals/DeleteModal.vue"
 import {
   S3Client,
   DeleteObjectCommand,
@@ -121,6 +122,8 @@ const objectState = reactive({
   createdPermission: undefined,
   deletedItem: "",
   editObjectKey: "",
+  potentialObjectToDelete: "",
+  deleteFolder: true,
   copyObject: {
     key: "",
     size: 0,
@@ -141,6 +144,8 @@ const objectState = reactive({
   createdPermission: undefined | BucketPermission;
   deletedItem: string;
   editObjectKey: string;
+  potentialObjectToDelete: string;
+  deleteFolder: boolean;
   copyObject: S3ObjectMetaInformation;
   viewDetailObject: S3ObjectMetaInformation;
 });
@@ -388,11 +393,16 @@ function objectCopied(copiedObject: S3ObjectMetaInformation) {
   }
 }
 
+function deleteObject(key: string) {
+  objectState.potentialObjectToDelete = key;
+  objectState.deleteFolder = false;
+}
+
 /**
  * Delete an Object in the current folder
  * @param key Key of the Object
  */
-function deleteObject(key: string) {
+function confirmedDeleteObject(key: string) {
   const command = new DeleteObjectCommand({
     Bucket: props.bucketName,
     Key: key,
@@ -432,11 +442,16 @@ async function downloadObject(key: string, bucket: string) {
   document.body.removeChild(element);
 }
 
+function deleteFolder(folderPath: string) {
+  objectState.potentialObjectToDelete = folderPath;
+  objectState.deleteFolder = true;
+}
+
 /**
  * Delete a folder in the current Bucket
  * @param folderPath Path to the folder with a trailing "/", e.g. some/path/to/a/folder/
  */
-function deleteFolder(folderPath: string) {
+function confirmedDeleteFolder(folderPath: string) {
   const command = new DeleteObjectsCommand({
     Bucket: props.bucketName,
     Delete: {
@@ -506,6 +521,13 @@ watch(
       </div>
     </div>
   </div>
+  <DeleteModal
+    modalID="delete-object-modal"
+    modal-label="some-label"
+    :object-name-delete="objectState.potentialObjectToDelete"
+    :back-modal-id="undefined"
+    @confirm-delete="objectState.deleteFolder ? confirmedDeleteFolder(objectState.potentialObjectToDelete) : confirmedDeleteObject(objectState.potentialObjectToDelete)"
+  />
   <!-- Navbar Breadcrumb -->
   <nav aria-label="breadcrumb" class="fs-2">
     <ol class="breadcrumb">
@@ -805,6 +827,8 @@ watch(
                       class="dropdown-item text-danger align-middle"
                       type="button"
                       @click="deleteObject(obj.key)"
+                      data-bs-toggle="modal"
+                      data-bs-target="#delete-object-modal"
                       :disabled="!writeS3Permission"
                     >
                       <bootstrap-icon
@@ -825,6 +849,8 @@ watch(
                   type="button"
                   class="btn btn-danger btn-sm align-middle"
                   :disabled="!writeS3Permission"
+                  data-bs-toggle="modal"
+                  data-bs-target="#delete-object-modal"
                   @click="
                     deleteFolder(
                       obj.parentFolder.concat(['']).join('/') + obj.name + '/'