chore: dataset fe adjusting (#1833)

projects/app/src/pages/api/core/dataset/list.ts

@@ -11,11 +11,12 @@ import {
   ReadPermissionVal
   ReadPermissionVal
 } from '@fastgpt/global/support/permission/constant';
 } from '@fastgpt/global/support/permission/constant';
 import { MongoResourcePermission } from '@fastgpt/service/support/permission/schema';
 import { MongoResourcePermission } from '@fastgpt/service/support/permission/schema';
-import { parseParentIdInMongo } from '@fastgpt/global/common/parentFolder/utils';
 import { DatasetDefaultPermission } from '@fastgpt/global/support/permission/dataset/constant';
 import { DatasetDefaultPermission } from '@fastgpt/global/support/permission/dataset/constant';
+import { ParentIdType } from '@fastgpt/global/common/parentFolder/type';
+import { parseParentIdInMongo } from '@fastgpt/global/common/parentFolder/utils';
 
 
 async function handler(req: NextApiRequest) {
 async function handler(req: NextApiRequest) {
-  const { parentId, type } = req.query as { parentId?: string; type?: DatasetTypeEnum };
+  const { parentId, type } = req.body as { parentId: ParentIdType; type?: DatasetTypeEnum };
   // 凭证校验
   // 凭证校验
   const {
   const {
     teamId,
     teamId,
@@ -27,6 +28,18 @@ async function handler(req: NextApiRequest) {
     authApiKey: true,
     authApiKey: true,
     per: ReadPermissionVal
     per: ReadPermissionVal
   });
   });
+  console.log(
+    'parentId',
+    parentId,
+    'type',
+    type,
+    'teamId',
+    teamId,
+    'tmbId',
+    tmbId,
+    'tmbPer',
+    tmbPer
+  );
 
 
   const [myDatasets, rpList] = await Promise.all([
   const [myDatasets, rpList] = await Promise.all([
     MongoDataset.find({
     MongoDataset.find({

projects/app/src/pages/dataset/list/context.tsx

-import { getDatasetPaths, putDatasetById } from '@/web/core/dataset/api';
+import {
+  getDatasetPaths,
+  putDatasetById,
+  getDatasets,
+  getDatasetById,
+  delDatasetById
+} from '@/web/core/dataset/api';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import {
 import {
   GetResourceFolderListProps,
   GetResourceFolderListProps,
@@ -9,18 +15,28 @@ import { useRouter } from 'next/router';
 import React, { useCallback, useState } from 'react';
 import React, { useCallback, useState } from 'react';
 import { createContext } from 'use-context-selector';
 import { createContext } from 'use-context-selector';
 import { useI18n } from '@/web/context/I18n';
 import { useI18n } from '@/web/context/I18n';
-import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { DatasetUpdateBody } from '@fastgpt/global/core/dataset/api';
 import { DatasetUpdateBody } from '@fastgpt/global/core/dataset/api';
 import dynamic from 'next/dynamic';
 import dynamic from 'next/dynamic';
+import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
+import { DatasetItemType } from '@fastgpt/global/core/dataset/type';
+import { EditResourceInfoFormType } from '@/components/common/Modal/EditResourceModal';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { useTranslation } from 'react-i18next';
 
 
 const MoveModal = dynamic(() => import('@/components/common/folder/MoveModal'));
 const MoveModal = dynamic(() => import('@/components/common/folder/MoveModal'));
 
 
 export type DatasetContextType = {
 export type DatasetContextType = {
   refetchDatasets: () => void;
   refetchDatasets: () => void;
   refetchPaths: () => void;
   refetchPaths: () => void;
+  refetchFolderDetail: () => void;
   isFetchingDatasets: boolean;
   isFetchingDatasets: boolean;
   setMoveDatasetId: (id: string) => void;
   setMoveDatasetId: (id: string) => void;
   paths: ParentTreePathItemType[];
   paths: ParentTreePathItemType[];
+  folderDetail?: DatasetItemType;
+  editedDataset?: EditResourceInfoFormType;
+  setEditedDataset: (data?: EditResourceInfoFormType) => void;
+  onDelDataset: (id: string) => Promise<void>;
 };
 };
 
 
 export const DatasetContext = createContext<DatasetContextType>({
 export const DatasetContext = createContext<DatasetContextType>({
@@ -28,22 +44,39 @@ export const DatasetContext = createContext<DatasetContextType>({
   isFetchingDatasets: false,
   isFetchingDatasets: false,
   setMoveDatasetId: () => {},
   setMoveDatasetId: () => {},
   refetchPaths: () => {},
   refetchPaths: () => {},
-  paths: []
+  paths: [],
+  refetchFolderDetail: () => {},
+  folderDetail: {} as any,
+  editedDataset: {} as any,
+  setEditedDataset: () => {},
+  onDelDataset: () => Promise.resolve()
 });
 });
 
 
 function DatasetContextProvider({ children }: { children: React.ReactNode }) {
 function DatasetContextProvider({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const router = useRouter();
   const { commonT } = useI18n();
   const { commonT } = useI18n();
+  const { t } = useTranslation();
 
 
   const { parentId = null } = router.query as { parentId?: string | null };
   const { parentId = null } = router.query as { parentId?: string | null };
-  const { loadMyDatasets } = useDatasetStore();
+  const { myDatasets, loadMyDatasets } = useDatasetStore();
 
 
-  const getDatasetFolderList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
-    const res = await getDatasetPaths(parentId);
+  const { data: folderDetail, runAsync: refetchFolderDetail } = useRequest2(
+    () => (parentId ? getDatasetById(parentId) : Promise.resolve(undefined)),
+    {
+      manual: false,
+      refreshDeps: [parentId, myDatasets]
+    }
+  );
+  const getDatasetFolderList = useCallback(({ parentId }: GetResourceFolderListProps) => {
+    return getDatasets({
+      parentId,
+      type: DatasetTypeEnum.folder
+    }).then((res) => {
       return res.map((item) => ({
       return res.map((item) => ({
-      id: item.parentId,
-      name: item.parentName
+        id: item._id,
+        name: item.name
       }));
       }));
+    });
   }, []);
   }, []);
 
 
   const { data: paths = [], runAsync: refetchPaths } = useRequest2(
   const { data: paths = [], runAsync: refetchPaths } = useRequest2(
@@ -82,12 +115,24 @@ function DatasetContextProvider({ children }: { children: React.ReactNode }) {
     [moveDatasetId, onUpdateDataset]
     [moveDatasetId, onUpdateDataset]
   );
   );
 
 
+  const [editedDataset, setEditedDataset] = useState<EditResourceInfoFormType>();
+
+  const { runAsync: onDelDataset } = useRequest2(delDatasetById, {
+    successToast: t('common.Delete Success'),
+    errorToast: t('dataset.Delete Dataset Error')
+  });
+
   const contextValue = {
   const contextValue = {
     refetchDatasets,
     refetchDatasets,
     isFetchingDatasets,
     isFetchingDatasets,
     setMoveDatasetId,
     setMoveDatasetId,
     paths,
     paths,
-    refetchPaths
+    refetchPaths,
+    refetchFolderDetail,
+    folderDetail,
+    editedDataset,
+    setEditedDataset,
+    onDelDataset
   };
   };
 
 
   return (
   return (

projects/app/src/pages/dataset/list/index.tsx

-import React from 'react';
-import { Box, Flex, Image } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Box, Flex, Image, Button, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import PageContainer from '@/components/PageContainer';
 import PageContainer from '@/components/PageContainer';
 import { useTranslation } from 'next-i18next';
 import { useTranslation } from 'next-i18next';
@@ -10,21 +10,69 @@ import List from './component/List';
 import { DatasetContext } from './context';
 import { DatasetContext } from './context';
 import DatasetContextProvider from './context';
 import DatasetContextProvider from './context';
 import { useContextSelector } from 'use-context-selector';
 import { useContextSelector } from 'use-context-selector';
+import MyMenu from '@fastgpt/web/components/common/MyMenu';
+import { AddIcon } from '@chakra-ui/icons';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { FolderIcon, FolderImgUrl } from '@fastgpt/global/common/file/image/constants';
+import { EditFolderFormType } from '@fastgpt/web/components/common/MyModal/EditFolderModal';
+import dynamic from 'next/dynamic';
+import { postCreateDataset, putDatasetById } from '@/web/core/dataset/api';
+import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
+import FolderSlideCard from '@/components/common/folder/SlideCard';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import {
+  DatasetDefaultPermission,
+  DatasetPermissionList
+} from '@fastgpt/global/support/permission/dataset/constant';
+import {
+  postUpdateDatasetCollaborators,
+  deleteDatasetCollaborators,
+  getCollaboratorList
+} from '@/web/core/dataset/api/collaborator';
+
+const EditFolderModal = dynamic(
+  () => import('@fastgpt/web/components/common/MyModal/EditFolderModal')
+);
+
+const CreateModal = dynamic(() => import('./component/CreateModal'));
 
 
 const Dataset = () => {
 const Dataset = () => {
+  const { isPc } = useSystemStore();
   const { t } = useTranslation();
   const { t } = useTranslation();
   const router = useRouter();
   const router = useRouter();
+  const { parentId } = router.query as { parentId: string };
+
   const { myDatasets } = useDatasetStore();
   const { myDatasets } = useDatasetStore();
 
 
-  const { paths, isFetchingDatasets } = useContextSelector(DatasetContext, (v) => v);
+  const {
+    paths,
+    isFetchingDatasets,
+    refetchPaths,
+    refetchDatasets,
+    folderDetail,
+    setEditedDataset,
+    setMoveDatasetId,
+    onDelDataset
+  } = useContextSelector(DatasetContext, (v) => v);
+  const { userInfo } = useUserStore();
+
+  const [editFolderData, setEditFolderData] = useState<EditFolderFormType>();
+
+  const {
+    isOpen: isOpenCreateModal,
+    onOpen: onOpenCreateModal,
+    onClose: onCloseCreateModal
+  } = useDisclosure();
 
 
   return (
   return (
     <PageContainer
     <PageContainer
       isLoading={myDatasets.length === 0 && isFetchingDatasets}
       isLoading={myDatasets.length === 0 && isFetchingDatasets}
       insertProps={{ px: [5, '48px'] }}
       insertProps={{ px: [5, '48px'] }}
     >
     >
-      <Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}>
-        {/* url path */}
+      <Flex pt={[8, 10]} pr={folderDetail ? [4, 6] : [4, 10]}>
+        <Flex flexGrow={1} flexDirection="column">
+          <Flex alignItems={'center'} justifyContent={'space-between'}>
             <ParentPaths
             <ParentPaths
               paths={paths}
               paths={paths}
               FirstPathDom={
               FirstPathDom={
@@ -43,8 +91,149 @@ const Dataset = () => {
                 });
                 });
               }}
               }}
             />
             />
+            {userInfo?.team?.permission.hasWritePer && (
+              <MyMenu
+                offset={[-30, 5]}
+                width={120}
+                Button={
+                  <Button variant={'primary'} px="0">
+                    <Flex alignItems={'center'} px={'20px'}>
+                      <AddIcon mr={2} />
+                      <Box>{t('common.Create New')}</Box>
                     </Flex>
                     </Flex>
+                  </Button>
+                }
+                menuList={[
+                  {
+                    children: [
+                      {
+                        label: (
+                          <Flex>
+                            <MyIcon name={FolderIcon} w={'20px'} mr={1} />
+                            {t('Folder')}
+                          </Flex>
+                        ),
+                        onClick: () => setEditFolderData({})
+                      },
+                      {
+                        label: (
+                          <Flex>
+                            <Image src={'/imgs/workflow/db.png'} alt={''} w={'20px'} mr={1} />
+                            {t('core.dataset.Dataset')}
+                          </Flex>
+                        ),
+                        onClick: onOpenCreateModal
+                      }
+                    ]
+                  }
+                ]}
+              />
+            )}
+          </Flex>
+          <Box flexGrow={1}>
             <List />
             <List />
+          </Box>
+        </Flex>
+
+        {!!folderDetail && isPc && (
+          <Box ml="6">
+            <FolderSlideCard
+              refreshDeps={[folderDetail._id]}
+              name={folderDetail.name}
+              intro={folderDetail.intro}
+              onEdit={() => {
+                setEditedDataset({
+                  id: folderDetail._id,
+                  name: folderDetail.name,
+                  intro: folderDetail.intro
+                });
+              }}
+              onMove={() => setMoveDatasetId(folderDetail._id)}
+              deleteTip={t('dataset.deleteFolderTips')}
+              onDelete={() =>
+                onDelDataset(folderDetail._id).then(() => {
+                  router.replace({
+                    query: {
+                      ...router.query,
+                      parentId: folderDetail.parentId
+                    }
+                  });
+                })
+              }
+              defaultPer={{
+                value: folderDetail.defaultPermission,
+                defaultValue: DatasetDefaultPermission,
+                onChange: (e) => {
+                  return putDatasetById({
+                    id: folderDetail._id,
+                    defaultPermission: e
+                  });
+                }
+              }}
+              managePer={{
+                permission: folderDetail.permission,
+                onGetCollaboratorList: () => getCollaboratorList(folderDetail._id),
+                permissionList: DatasetPermissionList,
+                onUpdateCollaborators: ({
+                  tmbIds,
+                  permission
+                }: {
+                  tmbIds: string[];
+                  permission: number;
+                }) => {
+                  return postUpdateDatasetCollaborators({
+                    tmbIds,
+                    permission,
+                    datasetId: folderDetail._id
+                  });
+                },
+                onDelOneCollaborator: (tmbId: string) =>
+                  deleteDatasetCollaborators({
+                    datasetId: folderDetail._id,
+                    tmbId
+                  })
+              }}
+            />
+          </Box>
+        )}
+      </Flex>
+
+      {!!editFolderData && (
+        <EditFolderModal
+          onClose={() => setEditFolderData(undefined)}
+          onCreate={async ({ name }) => {
+            try {
+              await postCreateDataset({
+                parentId: parentId || undefined,
+                name,
+                type: DatasetTypeEnum.folder,
+                avatar: FolderImgUrl,
+                intro: ''
+              });
+              refetchDatasets();
+              refetchPaths();
+            } catch (error) {
+              return Promise.reject(error);
+            }
+          }}
+          onEdit={async ({ name, intro, id }) => {
+            try {
+              await putDatasetById({
+                id,
+                name,
+                intro
+              });
+              refetchDatasets();
+              refetchPaths();
+            } catch (error) {
+              return Promise.reject(error);
+            }
+          }}
+        />
+      )}
+      {isOpenCreateModal && (
+        <CreateModal onClose={onCloseCreateModal} parentId={parentId || undefined} />
+      )}
     </PageContainer>
     </PageContainer>
   );
   );
 };
 };

projects/app/src/web/core/dataset/api.ts

@@ -51,8 +51,8 @@ import type {
 import type { readCollectionSourceResponse } from '@/pages/api/core/dataset/collection/read';
 import type { readCollectionSourceResponse } from '@/pages/api/core/dataset/collection/read';
 
 
 /* ======================== dataset ======================= */
 /* ======================== dataset ======================= */
-export const getDatasets = (data: { parentId?: string; type?: DatasetTypeEnum }) =>
-  GET<DatasetListItemType[]>(`/core/dataset/list`, data);
+export const getDatasets = (data: { parentId?: ParentIdType; type?: DatasetTypeEnum }) =>
+  POST<DatasetListItemType[]>(`/core/dataset/list`, data);
 
 
 /**
 /**
  * get type=dataset list
  * get type=dataset list