diff --git a/web/src/components/list-filter-bar/filter-field.tsx b/web/src/components/list-filter-bar/filter-field.tsx index 087d0c064..134e6f3ef 100644 --- a/web/src/components/list-filter-bar/filter-field.tsx +++ b/web/src/components/list-filter-bar/filter-field.tsx @@ -118,7 +118,7 @@ export const FilterField = memo( setShowAll(!showAll); }} > - + {item.label} {showAll ? ( diff --git a/web/src/components/list-filter-bar/filter-popover.tsx b/web/src/components/list-filter-bar/filter-popover.tsx index f4c05bfd2..ba4628193 100644 --- a/web/src/components/list-filter-bar/filter-popover.tsx +++ b/web/src/components/list-filter-bar/filter-popover.tsx @@ -33,6 +33,7 @@ export type CheckboxFormMultipleProps = { onChange?: FilterChange; onOpenChange?: (open: boolean) => void; setOpen(open: boolean): void; + filterGroup?: Record; }; function CheckboxFormMultiple({ @@ -40,6 +41,7 @@ function CheckboxFormMultiple({ value, onChange, setOpen, + filterGroup, }: CheckboxFormMultipleProps) { const [resolvedFilters, setResolvedFilters] = useState(filters); @@ -120,6 +122,20 @@ function CheckboxFormMultiple({ } }, [form, value, resolvedFilters, fieldsDict]); + const filterList = useMemo(() => { + const filterSet = filterGroup + ? Object.values(filterGroup).reduce>((pre, cur) => { + cur.forEach((item) => pre.add(item)); + return pre; + }, new Set()) + : new Set(); + return [...filterSet]; + }, [filterGroup]); + + const notInfilterGroup = useMemo(() => { + return filters.filter((x) => !filterList.includes(x.field)); + }, [filterList, filters]); + return (
form.reset()} > - {filters.map((x) => ( - ( - -
- {x.label} +
+ {filterGroup && + Object.keys(filterGroup).map((key) => { + const filterKeys = filterGroup[key]; + const thisFilters = filters.filter((x) => + filterKeys.includes(x.field), + ); + return ( +
+
{key}
+
+ {thisFilters.map((x) => ( + + ))} +
- {x.list.map((item) => { - return ( - - ); - })} - - - )} - /> - ))} + ); + })} + {notInfilterGroup && + notInfilterGroup.map((x) => { + return ( + ( + +
+ + {x.label} + +
+ {x.list.map((item) => { + return ( + + ); + })} + +
+ )} + /> + ); + })} +
+