ISSUE #5257 - refactor

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

@@ -0,0 +1,33 @@
+/**
+ *  Copyright (C) 2024 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 styled from 'styled-components';
+import { Section } from './filtersSection/filtersSection.styles';
+
+export const ModuleTitle = styled.p`
+	color: ${({ theme }) => theme.palette.base.main};
+	text-transform: uppercase;
+	margin-top: 0;
+	margin-bottom: 10px;
+	font-size: 9px;
+	line-height: 12px;
+	letter-spacing: 3px;
+
+	${Section} + & {
+		margin-top: 10px;
+	}
+`;

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

@@ -15,9 +15,16 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+export type TicketFilterListItemType = { module: string, property: string, type: CardFilterType };
+export type FormFilter = { values: CardFilterValue[], type?: CardFilterType };
+
 export type CardFilterOperator = 'ex' | 'nex' | 'eq' | 'neq' | 'ss' | 'nss' | 'rng' | 'nrng' | 'gt' | 'gte' | 'lt' | 'lte';
-export type CardFilterType = 'text' | 'longText' | 'date' | 'pastDate' | 'sequencing' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'template';
+export type CardFilterType = 'text' | 'longText' | 'date' | 'pastDate' | 'sequencing' | 'oneOf' | 'manyOf' | 'boolean' | 'number' | 'ticketTitle' | 'ticketId' | 'template';
 export type CardFilterValue = string | number | Date;
-export type CardFilter = { values: CardFilterValue[], type?: CardFilterType };
-export type CardFiltersByOperator = Partial<Record<CardFilterOperator, CardFilter>>;
-export type TicketFilterListItemType = { module?: string, property: string, type: CardFilterType };
+export type CardFiltersByOperator = Partial<Record<CardFilterOperator, FormFilter>>;
+export type CardFilter = {
+	module: string,
+	property: string,
+	operator: CardFilterOperator,
+	filter: FormFilter,
+};

frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFiltersCreatorForm/cardFiltersCreatorForm.temp.tsx

@@ -0,0 +1,59 @@
+/**
+ *  Copyright (C) 2024 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 { useContext } from 'react';
+import { FILTER_OPERATOR_ICON } from '../cardFilters.helpers';
+import { CardFilterOperator, CardFilter } from '../cardFilters.types';
+import { TicketFiltersContext } from '../../tickets/ticketFiltersContext';
+
+// TODO - remove this
+export const CardFiltersCreatorForm = () => {
+	const { addFilter } = useContext(TicketFiltersContext);
+
+	const handleAddFilter = (e) => {
+		e.preventDefault();
+		let value = e.target[1].value;
+		const isDate = e.target[2].checked;
+		const filterPath = e.target[0].value.split('.') as [string, CardFilterOperator, CardFilterOperator];
+		if (filterPath.length !== 3) {
+			alert("This will crash the app. Remeber: 'module'.'property'.'type'");
+			return;
+		}
+		const [module, property, operator] = filterPath;
+		if (!Object.keys(FILTER_OPERATOR_ICON).includes(operator)) {
+			alert('This will crash the app. This operator is not supported');
+			return;
+		}
+		const filter = { type: isDate ? 'date' : 'text', values: [isDate ? new Date(+value) : value] };
+		addFilter({ module, property, operator, filter } as CardFilter);
+	};
+
+	return (
+		<form onSubmit={handleAddFilter}>
+			filter: <input name="filter" placeholder='module.property.type' />
+			<br />
+			value: <input name="value" placeholder='value' />
+			<br />
+			<label>
+				is Date:
+				<input type='checkbox' /> (if yes, convert to `new Date(+value)`)
+			</label>
+			<br />
+			<button>[submit]</button>
+		</form>
+	);
+};

frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component.tsx

@@ -25,27 +25,36 @@ import { uniq } from 'lodash';
 import { useParams } from 'react-router';
 import { templatesToFilters } from './list/ticketFiltersSelectionList.helpers';
 import { CardAction } from '../../../cardAction/cardAction.styles';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import FennelIcon from '@assets/icons/filters/fennel.svg';
 import { Tooltip } from '@mui/material';
 import { TicketFiltersSelectionList } from './list/ticketFiltersSelectionList.component';
-import { ActionMenu, SearchInput, DrillDownList, DrillDownItem } from './ticketFiltersSelection.styles';
+import { SearchInput, DrillDownList, DrillDownItem } from './ticketFiltersSelection.styles';
 import { TicketFilterListItemType } from '../../cardFilters.types';
 import { FilterForm } from '../../filterForm/filterForm.component';
-import { getFilterFormTitle } from '../../cardFilters.helpers';
+import { CardFilterActionMenu } from '../../filterForm/filterForm.styles';
+import { TicketFiltersContext } from '@components/viewer/cards/tickets/ticketFiltersContext';
 
 export const FilterSelection = () => {
+	const { addFilter } = useContext(TicketFiltersContext);
 	const [active, setActive] = useState(false);
-	const [selectedFilter, setSelectedFilter] = useState<TicketFilterListItemType>(null);
+	const [selectedItem, setSelectedItem] = useState<TicketFilterListItemType>(null);
 	const { containerOrFederation } = useParams<ViewerParams>();
 	const tickets = TicketsHooksSelectors.selectTicketsRaw(containerOrFederation);
 	const usedTemplates = uniq(tickets.map((t) => t.type));
 	const templates = usedTemplates.map((t) => selectTemplateById(getState(), containerOrFederation, t));
 	const filterElements = templatesToFilters(templates);
-	const showFiltersList = !selectedFilter?.property;
+	const showFiltersList = !selectedItem?.property;
+
+	const onOpen = () => setActive(true);
+	const onClose = () => {
+		setActive(false);
+		setSelectedItem(null);
+	};
+	const onCancel = () => setSelectedItem(null);
 
 	return (
-		<ActionMenu
+		<CardFilterActionMenu
 			TriggerButton={(
 				<Tooltip title={formatMessage({ id: 'viewer.card.tickets.addFilter', defaultMessage: 'Add Filter' })}>
 					<div>
@@ -55,8 +64,8 @@ export const FilterSelection = () => {
 					</div>
 				</Tooltip>
 			)}
-			onOpen={() => setActive(true)}
-			onClose={() => setActive(false)}
+			onOpen={onOpen}
+			onClose={onClose}
 		>
 			<SearchContextComponent items={filterElements}>
 				<DrillDownList $visibleIndex={showFiltersList ? 0 : 1}>
@@ -67,18 +76,17 @@ export const FilterSelection = () => {
 								defaultMessage: 'Serach for property...',
 							})}
 						/>
-						<TicketFiltersSelectionList setSelectedFilter={setSelectedFilter} />
+						<TicketFiltersSelectionList setSelectedFilter={setSelectedItem} />
 					</DrillDownItem>
 					<DrillDownItem $visible={!showFiltersList}>
 						<FilterForm
-							title={getFilterFormTitle([selectedFilter?.module, selectedFilter?.property])}
-							type={selectedFilter?.type}
-							onSubmit={() => setSelectedFilter(null)}
-							onCancel={() => setSelectedFilter(null)}
+							{...(selectedItem || {} as any)}
+							onSubmit={addFilter}
+							onCancel={onCancel}
 						/>
 					</DrillDownItem>
 				</DrillDownList>
 			</SearchContextComponent>
-		</ActionMenu>
+		</CardFilterActionMenu>
 	);
 };

frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.styles.ts

@@ -15,7 +15,6 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ActionMenu as ActionMenuBase } from '@controls/actionMenu';
 import { SearchInput as SearchInputBase } from '@controls/search/searchInput';
 import styled, { css } from 'styled-components';
 
@@ -40,13 +39,6 @@ export const SearchInput = styled(SearchInputBase)`
 	}
 `;
 
-export const ActionMenu = styled(ActionMenuBase)`
-	.MuiPaper-root {
-		left: 88px !important;
-		width: 365px;
-	}
-`;
-
 export const DrillDownItem = styled.div<{ $visible: boolean }>`
 	transition: opacity height .2s;
 	${({ $visible }) => $visible ? css`