feat: Move files in file manager #1826 (#1837)

### What problem does this PR solve?

feat: Move files in file manager #1826

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/file-manager-hooks.ts

@@ -28,6 +28,23 @@ export interface IListResult {
   loading: boolean;
 }
 
+export const useFetchPureFileList = () => {
+  const { mutateAsync, isPending: loading } = useMutation({
+    mutationKey: ['fetchPureFileList'],
+    gcTime: 0,
+
+    mutationFn: async (parentId: string) => {
+      const { data } = await fileManagerService.listFile({
+        parent_id: parentId,
+      });
+
+      return data;
+    },
+  });
+
+  return { loading, fetchList: mutateAsync };
+};
+
 export const useFetchFileList = (): ResponseType<any> & IListResult => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
@@ -225,3 +242,31 @@ export const useConnectToKnowledge = () => {
 
   return { data, loading, connectFileToKnowledge: mutateAsync };
 };
+
+export interface IMoveFileBody {
+  src_file_ids: string[];
+  dest_file_id: string; // target folder id
+}
+
+export const useMoveFile = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['moveFile'],
+    mutationFn: async (params: IMoveFileBody) => {
+      const { data } = await fileManagerService.moveFile(params);
+      if (data.retcode === 0) {
+        message.success(t('message.operated'));
+        queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
+      }
+      return data.retcode;
+    },
+  });
+
+  return { data, loading, moveFile: mutateAsync };
+};

web/src/locales/en.ts

@@ -26,6 +26,7 @@ export default {
       download: 'Download',
       close: 'Close',
       preview: 'Preview',
+      move: 'Move',
     },
     login: {
       login: 'Sign in',
@@ -564,6 +565,7 @@ The above is the content you need to summarize.`,
       fileError: 'File error',
       uploadLimit:
         'The file size cannot exceed 10M, and the total number of files cannot exceed 128',
+      destinationFolder: 'Destination folder',
     },
     flow: {
       cite: 'Cite',

web/src/locales/zh-traditional.ts

@@ -26,6 +26,7 @@ export default {
       download: '下載',
       close: '關閉',
       preview: '預覽',
+      move: '移動',
     },
     login: {
       login: '登入',
@@ -524,6 +525,7 @@ export default {
       preview: '預覽',
       fileError: '文件錯誤',
       uploadLimit: '文件大小不能超過10M，文件總數不超過128個',
+      destinationFolder: '目標資料夾',
     },
     flow: {
       cite: '引用',

web/src/locales/zh.ts

@@ -26,6 +26,7 @@ export default {
       download: '下载',
       close: '关闭',
       preview: '预览',
+      move: '移动',
     },
     login: {
       login: '登录',
@@ -542,6 +543,7 @@ export default {
       preview: '预览',
       fileError: '文件错误',
       uploadLimit: '文件大小不能超过10M，文件总数不超过128个',
+      destinationFolder: '目标文件夹',
     },
     flow: {
       flow: '工作流',

web/src/pages/file-manager/action-cell/index.tsx

@@ -1,6 +1,12 @@
+import NewDocumentLink from '@/components/new-document-link';
+import SvgIcon from '@/components/svg-icon';
 import { useTranslate } from '@/hooks/common-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import { api_host } from '@/utils/api';
+import {
+  getExtension,
+  isSupportedPreviewDocumentType,
+} from '@/utils/document-util';
 import { downloadFile } from '@/utils/file-util';
 import {
   DeleteOutlined,
@@ -11,18 +17,13 @@ import {
 } from '@ant-design/icons';
 import { Button, Space, Tooltip } from 'antd';
 import { useHandleDeleteFile } from '../hooks';
-
-import NewDocumentLink from '@/components/new-document-link';
-import {
-  getExtension,
-  isSupportedPreviewDocumentType,
-} from '@/utils/document-util';
 import styles from './index.less';
 
 interface IProps {
   record: IFile;
   setCurrentRecord: (record: any) => void;
   showRenameModal: (record: IFile) => void;
+  showMoveFileModal: (ids: string[]) => void;
   showConnectToKnowledgeModal: (record: IFile) => void;
   setSelectedRowKeys(keys: string[]): void;
 }
@@ -33,6 +34,7 @@ const ActionCell = ({
   showRenameModal,
   showConnectToKnowledgeModal,
   setSelectedRowKeys,
+  showMoveFileModal,
 }: IProps) => {
   const documentId = record.id;
   const beingUsed = false;
@@ -64,6 +66,10 @@ const ActionCell = ({
     showConnectToKnowledgeModal(record);
   };
 
+  const onShowMoveFileModal = () => {
+    showMoveFileModal([documentId]);
+  };
+
   return (
     <Space size={0}>
       {isKnowledgeBase || (
@@ -90,6 +96,18 @@ const ActionCell = ({
           </Button>
         </Tooltip>
       )}
+      {isKnowledgeBase || (
+        <Tooltip title={t('move', { keyPrefix: 'common' })}>
+          <Button
+            type="text"
+            disabled={beingUsed}
+            onClick={onShowMoveFileModal}
+            className={styles.iconButton}
+          >
+            <SvgIcon name={`move`} width={16}></SvgIcon>
+          </Button>
+        </Tooltip>
+      )}
       {isKnowledgeBase || (
         <Tooltip title={t('delete', { keyPrefix: 'common' })}>
           <Button

web/src/pages/file-manager/file-toolbar.tsx

@@ -17,13 +17,14 @@ import {
   MenuProps,
   Space,
 } from 'antd';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   useHandleBreadcrumbClick,
   useHandleDeleteFile,
   useSelectBreadcrumbItems,
 } from './hooks';
 
+import SvgIcon from '@/components/svg-icon';
 import {
   IListResult,
   useFetchParentFolderList,
@@ -36,6 +37,7 @@ interface IProps
   showFolderCreateModal: () => void;
   showFileUploadModal: () => void;
   setSelectedRowKeys: (keys: string[]) => void;
+  showMoveFileModal: (ids: string[]) => void;
 }
 
 const FileToolbar = ({
@@ -45,6 +47,7 @@ const FileToolbar = ({
   setSelectedRowKeys,
   searchString,
   handleInputChange,
+  showMoveFileModal,
 }: IProps) => {
   const { t } = useTranslate('knowledgeDetails');
   const breadcrumbItems = useSelectBreadcrumbItems();
@@ -111,6 +114,10 @@ const FileToolbar = ({
     setSelectedRowKeys,
   );
 
+  const handleShowMoveFileModal = useCallback(() => {
+    showMoveFileModal(selectedRowKeys);
+  }, [selectedRowKeys, showMoveFileModal]);
+
   const disabled = selectedRowKeys.length === 0;
 
   const items: MenuProps['items'] = useMemo(() => {
@@ -127,8 +134,20 @@ const FileToolbar = ({
           </Flex>
         ),
       },
+      {
+        key: '5',
+        onClick: handleShowMoveFileModal,
+        label: (
+          <Flex gap={10}>
+            <span className={styles.deleteIconWrapper}>
+              <SvgIcon name={`move`} width={18}></SvgIcon>
+            </span>
+            <b>{t('move', { keyPrefix: 'common' })}</b>
+          </Flex>
+        ),
+      },
     ];
-  }, [handleRemoveFile, t]);
+  }, [handleShowMoveFileModal, t, handleRemoveFile]);
 
   return (
     <div className={styles.filter}>

web/src/pages/file-manager/folder-create-modal/index.tsx

@@ -21,24 +21,12 @@ const FolderCreateModal = ({ visible, hideModal, loading, onOk }: IProps) => {
     return onOk(ret.name);
   };
 
-  const handleCancel = () => {
-    hideModal();
-  };
-
-  const onFinish = (values: any) => {
-    console.log('Success:', values);
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
-  };
-
   return (
     <Modal
       title={t('newFolder', { keyPrefix: 'fileManager' })}
       open={visible}
       onOk={handleOk}
-      onCancel={handleCancel}
+      onCancel={hideModal}
       okButtonProps={{ loading }}
       confirmLoading={loading}
     >
@@ -47,8 +35,6 @@ const FolderCreateModal = ({ visible, hideModal, loading, onOk }: IProps) => {
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 20 }}
         style={{ maxWidth: 600 }}
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
         autoComplete="off"
         form={form}
       >

web/src/pages/file-manager/hooks.ts

@@ -4,6 +4,7 @@ import {
   useCreateFolder,
   useDeleteFile,
   useFetchParentFolderList,
+  useMoveFile,
   useRenameFile,
   useUploadFile,
 } from '@/hooks/file-manager-hooks';
@@ -246,3 +247,48 @@ export const useHandleBreadcrumbClick = () => {
 
   return { handleBreadcrumbClick };
 };
+
+export const useHandleMoveFile = (
+  setSelectedRowKeys: (keys: string[]) => void,
+) => {
+  const {
+    visible: moveFileVisible,
+    hideModal: hideMoveFileModal,
+    showModal: showMoveFileModal,
+  } = useSetModalState();
+  const { moveFile, loading } = useMoveFile();
+  const [sourceFileIds, setSourceFileIds] = useState<string[]>([]);
+
+  const onMoveFileOk = useCallback(
+    async (targetFolderId: string) => {
+      const ret = await moveFile({
+        src_file_ids: sourceFileIds,
+        dest_file_id: targetFolderId,
+      });
+
+      if (ret === 0) {
+        setSelectedRowKeys([]);
+        hideMoveFileModal();
+      }
+      return ret;
+    },
+    [moveFile, hideMoveFileModal, sourceFileIds, setSelectedRowKeys],
+  );
+
+  const handleShowMoveFileModal = useCallback(
+    (ids: string[]) => {
+      setSourceFileIds(ids);
+      showMoveFileModal();
+    },
+    [showMoveFileModal],
+  );
+
+  return {
+    initialValue: '',
+    moveFileLoading: loading,
+    onMoveFileOk,
+    moveFileVisible,
+    hideMoveFileModal,
+    showMoveFileModal: handleShowMoveFileModal,
+  };
+};