From 9a2d477f1a344ce0e0e00ae975e73232dd554ec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Mon, 5 Sep 2022 09:17:20 +0200
Subject: [PATCH] Add edit object modal to upload a new file
#15
---
src/components/BucketView.vue | 20 +++++++++++++++++
src/components/Modals/UploadObjectModal.vue | 24 ++++++++++++++++++---
2 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index 5f8b98e..6d261da 100644
--- a/src/components/BucketView.vue
+++ b/src/components/BucketView.vue
@@ -118,6 +118,7 @@ const objectState = reactive({
bucketPermissionError: false,
createdPermission: undefined,
deletedItem: "",
+ editObjectKey: "",
} as {
objects: S3ObjectMetaInformation[];
loading: boolean;
@@ -125,6 +126,7 @@ const objectState = reactive({
bucketPermissionError: boolean;
createdPermission: undefined | BucketPermission;
deletedItem: string;
+ editObjectKey: string;
});
// Watcher
@@ -434,6 +436,11 @@ function deleteFolder(folderPath: string) {
});
}
+function getObjectFileName(key: string): string {
+ const splittedKey = key.split("/");
+ return splittedKey[splittedKey.length - 1];
+}
+
watch(
visibleObjects,
(visObjs) => {
@@ -545,6 +552,7 @@ watch(
modalID="upload-object-modal"
modal-label="some-label"
:key-prefix="currentSubFolders.join('/')"
+ :edit-object-file-name="undefined"
@object-created="objectUploaded"
/>
<!-- Add folder button -->
@@ -739,6 +747,9 @@ watch(
class="dropdown-item"
type="button"
:disabled="!writeS3Permission"
+ data-bs-toggle="modal"
+ data-bs-target="#edit-object-modal"
+ @click="objectState.editObjectKey = obj.key"
>
Edit
</button>
@@ -797,6 +808,15 @@ watch(
</tr>
</tbody>
</table>
+ <upload-object-modal
+ :bucket-name="props.bucketName"
+ :s3-client="client"
+ modalID="edit-object-modal"
+ modal-label="some-label"
+ :key-prefix="currentSubFolders.join('/')"
+ :edit-object-file-name="getObjectFileName(objectState.editObjectKey)"
+ @object-created="objectUploaded"
+ />
</div>
</div>
</template>
diff --git a/src/components/Modals/UploadObjectModal.vue b/src/components/Modals/UploadObjectModal.vue
index abf84cf..ca819ef 100644
--- a/src/components/Modals/UploadObjectModal.vue
+++ b/src/components/Modals/UploadObjectModal.vue
@@ -2,7 +2,7 @@
import type { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
-import { computed, onMounted, reactive } from "vue";
+import { computed, onMounted, reactive, watch } from "vue";
import type { ComputedRef } from "vue";
import type { S3ObjectMetaInformation } from "@/client";
import dayjs from "dayjs";
@@ -15,6 +15,7 @@ const props = defineProps<{
bucketName: string;
keyPrefix: string;
s3Client: S3Client;
+ editObjectFileName: string | undefined;
}>();
const randomIDSuffix = Math.random().toString(16).substr(2, 8);
@@ -30,6 +31,13 @@ const emit = defineEmits<{
(e: "object-created", object: S3ObjectMetaInformation): void;
}>();
+watch(
+ () => props.editObjectFileName,
+ (nextFileName) => {
+ formState.key = nextFileName ?? "";
+ }
+);
+
const formState = reactive({
file: {},
key: "",
@@ -48,6 +56,10 @@ const uploadProgress: ComputedRef<number> = computed(() =>
Math.round((100 * formState.uploadDone) / formState.uploadTotal)
);
+const editObject: ComputedRef<boolean> = computed(
+ () => props.editObjectFileName !== undefined
+);
+
async function uploadObject() {
const key =
props.keyPrefix.length > 0
@@ -99,7 +111,9 @@ async function uploadObject() {
// eslint-disable-next-line
function fileChange(event: any) {
formState.file = event.target.files[0];
- formState.key = formState.file.name;
+ if (!editObject.value) {
+ formState.key = formState.file.name;
+ }
}
onMounted(() => {
@@ -197,9 +211,13 @@ onMounted(() => {
>
<input
type="text"
- class="form-control"
+ :class="{
+ 'form-control-plaintext': editObject,
+ 'form-control': !editObject,
+ }"
:id="'objectKey' + randomIDSuffix"
required
+ :disabled="editObject"
v-model="formState.key"
/>
</div>
--
GitLab