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 { sortBy, uniq, sortedUniqBy } from 'lodash';
 import { toTicketCardFilter, templatesToFilters } 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 || {};
 
@@ -197,24 +200,49 @@ 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,
 	selectRiskCategories,
+	selectJobsAndUsersByModelId,
 	(state, modelId, module) => module,
 	(state, modelId, module, property) => property,
-	(templates, riskCategories, module, property) => {
+	(templates, riskCategories, jobsAndUsers, 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);
+				allValues.push(...riskCategories.map((value) => ({ value, type: 'riskCategories' })));
+				return;
+			}
+			if (matchingProperty.values === 'jobsAndUsers') {
+				allValues.push(...jobsAndUsers.map((ju) => {
+					const isUser = !!ju.firstName;
+					return ({
+						value: isUser ? ju.user : ju._id,
+						displayValue: isUser ? `${ju?.firstName} ${ju?.lastName}` : null,
+						type: 'jobsAndUsers',
+					});
+				}));
 				return;
 			}
-			allValues.push(...matchingProperty.values);
+			allValues.push(...matchingProperty.values.map((value) => ({ value, type: 'default' })));
 		});
-		return uniq(allValues);
+		return sortedUniqBy(sortBy(allValues, ({ value }) => value), ({ value }) => value);
 	},
 );

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

@@ -69,7 +69,7 @@ const DATE_FILTER_OPERATOR_LABEL: Record<CardFilterOperator, string> = {
 
 export const isDateType = (type: CardFilterType) => ['date', 'pastDate', 'sequencing'].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 isSelectType = (type: CardFilterType) => ['template', 'owner', 'oneOf', 'manyOf'].includes(type);
 
 export const getFilterOperatorLabels = (type: CardFilterType) => isDateType(type) ? DATE_FILTER_OPERATOR_LABEL : FILTER_OPERATOR_LABEL;
 
@@ -84,7 +84,7 @@ export const getValidOperators = (type: CardFilterType): CardFilterOperator[] =>
 	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'];
+		if (['template', 'owner'].includes(type)) 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

@@ -16,10 +16,10 @@
  */
 
 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';
+export type CardFilterType = 'text' | 'longText' | 'date' | 'sequencing' | 'pastDate' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'ticketTitle' | 'ticketId' | '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 } = 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, 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 { 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 = '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,6 +43,13 @@ 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,
@@ -59,7 +70,18 @@ export const FilterForm = ({ module, property, type, filter, onSubmit, onCancel
 	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,7 +18,7 @@
 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, FormAssigneesSelect } from '@controls/inputs/formInputs.component';
 import { ArrayFieldContainer } from '@controls/inputs/arrayFieldContainer/arrayFieldContainer.component';
 import { useEffect } from 'react';
 import { compact, isArray, isEmpty } from 'lodash';
@@ -30,8 +30,9 @@ import { MultiSelectMenuItem } from '@controls/inputs/multiSelect/multiSelectMen
 import { DateRangeInput } from './rangeInput/dateRangeInput.component';
 import { NumberRangeInput } from './rangeInput/numberRangeInput.component';
 import { mapArrayToFormArray, mapFormArrayToArray } from '@/v5/helpers/form.helper';
+import { getOptionFromValue, selectTypeOnChange } from '../../filtersSelection/tickets/ticketFilters.helpers';
 
-type FilterFolrmValuesType = {
+type FilterFormValuesProps = {
 	module: string,
 	property: string,
 	type: CardFilterType,
@@ -44,7 +45,8 @@ const getInputField = (type: CardFilterType) => {
 };
 
 const name = 'values';
-export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesType) => {
+export const FilterFormValues = ({ module, property, type }: FilterFormValuesProps) => {
+	if (!property) return null;
 	const { containerOrFederation } = useParams<ViewerParams>();
 	const { control, watch, formState: { errors, dirtyFields } } = useFormContext();
 	const { fields, append, remove } = useFieldArray({
@@ -58,7 +60,7 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 	const isRangeOp = isRangeOperator(operator);
 	const emptyValue = { value: (isRangeOp ? ['', ''] : '') };
 	const selectOptions = type === 'template' ?
-		TicketsHooksSelectors.selectTemplatesNames(containerOrFederation)
+		mapArrayToFormArray(TicketsHooksSelectors.selectTemplatesNames(containerOrFederation))
 		: TicketsCardHooksSelectors.selectPropertyOptions(containerOrFederation, module, property);
 
 	useEffect(() => {
@@ -122,15 +124,31 @@ export const FilterFormValues = ({ module, property, type }: FilterFolrmValuesTy
 			</>
 		);
 	}
+
 	if (isSelectType(type)) {
+		const allJobsAndUsers = selectOptions.every(({ type: t }) => t === 'jobsAndUsers');
+		if (allJobsAndUsers || type === 'owner') return (
+			<FormAssigneesSelect
+				multiple
+				showAddButton
+				maxItems={19}
+				name={name}
+				transformInputValue={(v) => compact(mapFormArrayToArray(v))}
+				transformOutputValue={(e) => selectTypeOnChange(e, selectOptions)}
+				formError={error?.[0]}
+			/>
+		);
 		return (
 			<FormMultiSelect
 				name={name}
+				transformInputValue={mapFormArrayToArray}
+				transformOutputValue={(e) => selectTypeOnChange(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`} />
 		</>
 	);
-};
+};

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

@@ -23,7 +23,7 @@ import NumberIcon from '@assets/icons/filters/number.svg';
 import TemplateIcon from '@assets/icons/filters/template.svg';
 import TextIcon from '@assets/icons/filters/text.svg';
 import CalendarIcon from '@assets/icons/outlined/calendar-outlined.svg';
-import { sortBy, uniqBy } from 'lodash';
+import { compact, sortBy, uniqBy } from 'lodash';
 import { CardFilterType, BaseFilter, CardFilter } from '../../cardFilters.types';
 
 export const TYPE_TO_ICON: Record<CardFilterType, any> = {
@@ -37,6 +37,7 @@ export const TYPE_TO_ICON: Record<CardFilterType, any> = {
 	'sequencing': CalendarIcon,
 	'oneOf': ListIcon,
 	'manyOf': ListIcon,
+	'owner': ListIcon,
 	'boolean': BooleanIcon,
 	'number': NumberIcon,
 };
@@ -45,6 +46,7 @@ const DEFAULT_FILTERS: CardFilter[] = [
 	{ module: '', type: 'ticketTitle', property: formatMessage({ defaultMessage: 'Ticket title', id: 'viewer.card.filters.element.ticketTitle' }) },
 	{ module: '', type: 'ticketId', property: formatMessage({ defaultMessage: 'Ticket ID', id: 'viewer.card.filters.element.ticketId' }) },
 	{ module: '', type: 'template', property: formatMessage({ defaultMessage: 'Ticket template', id: 'viewer.card.filters.element.ticketTemplate' }) },
+	{ module: '', type: 'owner', property: formatMessage({ defaultMessage: 'Owner', id: 'viewer.card.filters.element.ticketTemplate' }) },
 ];
 
 const propertiesToValidFilters = (properties: { name: string, type: string }[], module: string = ''): CardFilter[] => properties
@@ -56,7 +58,7 @@ const propertiesToValidFilters = (properties: { name: string, type: string }[],
 	}) as CardFilter);
 
 const templateToFilters = (template: ITemplate): CardFilter[] => [
-	...propertiesToValidFilters(template.properties, ''),
+	...propertiesToValidFilters(template.properties.filter(({ name }) => name !== 'Owner'), ''),
 	...template.modules.flatMap(({ properties, name, type }) => propertiesToValidFilters(properties, name || type)),
 ];
 
@@ -82,3 +84,9 @@ export const toTicketCardFilter = (filters: Record<string, BaseFilter>): CardFil
 			filter,
 		}))
 );
+
+export const getOptionFromValue = (value, options) => options.find(({ value: optionValue }) => value === optionValue);
+export const selectTypeOnChange = (event, options) => compact(event.target.value).map((value) => {
+	const option = getOptionFromValue(value, options);
+	return { value, displayValue: option?.displayValue ?? value };
+});