diff --git a/packages/web/hooks/useScrollPagination.tsx b/packages/web/hooks/useScrollPagination.tsx index 6185b0064..4c8e18cd0 100644 --- a/packages/web/hooks/useScrollPagination.tsx +++ b/packages/web/hooks/useScrollPagination.tsx @@ -14,6 +14,17 @@ import { import MyBox from '../components/common/MyBox'; import { useTranslation } from 'next-i18next'; +export type ScrollListType = ({ + children, + EmptyChildren, + isLoading, + ...props +}: { + children: React.ReactNode; + EmptyChildren?: React.ReactNode; + isLoading?: boolean; +} & BoxProps) => React.JSX.Element; + export function useScrollPagination< TParams extends PaginationProps, TData extends PaginationResponse diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx b/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx index bcf20d6f7..33a72a64f 100644 --- a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx +++ b/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { Input, Button, Flex, Box, Checkbox } from '@chakra-ui/react'; +import { Input, Button, Flex, Box, Checkbox, BoxProps } from '@chakra-ui/react'; import MyModal from '@fastgpt/web/components/common/MyModal'; import { useTranslation } from 'next-i18next'; import MyIcon from '@fastgpt/web/components/common/Icon'; @@ -19,10 +19,10 @@ import { import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest'; import MyInput from '@/components/MyInput'; import { DatasetTagType } from '@fastgpt/global/core/dataset/type'; -import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination'; +import { ScrollListType, useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination'; import EmptyTip from '@fastgpt/web/components/common/EmptyTip'; import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm'; -import MyBox from '@fastgpt/web/components/common/MyBox'; +import { DatasetCollectionsListItemType } from '@/global/core/dataset/type'; const TagManageModal = ({ onClose }: { onClose: () => void }) => { const { t } = useTranslation(); @@ -39,6 +39,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { >(undefined); const [newTag, setNewTag] = useState(undefined); + const [searchText, setSearchText] = useState(''); const [currentEditTagContent, setCurrentEditTagContent] = useState(undefined); const [currentEditTag, setCurrentEditTag] = useState(undefined); @@ -134,6 +135,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { } ); + // Tags list const { list, ScrollList, @@ -154,11 +156,38 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { } }); + // Collections list + const { + list: collectionsList, + ScrollList: ScrollListCollections, + isLoading: collectionsListLoading + } = useScrollPagination(getScrollCollectionList, { + refreshDeps: [searchText], + debounceWait: 300, + + itemHeight: 37, + overscan: 10, + + pageSize: 30, + defaultParams: { + datasetId: datasetDetail._id, + searchText + } + }); + const { data: tagUsages } = useRequest2(() => getTagUsage(datasetDetail._id), { manual: false, refreshDeps: [collections] }); + const isLoading = + isRequesting || + isCreateCollectionTagLoading || + isDeleteCollectionTagLoading || + isUpdateCollectionTagLoading || + isSaveCollectionTagLoading || + collectionsListLoading; + return ( void }) => { title={t('dataset:tag.manage')} w={'580px'} h={'600px'} - isLoading={ - isRequesting || - isCreateCollectionTagLoading || - isDeleteCollectionTagLoading || - isUpdateCollectionTagLoading || - isSaveCollectionTagLoading - } closeOnOverlayClick={false} + isLoading={isLoading} > {currentAddTag === undefined ? ( <> @@ -200,14 +223,9 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { {t('dataset:tag.Add New')} - } - > + {newTag !== undefined && ( - + void }) => { /> )} + + } + > {list.map((listItem) => { const item = listItem.data; const tagUsage = tagUsages?.find((tagUsage) => tagUsage.tagId === item._id); @@ -351,6 +376,9 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { currentAddTag={currentAddTag} setCurrentAddTag={setCurrentAddTag} onSaveCollectionTag={onSaveCollectionTag} + setSearchText={setSearchText} + collectionsList={collectionsList} + ScrollListCollections={ScrollListCollections} /> )} @@ -362,7 +390,10 @@ export default TagManageModal; const AddTagToCollections = ({ currentAddTag, setCurrentAddTag, - onSaveCollectionTag + onSaveCollectionTag, + setSearchText, + collectionsList, + ScrollListCollections }: { currentAddTag: DatasetTagType & { collections: string[] }; setCurrentAddTag: (tag: (DatasetTagType & { collections: string[] }) | undefined) => void; @@ -375,33 +406,19 @@ const AddTagToCollections = ({ originCollectionIds: string[]; collectionIds: string[]; }) => void; + setSearchText: (text: string) => void; + collectionsList: { + index: number; + data: DatasetCollectionsListItemType; + }[]; + ScrollListCollections: ScrollListType; }) => { const { t } = useTranslation(); - const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail); const [selectedCollections, setSelectedCollections] = useState( currentAddTag.collections ); - - const [searchText, setSearchText] = useState(''); - - const { - list: collectionsList, - ScrollList: ScrollListCollections, - isLoading: isCollectionLoading - } = useScrollPagination(getScrollCollectionList, { - refreshDeps: [searchText], - debounceWait: 300, - - itemHeight: 29, - overscan: 10, - - pageSize: 30, - defaultParams: { - datasetId: datasetDetail._id, - searchText - } - }); + const [originCollections, setOriginCollections] = useState(currentAddTag.collections); const formatCollections = useMemo( () => @@ -419,7 +436,7 @@ const AddTagToCollections = ({ ); return ( - + <> { onSaveCollectionTag({ tag: currentAddTag._id, - originCollectionIds: currentAddTag.collections, + originCollectionIds: originCollections, collectionIds: selectedCollections }); + setOriginCollections(selectedCollections); }} > {t('common:common.Save')} @@ -530,6 +548,6 @@ const AddTagToCollections = ({ ); })} - + ); }; diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx b/projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx index 08eaba0f8..5fc93ebab 100644 --- a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx +++ b/projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx @@ -55,7 +55,8 @@ const TagsPopOver = ({ useEffect(() => { if (!isFocusInput) return; loadDatasetTags({ id: datasetDetail._id, searchKey: searchTag }); - }, [datasetDetail._id, isFocusInput, loadDatasetTags, searchTag]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [datasetDetail._id, isFocusInput, searchTag]); const [visibleTags, setVisibleTags] = useState(tagList); const [overflowTags, setOverflowTags] = useState([]); @@ -214,10 +215,9 @@ const TagsPopOver = ({ borderRadius={'xs'} onClick={() => { onCreateCollectionTag(searchTag); - // setCheckedTags([...checkedTags, item]); }} > - + {t('dataset:tag.add') + ` "${searchTag}"`}