diff --git a/apps/client/src/ee/base/components/views/view-filter-config.tsx b/apps/client/src/ee/base/components/views/view-filter-config.tsx index c860845d5..0e96d1b20 100644 --- a/apps/client/src/ee/base/components/views/view-filter-config.tsx +++ b/apps/client/src/ee/base/components/views/view-filter-config.tsx @@ -9,6 +9,7 @@ import { Text, UnstyledButton, Button, + MultiSelect, } from "@mantine/core"; import { IconPlus, IconTrash } from "@tabler/icons-react"; import { @@ -70,6 +71,10 @@ function getOperatorsForType(type: string): FilterOperator[] { DEFAULT_FILTER_OPERATORS) as FilterOperator[]; } +function isMultiChoice(op: FilterCondition["op"]): boolean { + return op === "any" || op === "none"; +} + function FilterValueInput({ condition, property, @@ -121,6 +126,32 @@ function FilterValueInput({ const typeOptions = property.typeOptions as SelectTypeOptions | undefined; const choices = typeOptions?.choices ?? []; const choiceOptions = choices.map((c) => ({ value: c.id, label: c.name })); + + if (isMultiChoice(condition.op)) { + const { value } = condition; + const selected = ( + Array.isArray(value) ? value : value ? [value] : [] + ).filter((id) => choices.some((c) => c.id === id)); + + return ( + onChange(values)} + w={160} + styles={{ + pillsList: { + maxHeight: 70, + overflowY: "auto", + }, + }} + maxDropdownHeight={220} + /> + ); + } + return (