Add view object details modal

#15

src/components/BucketView.vue

@@ -15,6 +15,7 @@ import PermissionListModal from "@/components/Modals/PermissionListModal.vue";
 import UploadObjectModal from "@/components/Modals/UploadObjectModal.vue";
 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 {
   S3Client,
@@ -121,6 +122,12 @@ const objectState = reactive({
   deletedItem: "",
   editObjectKey: "",
   copyObjectKey: "",
+  viewDetailObject: {
+    key: "",
+    size: 0,
+    bucket: "",
+    last_modified: "2022-01-01",
+  },
 } as {
   objects: S3ObjectMetaInformation[];
   loading: boolean;
@@ -130,6 +137,7 @@ const objectState = reactive({
   deletedItem: string;
   editObjectKey: string;
   copyObjectKey: string;
+  viewDetailObject: S3ObjectMetaInformation;
 });
 
 // Watcher
@@ -743,7 +751,15 @@ watch(
                 <!-- Dropdown menu -->
                 <ul class="dropdown-menu dropdown-menu-dark">
                   <li>
-                    <button class="dropdown-item" type="button">Details</button>
+                    <button
+                      class="dropdown-item"
+                      type="button"
+                      data-bs-toggle="modal"
+                      data-bs-target="#detail-object-modal"
+                      @click="objectState.viewDetailObject = obj"
+                    >
+                      Details
+                    </button>
                   </li>
                   <li>
                     <button
@@ -831,6 +847,11 @@ watch(
         modal-label="some-label"
         :available-buckets="props.writableBuckets"
       />
+      <object-detail-modal
+        :s3-object="objectState.viewDetailObject"
+        modalID="detail-object-modal"
+        modal-label="some-label"
+      />
     </div>
   </div>
 </template>

src/components/Modals/ObjectDetailModal.vue

+<script setup lang="ts">
+import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
+import type { S3ObjectMetaInformation } from "@/client";
+import dayjs from "dayjs";
+import fileSize from "filesize";
+
+const props = defineProps<{
+  modalID: string;
+  modalLabel: string;
+  s3Object: S3ObjectMetaInformation;
+}>();
+</script>
+
+<template>
+  <bootstrap-modal
+    :modalID="modalID"
+    :static-backdrop="true"
+    :modal-label="modalLabel"
+  >
+    <template v-slot:header>
+      <h4>Object Details</h4>
+    </template>
+    <template v-slot:body>
+      <div class="container-fluid">
+        <table class="table table-hover table-sm table-borderless">
+          <tbody>
+            <tr>
+              <th scope="row" class="col-4">Bucket</th>
+              <td class="col-8">{{ props.s3Object.bucket }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Name</th>
+              <td>{{ props.s3Object.key }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Content Type</th>
+              <td>text/plain</td>
+            </tr>
+            <tr>
+              <th scope="row">Timestamp</th>
+              <td>
+                {{
+                  dayjs(props.s3Object.last_modified).format(
+                    "YYYY-MM-DD HH:mm:ss"
+                  )
+                }}
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Size</th>
+              <td>{{ fileSize(props.s3Object.size) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+    <template v-slot:footer>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+        Close
+      </button>
+    </template>
+  </bootstrap-modal>
+</template>
+
+<style scoped>
+th {
+  font-weight: bold;
+  text-align: end;
+}
+</style>