Feat: Add AsyncTreeSelect component #3221 (#7377)

### What problem does this PR solve?

Feat: Add AsyncTreeSelect component #3221

### Type of change


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

web/src/pages/files/index.tsx

@@ -126,7 +126,6 @@ export default function Files() {
           onOk={onFolderCreateOk}
         ></CreateFolderDialog>
       )}
-
       {moveFileVisible && (
         <MoveDialog
           hideModal={hideMoveFileModal}

web/src/pages/files/move-dialog.tsx

@@ -1,3 +1,7 @@
+import {
+  AsyncTreeSelect,
+  TreeNodeType,
+} from '@/components/ui/async-tree-select';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -6,37 +10,49 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import SingleTreeSelect, { TreeNode } from '@/components/ui/single-tree-select';
+import { useFetchPureFileList } from '@/hooks/file-manager-hooks';
 import { IModalProps } from '@/interfaces/common';
+import { IFile } from '@/interfaces/database/file-manager';
+import { isEmpty } from 'lodash';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function MoveDialog({ hideModal }: IModalProps<any>) {
+export function MoveDialog({ hideModal, onOk }: IModalProps<any>) {
   const { t } = useTranslation();
 
-  const treeData: TreeNode[] = [
-    {
-      id: 1,
-      label: 'Node 1',
-      children: [
-        { id: 11, label: 'Node 1.1' },
-        { id: 12, label: 'Node 1.2' },
-      ],
+  const { fetchList } = useFetchPureFileList();
+
+  const [treeValue, setTreeValue] = useState<number | string>('');
+
+  const [treeData, setTreeData] = useState([]);
+
+  const onLoadData = useCallback(
+    async ({ id }: TreeNodeType) => {
+      const ret = await fetchList(id as string);
+      if (ret.code === 0) {
+        setTreeData((tree) => {
+          return tree.concat(
+            ret.data.files
+              .filter((x: IFile) => x.type === 'folder')
+              .map((x: IFile) => ({
+                id: x.id,
+                parentId: x.parent_id,
+                title: x.name,
+                isLeaf:
+                  typeof x.has_child_folder === 'boolean'
+                    ? !x.has_child_folder
+                    : false,
+              })),
+          );
+        });
+      }
     },
-    {
-      id: 2,
-      label: 'Node 2',
-      children: [
-        {
-          id: 21,
-          label: 'Node 2.1',
-          children: [
-            { id: 211, label: 'Node 2.1.1' },
-            { id: 212, label: 'Node 2.1.2' },
-          ],
-        },
-      ],
-    },
-  ];
+    [fetchList],
+  );
+
+  const handleSubmit = useCallback(() => {
+    onOk?.(treeValue);
+  }, [onOk, treeValue]);
 
   return (
     <Dialog open onOpenChange={hideModal}>
@@ -45,10 +61,21 @@ export function MoveDialog({ hideModal }: IModalProps<any>) {
           <DialogTitle>{t('common.move')}</DialogTitle>
         </DialogHeader>
         <div>
-          <SingleTreeSelect treeData={treeData}></SingleTreeSelect>
+          <AsyncTreeSelect
+            treeData={treeData}
+            value={treeValue}
+            onChange={setTreeValue}
+            loadData={onLoadData}
+          ></AsyncTreeSelect>
         </div>
         <DialogFooter>
-          <Button type="submit">Save changes</Button>
+          <Button
+            type="submit"
+            onClick={handleSubmit}
+            disabled={isEmpty(treeValue)}
+          >
+            {t('common.save')}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>