From c4d121332ef24e9856bb6fb42732eabf880e291e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Tue, 6 Sep 2022 17:20:04 +0200
Subject: [PATCH] Add view object details modal
#15
---
src/components/BucketView.vue | 23 ++++++-
src/components/Modals/ObjectDetailModal.vue | 70 +++++++++++++++++++++
2 files changed, 92 insertions(+), 1 deletion(-)
create mode 100644 src/components/Modals/ObjectDetailModal.vue
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index 2a9c4f0..7dbfd4c 100644
--- a/src/components/BucketView.vue
+++ b/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>
diff --git a/src/components/Modals/ObjectDetailModal.vue b/src/components/Modals/ObjectDetailModal.vue
new file mode 100644
index 0000000..26f9be9
--- /dev/null
+++ b/src/components/Modals/ObjectDetailModal.vue
@@ -0,0 +1,70 @@
+<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>
--
GitLab