Add modal to view bucket details

#23

src/components/BucketListItem.vue

@@ -2,6 +2,7 @@
 import type { BucketOut, BucketPermissionOut } from "@/client";
 import BootstrapIcon from "@/components/BootstrapIcon.vue";
 import PermissionModal from "@/components/Modals/PermissionModal.vue";
+import BucketDetailModal from "@/components/Modals/BucketDetailModal.vue";
 import dayjs from "dayjs";
 import { filesize } from "filesize";
 import { onMounted } from "vue";
@@ -41,6 +42,12 @@ onMounted(() => {
     :back-modal-id="undefined"
     @permission-deleted="(perm) => emit('permission-deleted', perm.bucket_name)"
   />
+  <bucket-detail-modal
+    v-if="props.active"
+    :modalID="'view-bucket-details-modal' + randomIDSuffix"
+    :bucket="props.bucket"
+    :edit-user-permission="props.permission"
+  />
   <div class="mt-2 mb-2">
     <div
       v-if="loading"
@@ -63,15 +70,27 @@ onMounted(() => {
         }"
       >
         {{ bucket.name }}
-        <bootstrap-icon
-          v-if="props.active && props.permission == null"
-          icon="trash-fill"
-          class="delete-icon"
-          :width="16"
-          :height="16"
-          fill="currentColor"
-          @click="emit('delete-bucket', bucket.name)"
-        />
+        <div>
+          <bootstrap-icon
+            v-if="props.active && props.permission == null"
+            icon="trash-fill"
+            class="delete-icon me-2"
+            :width="16"
+            :height="16"
+            fill="currentColor"
+            @click="emit('delete-bucket', bucket.name)"
+          />
+          <bootstrap-icon
+            class="info-icon"
+            data-bs-toggle="modal"
+            :data-bs-target="'#view-bucket-details-modal' + randomIDSuffix"
+            v-if="props.active"
+            icon="info-circle-fill"
+            :width="16"
+            :height="16"
+            fill="currentColor"
+          />
+        </div>
       </router-link>
       <div
         :hidden="!props.active"
@@ -129,4 +148,10 @@ onMounted(() => {
 .delete-icon:hover {
   color: var(--bs-danger);
 }
+.info-icon {
+  color: white;
+}
+.info-icon:hover {
+  color: var(--bs-info);
+}
 </style>

src/components/BucketView.vue

@@ -647,9 +647,10 @@ watch(
       <button
         :hidden="props.permission != null"
         type="button"
-        class="btn btn-secondary m-2"
+        class="btn btn-secondary m-2 tooltip-container"
         :disabled="errorLoadingObjects"
         data-bs-toggle="modal"
+        data-bs-title="Create Bucket Permission"
         data-bs-target="#create-permission-modal"
       >
         <bootstrap-icon

src/components/Modals/BucketDetailModal.vue

+<script setup lang="ts">
+import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
+import type { BucketOut } from "@/client";
+import dayjs from "dayjs";
+import { filesize } from "filesize";
+
+const props = defineProps<{
+  modalID: string;
+  bucket: BucketOut;
+}>();
+</script>
+
+<template>
+  <bootstrap-modal
+    :modalID="modalID"
+    :static-backdrop="false"
+    modal-label="Bucket Detail Modal"
+  >
+    <template v-slot:header>
+      <h4>
+        Bucket Details <i>{{ props.bucket.name }}</i>
+      </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-2">Name</th>
+              <td class="col-10">{{ props.bucket.name }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Creation date</th>
+              <td>
+                {{
+                  dayjs(props.bucket.created_at).format("YYYY-MM-DD HH:mm:ss")
+                }}
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Number of Objects</th>
+              <td>{{ props.bucket.num_objects }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Size</th>
+              <td>{{ filesize(props.bucket.size) }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Description</th>
+              <td>{{ props.bucket.description }}</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>