From 24708d5da8b9a676202b5742a1ad035e1b7c7cc6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 20 Jan 2023 11:10:50 +0800
Subject: [PATCH] feat(nc-gui): revise rename attachment logic

---
 .../components/cell/attachment/Modal.vue      |  9 +++++++
 .../components/cell/attachment/RenameFile.vue | 27 +++++--------------
 .../components/cell/attachment/utils.ts       | 23 +++++++---------
 .../smartsheet/column/AttachmentOptions.vue   |  2 +-
 4 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 0da4ac38c7..65a5b8c9de 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -22,6 +22,7 @@ const {
   selectedImage,
   selectedVisibleItems,
   bulkDownloadFiles,
+  renameFile,
 } = useAttachmentCell()!
 
 // todo: replace placeholder var
@@ -144,6 +145,14 @@ function onRemoveFileClick(title: any, i: number) {
               </div>
             </a-tooltip>
 
+            <a-tooltip placement="bottom">
+              <template #title> Rename File </template>
+
+              <div class="nc-attachment-download group-hover:(opacity-100) mr-[35px]">
+                <MdiEditOutline @click.stop="renameFile(item, i)" />
+              </div>
+            </a-tooltip>
+
             <div
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
               class="nc-attachment h-full w-full flex items-center justify-center"
diff --git a/packages/nc-gui/components/cell/attachment/RenameFile.vue b/packages/nc-gui/components/cell/attachment/RenameFile.vue
index fa9460c016..bfb65be428 100644
--- a/packages/nc-gui/components/cell/attachment/RenameFile.vue
+++ b/packages/nc-gui/components/cell/attachment/RenameFile.vue
@@ -2,8 +2,7 @@
 import { generateUniqueName, onKeyStroke, onMounted, reactive, ref } from '#imports'
 
 const props = defineProps<{
-  fileName: string
-  fileNames: string[]
+  title: string
 }>()
 
 const emit = defineEmits<{
@@ -15,9 +14,8 @@ const inputEl = ref()
 
 const visible = ref(true)
 
-const fileEnding = props.fileName.split('.').pop()
 const form = reactive({
-  name: props.fileName.replace(`.${fileEnding}`, ''),
+  title: props.title,
 })
 
 function renameFile(fileName: string) {
@@ -26,22 +24,11 @@ function renameFile(fileName: string) {
 }
 
 async function useRandomName() {
-  form.name = await generateUniqueName()
+  form.title = await generateUniqueName()
 }
 
 const rules = {
-  name: [
-    { required: true, message: 'Filename is required.' },
-    {
-      validator: (_: unknown, v: string) =>
-        new Promise((resolve, reject) => {
-          props.fileNames.every((fileName) => fileName.replace(`.${fileEnding}`, '') !== v)
-            ? resolve(true)
-            : reject(new Error(`File name should be unique.`))
-        }),
-      message: 'File name should be unique.',
-    },
-  ],
+  title: [{ required: true, message: 'title is required.' }],
 }
 
 function onCancel() {
@@ -71,9 +58,9 @@ onMounted(() => {
     @cancel="onCancel"
   >
     <div class="flex flex-col items-center justify-center h-full">
-      <a-form class="w-full h-full" no-style :model="form" @finish="renameFile(`${form.name}.${fileEnding}`)">
-        <a-form-item class="w-full" name="name" :rules="rules.name">
-          <a-input ref="inputEl" v-model:value="form.name" class="w-full" :placeholder="$t('general.rename')" />
+      <a-form class="w-full h-full" no-style :model="form" @finish="renameFile(form.title)">
+        <a-form-item class="w-full" name="title" :rules="rules.title">
+          <a-input ref="inputEl" v-model:value="form.title" class="w-full" :placeholder="$t('general.rename')" />
         </a-form-item>
         <div class="flex items-center justify-center gap-6 w-full mt-4">
           <button class="scaling-btn bg-opacity-100" type="submit">
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index baafb5f9f7..085e7477a8 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -1,3 +1,4 @@
+import type { AttachmentType } from 'nocodb-sdk'
 import RenameFile from './RenameFile.vue'
 import {
   ColumnInj,
@@ -126,7 +127,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
       const files: File[] = []
 
-      for (let file of selectedFiles) {
+      for (const file of selectedFiles) {
         // verify number of files
         if (visibleItems.value.length + selectedFiles.length > attachmentMeta.maxNumberOfAttachments) {
           message.error(
@@ -170,23 +171,19 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       updateModelValue(JSON.stringify([...attachments.value, ...newAttachments]))
     }
 
-    async function renameFile(file: File) {
-      return new Promise<File>((resolve) => {
+    async function renameFile(attachment: AttachmentType, idx: number) {
+      return new Promise<boolean>((resolve) => {
         const { close } = useDialog(RenameFile, {
-          fileName: file.name,
-          fileNames: [...attachments.value.map((file) => file.title), ...storedFiles.value.map((file) => file.title)],
-          onRename: (newName: string) => {
+          title: attachment.title,
+          onRename: (newTitle: string) => {
+            attachments.value[idx].title = newTitle
+            updateModelValue(JSON.stringify(attachments.value))
             close()
-            resolve(
-              new File([file], newName, {
-                type: file.type,
-                lastModified: file.lastModified,
-              }),
-            )
+            resolve(true)
           },
           onCancel: () => {
             close()
-            resolve(file)
+            resolve(true)
           },
         })
       })
diff --git a/packages/nc-gui/components/smartsheet/column/AttachmentOptions.vue b/packages/nc-gui/components/smartsheet/column/AttachmentOptions.vue
index 7015c2b985..feeb866326 100644
--- a/packages/nc-gui/components/smartsheet/column/AttachmentOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/AttachmentOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useGlobal, useVModel } from '#imports'
 import { fileMimeTypes } from './utils'
+import { useGlobal, useVModel } from '#imports'
 
 interface Option {
   key: string