Add direct S3 interaction

Closes #15 (closed)

src/components/BucketView.vue

@@ -6,12 +6,16 @@ import { ObjectService } from "@/client";
 import BootstrapIcon from "@/components/BootstrapIcon.vue";
 import fileSize from "filesize";
 import dayjs from "dayjs";
-import { Tooltip } from "bootstrap";
+import { Toast, Tooltip } from "bootstrap";
 import PermissionListModal from "@/components/Modals/PermissionListModal.vue";
 import UploadObjectModal from "@/components/Modals/UploadObjectModal.vue";
 import PermissionModal from "@/components/Modals/PermissionModal.vue";
 import CreateFolderModal from "@/components/Modals/CreateFolderModal.vue";
-import { S3Client } from "@aws-sdk/client-s3";
+import {
+  S3Client,
+  DeleteObjectCommand,
+  DeleteObjectsCommand,
+} from "@aws-sdk/client-s3";
 import { awsAuthMiddlewareOptions } from "@aws-sdk/middleware-signing";
 
 const client = new S3Client({
@@ -46,6 +50,8 @@ const props = defineProps<{
   subFolders: string[] | string;
   permission: BucketPermission | undefined;
 }>();
+const randomIDSuffix = Math.random().toString(16).substr(2, 8);
+let successToast: Toast | null = null;
 
 // Typescript types
 // -----------------------------------------------------------------------------
@@ -75,12 +81,14 @@ const objectState = reactive({
   bucketNotFoundError: false,
   bucketPermissionError: false,
   createdPermission: undefined,
+  deletedItem: "",
 } as {
   objects: S3ObjectMetaInformation[];
   loading: boolean;
   bucketNotFoundError: boolean;
   bucketPermissionError: boolean;
   createdPermission: undefined | BucketPermission;
+  deletedItem: string;
 });
 
 // Watcher
@@ -223,6 +231,7 @@ onMounted(() => {
     .forEach(
       (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl, { trigger: "hover" })
     );
+  successToast = new Toast("#successToast-" + randomIDSuffix);
 });
 
 // Functions
@@ -306,6 +315,60 @@ function objectUploaded(newObject: S3ObjectMetaInformation) {
   }
 }
 
+/**
+ * Delete a Object in the current folder
+ * @param key Key of the Object
+ */
+function deleteObject(key: string) {
+  const command = new DeleteObjectCommand({
+    Bucket: props.bucketName,
+    Key: key,
+  });
+  client
+    .send(command)
+    .then(() => {
+      const splittedKey = key.split("/");
+      objectState.deletedItem = splittedKey[splittedKey.length - 1];
+      successToast?.show();
+      objectState.objects = objectState.objects.filter(
+        (obj) => obj.key !== key
+      );
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
+
+/**
+ * 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) {
+  const command = new DeleteObjectsCommand({
+    Bucket: props.bucketName,
+    Delete: {
+      Objects: objectState.objects
+        .filter((obj) => obj.key.startsWith(folderPath))
+        .map((obj) => {
+          return { Key: obj.key };
+        }),
+    },
+  });
+  client
+    .send(command)
+    .then(() => {
+      const splittedPath = folderPath.split("/");
+      objectState.deletedItem = splittedPath[splittedPath.length - 2];
+      successToast?.show();
+      objectState.objects = objectState.objects.filter(
+        (obj) => !obj.key.startsWith(folderPath)
+      );
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
+
 watch(
   visibleObjects,
   (visObjs) => {
@@ -323,6 +386,28 @@ watch(
 </script>
 
 <template>
+  <div class="toast-container position-fixed top-0 end-0 p-3">
+    <div
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      class="toast text-bg-success align-items-center border-0"
+      data-bs-autohide="true"
+      :id="'successToast-' + randomIDSuffix"
+    >
+      <div class="d-flex">
+        <div class="toast-body">
+          Successfully deleted {{ objectState.deletedItem }}
+        </div>
+        <button
+          type="button"
+          class="btn-close btn-close-white me-2 m-auto"
+          data-bs-dismiss="toast"
+          aria-label="Close"
+        ></button>
+      </div>
+    </div>
+  </div>
   <!-- Navbar Breadcrumb -->
   <nav aria-label="breadcrumb" class="fs-2">
     <ol class="breadcrumb">
@@ -590,6 +675,7 @@ watch(
                     <button
                       class="dropdown-item text-danger align-middle"
                       type="button"
+                      @click="deleteObject(obj.key)"
                     >
                       <bootstrap-icon
                         icon="trash-fill"
@@ -608,6 +694,11 @@ watch(
                 <button
                   type="button"
                   class="btn btn-danger btn-sm align-middle"
+                  @click="
+                    deleteFolder(
+                      obj.parentFolder.join('/') + '/' + obj.name + '/'
+                    )
+                  "
                 >
                   <bootstrap-icon
                     icon="trash-fill"