diff --git a/web/src/components/list-filter-bar/filter-popover.tsx b/web/src/components/list-filter-bar/filter-popover.tsx index bbd0d94f7..6b787d171 100644 --- a/web/src/components/list-filter-bar/filter-popover.tsx +++ b/web/src/components/list-filter-bar/filter-popover.tsx @@ -11,18 +11,12 @@ import { useMemo, useState, } from 'react'; -import { FieldPath, useForm } from 'react-hook-form'; -import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { z, ZodArray, ZodString } from 'zod'; import { Button } from '@/components/ui/button'; -import { - Form, - FormField, - FormItem, - FormLabel, - FormMessage, -} from '@/components/ui/form'; +import { Form, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { t } from 'i18next'; import { FilterField } from './filter-field'; import { FilterChange, FilterCollection, FilterValue } from './interface'; @@ -71,37 +65,35 @@ function CheckboxFormMultiple({ }, {}); }, [resolvedFilters]); - // const FormSchema = useMemo(() => { - // if (resolvedFilters.length === 0) { - // return z.object({}); - // } - - // return z.object( - // resolvedFilters.reduce< - // Record< - // string, - // ZodArray | z.ZodObject | z.ZodOptional - // > - // >((pre, cur) => { - // const hasNested = cur.list?.some( - // (item) => item.list && item.list.length > 0, - // ); - - // if (hasNested) { - // pre[cur.field] = z - // .record(z.string(), z.array(z.string().optional()).optional()) - // .optional(); - // } else { - // pre[cur.field] = z.array(z.string().optional()).optional(); - // } - - // return pre; - // }, {}), - // ); - // }, [resolvedFilters]); const FormSchema = useMemo(() => { - return z.object({}); - }, []); + if (resolvedFilters.length === 0) { + return z.object({}); + } + return z.object( + resolvedFilters.reduce< + Record< + string, + ZodArray | z.ZodObject | z.ZodOptional + > + >((pre, cur) => { + const hasNested = cur.list?.some( + (item) => item.list && item.list.length > 0, + ); + if (hasNested) { + pre[cur.field] = z + .record(z.string(), z.array(z.string().optional()).optional()) + .optional(); + } else { + pre[cur.field] = z.array(z.string().optional()).optional(); + } + + return pre; + }, {}), + ); + }, [resolvedFilters]); + // const FormSchema = useMemo(() => { + // return z.object({}); + // }, []); const form = useForm>({ resolver: resolvedFilters.length > 0 ? zodResolver(FormSchema) : undefined, @@ -178,37 +170,28 @@ function CheckboxFormMultiple({ {notInfilterGroup && notInfilterGroup.map((x) => { return ( - > - } - render={() => ( - -
- - {x.label} - -
- {x.list?.length && - x.list.map((item) => { - return ( - - ); - })} - -
- )} - /> + +
+ + {x.label} + +
+ {x.list?.length && + x.list.map((item) => { + return ( + + ); + })} + +
); })} diff --git a/web/src/components/list-filter-bar/use-handle-filter-submit.ts b/web/src/components/list-filter-bar/use-handle-filter-submit.ts index 189a8d6b8..d764454e4 100644 --- a/web/src/components/list-filter-bar/use-handle-filter-submit.ts +++ b/web/src/components/list-filter-bar/use-handle-filter-submit.ts @@ -1,7 +1,42 @@ import { useGetPaginationWithRouter } from '@/hooks/logic-hooks'; import { useCallback, useState } from 'react'; -import { FilterChange, FilterValue } from './interface'; +import { + FilterChange, + FilterCollection, + FilterType, + FilterValue, +} from './interface'; +const getFilterIds = (filter: FilterType): string[] => { + let ids: string[] = []; + if (!filter.list) { + ids = [filter.id]; + } + + if (filter.list && Array.isArray(filter.list)) { + for (const item of filter.list) { + ids = ids.concat(getFilterIds(item)); + } + } + + return ids; +}; + +const mergeFilterValue = ( + filterValue: FilterValue, + ids: string[], +): FilterValue => { + let value = {} as FilterValue; + for (const key in filterValue) { + if (Array.isArray(filterValue[key])) { + const keyIds = filterValue[key] as string[]; + value[key] = ids.filter((id) => keyIds.includes(id)); + } else if (typeof filterValue[key] === 'object') { + value[key] = mergeFilterValue(filterValue[key], ids); + } + } + return value; +}; export function useHandleFilterSubmit() { const [filterValue, setFilterValue] = useState({}); const { setPagination } = useGetPaginationWithRouter(); @@ -13,5 +48,21 @@ export function useHandleFilterSubmit() { [setPagination], ); - return { filterValue, setFilterValue, handleFilterSubmit }; + const checkValue = useCallback((filters: FilterCollection[]) => { + if (!filters?.length || !filterValue) { + return; + } + let validFields = filters.reduce((pre, cur) => { + return [...pre, ...getFilterIds(cur as FilterType)]; + }, [] as string[]); + if (!validFields.length) { + return; + } + setFilterValue((preValue) => { + const newValue: FilterValue = mergeFilterValue(preValue, validFields); + return newValue; + }); + }, []); + + return { filterValue, setFilterValue, handleFilterSubmit, checkValue }; } diff --git a/web/src/hooks/use-document-request.ts b/web/src/hooks/use-document-request.ts index 709dd20d4..22fd1dc5b 100644 --- a/web/src/hooks/use-document-request.ts +++ b/web/src/hooks/use-document-request.ts @@ -94,8 +94,10 @@ export const useFetchDocumentList = () => { const { searchString, handleInputChange } = useHandleSearchChange(); const { pagination, setPagination } = useGetPaginationWithRouter(); const { id } = useParams(); + const queryClient = useQueryClient(); const debouncedSearchString = useDebounce(searchString, { wait: 500 }); - const { filterValue, handleFilterSubmit } = useHandleFilterSubmit(); + const { filterValue, handleFilterSubmit, checkValue } = + useHandleFilterSubmit(); const [docs, setDocs] = useState([]); const isLoop = useMemo(() => { return docs.some((doc) => doc.run === '1'); @@ -144,6 +146,9 @@ export const useFetchDocumentList = () => { }, ); if (ret.data.code === 0) { + queryClient.invalidateQueries({ + queryKey: [DocumentApiAction.FetchDocumentFilter], + }); return ret.data.data; } @@ -173,6 +178,7 @@ export const useFetchDocumentList = () => { setPagination, filterValue, handleFilterSubmit, + checkValue, }; }; @@ -191,7 +197,6 @@ export const useGetDocumentFilter = (): { DocumentApiAction.FetchDocumentFilter, debouncedSearchString, knowledgeId, - open, ], queryFn: async () => { const { data } = await kbService.documentFilter({ diff --git a/web/src/pages/dataset/dataset/index.tsx b/web/src/pages/dataset/dataset/index.tsx index b80283099..1bebdcdad 100644 --- a/web/src/pages/dataset/dataset/index.tsx +++ b/web/src/pages/dataset/dataset/index.tsx @@ -14,7 +14,7 @@ import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection'; import { useFetchDocumentList } from '@/hooks/use-document-request'; import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request'; import { Pen, Upload } from 'lucide-react'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { MetadataType, @@ -48,6 +48,7 @@ export default function Dataset() { filterValue, handleFilterSubmit, loading, + checkValue, } = useFetchDocumentList(); const refreshCount = useMemo(() => { @@ -75,6 +76,10 @@ export default function Dataset() { config: metadataConfig, } = useManageMetadata(); + useEffect(() => { + checkValue(filters); + }, [filters]); + const { rowSelection, rowSelectionIsEmpty, setRowSelection, selectedCount } = useRowSelection();