From 44238d88deced638dbbefcdcacbb794a992ca6f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Tue, 27 Sep 2022 10:42:39 +0200
Subject: [PATCH] Add delete modal to confirm deletion of objects
#13
---
src/components/BucketView.vue | 30 ++++++++++++++++++++++++++++--
1 file changed, 28 insertions(+), 2 deletions(-)
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index 819a2a2..b43e2c3 100644
--- a/src/components/BucketView.vue
+++ b/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 + '/'
--
GitLab