Merge pull request #5335 from 3drepo/ISSUE_5266

ISSUE #5266 - Ticket filters: select filter form

Author: sanmont3drepo

frontend/src/v5/store/tickets/card/ticketsCard.selectors.ts

@@ -18,7 +18,7 @@
 import { selectCurrentModel } from '@/v4/modules/model';
 import { SequencingProperties, TicketsCardViews } from '@/v5/ui/routes/viewer/tickets/tickets.constants';
 import { createSelector } from 'reselect';
-import { selectTemplateById, selectTemplates, selectTicketById, selectTickets } from '../tickets.selectors';
+import { selectRiskCategories, selectTemplateById, selectTemplates, selectTicketById, selectTickets } from '../tickets.selectors';
 import { ITicketsCardState } from './ticketsCard.redux';
 import { DEFAULT_PIN, getPinColorHex, formatPin, getTicketPins } from '@/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers';
 import { IPin } from '@/v4/services/viewer/viewer';
@@ -197,3 +197,24 @@ export const selectNewTicketPins = createSelector(
 	selectSelectedTicketPinId,
 	getTicketPins,
 );
+
+export const selectPropertyOptions = createSelector(
+	selectTemplates,
+	selectRiskCategories,
+	(state, modelId, module) => module,
+	(state, modelId, module, property) => property,
+	(templates, riskCategories, module, property) => {
+		const allValues = [];
+		templates.forEach((template) => {
+			const matchingModule = module ? template.modules.find((mod) => (mod.name || mod.type) === module)?.properties : template.properties;
+			const matchingProperty = matchingModule?.find(({ name, type: t }) => (name === property) && (['manyOf', 'oneOf'].includes(t)));
+			if (!matchingProperty) return;
+			if (matchingProperty.values === 'riskCategories') {
+				allValues.push(...riskCategories);
+				return;
+			}
+			allValues.push(...matchingProperty.values);
+		});
+		return uniq(allValues);
+	},
+);

frontend/src/v5/store/tickets/tickets.selectors.ts

@@ -52,6 +52,11 @@ export const selectTemplates = createSelector(
 	(state, modelId) => state.templatesByModelId[modelId] || [],
 );
 
+export const selectTemplatesNames = createSelector(
+	selectTemplates,
+	(templates) => templates.map(({ name }) => name),
+);
+
 export const selectTemplateById = createSelector(
 	selectTicketsDomain,
 	selectTemplates,

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

@@ -68,16 +68,23 @@ const DATE_FILTER_OPERATOR_LABEL: Record<CardFilterOperator, string> = {
 };
 
 export const isDateType = (type: CardFilterType) => ['date', 'pastDate', 'sequencing'].includes(type);
-export const isTextType = (type: CardFilterType) => ['template', 'ticketId', 'ticketTitle', 'text', 'longText'].includes(type);
+export const isTextType = (type: CardFilterType) => ['ticketId', 'ticketTitle', 'text', 'longText'].includes(type);
+export const isSelectType = (type: CardFilterType) => ['template', 'oneOf', 'manyOf'].includes(type);
 
 export const getFilterOperatorLabels = (type: CardFilterType) => isDateType(type) ? DATE_FILTER_OPERATOR_LABEL : FILTER_OPERATOR_LABEL;
 
 export const getFilterFormTitle = (elements: string[]) => compact(elements).join(' : ');
 
 export const isRangeOperator = (operator: CardFilterOperator) => ['rng', 'nrng'].includes(operator);
+
+	
 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 (isSelectType(type)) {
+		if (type === 'template') return ['eq', 'neq'];
+		return ['eq', 'neq', 'ex', 'nex'];
+	}
 	return Object.keys(FILTER_OPERATOR_LABEL) as CardFilterOperator[];
 };

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

@@ -18,7 +18,7 @@
 export type CardFilterOperator = 'ex' | 'nex' | 'eq' | 'neq' | 'ss' | 'nss' | 'rng' | 'nrng' | 'gt' | 'gte' | 'lt' | 'lte';
 export type CardFilterType = 'text' | 'longText' | 'date' | 'sequencing' | 'pastDate' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'ticketTitle' | 'ticketId' | 'template';
 type ValueType = string | number | Date;
-export type CardFilterValue = ValueType | [ValueType, ValueType];
+export type CardFilterValue = ValueType | ValueType[];
 export type BaseFilter = { operator: CardFilterOperator, values: CardFilterValue[] };
 
 export type CardFilter = {

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

@@ -74,7 +74,9 @@ export const FilterForm = ({ module, property, type, filter, onSubmit, onCancel
 					{getFilterFormTitle([module, property])}
 				</TitleContainer>
 				<FilterFormOperators type={type} />
-				<FilterFormValues type={type} />
+				{property && (
+					<FilterFormValues module={module} property={property} type={type} />
+				)}
 				<ButtonsContainer>
 					<Button onClick={handleCancel} color="secondary">
 						{isUpdatingFilter

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

@@ -17,14 +17,25 @@
 
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { getOperatorMaxFieldsAllowed } from '../filterForm.helpers';
-import { isRangeOperator, isDateType, isTextType } from '../../cardFilters.helpers';
-import { FormDateTime, FormNumberField, FormTextField } from '@controls/inputs/formInputs.component';
+import { isRangeOperator, isTextType, isSelectType, isDateType } from '../../cardFilters.helpers';
+import { FormNumberField, FormTextField, FormMultiSelect, FormDateTime } from '@controls/inputs/formInputs.component';
 import { ArrayFieldContainer } from '@controls/inputs/arrayFieldContainer/arrayFieldContainer.component';
 import { useEffect } from 'react';
-import { isArray, isEmpty } from 'lodash';
+import { compact, isArray, isEmpty } from 'lodash';
 import { CardFilterType } from '../../cardFilters.types';
-import { NumberRangeInput } from './rangeInput/numberRangeInput.component';
+import { TicketsCardHooksSelectors, TicketsHooksSelectors } from '@/v5/services/selectorsHooks';
+import { useParams } from 'react-router-dom';
+import { ViewerParams } from '@/v5/ui/routes/routes.constants';
+import { MultiSelectMenuItem } from '@controls/inputs/multiSelect/multiSelectMenuItem/multiSelectMenuItem.component';
 import { DateRangeInput } from './rangeInput/dateRangeInput.component';
+import { NumberRangeInput } from './rangeInput/numberRangeInput.component';
+import { mapArrayToFormArray, mapFormArrayToArray } from '@/v5/helpers/form.helper';
+
+type FilterFolrmValuesType = {
+	module: string,
+	property: string,
+	type: CardFilterType,
+};
 
 const getInputField = (type: CardFilterType) => {
 	if (type === 'number') return FormNumberField;
@@ -33,17 +44,22 @@ const getInputField = (type: CardFilterType) => {
 };
 
 const name = 'values';
-export const FilterFormValues = ({ type }: { type: CardFilterType }) => {
+export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesType) => {
+	const { containerOrFederation } = useParams<ViewerParams>();
 	const { control, watch, formState: { errors, dirtyFields } } = useFormContext();
 	const { fields, append, remove } = useFieldArray({
 		control,
 		name,
 	});
 	const error = errors.values || {};
 	const operator = watch('operator');
+	
 	const maxFields = getOperatorMaxFieldsAllowed(operator);
 	const isRangeOp = isRangeOperator(operator);
-	const emptyValue = { value: isRangeOp ? ['', ''] : '' };
+	const emptyValue = { value: (isRangeOp ? ['', ''] : '') };
+	const selectOptions = type === 'template' ?
+		TicketsHooksSelectors.selectTemplatesNames(containerOrFederation)
+		: TicketsCardHooksSelectors.selectPropertyOptions(containerOrFederation, module, property);
 
 	useEffect(() => {
 		if (!fields.length && maxFields > 0) {
@@ -106,6 +122,18 @@ export const FilterFormValues = ({ type }: { type: CardFilterType }) => {
 			</>
 		);
 	}
+	if (isSelectType(type)) {
+		return (
+			<FormMultiSelect
+				name={name}
+				formError={error?.[0]}
+				transformValueIn={mapFormArrayToArray}
+				transformChangeEvent={(e) => mapArrayToFormArray(compact(e.target.value))}
+			>
+				{(selectOptions || []).map((val) => <MultiSelectMenuItem key={val} value={val}>{val}</MultiSelectMenuItem>)}
+			</FormMultiSelect>
+		);
+	}
 
 	return (
 		<>

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 { MultiSelect } from './multiSelect/multiSelect.component';
 
 // text inputs
 export const FormNumberField = (props: InputControllerProps<TextFieldProps>) => (<InputController Input={NumberField} {...props} />);
@@ -44,6 +45,7 @@ export const FormDateTime = (props: InputControllerProps<DateTimePickerProps>) =
 // select inputs
 export const FormSelectView = (props: InputControllerProps<SelectViewProps>) => (<InputController Input={SelectView} {...props} />);
 export const FormSelect = (props: InputControllerProps<SelectProps>) => (<InputController Input={Select} {...props} />);
+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} />);
 

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

@@ -36,14 +36,16 @@ export type InputControllerProps<T,> = T & FormInputProps & {
 	defaultValue?: any,
 	onChange?: (event) => void,
 	onBlur?: () => void,
+	transformValueIn?: (val) => any,
+	transformChangeEvent?: (val) => any,
 	children?: any,
 };
 
 type Props<T> = InputControllerProps<T> & {
 	Input: (props: T) => JSX.Element,
 };
 
-type InputControllerType = <T>(Component: Props<T>, ref) => JSX.Element;
+export type InputControllerType = <T>(Component: Props<T>, ref) => JSX.Element;
 // eslint-disable-next-line @typescript-eslint/comma-dangle
 export const InputController: InputControllerType = forwardRef(<T,>({
 	Input,
@@ -53,6 +55,8 @@ export const InputController: InputControllerType = forwardRef(<T,>({
 	defaultValue,
 	onChange,
 	onBlur,
+	transformValueIn = (val) => val,
+	transformChangeEvent = (val) => val,
 	...props
 }: Props<T>, ref) => {
 	const ctx = useFormContext();
@@ -63,25 +67,27 @@ export const InputController: InputControllerType = forwardRef(<T,>({
 			name={name}
 			control={control}
 			defaultValue={defaultValue}
-			render={({ field: { ref: fieldRef, ...field } }) => (
+			render={({ field: { ref: fieldRef, ...field } }) => {
+				return (
 				// @ts-ignore
-				<Input
-					{...field}
-					{...props}
-					value={field.value ?? ''}
-					onChange={(event) => {
-						field.onChange(event);
-						onChange?.(event);
-					}}
-					onBlur={() => {
-						field.onBlur();
-						onBlur?.();
-					}}
-					inputRef={ref || fieldRef}
-					error={!!error}
-					helperText={error?.message}
-				/>
-			)}
+					<Input
+						{...field}
+						{...props}
+						value={transformValueIn(field.value) ?? ''}
+						onChange={(event) => {
+							field.onChange(transformChangeEvent(event));
+							onChange?.(transformChangeEvent(event));
+						}}
+						onBlur={() => {
+							field.onBlur();
+							onBlur?.();
+						}}
+						inputRef={ref || fieldRef}
+						error={!!error}
+						helperText={error?.message}
+					/>
+				);
+			}}
 		/>
 	);
 });

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

@@ -17,12 +17,16 @@
 
 import { SearchSelect } from '@controls/searchSelect/searchSelect.component';
 import { SelectProps } from '../select/select.component';
+import { FormControl, FormHelperText } from '@mui/material';
 
-export const MultiSelect = ({ defaultValue = [], ...props }: SelectProps) => (
-	<SearchSelect
-		defaultValue={defaultValue}
-		renderValue={(val) => (val as any[]).join(', ')}
-		{...props}
-		multiple
-	/>
+export const MultiSelect = ({ defaultValue = [], className, helperText, ...props }: SelectProps) => (
+	<FormControl required={false} disabled={props.disabled} error={props.error} className={className}>
+		<SearchSelect
+			defaultValue={defaultValue}
+			renderValue={(val) => (val as any[]).join(', ')}
+			{...props}
+			multiple
+		/>
+		<FormHelperText>{helperText}</FormHelperText>
+	</FormControl>
 );

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

@@ -32,7 +32,7 @@ const getValueValidator = (type: CardFilterType) => {
 				maxLength,
 				formatMessage({
 					defaultMessage: 'This must be at max {maxLength} characters',
-					id: 'validators.text.maxLenght',
+					id: 'validators.text.maxLength',
 				}, { maxLength }),
 			);
 	}