From d5bb8c6d08bbf62ec9df6afac3fa807b636d89d5 Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Sat, 24 Feb 2024 11:34:37 +0000
Subject: [PATCH] Add file rename

---
 packages/dashboard-v2/src/appUtils.js         | 12 +++----
 .../src/components/files/FileOptions.vue      | 31 ++++++++++++-------
 .../src/pages/files/FilesFolderPage.vue       |  4 +--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/dashboard-v2/src/appUtils.js b/packages/dashboard-v2/src/appUtils.js
index 26e0448..9b1fbfa 100644
--- a/packages/dashboard-v2/src/appUtils.js
+++ b/packages/dashboard-v2/src/appUtils.js
@@ -117,12 +117,12 @@ export const apiHandler = {
       return mapFile(resp.data, prefix)
     }
   },
-  // renameObject: (oldName, newName) => {
-  //   return axios.post(`/buckets/${store.state.activeBucket}/move`, {
-  //     oldKey: encodeKey(oldName, store.state.currentFolder),
-  //     newKey: encodeKey(newName, store.state.currentFolder)
-  //   })
-  // },
+  renameObject: (bucket, oldKey, newKey) => {
+    return api.post(`/buckets/${bucket}/move`, {
+      oldKey: encode(oldKey),
+      newKey: encode(newKey)
+    })
+  },
   updateMetadata: (bucket, key, metadata) => {
     return api.post(
       `/buckets/${bucket}/${encode(key)}`,
diff --git a/packages/dashboard-v2/src/components/files/FileOptions.vue b/packages/dashboard-v2/src/components/files/FileOptions.vue
index 49de384..27d3521 100644
--- a/packages/dashboard-v2/src/components/files/FileOptions.vue
+++ b/packages/dashboard-v2/src/components/files/FileOptions.vue
@@ -12,21 +12,21 @@
 
       <q-card-actions align="right">
         <q-btn flat label="Cancel" color="primary" v-close-popup />
-        <q-btn flat label="Delete" color="red" @click="deleteConfirm" />
+        <q-btn flat label="Delete" color="red" :loading="loading" @click="deleteConfirm" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
   <q-dialog v-model="renameModal" @hide="reset">
-    <q-card>
+    <q-card style="min-width: 300px;">
       <q-card-section class="row column" v-if="row">
-        <q-avatar class="q-mb-md" icon="pencil" color="red" text-color="white" />
-        <span class="q-ml-sm">Are you sure you want to rename the file <code>{{row.name}}</code>?</span>
+        <q-avatar class="q-mb-md" icon="edit" color="orange" text-color="white" />
+        <q-input v-model="renameInput" label="Standard" />
       </q-card-section>
 
       <q-card-actions align="right">
         <q-btn flat label="Cancel" color="primary" v-close-popup />
-        <q-btn flat label="Rename" color="red" @click="renameConfirm" />
+        <q-btn flat label="Rename" color="orange" :loading="loading" @click="renameConfirm" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -47,7 +47,9 @@ export default defineComponent({
       deleteModal: false,
       renameModal: false,
       deleteFolderInnerFilesCount: null,
-      newFolderName: ''
+      newFolderName: '',
+      renameInput: '',
+      loading: false,
     }
   },
   methods: {
@@ -60,14 +62,19 @@ export default defineComponent({
       }
     },
     renameObject: async function(row) {
-      this.deleteModal = true
+      this.renameModal = true
       this.row = row
-      if (row.type === 'folder') {
-        this.deleteFolderContents = await apiHandler.fetchFile(this.selectedBucket, row.key, '')
-        this.deleteFolderInnerFilesCount = this.deleteFolderContents.length
-      }
+      // console.log(row)
+      this.renameInput = row.name
     },
     renameConfirm: async function() {
+      if (this.renameInput.length === 0) {
+        return
+      }
+
+      this.loading = true
+      await apiHandler.renameObject(this.selectedBucket, this.row.key, this.row.key.replace(this.row.name, this.renameInput))
+
       this.$bus.emit('fetchFiles')
       this.reset()
     },
@@ -116,8 +123,10 @@ export default defineComponent({
       this.reset()
     },
     reset: function() {
+      this.loading = false
       this.deleteModal = false
       this.renameModal = false
+      this.renameInput = ''
       this.row = null
       this.deleteFolderInnerFilesCount = null
       this.deleteFolderContents = []
diff --git a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
index c9b4f09..74db2a6 100644
--- a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
+++ b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
@@ -53,7 +53,7 @@
               touch-position
               context-menu
             >
-              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="renameObject" />
+              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
             </q-menu>
           </template>
 
@@ -61,7 +61,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="renameObject" />
+                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
                 </q-menu>
               </q-btn>
             </td>