Add pseudo folder structure to bucket view

src/components/BucketListItem.vue

@@ -34,7 +34,7 @@ const emit = defineEmits<{
         :aria-current="props.active"
         :to="{
           name: 'bucket',
-          params: { bucket_name: bucket.name, sub_folders: [] },
+          params: { bucketName: bucket.name, subFolders: [] },
         }"
       >
         {{ bucket.name }}

src/components/BucketView.vue

 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import { onMounted, reactive, watch, computed } from "vue";
+import type { ComputedRef } from "vue";
 import type { S3ObjectMetaInformation } from "@/client";
 import { ObjectService } from "@/client";
 import BootstrapIcon from "@/components/BootstrapIcon.vue";
 import fileSize from "filesize";
 import dayjs from "dayjs";
 
+// Constants
+// -----------------------------------------------------------------------------
 const route = useRoute();
 
+// Typescript types
+// -----------------------------------------------------------------------------
+interface S3ObjectWithFolder extends S3ObjectMetaInformation {
+  folder: string[];
+  pseudoFileName: string;
+}
+
+type S3PseudoFolder = {
+  size: number;
+  parentFolder: string[];
+  last_modified: string;
+  name: string;
+  key: string;
+};
+
+type FolderTree = {
+  subFolders: Record<string, FolderTree>;
+  files: S3ObjectWithFolder[];
+};
+
+// Reactive State
+// -----------------------------------------------------------------------------
 const objectState = reactive({
   objects: [],
+  visibleObjects: [],
   loading: true,
-  bucket_not_found_error: false,
-  bucket_permission_error: false,
+  bucketNotFoundError: false,
+  bucketPermissionError: false,
 } as {
   objects: S3ObjectMetaInformation[];
+  visibleObjects: (S3ObjectWithFolder | S3PseudoFolder)[];
   loading: boolean;
-  bucket_not_found_error: boolean;
-  bucket_permission_error: boolean;
+  bucketNotFoundError: boolean;
+  bucketPermissionError: boolean;
 });
 
+// Watcher
+// -----------------------------------------------------------------------------
 watch(
   () => route.params,
   (newRouteParams, oldRouteParams) => {
     if (
-      newRouteParams.bucket_name &&
-      oldRouteParams.bucket_name !== newRouteParams.bucket_name
+      newRouteParams.bucketName &&
+      oldRouteParams.bucketName !== newRouteParams.bucketName
+    ) {
+      // If bucket is changed, update the objects
+      updateObjects(newRouteParams.bucketName as string);
+    } else if (
+      newRouteParams.subFolders &&
+      oldRouteParams.subFolders !== newRouteParams.subFolders
     ) {
-      update_objects(newRouteParams.bucket_name as string);
+      // If sub folder is changed, update the visible objects
+      updateVisibleObjects(newRouteParams.subFolders as string[]);
     }
   }
 );
 
-const sub_folder_in_url = computed(() => route.params.sub_folders.length > 0);
-const error_loading_objects = computed(
-  () =>
-    objectState.bucket_permission_error || objectState.bucket_not_found_error
+watch(
+  () => objectState.objects,
+  () => {
+    updateVisibleObjects(
+      subFolderInUrl.value ? (route.params.subFolders as string[]) : []
+    );
+  }
 );
 
+// Computed Properties
+// -----------------------------------------------------------------------------
+const folderStructure: ComputedRef<FolderTree> = computed(() => {
+  /**
+   * Store the entire folder structure in a bucket in a tree-like data structure
+   */
+  return objectsWithFolders.value.reduce(
+    // Add one object after another to the folder structure
+    (fTree, currentObject) => {
+      // If the object is not in a sub folder, but it in the top level 'folder'
+      if (currentObject.folder.length === 0) {
+        fTree.files.push(currentObject);
+      } else {
+        // If the object is in a sub folder
+        let currentFolder: FolderTree = fTree;
+        // For every sub folder the object is in , navigate into the sub folder
+        for (const folderName of currentObject.folder) {
+          // If the sub folder doesn't exist yet, create it
+          if (
+            Object.keys(currentFolder.subFolders).find(
+              (subFolderName) => subFolderName === folderName
+            ) == undefined
+          ) {
+            currentFolder.subFolders[folderName] = {
+              subFolders: {},
+              files: [],
+            };
+          }
+          // navigate into the sub folder
+          currentFolder = currentFolder.subFolders[folderName] as FolderTree;
+        }
+        // Add object to the folder
+        currentFolder.files.push(currentObject);
+      }
+      return fTree;
+    },
+    // Empty folder structure as initial value
+    {
+      subFolders: {},
+      files: [],
+    } as FolderTree
+  );
+});
+
+const objectsWithFolders: ComputedRef<S3ObjectWithFolder[]> = computed(() => {
+  /**
+   * Add to the meta information from objects the pseudo filename and their pseudo folder
+   * This can be inferred from the key of the object where the '/' character is the delimiter, e.g.
+   * dir1/dir2/text.txt ->
+   *  folder: dir1, dir2
+   *  filename: text.txt
+   */
+  return objectState.objects.map((obj) => {
+    const splittedKey = obj.key.split("/");
+    return {
+      ...obj,
+      pseudoFileName: splittedKey[splittedKey.length - 1],
+      folder: splittedKey.slice(0, splittedKey.length - 1),
+    };
+  });
+});
+
+const subFolderInUrl: ComputedRef<boolean> = computed(
+  () => route.params.subFolders != null && route.params.subFolders.length > 0
+);
+const errorLoadingObjects: ComputedRef<boolean> = computed(
+  () => objectState.bucketPermissionError || objectState.bucketNotFoundError
+);
+
+// Lifecycle Hooks
+// -----------------------------------------------------------------------------
 onMounted(() => {
-  update_objects(route.params.bucket_name as string);
+  updateObjects(route.params.bucketName as string);
 });
 
-function update_objects(bucket_name: string) {
-  objectState.bucket_not_found_error = false;
-  objectState.bucket_permission_error = false;
+// Functions
+// -----------------------------------------------------------------------------
+/**
+ * Calculate recursively the cumulative file size of all o objects in a folder
+ * @param folder Folder to inspect
+ * @returns The size of this folder in bytes
+ */
+function calculateFolderSize(folder: FolderTree): number {
+  let folderSize = 0;
+  folderSize += folder.files.reduce((acc, file) => acc + file.size, 0);
+  for (const subFolderName of Object.keys(folder.subFolders)) {
+    folderSize += calculateFolderSize(folder.subFolders[subFolderName]);
+  }
+  return folderSize;
+}
+
+/**
+ * Calculate recursively when an object in a folder were modified the last time
+ * @param folder Folder to inspect
+ * @returns The last modified timestamp as ISO string
+ */
+function calculateFolderLastModified(folder: FolderTree): string {
+  let lastModified: dayjs.Dayjs;
+  lastModified = folder.files
+    .map((f) => dayjs(f.last_modified))
+    .reduce(
+      (acc, fileAccessed) => (fileAccessed.isAfter(acc) ? fileAccessed : acc),
+      dayjs("2000-01-01")
+    );
+  for (const subFolderName of Object.keys(folder.subFolders)) {
+    const lastModifiedSubFolder = dayjs(
+      calculateFolderLastModified(folder.subFolders[subFolderName])
+    );
+    if (lastModifiedSubFolder.isAfter(lastModified)) {
+      lastModified = lastModifiedSubFolder;
+    }
+  }
+  return lastModified.toISOString();
+}
+
+/**
+ * Load the meta information about objects from a bucket
+ * @param bucketName Name of a bucket
+ */
+function updateObjects(bucketName: string) {
+  objectState.bucketNotFoundError = false;
+  objectState.bucketPermissionError = false;
   objectState.loading = true;
-  ObjectService.objectGetBucketObjects(bucket_name)
+  ObjectService.objectGetBucketObjects(bucketName)
     .then((objs) => {
       objectState.objects = objs;
     })
     .catch((error) => {
       if (error.status === 404) {
-        objectState.bucket_not_found_error = true;
+        objectState.bucketNotFoundError = true;
       } else if (error.status == 403) {
-        objectState.bucket_permission_error = true;
+        objectState.bucketPermissionError = true;
       }
     })
     .finally(() => {
       objectState.loading = false;
     });
 }
+
+/**
+ * Update the visible objects based on the current sub folder
+ * @param subFolders sub folders as ordered array
+ */
+function updateVisibleObjects(subFolders: string[]) {
+  objectState.visibleObjects = [];
+  let currentFolder = folderStructure.value;
+  for (const subFolder of subFolders) {
+    if (currentFolder.subFolders[subFolder] == null) {
+      return;
+    } else {
+      currentFolder = currentFolder.subFolders[subFolder];
+    }
+  }
+  const arr = [];
+  arr.push(...currentFolder.files);
+  arr.push(
+    ...Object.keys(currentFolder.subFolders).map((subFolderName) => {
+      const folderSize = calculateFolderSize(
+        currentFolder.subFolders[subFolderName]
+      );
+      const folderLastModified = dayjs(
+        calculateFolderLastModified(currentFolder.subFolders[subFolderName])
+      ).toISOString();
+      return {
+        name: subFolderName,
+        size: folderSize,
+        key: subFolderName,
+        parentFolder: subFolders,
+        last_modified: folderLastModified,
+      } as S3PseudoFolder;
+    })
+  );
+  objectState.visibleObjects = arr;
+}
+
+function isS3Object(
+  obj: S3PseudoFolder | S3ObjectWithFolder
+): obj is S3ObjectWithFolder {
+  return (obj as S3ObjectWithFolder).folder !== undefined;
+}
 </script>
 
 <template>
+  <!-- Navbar Breadcrumb -->
   <nav aria-label="breadcrumb" class="fs-2">
     <ol class="breadcrumb">
-      <li class="breadcrumb-item" :class="{ active: sub_folder_in_url }">
+      <li class="breadcrumb-item" :class="{ active: subFolderInUrl }">
         <router-link
-          v-if="sub_folder_in_url"
+          v-if="subFolderInUrl"
           :to="{
             name: 'bucket',
-            params: { bucket_name: route.params.bucket_name, sub_folders: [] },
+            params: { bucketName: route.params.bucketName, subFolders: [] },
           }"
-          >{{ route.params.bucket_name }}</router-link
-        >
-        <span v-else>{{ route.params.bucket_name }}</span>
+          >{{ route.params.bucketName }}
+        </router-link>
+        <span v-else>{{ route.params.bucketName }}</span>
       </li>
       <li
         class="breadcrumb-item"
-        v-for="(folder, index) in route.params.sub_folders"
+        v-for="(folder, index) in route.params.subFolders"
         :key="folder"
-        :class="{ active: index === route.params.sub_folders.length }"
+        :class="{ active: index === route.params.subFolders.length }"
       >
         <router-link
-          v-if="index !== route.params.sub_folders.length - 1"
+          v-if="index !== route.params.subFolders.length - 1"
           :to="{
             name: 'bucket',
             params: {
-              bucket_name: route.params.bucket_name,
-              sub_folders: route.params.sub_folders.slice(0, index + 1),
+              bucketName: route.params.bucketName,
+              subFolders: route.params.subFolders.slice(0, index + 1),
             },
           }"
-          >{{ folder }}</router-link
-        >
+          >{{ folder }}
+        </router-link>
         <span v-else>{{ folder }}</span>
       </li>
     </ol>
   </nav>
+  <!-- Inputs on top -->
+  <!-- Search bucket text input -->
   <div class="input-group mt-2">
     <span class="input-group-text" id="objects-search-wrapping"
       ><bootstrap-icon icon="search" :width="16" :height="16"
@@ -112,18 +311,20 @@ function update_objects(bucket_name: string) {
       disabled
     />
   </div>
+  <!-- Upload object button -->
   <button
     type="button"
     class="btn btn-secondary m-2"
-    :disabled="error_loading_objects"
+    :disabled="errorLoadingObjects"
   >
     <bootstrap-icon icon="upload" :width="16" :height="16" fill="white" />
     <span class="visually-hidden">Upload Object</span>
   </button>
+  <!-- Add bucket permission button -->
   <button
     type="button"
     class="btn btn-secondary m-2"
-    :disabled="error_loading_objects"
+    :disabled="errorLoadingObjects"
   >
     <bootstrap-icon
       icon="person-plus-fill"
@@ -133,30 +334,36 @@ function update_objects(bucket_name: string) {
     />
     <span class="visually-hidden">Add Bucket Permission</span>
   </button>
+  <!-- Add folder button -->
   <button
     type="button"
     class="btn btn-secondary m-2"
-    :disabled="error_loading_objects"
+    :disabled="errorLoadingObjects"
   >
     <bootstrap-icon icon="plus-lg" :width="16" :height="16" fill="white" />
     Folder
     <span class="visually-hidden">Add Folder</span>
   </button>
+  <!-- Body -->
   <div class="pt-3">
-    <div v-if="objectState.bucket_not_found_error">
+    <!-- If bucket not found -->
+    <div v-if="objectState.bucketNotFoundError">
       <p>Bucket not found</p>
     </div>
-    <div v-else-if="objectState.bucket_permission_error">
+    <!-- If no permission for bucket -->
+    <div v-else-if="objectState.bucketPermissionError">
       <p>No permission for this bucket</p>
     </div>
+    <!-- Show content of bucket -->
     <div v-else>
+      <!-- Table header -->
       <table
         class="table table-dark table-striped table-hover caption-top align-middle"
       >
         <caption>
           Displaying
           {{
-            objectState.loading ? 0 : objectState.objects.length
+            objectState.loading ? 0 : objectState.visibleObjects.length
           }}
           Objects
         </caption>
@@ -168,6 +375,7 @@ function update_objects(bucket_name: string) {
             <th scope="col"></th>
           </tr>
         </thead>
+        <!-- Table body when loading the objects -->
         <tbody v-if="objectState.loading">
           <tr v-for="n in 5" :key="n" class="placeholder-glow">
             <th scope="row">
@@ -178,22 +386,44 @@ function update_objects(bucket_name: string) {
             <td></td>
           </tr>
         </tbody>
-        <tbody v-else-if="objectState.objects.length === 0">
+        <!-- Table body when no objects are in the bcuket -->
+        <tbody v-else-if="objectState.visibleObjects.length === 0">
           <tr>
-            <td colspan="4" class="text-center text-secondary">
-              <i>No objects to display</i>
+            <td colspan="4" class="text-center fst-italic fw-light">
+              No objects to display
             </td>
           </tr>
         </tbody>
+        <!-- Table body when showing objects -->
         <tbody v-else>
-          <tr v-for="obj in objectState.objects" :key="obj.key">
-            <th scope="row" class="text-truncate">{{ obj.key }}</th>
+          <tr v-for="obj in objectState.visibleObjects" :key="obj.key">
+            <th scope="row" class="text-truncate">
+              <!-- Show file name if row is an object -->
+              <div v-if="isS3Object(obj)">{{ obj.pseudoFileName }}</div>
+              <!-- Show link to subfolder if row is a folder -->
+              <div v-else>
+                <router-link
+                  class="text-decoration-none"
+                  :to="{
+                    name: 'bucket',
+                    params: {
+                      bucketName: route.params.bucketName,
+                      subFolders: obj.parentFolder.concat(obj.name),
+                    },
+                  }"
+                  >{{ obj.name }}
+                </router-link>
+              </div>
+            </th>
             <td>{{ dayjs(obj.last_modified).fromNow() }}</td>
             <td>{{ fileSize(obj.size) }}</td>
+            <!-- Show buttons with dropdown menu if row is an object -->
             <td class="text-end">
               <div
+                v-if="isS3Object(obj)"
                 class="btn-group btn-group-sm dropdown-center dropdown-menu-start"
               >
+                <!-- Download Button -->
                 <button type="button" class="btn btn-secondary">
                   Download
                 </button>
@@ -205,7 +435,7 @@ function update_objects(bucket_name: string) {
                 >
                   <span class="visually-hidden">Toggle Dropdown</span>
                 </button>
-
+                <!-- Dropdown menu -->
                 <ul class="dropdown-menu dropdown-menu-dark">
                   <li>
                     <button class="dropdown-item" type="button">Details</button>
@@ -217,7 +447,10 @@ function update_objects(bucket_name: string) {
                     <button class="dropdown-item" type="button">Copy</button>
                   </li>
                   <li>
-                    <button class="dropdown-item text-danger" type="button">
+                    <button
+                      class="dropdown-item text-danger align-middle"
+                      type="button"
+                    >
                       <bootstrap-icon
                         icon="trash-fill"
                         class="text-danger"
@@ -230,6 +463,22 @@ function update_objects(bucket_name: string) {
                   </li>
                 </ul>
               </div>
+              <!-- Show delete button when row is a folder -->
+              <div v-else>
+                <button
+                  type="button"
+                  class="btn btn-danger btn-sm align-middle"
+                >
+                  <bootstrap-icon
+                    icon="trash-fill"
+                    class="text-danger me-2"
+                    :width="12"
+                    :height="12"
+                    fill="white"
+                  />
+                  <span>Delete</span>
+                </button>
+              </div>
             </td>
           </tr>
         </tbody>

src/components/CreateBucketComponent.vue

@@ -3,11 +3,13 @@ import { BucketService } from "@/client";
 import type { BucketIn } from "@/client";
 import { reactive } from "vue";
 import BootstrapModal from "@/components/BootstrapModal.vue";
+import { useRouter } from "vue-router";
 /*
 import { onMounted } from "vue";
 import { Modal } from "bootstrap";
 */
 
+const router = useRouter();
 const emit = defineEmits(["bucketCreated"]);
 const bucket = reactive({ name: "", description: "" } as BucketIn);
 const formState = reactive({
@@ -51,6 +53,10 @@ function createBucket() {
         bucket.description = "";
         formState.bucketNameTaken = false;
         formState.validated = false;
+        router.push({
+          name: "bucket",
+          params: { bucketName: createdBucket.name, subFolders: [] },
+        });
       })
       .catch((error) => {
         if (
@@ -149,7 +155,12 @@ function modalClosed() {
         :disabled="formState.loading"
         @click.prevent="createBucket"
       >
-        <span v-if="formState.loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        <span
+          v-if="formState.loading"
+          class="spinner-border spinner-border-sm"
+          role="status"
+          aria-hidden="true"
+        ></span>
         Save
       </button>
     </template>

src/router/index.ts

@@ -16,7 +16,7 @@ const router = createRouter({
           component: () => import("../views/object-storage/BucketsView.vue"),
           children: [
             {
-              path: ":bucket_name/:sub_folders*",
+              path: ":bucketName/:subFolders*",
               name: "bucket",
               component: () => import("../components/BucketView.vue"),
             },

src/views/object-storage/BucketsView.vue

@@ -32,11 +32,11 @@ function addBucket(bucket: BucketOut) {
   bucketsState.buckets.push(bucket);
 }
 
-function deleteBucket(bucket_name: string) {
-  BucketService.bucketDeleteBucket(bucket_name).then(() => {
+function deleteBucket(bucketName: string) {
+  BucketService.bucketDeleteBucket(bucketName).then(() => {
     router.push({ name: "buckets" });
     bucketsState.buckets = bucketsState.buckets.filter(
-      (bucket) => bucket.name !== bucket_name
+      (bucket) => bucket.name !== bucketName
     );
   });
 }
@@ -97,8 +97,8 @@ onMounted(() => {
             v-for="bucket in bucketsState.buckets"
             :key="bucket.name"
             :active="
-              route.params.bucket_name != null &&
-              route.params.bucket_name === bucket.name
+              route.params.bucketName != null &&
+              route.params.bucketName === bucket.name
             "
             :bucket="bucket"
             :loading="false"