Resolve "Fetch S3 Object Meta information dynamically"

Closes #79 (closed)

src/components/object-storage/modals/ObjectDetailModal.vue

 <script setup lang="ts">
 import BootstrapModal from "@/components/modals/BootstrapModal.vue";
-import type { _Object as S3Object } from "@aws-sdk/client-s3";
 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;
-  s3Object: S3Object;
+  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>
@@ -30,32 +70,63 @@ const props = defineProps<{
             </tr>
             <tr>
               <th scope="row">Name</th>
-              <td>{{ props.s3Object.Key }}</td>
+              <td>{{ props.objectKey }}</td>
             </tr>
             <tr>
               <th scope="row">Size</th>
-              <td>
+              <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(props.s3Object.Size ?? 0, {
-                    base: 2,
-                    standard: "jedec",
-                  })
+                  filesize(
+                    objectRepository.objectMetaMapping[metaIdentifier]
+                      .ContentLength ?? 0,
+                    {
+                      base: 2,
+                      standard: "jedec",
+                    },
+                  )
                 }}
               </td>
             </tr>
             <tr>
               <th scope="row">Timestamp</th>
-              <td>
+              <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(props.s3Object.LastModified).format(
-                    "YYYY-MM-DD HH:mm:ss",
-                  )
+                  dayjs(
+                    objectRepository.objectMetaMapping[metaIdentifier]
+                      .LastModified,
+                  ).format("YYYY-MM-DD HH:mm:ss")
                 }}
               </td>
             </tr>
             <tr>
               <th scope="row">Content Type</th>
-              <td>binary/octet-stream</td>
+              <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>