ISSUE #5271 - Ticket filters: jobsandusers select filter form

frontend/src/v5/store/jobs/jobs.types.ts

@@ -15,8 +15,12 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { IUser } from '../users/users.redux';
+
 export type IJob = {
 	_id: string;
 	color: string;
 	isViewer?: boolean;
 };
+
+export type IJobOrUserList = Partial<IJob & IUser>[];

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

@@ -23,8 +23,11 @@ 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';
 import { selectSelectedDate } from '@/v4/modules/sequences';
-import { uniq } from 'lodash';
-import { toTicketCardFilter, templatesToFilters } from '@components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFilters.helpers';
+import { sortBy, uniq, sortedUniqBy } from 'lodash';
+import { toTicketCardFilter, templatesToFilters, getFiltersFromJobsAndUsers } from '@components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFilters.helpers';
+import { selectFederationById, selectFederationJobs, selectFederationUsers } from '../../federations/federations.selectors';
+import { selectContainerJobs, selectContainerUsers } from '../../containers/containers.selectors';
+import { IJobOrUserList } from '../../jobs/jobs.types';
 
 const selectTicketsCardDomain = (state): ITicketsCardState => state.ticketsCard || {};
 
@@ -139,20 +142,28 @@ export const selectFilteredTickets = createSelector(
 	},
 );
 
-const selectTemplatesFilters = createSelector(
+export const selectTemplatesWithTickets = createSelector(
+	selectCurrentTemplates,
+	selectCurrentTickets,
+	(templates, tickets) => {
+		const idsOfTemplatesWithAtLeastOneTicket = uniq(tickets.map((t) => t.type));
+		return templates.filter((t) => idsOfTemplatesWithAtLeastOneTicket.includes(t._id));
+	},
+);
+
+export const selectTemplatesWithFilteredTickets = createSelector(
 	selectCurrentTemplates,
 	selectFilteredTickets,
 	(templates, tickets) => {
 		const idsOfTemplatesWithAtLeastOneTicket = uniq(tickets.map((t) => t.type));
-		const templatesWithAtLeastOneTicket = templates.filter((t) => idsOfTemplatesWithAtLeastOneTicket.includes(t._id));
-		return templatesToFilters(templatesWithAtLeastOneTicket);
+		return templates.filter((t) => idsOfTemplatesWithAtLeastOneTicket.includes(t._id));
 	},
 );
 
 export const selectAvailableTemplatesFilters = createSelector(
 	selectFilters,
-	selectTemplatesFilters,
-	(usedFilters, allFilters) => allFilters.filter(({ module, property, type }) => !usedFilters[`${module}.${property}.${type}`]),
+	selectTemplatesWithFilteredTickets,
+	(usedFilters, allFilters) => templatesToFilters(allFilters).filter(({ module, property, type }) => !usedFilters[`${module}.${property}.${type}`]),
 );
 
 export const selectIsShowingPins = createSelector(
@@ -207,24 +218,44 @@ export const selectNewTicketPins = createSelector(
 	selectSelectedTicketPinId,
 	getTicketPins,
 );
+const selectJobsAndUsersByModelId = createSelector(
+	selectFederationById,
+	selectFederationJobs,
+	selectContainerJobs,
+	selectFederationUsers,
+	selectContainerUsers,
+	(fed, fedJobs, contJobs, fedUsers, contUsers) => {
+		const isFed = !!fed;
+		const jobs = isFed ? fedJobs : contJobs;
+		const users = isFed ? fedUsers : contUsers;
+		return [...jobs, ...users] as IJobOrUserList;
+	},
+);
 
 export const selectPropertyOptions = createSelector(
-	selectTemplates,
+	selectTemplatesWithTickets,
 	selectRiskCategories,
+	selectJobsAndUsersByModelId,
 	(state, modelId, module) => module,
 	(state, modelId, module, property) => property,
-	(templates, riskCategories, module, property) => {
+	(templates, riskCategories, jobsAndUsers, module, property) => {
 		const allValues = [];
+		if (!module && property === 'Owner') return getFiltersFromJobsAndUsers(jobsAndUsers.filter((ju) => !!ju.firstName));
 		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;
+			switch (matchingProperty.values) {
+				case 'riskCategories':
+					allValues.push(...riskCategories.map((value) => ({ value, type: 'riskCategories' })));
+					break;
+				case 'jobsAndUsers':
+					allValues.push(...getFiltersFromJobsAndUsers(jobsAndUsers));
+					break;
+				default:
+					allValues.push(...matchingProperty.values.map((value) => ({ value, type: 'default' })));
 			}
-			allValues.push(...matchingProperty.values);
 		});
-		return uniq(allValues);
+		return sortedUniqBy(sortBy(allValues, 'value'), 'value');
 	},
 );

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

@@ -53,11 +53,6 @@ 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

@@ -73,7 +73,7 @@ const DATE_FILTER_OPERATOR_LABEL: Record<CardFilterOperator, string> = {
 
 export const isDateType = (type: CardFilterType) => ['date', 'pastDate', 'sequencing'].includes(type);
 export const isTextType = (type: CardFilterType) => ['ticketCode', 'title', 'text', 'longText'].includes(type);
-export const isSelectType = (type: CardFilterType) => ['template', 'oneOf', 'manyOf'].includes(type);
+export const isSelectType = (type: CardFilterType) => ['template', 'oneOf', 'manyOf', 'owner'].includes(type);
 
 export const getFilterOperatorLabels = (type: CardFilterType) => isDateType(type) ? DATE_FILTER_OPERATOR_LABEL : FILTER_OPERATOR_LABEL;
 
@@ -90,7 +90,7 @@ export const getValidOperators = (type: CardFilterType): CardFilterOperator[] =>
 	if (isDateType(type)) return ['ex', 'nex', 'eq', 'neq', 'gte', 'lte', 'rng', 'nrng'];
 	if (type === 'boolean') return ['eq', 'ex', 'nex'];
 	if (isSelectType(type)) {
-		if (type === 'template') return ['is', 'nis'];
+		if (['template', 'owner'].includes(type)) return ['is', 'nis'];
 		return ['ex', 'nex', 'is', 'nis'];
 	}
 	return Object.keys(FILTER_OPERATOR_LABEL) as CardFilterOperator[];

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

@@ -16,10 +16,10 @@
  */
 
 export type CardFilterOperator = 'ex' | 'nex' | 'is' | 'nis' | 'eq' | 'neq' | 'ss' | 'nss' | 'rng' | 'nrng' | 'gt' | 'gte' | 'lt' | 'lte';
-export type CardFilterType = 'text' | 'longText' | 'date' | 'sequencing' | 'pastDate' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'title' | 'ticketCode' | 'template';
+export type CardFilterType = 'text' | 'longText' | 'date' | 'sequencing' | 'pastDate' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'title' | 'ticketCode' | 'template' | 'owner';
 type ValueType = string | number | Date;
 export type CardFilterValue = ValueType | ValueType[];
-export type BaseFilter = { operator: CardFilterOperator, values: CardFilterValue[] };
+export type BaseFilter = { operator: CardFilterOperator, values: CardFilterValue[], displayValues?: string };
 
 export type CardFilter = {
 	property: string,

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

@@ -17,27 +17,10 @@
 
 import CloseIcon from '@assets/icons/outlined/close-outlined.svg';
 import { ChipContainer, DeleteButton, TextWrapper, OperatorIconContainer, DisplayValue, Property } from './filterChip.styles';
-import { FILTER_OPERATOR_ICON, getFilterOperatorLabels, isDateType, isRangeOperator } from '../cardFilters.helpers';
+import { FILTER_OPERATOR_ICON, getFilterOperatorLabels } from '../cardFilters.helpers';
 import { Tooltip } from '@mui/material';
 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(
-	{ defaultMessage: '{from} to {to}', id: 'cardFilter.dateRange.join' },
-	{ from: valueToDisplayDate(from), to: valueToDisplayDate(to) },
-);
-
-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(', ') ?? '';
-};
+import { CardFilterType, BaseFilter } from '../cardFilters.types';
 
 type FilterChipProps = {
 	property: string;
@@ -47,10 +30,9 @@ type FilterChipProps = {
 	onDelete: () => void;
 };
 export const FilterChip = ({ property, onDelete, selected, type, filter }: FilterChipProps) => {
-	const { operator, values } = filter;
+	const { operator, values, displayValues = values.join(', ') } = filter;
 	const OperatorIcon = FILTER_OPERATOR_ICON[operator];
 	const hasMultipleValues = values.length > 1;
-	const displayValue = getDisplayValue(values, operator, type);
 	const labels = getFilterOperatorLabels(type);
 
 	const handleDelete = (e) => {
@@ -61,7 +43,7 @@ export const FilterChip = ({ property, onDelete, selected, type, filter }: Filte
 
 	return (
 		<ChipContainer selected={selected}>
-			<Tooltip title={`${property} ${labels[operator]} ${displayValue}`}>
+			<Tooltip title={`${property} ${labels[operator]} ${displayValues}`}>
 				<TextWrapper>
 					<Property>{property}</Property>
 					<OperatorIconContainer>
@@ -73,7 +55,7 @@ export const FilterChip = ({ property, onDelete, selected, type, filter }: Filte
 						</DisplayValue>
 					)}
 					{!hasMultipleValues && !!values?.length && (
-						<DisplayValue>{displayValue}</DisplayValue>
+						<DisplayValue>{displayValues}</DisplayValue>
 					)}
 				</TextWrapper>
 			</Tooltip>

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

@@ -17,20 +17,24 @@
 
 import { FormattedMessage } from 'react-intl';
 import { CardFilterOperator, CardFilterValue, CardFilterType, BaseFilter, CardFilter } from '../cardFilters.types';
-import { getFilterFormTitle } from '../cardFilters.helpers';
+import { getFilterFormTitle, getValidOperators, isDateType, isRangeOperator } from '../cardFilters.helpers';
 import { Container, ButtonsContainer, Button, TitleContainer } from './filterForm.styles';
 import { FormProvider, useForm } from 'react-hook-form';
-import { isEmpty } from 'lodash';
+import { intersection, isBoolean, isEmpty } from 'lodash';
 import { ActionMenuItem } from '@controls/actionMenu';
 import { FilterFormValues } from './filterFormValues/filterFormValues.component';
 import { mapArrayToFormArray, mapFormArrayToArray } from '@/v5/helpers/form.helper';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FilterSchema } from '@/v5/validation/ticketSchemes/validators';
 import { FilterFormOperators } from './filterFormValues/operators/filterFormOperators.component';
+import { getOptionFromValue } from '../filtersSelection/tickets/ticketFilters.helpers';
+import { formatSimpleDate } from '@/v5/helpers/intl.helper';
+import { formatMessage } from '@/v5/services/intl';
+import { TRUE_LABEL, FALSE_LABEL } from '@controls/inputs/booleanSelect/booleanSelect.component';
 
-const DEFAULT_OPERATOR = 'is';
+const DEFAULT_OPERATORS: CardFilterOperator[] = ['is', 'eq'];
 const DEFAULT_VALUES = [''];
-type FormType = { values: { value: CardFilterValue }[], operator: CardFilterOperator };
+type FormType = { values: { value: CardFilterValue, displayValue?: string }[], operator: CardFilterOperator };
 type FilterFormProps = {
 	module: string,
 	property: string,
@@ -39,9 +43,16 @@ type FilterFormProps = {
 	onSubmit: (newFilter: CardFilter) => void,
 	onCancel: () => void,
 };
+
+const valueToDisplayDate = (value) => formatSimpleDate(new Date(value));
+const formatDateRange = ([from, to]) => formatMessage(
+	{ defaultMessage: '{from} to {to}', id: 'cardFilter.dateRange.join' },
+	{ from: valueToDisplayDate(from), to: valueToDisplayDate(to) },
+);
+
 export const FilterForm = ({ module, property, type, filter, onSubmit, onCancel }: FilterFormProps) => {
-	const defaultValues = {
-		operator: filter?.operator || DEFAULT_OPERATOR,
+	const defaultValues: FormType = {
+		operator: filter?.operator || intersection(getValidOperators(type), DEFAULT_OPERATORS)[0],
 		values: mapArrayToFormArray(filter?.values || DEFAULT_VALUES),
 	};
 
@@ -50,16 +61,33 @@ export const FilterForm = ({ module, property, type, filter, onSubmit, onCancel
 		mode: 'onChange',
 		resolver: yupResolver(FilterSchema),
 		context: { type },
+		shouldUnregister: true,
 	});
-	const { formState: { isValid, dirtyFields }, reset } = formData;
+	const { formState: { isValid, dirtyFields }, reset, getValues } = formData;
+
+	const operatorValue = getValues('operator');
+	if (!getValidOperators(type).includes(operatorValue)) {
+		reset(defaultValues);
+	}
 
 	const isUpdatingFilter = !!filter;
 	const canSubmit = isValid && !isEmpty(dirtyFields);
 
 	const handleSubmit = formData.handleSubmit((body: FormType) => {
 		const newValues = mapFormArrayToArray(body.values)
 			.filter((x) => ![undefined, ''].includes(x as any));
-		onSubmit({ module, property, type, filter: { operator: body.operator, values: newValues } });
+		const isRange = isRangeOperator(body.operator);
+		const displayValues = newValues.map((newVal) => {
+			const option = getOptionFromValue(newVal, body.values);
+			if (isDateType(type)) return (isRange ? formatDateRange(newVal) : valueToDisplayDate(newVal));
+			if (type === 'boolean' && isBoolean(newValues[0])) return newValues[0] ? TRUE_LABEL : FALSE_LABEL; 
+			if (isRange) {
+				const [a, b] = newVal;
+				return `[${a}, ${b}]`;
+			}
+			return option.displayValue ?? newVal;
+		}).join(', ');
+		onSubmit({ module, property, type, filter: { operator: body.operator, values: newValues, displayValues } });
 	});
 
 	const handleCancel = () => {

frontend/src/v5/ui/components/viewer/cards/cardFilters/filterForm/filterForm.styles.ts

@@ -31,6 +31,7 @@ export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+	max-width: 365px;
 `;
 
 export const TitleContainer = styled.div`

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

@@ -18,20 +18,21 @@
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { getOperatorMaxFieldsAllowed } from '../filterForm.helpers';
 import { isRangeOperator, isTextType, isSelectType, isDateType } from '../../cardFilters.helpers';
-import { FormBooleanSelect, FormMultiSelect, FormDateTime, FormNumberField, FormTextField } from '@controls/inputs/formInputs.component';
+import { FormBooleanSelect, FormMultiSelect, FormDateTime, FormNumberField, FormTextField, FormJobsAndUsersSelect } from '@controls/inputs/formInputs.component';
 import { ArrayFieldContainer } from '@controls/inputs/arrayFieldContainer/arrayFieldContainer.component';
 import { useEffect } from 'react';
 import { compact, isArray, isEmpty } from 'lodash';
 import { CardFilterType } from '../../cardFilters.types';
-import { TicketsCardHooksSelectors, TicketsHooksSelectors } from '@/v5/services/selectorsHooks';
+import { TicketsCardHooksSelectors } 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';
+import { mapFormArrayToArray } from '@/v5/helpers/form.helper';
+import { getOptionFromValue, getFilterFromEvent } from '../../filtersSelection/tickets/ticketFilters.helpers';
 
-type FilterFolrmValuesType = {
+type FilterFormValuesProps = {
 	module: string,
 	property: string,
 	type: CardFilterType,
@@ -44,7 +45,7 @@ const getInputField = (type: CardFilterType) => {
 };
 
 const name = 'values';
-export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesType) => {
+export const FilterFormValues = ({ module, property, type }: FilterFormValuesProps) => {
 	const { containerOrFederation } = useParams<ViewerParams>();
 	const { control, watch, formState: { errors, dirtyFields } } = useFormContext();
 	const { fields, append, remove } = useFieldArray({
@@ -58,7 +59,7 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 	const isRangeOp = isRangeOperator(operator);
 	const emptyValue = { value: (isRangeOp ? ['', ''] : '') };
 	const selectOptions = type === 'template' ?
-		TicketsHooksSelectors.selectTemplatesNames(containerOrFederation)
+		TicketsCardHooksSelectors.selectTemplatesWithTickets().map(({ code: value, name: displayValue }) => ({ value, displayValue, type: 'template' }))
 		: TicketsCardHooksSelectors.selectPropertyOptions(containerOrFederation, module, property);
 
 	useEffect(() => {
@@ -122,15 +123,32 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 			</>
 		);
 	}
+
 	if (isSelectType(type)) {
+		const allJobsAndUsers = selectOptions.every(({ type: t }) => t === 'jobsAndUsers');
+		if (allJobsAndUsers) return (
+			<FormJobsAndUsersSelect
+				multiple
+				showAddButton
+				excludeJobs={type === 'owner'}
+				maxItems={19}
+				name={name}
+				transformInputValue={(v) => compact(mapFormArrayToArray(v))}
+				transformOutputValue={(e) =>  getFilterFromEvent(e, selectOptions)}
+				formError={error?.[0]}
+			/>
+		);
 		return (
 			<FormMultiSelect
 				name={name}
+				transformInputValue={mapFormArrayToArray}
+				transformOutputValue={(e) => getFilterFromEvent(e, selectOptions)}
+				renderValue={(values: string[]) => values.map((value) => getOptionFromValue(value, selectOptions)?.displayValue ?? value).join(', ')}
 				formError={error?.[0]}
-				transformValueIn={mapFormArrayToArray}
-				transformChangeEvent={(e) => mapArrayToFormArray(compact(e.target.value))}
 			>
-				{(selectOptions || []).map((val) => <MultiSelectMenuItem key={val} value={val}>{val}</MultiSelectMenuItem>)}
+				{selectOptions.map(
+					(option) => <MultiSelectMenuItem key={option.value} value={option.value}>{option.displayValue ?? option.value}</MultiSelectMenuItem>,
+				)}
 			</FormMultiSelect>
 		);
 	}
@@ -143,4 +161,4 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 			<FormTextField name={`${name}.0.value`} />
 		</>
 	);
-};
+};