From 9434d7c0273184bb6ff653ded4f49b59041aa50e Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Sun, 1 Dec 2024 19:20:42 +0000
Subject: [PATCH] Add metadata edit

---
 packages/dashboard/src/appUtils.js            |  5 +-
 .../src/components/files/FileOptions.vue      | 48 +++++++++++++++++++
 .../src/pages/files/FileContextMenu.vue       |  6 +++
 .../src/pages/files/FilesFolderPage.vue       |  4 +-
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/appUtils.js b/packages/dashboard/src/appUtils.js
index c692378..bb30241 100644
--- a/packages/dashboard/src/appUtils.js
+++ b/packages/dashboard/src/appUtils.js
@@ -133,14 +133,15 @@ export const apiHandler = {
 			newKey: encode(newKey),
 		});
 	},
-	updateMetadata: async (bucket, key, metadata) => {
+	updateMetadata: async (bucket, key, customMetadata, httpMetadata = {}) => {
 		let prefix = "";
 		if (key.includes("/")) {
 			prefix = key.replace(key.split("/").pop(), "");
 		}
 
 		const resp = await api.post(`/buckets/${bucket}/${encode(key)}`, {
-			customMetadata: metadata,
+			customMetadata: customMetadata,
+			httpMetadata: httpMetadata,
 		});
 
 		if (resp.status === 200) {
diff --git a/packages/dashboard/src/components/files/FileOptions.vue b/packages/dashboard/src/components/files/FileOptions.vue
index dacb3fe..5ade6e9 100644
--- a/packages/dashboard/src/components/files/FileOptions.vue
+++ b/packages/dashboard/src/components/files/FileOptions.vue
@@ -30,6 +30,20 @@
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="updateMetadataModal" @hide="reset">
+    <q-card style="min-width: 300px;">
+      <q-card-section class="row column" v-if="row">
+        <q-avatar class="q-mb-md" icon="edit" color="orange" text-color="white" />
+        <q-input v-model="updateContentType" label="Content type" />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" color="primary" v-close-popup />
+        <q-btn flat label="Rename" color="orange" :loading="loading" @click="updateConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script>
@@ -45,9 +59,11 @@ export default defineComponent({
 		deleteFolderContents: [],
 		deleteModal: false,
 		renameModal: false,
+		updateMetadataModal: false,
 		deleteFolderInnerFilesCount: null,
 		newFolderName: "",
 		renameInput: "",
+		updateContentType: "",
 		loading: false,
 	}),
 	methods: {
@@ -69,6 +85,12 @@ export default defineComponent({
 			// console.log(row)
 			this.renameInput = row.name;
 		},
+		updateMetadataObject: async function (row) {
+			console.log(row);
+			this.updateMetadataModal = true;
+			this.row = row;
+			this.updateContentType = row.httpMetadata?.contentType || "";
+		},
 		renameConfirm: async function () {
 			if (this.renameInput.length === 0) {
 				return;
@@ -91,6 +113,30 @@ export default defineComponent({
 				timeout: 2500, // we will timeout it in 2.5s
 			});
 		},
+		updateConfirm: async function () {
+			if (this.updateContentType.length === 0) {
+				return;
+			}
+			this.loading = true;
+			await apiHandler.updateMetadata(
+				this.selectedBucket,
+				this.row.key,
+				this.row.customMetadata,
+				{
+					...this.row.httpMetadata,
+					contentType: this.updateContentType,
+				},
+			);
+			this.$bus.emit("fetchFiles");
+			this.reset();
+			this.q.notify({
+				group: false,
+				icon: "done", // we add an icon
+				spinner: false, // we reset the spinner setting so the icon can be displayed
+				message: "File Updated!",
+				timeout: 2500, // we will timeout it in 2.5s
+			});
+		},
 		deleteConfirm: async function () {
 			if (this.row.type === "folder") {
 				// When deleting folders, first must copy the objects, because the popup close forces a reset on properties
@@ -145,7 +191,9 @@ export default defineComponent({
 			this.loading = false;
 			this.deleteModal = false;
 			this.renameModal = false;
+			this.updateMetadataModal = false;
 			this.renameInput = "";
+			this.updateContentType = "";
 			this.row = null;
 			this.deleteFolderInnerFilesCount = null;
 			this.deleteFolderContents = [];
diff --git a/packages/dashboard/src/pages/files/FileContextMenu.vue b/packages/dashboard/src/pages/files/FileContextMenu.vue
index bcb2da7..6c5d1a9 100644
--- a/packages/dashboard/src/pages/files/FileContextMenu.vue
+++ b/packages/dashboard/src/pages/files/FileContextMenu.vue
@@ -9,6 +9,9 @@
     <q-item clickable v-close-popup @click="renameObject" v-if="prop.row.type === 'file'">
       <q-item-section>Rename</q-item-section>
     </q-item>
+    <q-item clickable v-close-popup @click="updateMetadataObject" v-if="prop.row.type === 'file'">
+      <q-item-section>Update Metadata</q-item-section>
+    </q-item>
     <q-item clickable v-close-popup @click="shareObject">
       <q-item-section>Get sharable link</q-item-section>
     </q-item>
@@ -45,6 +48,9 @@ export default {
 		renameObject: function () {
 			this.$emit("renameObject", this.prop.row);
 		},
+		updateMetadataObject: function () {
+			this.$emit("updateMetadataObject", this.prop.row);
+		},
 		openObject: function () {
 			this.$emit("openObject", this.prop.row);
 		},
diff --git a/packages/dashboard/src/pages/files/FilesFolderPage.vue b/packages/dashboard/src/pages/files/FilesFolderPage.vue
index 23e5f94..9a7b9c5 100644
--- a/packages/dashboard/src/pages/files/FilesFolderPage.vue
+++ b/packages/dashboard/src/pages/files/FilesFolderPage.vue
@@ -54,7 +54,7 @@
               touch-position
               context-menu
             >
-              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
+              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" @updateMetadataObject="$refs.options.updateMetadataObject"  />
             </q-menu>
           </template>
 
@@ -62,7 +62,7 @@
             <td class="text-right">
               <q-btn round flat icon="more_vert" size="sm">
                 <q-menu>
-                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
+                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" @updateMetadataObject="$refs.options.updateMetadataObject" />
                 </q-menu>
               </q-btn>
             </td>