diff --git a/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.styles.ts b/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.styles.ts new file mode 100644 index 0000000000..1f79030012 --- /dev/null +++ b/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 . + */ + +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; + } +`; \ No newline at end of file diff --git a/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.types.ts b/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.types.ts index 9061ab01f5..e50f87ed05 100644 --- a/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.types.ts +++ b/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFilters.types.ts @@ -15,9 +15,16 @@ * along with this program. If not, see . */ +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>; -export type TicketFilterListItemType = { module?: string, property: string, type: CardFilterType }; \ No newline at end of file +export type CardFiltersByOperator = Partial>; +export type CardFilter = { + module: string, + property: string, + operator: CardFilterOperator, + filter: FormFilter, +}; diff --git a/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFiltersCreatorForm/cardFiltersCreatorForm.temp.tsx b/frontend/src/v5/ui/components/viewer/cards/cardFilters/cardFiltersCreatorForm/cardFiltersCreatorForm.temp.tsx new file mode 100644 index 0000000000..ef2b772a87 --- /dev/null +++ b/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 . + */ + +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 ( +
+ filter: +
+ value: +
+ +
+ +
+ ); +}; diff --git a/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component.tsx b/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component.tsx index 819c029a20..218f0ca3cc 100644 --- a/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component.tsx +++ b/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(null); + const [selectedItem, setSelectedItem] = useState(null); const { containerOrFederation } = useParams(); 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 ( -
@@ -55,8 +64,8 @@ export const FilterSelection = () => {
)} - onOpen={() => setActive(true)} - onClose={() => setActive(false)} + onOpen={onOpen} + onClose={onClose} > @@ -67,18 +76,17 @@ export const FilterSelection = () => { defaultMessage: 'Serach for property...', })} /> - + setSelectedFilter(null)} - onCancel={() => setSelectedFilter(null)} + {...(selectedItem || {} as any)} + onSubmit={addFilter} + onCancel={onCancel} /> - + ); }; \ No newline at end of file diff --git a/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.styles.ts b/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.styles.ts index 7bd15f2ec8..db2c4755a7 100644 --- a/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.styles.ts +++ b/frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.styles.ts @@ -15,7 +15,6 @@ * along with this program. If not, see . */ -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`