feat: implement file/folder rename (#132)

feat: implement file/folder rename Refs: #16 Signed-off-by: seven <[email protected]>
geek-fun · Nov 10, 2024 · 2f1ab01 · 2f1ab01
1 parent 96c5f40
commit 2f1ab01
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
@@ -163,6 +163,7 @@ export const enUS = {
       rename: 'Rename',
       delete: 'Delete',
     },
+    rename: 'Rename',
     name: 'Name',
   },
   history: {

diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
@@ -165,6 +165,7 @@ export const zhCN = {
       rename: '重命名',
       delete: '删除',
     },
+    rename: '重命名',
   },
   history: {
     empty: '无历史记录',

diff --git a/src/views/file/components/file-list.vue b/src/views/file/components/file-list.vue
@@ -88,7 +88,7 @@ const handleClickOutside = (event: MouseEvent) => {
   }
 };
 
-const handleContextMenu = (action: ContextMenuAction) => {
+const handleContextMenu = async (action: ContextMenuAction) => {
   contextMenuVisible.value = false;
   if (action === ContextMenuAction.CONTEXT_MENU_ACTION_OPEN) {
     if (selectedFile.value?.type === FileType.FOLDER) {
@@ -104,14 +104,10 @@ const handleContextMenu = (action: ContextMenuAction) => {
         });
       }
     }
-  } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_RENAME) {
-    // renameFileOrFolder(selectedFile.value?.path);
   } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_DELETE) {
     deleteFileOrFolder(selectedFile.value?.path ?? '');
-  } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FILE) {
-    newFileDialogRef.value.showModal(FileType.FILE);
-  } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FOLDER) {
-    newFileDialogRef.value.showModal(FileType.FOLDER);
+  } else {
+    newFileDialogRef.value.showModal(action, selectedFile.value);
   }
 };
 

diff --git a/src/views/file/components/new-file-dialog.vue b/src/views/file/components/new-file-dialog.vue
@@ -53,17 +53,18 @@ import { reactive, ref, watch } from 'vue';
 import { Close } from '@vicons/carbon';
 import { useLang } from '../../../lang';
 import { FormRules, FormValidationError } from 'naive-ui';
-import { FileType, ToolBarAction, useSourceFileStore } from '../../../store';
+import { ContextMenuAction, FileItem, ToolBarAction, useSourceFileStore } from '../../../store';
 import { CustomError } from '../../../common';
 
 const lang = useLang();
 const fileStore = useSourceFileStore();
-const { createFileOrFolder } = fileStore;
+const { createFileOrFolder, renameFileOrFolder } = fileStore;
 
 const connectFormRef = ref();
 const showModal = ref(false);
 const modalTitle = ref('');
 const saveLoading = ref(false);
+const selectedFileRef = ref<FileItem>();
 
 const defaultFormData = { path: '' };
 const formData = ref<{ path: string }>(defaultFormData);
@@ -85,12 +86,16 @@ const cleanUp = () => {
   modalTitle.value = '';
 };
 
-const showMedal = (fileType: FileType) => {
+const showMedal = (action: ContextMenuAction, selectedFile?: FileItem) => {
   cleanUp();
-  if (fileType === FileType.FOLDER) {
+  selectedFileRef.value = selectedFile;
+  if (action === ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FOLDER) {
     modalTitle.value = lang.t('file.newFolder');
-  } else {
+  } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FILE) {
     modalTitle.value = lang.t('file.newFile');
+  } else if (action === ContextMenuAction.CONTEXT_MENU_ACTION_RENAME) {
+    modalTitle.value = lang.t('file.rename');
+    formData.value.path = selectedFile?.name ?? '';
   }
   showModal.value = true;
 };
@@ -114,12 +119,20 @@ const submitNewFile = (event: MouseEvent) => {
     try {
       if (!errors) {
         saveLoading.value = true;
-        await createFileOrFolder(
-          modalTitle.value === lang.t('file.newFolder')
-            ? ToolBarAction.ADD_FOLDER
-            : ToolBarAction.ADD_DOCUMENT,
-          formData.value.path,
-        );
+        if (modalTitle.value === lang.t('file.newFile')) {
+          await createFileOrFolder(ToolBarAction.ADD_DOCUMENT, formData.value.path);
+        } else if (modalTitle.value === lang.t('file.newFolder')) {
+          await createFileOrFolder(ToolBarAction.ADD_FOLDER, formData.value.path);
+        } else if (modalTitle.value === lang.t('file.rename')) {
+          const folderPath = selectedFileRef.value?.path.substring(
+            0,
+            selectedFileRef.value?.path.lastIndexOf('/'),
+          );
+          await renameFileOrFolder(
+            selectedFileRef.value?.path ?? '',
+            `${folderPath}/${formData.value.path}`,
+          );
+        }
       } else {
         message.error(lang.t('file.newFileFailed'), {
           closable: true,

diff --git a/src/views/file/components/tool-bar.vue b/src/views/file/components/tool-bar.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { DocumentAdd, FolderAdd, FolderOpen } from '@vicons/carbon';
-import { FileType, ToolBarAction, useSourceFileStore } from '../../../store';
+import { ContextMenuAction, ToolBarAction, useSourceFileStore } from '../../../store';
 import { useLang } from '../../../lang';
 import NewFileDialog from './new-file-dialog.vue';
 import PathBreadcrumb from '../../../components/PathBreadcrumb.vue';
@@ -47,9 +47,9 @@ const toolBarList = [
 
 const handleToolBarAction = async (id: ToolBarAction) => {
   if (id === ToolBarAction.ADD_DOCUMENT) {
-    newFileDialogRef.value.showModal(FileType.FILE);
+    newFileDialogRef.value.showModal(ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FILE);
   } else if (id === ToolBarAction.ADD_FOLDER) {
-    newFileDialogRef.value.showModal(FileType.FOLDER);
+    newFileDialogRef.value.showModal(ContextMenuAction.CONTEXT_MENU_ACTION_NEW_FOLDER);
   } else if (id === ToolBarAction.OPEN_FOLDER) {
     await openFolder();
   }