diff --git a/src/modules/groups/GroupSelector.tsx b/src/modules/groups/GroupSelector.tsx index d46a1909..51f3df1d 100644 --- a/src/modules/groups/GroupSelector.tsx +++ b/src/modules/groups/GroupSelector.tsx @@ -22,28 +22,45 @@ import { Group } from "@/interfaces/Group"; interface MultiSelectProps { values: string[]; - onChange: (items: string[]) => void; + exclusiveValue?: string; + onChange: (anyOfValues: string[], exclusiveValue?: string) => void; disabled?: boolean; popoverWidth?: "auto" | number; groups: Group[] | undefined; + unassignedCount?: number; + defaultGroupName?: string; } export function GroupSelector({ onChange, values, + exclusiveValue, disabled = false, popoverWidth = 400, groups, + unassignedCount, + defaultGroupName = "All", //defined as a property, no clue if this value may change in the future }: MultiSelectProps) { const searchRef = React.useRef(null); const [inputRef, { width }] = useElementSize(); const [search, setSearch] = useState(""); - const toggle = (code: string) => { + const toggleAnyOf = (code: string) => { const isSelected = values.find((c) => c == code) != undefined; if (isSelected) { - onChange && onChange(values.filter((c) => c != code)); + onChange && onChange(values.filter((c) => c != code), undefined); } else { - onChange && onChange([...values, code]); + onChange && onChange([...values, code], undefined); + setSearch(""); + } + }; + + const toggleExclusive = (code: string) => { + const isSelected = exclusiveValue == code; + if (isSelected) { + onChange && onChange([], undefined); + setSearch(""); + } else { + onChange && onChange([], code); setSearch(""); } }; @@ -63,14 +80,16 @@ export function GroupSelector({ }} > - )} - - - {!isUser && ( + { + !isUser + && tableGroups.length > 1 // if length == 1, it means only "All" group exists, case not relevant + && ( { - table.setPageIndex(0); - if (groups.length == 0) { - table.getColumn("group_names")?.setFilterValue(undefined); - return; - } else { - table.getColumn("group_names")?.setFilterValue(groups); - } - resetSelectedRows(); + exclusiveValue={ + (table + .getColumn("group_name_strings") + ?.getFilterValue() as string) || undefined + } + onChange={(anyOfValues, exclusiveValue) => { + const normalizedAnyOf = ( anyOfValues.length == 0 ) ? undefined : anyOfValues; + overrideTableFilter( table, [ + { + id: "group_names", + value: normalizedAnyOf + }, + { + id: "group_name_strings", + value: exclusiveValue + } + ] + ); }} groups={tableGroups} + unassignedCount={unassignedCount} + defaultGroupName={DEFAULT_GROUP_NAME} /> )} + + {