Merge pull request #5380 from 3drepo/ISSUE_5371

ISSUE #5371 - Ticket filters: boolean filters

Author: carmenfan

frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.helpers.ts

@@ -82,6 +82,7 @@ export const getValidOperators = (type: CardFilterType): CardFilterOperator[] =>
 	if (isTextType(type)) return ['eq', 'neq', 'ss', 'nss', 'ex', 'nex'];
 	if (type === 'number') return ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'rng', 'nrng', 'ex', 'nex'];
 	if (isDateType(type)) return ['eq', 'lte', 'gte', 'rng', 'nrng', 'ex', 'nex'];
+	if (type === 'boolean') return ['eq', 'ex', 'nex'];
 	if (isSelectType(type)) {
 		if (type === 'template') return ['eq', 'neq'];
 		return ['eq', 'neq', 'ex', 'nex'];

frontend/src/v5/ui/components/viewer/cards/cardFilters/filterChip/filterChip.component.tsx

@@ -23,6 +23,8 @@ import { FormattedMessage } from 'react-intl';
 import { CardFilterType, BaseFilter, CardFilterOperator, CardFilterValue } from '../cardFilters.types';
 import { formatSimpleDate } from '@/v5/helpers/intl.helper';
 import { formatMessage } from '@/v5/services/intl';
+import { isBoolean } from 'lodash';
+import { FALSE_LABEL, TRUE_LABEL } from '@controls/inputs/booleanSelect/booleanSelect.component';
 
 const valueToDisplayDate = (value) => formatSimpleDate(new Date(value));
 const formatDateRange = ([from, to]) => formatMessage(
@@ -33,6 +35,7 @@ const formatDateRange = ([from, to]) => formatMessage(
 const getDisplayValue = (values: CardFilterValue[], operator: CardFilterOperator, type: CardFilterType) => {
 	const isRange = isRangeOperator(operator);
 	if (isDateType(type)) return values.map(isRange ? formatDateRange : valueToDisplayDate);
+	if (type === 'boolean' && isBoolean(values[0])) return values[0] ? TRUE_LABEL : FALSE_LABEL; 
 	return (isRange ? values.map(([a, b]: any) => `[${a}, ${b}]`) : values).join(', ') ?? '';
 };
 

frontend/src/v5/ui/components/viewer/cards/cardFilters/filterForm/filterFormValues/filterFormValues.component.tsx

@@ -18,7 +18,7 @@
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { getOperatorMaxFieldsAllowed } from '../filterForm.helpers';
 import { isRangeOperator, isTextType, isSelectType, isDateType } from '../../cardFilters.helpers';
-import { FormNumberField, FormTextField, FormMultiSelect, FormDateTime } from '@controls/inputs/formInputs.component';
+import { FormBooleanSelect, FormMultiSelect, FormDateTime, FormNumberField, FormTextField } from '@controls/inputs/formInputs.component';
 import { ArrayFieldContainer } from '@controls/inputs/arrayFieldContainer/arrayFieldContainer.component';
 import { useEffect } from 'react';
 import { compact, isArray, isEmpty } from 'lodash';
@@ -135,6 +135,8 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 		);
 	}
 
+	if (type === 'boolean') return (<FormBooleanSelect name={`${name}.0.value`} />);
+
 	return (
 		<>
 			type not created yet: {type}

frontend/src/v5/ui/controls/inputs/booleanSelect/booleanSelect.component.tsx

@@ -0,0 +1,39 @@
+/**
+ *  Copyright (C) 2025 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { formatMessage } from '@/v5/services/intl';
+import { Select, SelectProps } from '../select/select.component';
+import { MenuItem } from '@mui/material';
+import { isBoolean } from 'lodash';
+
+export const TRUE_LABEL = formatMessage({ id: 'select.booleanValue.true', defaultMessage: 'True' });
+export const FALSE_LABEL = formatMessage({ id: 'select.booleanValue.false', defaultMessage: 'False' });
+
+export type BooleanSelectProps = Omit<SelectProps, 'children'>;
+export const BooleanSelect = (props: BooleanSelectProps) => {
+	const renderValue = (value) => {
+		if (!isBoolean(value)) return '';
+		return value ? TRUE_LABEL : FALSE_LABEL;
+	};
+
+	return (
+		<Select renderValue={renderValue} {...props}>
+			<MenuItem value={true as any}>{TRUE_LABEL}</MenuItem>
+			<MenuItem value={false as any}>{FALSE_LABEL}</MenuItem>
+		</Select>
+	);
+};

frontend/src/v5/ui/controls/inputs/formInputs.component.tsx

@@ -29,6 +29,7 @@ import { TextArea, TextAreaProps } from './textArea/textArea.component';
 import { TextAreaFixedSize, TextAreaFixedSizeProps } from './textArea/textAreaFixedSize.component';
 import { TextField, TextFieldProps } from './textField/textField.component';
 import { DateTimePicker, DateTimePickerProps } from './datePicker/dateTimePicker.component';
+import { BooleanSelect, BooleanSelectProps } from './booleanSelect/booleanSelect.component';
 import { MultiSelect } from './multiSelect/multiSelect.component';
 
 // text inputs
@@ -48,6 +49,7 @@ export const FormSelect = (props: InputControllerProps<SelectProps>) => (<InputC
 export const FormMultiSelect = (props: InputControllerProps<SelectProps>) => (<InputController Input={MultiSelect} {...props} />);
 export const FormChipSelect = (props: InputControllerProps<ChipSelectProps>) => (<InputController Input={({ inputRef, ...chipProps }: any) => <ChipSelect {...chipProps} />} {...props} />);
 export const FormSearchSelect = (props: InputControllerProps<SelectProps>) => (<InputController Input={SearchSelect} {...props} />);
+export const FormBooleanSelect = (props: InputControllerProps<BooleanSelectProps>) => (<InputController Input={BooleanSelect} {...props} />);
 
 // control inputs
 export const FormCheckbox = (props: InputControllerProps<CheckboxProps>) => (<InputController Input={({ error, helperText,  ...checkboxProps }: any) => <Checkbox {...checkboxProps} />} {...props} />);

frontend/src/v5/validation/ticketSchemes/validators.ts

@@ -37,6 +37,7 @@ const getValueValidator = (type: CardFilterType) => {
 			);
 	}
 	if (isDateType(type) || type === 'number') return requiredNumber();
+	if (type === 'boolean') return Yup.bool().required(ERROR_REQUIRED_FIELD_MESSAGE);
 	return trimmedString;
 };