BucketDetailModal.vue

<script setup lang="ts">
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import type { BucketOut } from "@/client/s3proxy";
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-3">Name</th>
              <td class="col-9">{{ props.bucket.name }}</td>
            </tr>
            <tr>
              <th scope="row">Creation date</th>
              <td>
                {{
                  dayjs
                    .unix(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, { base: 2, standard: "jedec" })
                }}
              </td>
            </tr>
            <tr>
              <th scope="row">Description</th>
              <td class="text-break">{{ 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>