Add edit object modal to upload a new file

#15

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>

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>