ObjectDetailModal.vue

<script setup lang="ts">
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import dayjs from "dayjs";
import { filesize } from "filesize";
import { computed, onMounted, watch, reactive } from "vue";
import { useS3ObjectStore } from "@/stores/s3objects";

const objectRepository = useS3ObjectStore();

const props = defineProps<{
  modalID: string;
  objectKey: string | undefined;
  bucket: string;
}>();

const detailState = reactive<{
  loading: boolean;
  error: boolean;
}>({
  loading: true,
  error: false,
});

const metaIdentifier = computed<string>(() => {
  return props.bucket + "/" + props.objectKey;
});

watch(props, (newProps) => {
  detailState.loading = true;
  if (newProps.objectKey) {
    fetchMetaInfo(newProps.bucket, newProps.objectKey);
  }
});

function fetchMetaInfo(bucket: string, key: string) {
  detailState.loading = true;
  detailState.error = false;
  objectRepository
    .fetchS3ObjectMeta(bucket, key, () => {
      detailState.loading = false;
    })
    .catch(() => {
      detailState.error = true;
    });
}

onMounted(() => {
  if (props.objectKey) {
    fetchMetaInfo(props.bucket, props.objectKey);
  }
});
</script>

<template>
  <bootstrap-modal
    :modalId="modalID"
    :static-backdrop="false"
    modal-label="Object Detail Modal"
  >
    <template v-slot:header>
      <h4>File 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.bucket }}</td>
            </tr>
            <tr>
              <th scope="row">Name</th>
              <td>{{ props.objectKey }}</td>
            </tr>
            <tr>
              <th scope="row">Size</th>
              <td v-if="detailState.error">N/A</td>
              <td v-else-if="detailState.loading" class="placeholder-glow">
                <span class="placeholder col-2"></span>
              </td>
              <td v-else>
                {{
                  filesize(
                    objectRepository.objectMetaMapping[metaIdentifier]
                      .ContentLength ?? 0,
                    {
                      base: 2,
                      standard: "jedec",
                    },
                  )
                }}
              </td>
            </tr>
            <tr>
              <th scope="row">Timestamp</th>
              <td v-if="detailState.error">N/A</td>
              <td v-else-if="detailState.loading" class="placeholder-glow">
                <span class="placeholder col-6"></span>
              </td>
              <td v-else>
                {{
                  dayjs(
                    objectRepository.objectMetaMapping[metaIdentifier]
                      .LastModified,
                  ).format("YYYY-MM-DD HH:mm:ss")
                }}
              </td>
            </tr>
            <tr>
              <th scope="row">Content Type</th>
              <td v-if="detailState.error">N/A</td>
              <td v-else-if="detailState.loading" class="placeholder-glow">
                <span class="placeholder col-5"></span>
              </td>
              <td v-else>
                {{
                  objectRepository.objectMetaMapping[metaIdentifier].ContentType
                }}
              </td>
            </tr>
            <tr>
              <th scope="row">ETag</th>
              <td v-if="detailState.error">N/A</td>
              <td v-else-if="detailState.loading" class="placeholder-glow">
                <span class="placeholder col-10"></span>
              </td>
              <td v-else>
                {{ objectRepository.objectMetaMapping[metaIdentifier].ETag }}
              </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>