mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor Filters and Search (#119)

Browse Source
This commit is contained in:
Charles Bochet
2023-05-17 13:25:33 +02:00
committed by GitHub
parent 96e3f2c7ea
commit 499752ed6b
25 changed files with 466 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/components/table/Table.tsx
View File

@ -9,7 +9,9 @@ import {
import TableHeader from './table-header/TableHeader';
import styled from '@emotion/styled';
import {
FilterType,
FilterConfigType,
SearchConfigType,
SearchableType,
SelectedFilterType,
SelectedSortType,
SortType,
@ -21,23 +23,24 @@ declare module 'react' {
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}
type OwnProps<TData, SortField, FilterProperties> = {
type OwnProps<TData, SortField> = {
data: Array<TData>;
columns: Array<ColumnDef<TData, any>>;
viewName: string;
viewIcon?: React.ReactNode;
availableSorts?: Array<SortType<SortField>>;
availableFilters?: FilterType<FilterProperties>[];
availableFilters?: FilterConfigType<TData>[];
filterSearchResults?: {
results: { displayValue: string; value: any }[];
results: {
render: (value: SearchableType) => string;
value: SearchableType;
}[];
loading: boolean;
};
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
onFiltersUpdate?: (
sorts: Array<SelectedFilterType<FilterProperties>>,
) => void;
onFiltersUpdate?: (sorts: Array<SelectedFilterType>) => void;
onFilterSearch?: (
filter: FilterType<FilterProperties> | null,
filter: SearchConfigType<any> | null,
searchValue: string,
) => void;
onRowSelectionChange?: (rowSelection: string[]) => void;
@ -94,7 +97,7 @@ const StyledTableScrollableContainer = styled.div`
flex: 1;
`;
const Table = <TData extends { id: string }, SortField, FilterProperies>(
const Table = <TData extends { id: string }, SortField>(
{
data,
columns,
@ -107,7 +110,7 @@ const Table = <TData extends { id: string }, SortField, FilterProperies>(
onFiltersUpdate,
onFilterSearch,
onRowSelectionChange,
}: OwnProps<TData, SortField, FilterProperies>,
}: OwnProps<TData, SortField>,
ref: React.ForwardedRef<{ resetRowSelection: () => void } | undefined>,
) => {
const [internalRowSelection, setInternalRowSelection] = React.useState({});
@ -144,7 +147,7 @@ const Table = <TData extends { id: string }, SortField, FilterProperies>(
viewName={viewName}
viewIcon={viewIcon}
availableSorts={availableSorts}
availableFilters={availableFilters}
availableFilters={availableFilters as FilterConfigType<any>[]}
filterSearchResults={filterSearchResults}
onSortsUpdate={onSortsUpdate}
onFiltersUpdate={onFiltersUpdate}

26
front/src/components/table/editable-cell/EditableRelation.tsx
View File

@ -2,8 +2,7 @@ import { ChangeEvent, ComponentType, useState } from 'react';
import EditableCellWrapper from './EditableCellWrapper';
import styled from '@emotion/styled';
import { useSearch } from '../../../services/search/search';
import { FilterType } from '../table-header/interface';
import { People_Bool_Exp } from '../../../generated/graphql';
import { SearchConfigType, SearchableType } from '../table-header/interface';
const StyledEditModeContainer = styled.div`
width: 200px;
@ -48,10 +47,13 @@ const StyledEditModeResultItem = styled.div`
cursor: pointer;
`;
export type EditableRelationProps<RelationType, ChipComponentPropsType> = {
export type EditableRelationProps<
RelationType extends SearchableType,
ChipComponentPropsType,
> = {
relation?: RelationType | null;
searchPlaceholder: string;
searchFilter: FilterType<People_Bool_Exp>;
searchConfig: SearchConfigType<RelationType>;
changeHandler: (relation: RelationType) => void;
editModeHorizontalAlign?: 'left' | 'right';
ChipComponent: ComponentType<ChipComponentPropsType>;
@ -60,10 +62,13 @@ export type EditableRelationProps<RelationType, ChipComponentPropsType> = {
) => ChipComponentPropsType & JSX.IntrinsicAttributes;
};
function EditableRelation<RelationType, ChipComponentPropsType>({
function EditableRelation<
RelationType extends SearchableType,
ChipComponentPropsType,
>({
relation,
searchPlaceholder,
searchFilter,
searchConfig,
changeHandler,
editModeHorizontalAlign,
ChipComponent,
@ -72,7 +77,8 @@ function EditableRelation<RelationType, ChipComponentPropsType>({
const [selectedRelation, setSelectedRelation] = useState(relation);
const [isEditMode, setIsEditMode] = useState(false);
const [filterSearchResults, setSearchInput, setFilterSearch] = useSearch();
const [filterSearchResults, setSearchInput, setFilterSearch] =
useSearch<RelationType>();
return (
<EditableCellWrapper
@ -97,16 +103,16 @@ function EditableRelation<RelationType, ChipComponentPropsType>({
<StyledEditModeSearchInput
placeholder={searchPlaceholder}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterSearch(searchFilter);
setFilterSearch(searchConfig);
setSearchInput(event.target.value);
}}
/>
</StyledEditModeSearchContainer>
<StyledEditModeResults>
{filterSearchResults.results &&
filterSearchResults.results.map((result) => (
filterSearchResults.results.map((result, index) => (
<StyledEditModeResultItem
key={result.value.id}
key={index}
onClick={() => {
setSelectedRelation(result.value);
changeHandler(result.value);

46
front/src/components/table/editable-cell/__stories__/EditableRelation.stories.tsx
View File

@ -3,16 +3,11 @@ import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../../layout/styles/themes';
import { StoryFn } from '@storybook/react';
import CompanyChip, { CompanyChipPropsType } from '../../../chips/CompanyChip';
import {
GraphqlQueryCompany,
PartialCompany,
} from '../../../../interfaces/company.interface';
import { Company, mapCompany } from '../../../../interfaces/company.interface';
import { MockedProvider } from '@apollo/client/testing';
import { SEARCH_COMPANY_QUERY } from '../../../../services/search/search';
import styled from '@emotion/styled';
import { People_Bool_Exp } from '../../../../generated/graphql';
import { FilterType } from '../../table-header/interface';
import { FaBuilding } from 'react-icons/fa';
import { SearchConfigType } from '../../table-header/interface';
const component = {
title: 'editable-cell/EditableRelation',
@ -58,13 +53,13 @@ const mocks = [
];
const Template: StoryFn<
typeof EditableRelation<PartialCompany, CompanyChipPropsType>
> = (args: EditableRelationProps<PartialCompany, CompanyChipPropsType>) => {
typeof EditableRelation<Company, CompanyChipPropsType>
> = (args: EditableRelationProps<Company, CompanyChipPropsType>) => {
return (
<MockedProvider mocks={mocks}>
<ThemeProvider theme={lightTheme}>
<StyledParent data-testid="content-editable-parent">
<EditableRelation<PartialCompany, CompanyChipPropsType> {...args} />
<EditableRelation<Company, CompanyChipPropsType> {...args} />
</StyledParent>
</ThemeProvider>
</MockedProvider>
@ -77,36 +72,25 @@ EditableRelationStory.args = {
id: '123',
name: 'Heroku',
domain_name: 'heroku.com',
} as PartialCompany,
} as Company,
ChipComponent: CompanyChip,
chipComponentPropsMapper: (company: PartialCompany): CompanyChipPropsType => {
chipComponentPropsMapper: (company: Company): CompanyChipPropsType => {
return {
name: company.name,
picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
};
},
changeHandler: (relation: PartialCompany) => {
changeHandler: (relation: Company) => {
console.log('changed', relation);
},
searchFilter: {
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
whereTemplate: () => {
return {};
},
searchQuery: SEARCH_COMPANY_QUERY,
searchTemplate: (searchInput: string) => ({
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput: string) => ({
name: { _ilike: `%${searchInput}%` },
}),
searchResultMapper: (company: GraphqlQueryCompany) => ({
displayValue: company.name,
value: {
id: company.id,
name: company.name,
domain_name: company.domain_name,
},
resultMapper: (company) => ({
render: (company) => company.name,
value: mapCompany(company),
}),
operands: [],
} satisfies FilterType<People_Bool_Exp>,
} satisfies SearchConfigType<Company>,
};

20
front/src/components/table/editable-cell/__tests__/EditableRelation.test.tsx
View File

@ -2,17 +2,17 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
import { EditableRelationStory } from '../__stories__/EditableRelation.stories';
import { CompanyChipPropsType } from '../../../chips/CompanyChip';
import { PartialCompany } from '../../../../interfaces/company.interface';
import { EditableRelationProps } from '../EditableRelation';
import { act } from 'react-dom/test-utils';
import { Company } from '../../../../interfaces/company.interface';
it('Checks the EditableRelation editing event bubbles up', async () => {
const func = jest.fn(() => null);
const { getByTestId, getByText } = render(
<EditableRelationStory
{...(EditableRelationStory.args as EditableRelationProps<
PartialCompany,
Company,
CompanyChipPropsType
>)}
changeHandler={func}
@ -49,10 +49,16 @@ it('Checks the EditableRelation editing event bubbles up', async () => {
});
await waitFor(() => {
expect(func).toBeCalledWith({
domain_name: 'abnb.com',
id: 'abnb',
name: 'Airbnb',
});
expect(func).toBeCalledWith(
expect.objectContaining({
accountOwner: null,
address: undefined,
domain_name: 'abnb.com',
employees: undefined,
id: 'abnb',
name: 'Airbnb',
opportunities: [],
}),
);
});
});

61
front/src/components/table/table-header/FilterDropdownButton.tsx
View File

@ -1,34 +1,43 @@
import { ChangeEvent, useCallback, useState } from 'react';
import DropdownButton from './DropdownButton';
import { FilterOperandType, FilterType, SelectedFilterType } from './interface';
import {
FilterConfigType,
FilterOperandType,
SearchConfigType,
SearchableType,
SelectedFilterType,
} from './interface';
type OwnProps<FilterProperties> = {
type OwnProps = {
isFilterSelected: boolean;
availableFilters: FilterType<FilterProperties>[];
availableFilters: FilterConfigType[];
filterSearchResults?: {
results: { displayValue: string; value: any }[];
results: {
render: (value: SearchableType) => string;
value: SearchableType;
}[];
loading: boolean;
};
onFilterSelect: (filter: SelectedFilterType<FilterProperties>) => void;
onFilterSelect: (filter: SelectedFilterType) => void;
onFilterSearch: (
filter: FilterType<FilterProperties> | null,
filter: SearchConfigType<any> | null,
searchValue: string,
) => void;
};
export function FilterDropdownButton<FilterProperties>({
export function FilterDropdownButton({
availableFilters,
filterSearchResults,
onFilterSearch,
onFilterSelect,
isFilterSelected,
}: OwnProps<FilterProperties>) {
}: OwnProps) {
const [isUnfolded, setIsUnfolded] = useState(false);
const [isOptionUnfolded, setIsOptionUnfolded] = useState(false);
const [selectedFilter, setSelectedFilter] = useState<
FilterType<FilterProperties> | undefined
FilterConfigType | undefined
>(undefined);
const [selectedFilterOperand, setSelectedFilterOperand] = useState<
@ -57,10 +66,8 @@ export function FilterDropdownButton<FilterProperties>({
);
const renderSearchResults = (
filterSearchResults: NonNullable<
OwnProps<FilterProperties>['filterSearchResults']
>,
selectedFilter: FilterType<FilterProperties>,
filterSearchResults: NonNullable<OwnProps['filterSearchResults']>,
selectedFilter: FilterConfigType,
selectedFilterOperand: FilterOperandType,
) => {
if (filterSearchResults.loading) {
@ -70,32 +77,24 @@ export function FilterDropdownButton<FilterProperties>({
</DropdownButton.StyledDropdownItem>
);
}
return filterSearchResults.results.map((value, index) => (
return filterSearchResults.results.map((result, index) => (
<DropdownButton.StyledDropdownItem
key={`fields-value-${index}`}
onClick={() => {
onFilterSelect({
...selectedFilter,
key: value.displayValue,
operand: selectedFilterOperand,
searchQuery: selectedFilter.searchQuery,
searchTemplate: selectedFilter.searchTemplate,
whereTemplate: selectedFilter.whereTemplate,
key: selectedFilter.key,
label: selectedFilter.label,
value: value.displayValue,
value: result.value,
displayValue: result.render(result.value),
icon: selectedFilter.icon,
where:
selectedFilter.whereTemplate(
selectedFilterOperand,
value.value,
) || ({} as FilterProperties),
searchResultMapper: selectedFilter.searchResultMapper,
operand: selectedFilterOperand,
});
setIsUnfolded(false);
setSelectedFilter(undefined);
}}
>
{value.displayValue}
{result.render(result.value)}
</DropdownButton.StyledDropdownItem>
));
};
@ -106,7 +105,7 @@ export function FilterDropdownButton<FilterProperties>({
onClick={() => {
setSelectedFilter(filter);
setSelectedFilterOperand(filter.operands[0]);
onFilterSearch(filter, '');
onFilterSearch(filter.searchConfig, '');
}}
>
<DropdownButton.StyledIcon>{filter.icon}</DropdownButton.StyledIcon>
@ -115,7 +114,7 @@ export function FilterDropdownButton<FilterProperties>({
));
function renderFilterDropdown(
selectedFilter: FilterType<FilterProperties>,
selectedFilter: FilterConfigType,
selectedFilterOperand: FilterOperandType,
) {
return (
@ -133,7 +132,7 @@ export function FilterDropdownButton<FilterProperties>({
type="text"
placeholder={selectedFilter.label}
onChange={(event: ChangeEvent<HTMLInputElement>) =>
onFilterSearch(selectedFilter, event.target.value)
onFilterSearch(selectedFilter.searchConfig, event.target.value)
}
/>
</DropdownButton.StyledSearchField>

14
front/src/components/table/table-header/SortAndFilterBar.tsx
View File

@ -3,13 +3,11 @@ import SortOrFilterChip from './SortOrFilterChip';
import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
import { SelectedFilterType, SelectedSortType } from './interface';
type OwnProps<SortField, FilterProperties> = {
type OwnProps<SortField> = {
sorts: Array<SelectedSortType<SortField>>;
onRemoveSort: (sortId: SelectedSortType<SortField>['key']) => void;
filters: Array<SelectedFilterType<FilterProperties>>;
onRemoveFilter: (
filterId: SelectedFilterType<FilterProperties>['key'],
) => void;
filters: Array<SelectedFilterType>;
onRemoveFilter: (filterId: SelectedFilterType['key']) => void;
onCancelClick: () => void;
};
@ -42,13 +40,13 @@ const StyledCancelButton = styled.button`
}
`;
function SortAndFilterBar<SortField, FilterProperties>({
function SortAndFilterBar<SortField>({
sorts,
onRemoveSort,
filters,
onRemoveFilter,
onCancelClick,
}: OwnProps<SortField, FilterProperties>) {
}: OwnProps<SortField>) {
return (
<StyledBar>
{sorts.map((sort) => {
@ -67,7 +65,7 @@ function SortAndFilterBar<SortField, FilterProperties>({
<SortOrFilterChip
key={filter.key}
labelKey={filter.label}
labelValue={`${filter.operand.label} ${filter.value}`}
labelValue={`${filter.operand.label} ${filter.displayValue}`}
id={filter.key}
icon={filter.icon}
onRemove={() => onRemoveFilter(filter.key)}

33
front/src/components/table/table-header/TableHeader.tsx
View File

@ -1,6 +1,8 @@
import styled from '@emotion/styled';
import {
FilterType,
FilterConfigType,
SearchConfigType,
SearchableType,
SelectedFilterType,
SelectedSortType,
SortType,
@ -10,21 +12,22 @@ import { SortDropdownButton } from './SortDropdownButton';
import { FilterDropdownButton } from './FilterDropdownButton';
import SortAndFilterBar from './SortAndFilterBar';
type OwnProps<SortField, FilterProperties> = {
type OwnProps<SortField> = {
viewName: string;
viewIcon?: ReactNode;
availableSorts?: Array<SortType<SortField>>;
availableFilters?: FilterType<FilterProperties>[];
availableFilters?: FilterConfigType[];
filterSearchResults?: {
results: { displayValue: string; value: any }[];
results: {
render: (value: SearchableType) => string;
value: SearchableType;
}[];
loading: boolean;
};
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
onFiltersUpdate?: (
sorts: Array<SelectedFilterType<FilterProperties>>,
) => void;
onFiltersUpdate?: (sorts: Array<SelectedFilterType>) => void;
onFilterSearch?: (
filter: FilterType<FilterProperties> | null,
filter: SearchConfigType<any> | null,
searchValue: string,
) => void;
};
@ -65,7 +68,7 @@ const StyledFilters = styled.div`
margin-right: ${(props) => props.theme.spacing(2)};
`;
function TableHeader<SortField, FilterProperties>({
function TableHeader<SortField>({
viewName,
viewIcon,
availableSorts,
@ -74,13 +77,11 @@ function TableHeader<SortField, FilterProperties>({
onSortsUpdate,
onFiltersUpdate,
onFilterSearch,
}: OwnProps<SortField, FilterProperties>) {
}: OwnProps<SortField>) {
const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
[],
);
const [filters, innerSetFilters] = useState<
Array<SelectedFilterType<FilterProperties>>
>([]);
const [filters, innerSetFilters] = useState<Array<SelectedFilterType>>([]);
const sortSelect = useCallback(
(newSort: SelectedSortType<SortField>) => {
@ -101,7 +102,7 @@ function TableHeader<SortField, FilterProperties>({
);
const filterSelect = useCallback(
(filter: SelectedFilterType<FilterProperties>) => {
(filter: SelectedFilterType) => {
const newFilters = updateSortOrFilterByKey(filters, filter);
innerSetFilters(newFilters);
@ -111,7 +112,7 @@ function TableHeader<SortField, FilterProperties>({
);
const filterUnselect = useCallback(
(filterId: SelectedFilterType<FilterProperties>['key']) => {
(filterId: SelectedFilterType['key']) => {
const newFilters = filters.filter((filter) => filter.key !== filterId);
innerSetFilters(newFilters);
onFiltersUpdate && onFiltersUpdate(newFilters);
@ -120,7 +121,7 @@ function TableHeader<SortField, FilterProperties>({
);
const filterSearch = useCallback(
(filter: FilterType<FilterProperties> | null, searchValue: string) => {
(filter: SearchConfigType<any> | null, searchValue: string) => {
onFilterSearch && onFilterSearch(filter, searchValue);
},
[onFilterSearch],

45
front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx
View File

@ -2,16 +2,16 @@ import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../../layout/styles/themes';
import { FilterDropdownButton } from '../FilterDropdownButton';
import styled from '@emotion/styled';
import { FilterType, SelectedFilterType } from '../interface';
import { FilterConfigType, SelectedFilterType } from '../interface';
import { useCallback, useState } from 'react';
import { People_Bool_Exp } from '../../../../generated/graphql';
import { FaUsers } from 'react-icons/fa';
import {
SEARCH_PEOPLE_QUERY,
useSearch,
} from '../../../../services/search/search';
import { MockedProvider } from '@apollo/client/testing';
import { mockData } from '../../../../pages/people/__tests__/__data__/mock-data';
import { availableFilters } from '../../../../pages/people/people-table';
import { Person } from '../../../../interfaces/person.interface';
const component = {
title: 'FilterDropdownButton',
@ -78,35 +78,6 @@ const mocks = [
},
];
const availableFilters = [
{
key: 'fullname',
label: 'People',
icon: <FaUsers />,
searchQuery: SEARCH_PEOPLE_QUERY,
searchTemplate: (searchInput: string) => ({
_or: [
{ firstname: { _ilike: `%${searchInput}%` } },
{ lastname: { _ilike: `%${searchInput}%` } },
],
}),
whereTemplate: () => ({
_or: [
{ firstname: { _ilike: 'value' } },
{ lastname: { _ilike: 'value' } },
],
}),
searchResultMapper: (data) => ({
displayValue: data.firstname + ' ' + data.lastname,
value: data.firstname,
}),
operands: [
{ label: 'Equal', id: 'equal', keyWord: 'equal' },
{ label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' },
],
},
] satisfies FilterType<People_Bool_Exp>[];
const StyleDiv = styled.div`
height: 200px;
width: 200px;
@ -114,12 +85,12 @@ const StyleDiv = styled.div`
const InnerRegularFilterDropdownButton = ({
setFilter: setFilters,
}: OwnProps<People_Bool_Exp>) => {
const [, innerSetFilters] = useState<SelectedFilterType<People_Bool_Exp>>();
}: OwnProps<Person>) => {
const [, innerSetFilters] = useState<SelectedFilterType<Person>>();
const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
const outerSetFilters = useCallback(
(filter: SelectedFilterType<People_Bool_Exp>) => {
(filter: SelectedFilterType<Person>) => {
innerSetFilters(filter);
setFilters(filter);
},
@ -128,7 +99,7 @@ const InnerRegularFilterDropdownButton = ({
return (
<StyleDiv>
<FilterDropdownButton
availableFilters={availableFilters}
availableFilters={availableFilters as FilterConfigType[]}
isFilterSelected={true}
onFilterSelect={outerSetFilters}
filterSearchResults={filterSearchResults}
@ -143,7 +114,7 @@ const InnerRegularFilterDropdownButton = ({
export const RegularFilterDropdownButton = ({
setFilter: setFilters,
}: OwnProps<People_Bool_Exp>) => {
}: OwnProps<Person>) => {
return (
<MockedProvider mocks={mocks}>
<ThemeProvider theme={lightTheme}>

38
front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx
View File

@ -1,8 +1,8 @@
import SortAndFilterBar from '../SortAndFilterBar';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../../layout/styles/themes';
import { GET_PEOPLE } from '../../../../services/people';
import { FaArrowDown } from 'react-icons/fa';
import { SelectedFilterType } from '../interface';
const component = {
title: 'SortAndFilterBar',
@ -45,26 +45,28 @@ export const RegularSortAndFilterBar = ({
filters={[
{
label: 'People',
operand: { label: 'Include', id: 'include', keyWord: 'ilike' },
operand: {
label: 'Include',
id: 'include',
whereTemplate: (person) => {
return { email: { _eq: person.email } };
},
},
key: 'test_filter',
icon: <FaArrowDown />,
value: 'John Doe',
where: {
firstname: { _ilike: 'John Doe' },
displayValue: 'john@doedoe.com',
value: {
id: 'test',
email: 'john@doedoe.com',
firstname: 'John',
lastname: 'Doe',
phone: '123456789',
company: null,
creationDate: new Date(),
pipe: null,
city: 'Paris',
},
searchQuery: GET_PEOPLE,
searchTemplate: () => ({
firstname: { _ilike: 'John Doe' },
}),
whereTemplate: () => {
return { firstname: { _ilike: 'John Doe' } };
},
searchResultMapper: (data) => ({
displayValue: 'John Doe',
value: data.firstname,
}),
operands: [],
},
} satisfies SelectedFilterType,
]}
/>
</ThemeProvider>

31
front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx
View File

@ -1,6 +1,5 @@
import { fireEvent, render, waitFor } from '@testing-library/react';
import { RegularFilterDropdownButton } from '../__stories__/FilterDropdownButton.stories';
import { FaUsers } from 'react-icons/fa';
it('Checks the default top option is Include', async () => {
const setFilters = jest.fn();
@ -24,15 +23,9 @@ it('Checks the default top option is Include', async () => {
expect(setFilters).toHaveBeenCalledWith(
expect.objectContaining({
key: 'Alexandre Prot',
value: 'Alexandre Prot',
displayValue: 'Alexandre Prot',
key: 'fullname',
label: 'People',
operand: {
id: 'equal',
keyWord: 'equal',
label: 'Equal',
},
icon: <FaUsers />,
}),
);
});
@ -65,15 +58,9 @@ it('Checks the selection of top option for Not Equal', async () => {
expect(setFilters).toHaveBeenCalledWith(
expect.objectContaining({
key: 'Alexandre Prot',
value: 'Alexandre Prot',
key: 'fullname',
displayValue: 'Alexandre Prot',
label: 'People',
operand: {
id: 'not-equal',
keyWord: 'not_equal',
label: 'Not equal',
},
icon: <FaUsers />,
}),
);
const blueSortDropdownButton = getByText('Filter');
@ -118,15 +105,9 @@ it('Calls the filters when typing a new name', async () => {
expect(setFilters).toHaveBeenCalledWith(
expect.objectContaining({
key: 'Jane Doe',
value: 'Jane Doe',
key: 'fullname',
displayValue: 'Jane Doe',
label: 'People',
operand: {
id: 'equal',
keyWord: 'equal',
label: 'Equal',
},
icon: <FaUsers />,
}),
);
const blueSortDropdownButton = getByText('Filter');

13
front/src/components/table/table-header/helpers.ts
View File

@ -1,13 +1,12 @@
import { Order_By } from '../../../generated/graphql';
import { SelectedFilterType, SelectedSortType } from './interface';
import { BoolExpType, SelectedFilterType, SelectedSortType } from './interface';
export const reduceFiltersToWhere = <T>(
filters: Array<SelectedFilterType<T>>,
): T => {
export const reduceFiltersToWhere = <ValueType, WhereTemplateType>(
filters: Array<SelectedFilterType<ValueType, WhereTemplateType>>,
): BoolExpType<WhereTemplateType> => {
const where = filters.reduce((acc, filter) => {
const { where } = filter;
return { ...acc, ...where };
}, {} as T);
return { ...acc, ...filter.operand.whereTemplate(filter.value) };
}, {} as BoolExpType<WhereTemplateType>);
return where;
};

76
front/src/components/table/table-header/interface.ts
View File

@ -6,6 +6,15 @@ import {
People_Bool_Exp,
Users_Bool_Exp,
} from '../../../generated/graphql';
import {
Company,
GraphqlQueryCompany,
} from '../../../interfaces/company.interface';
import {
GraphqlQueryPerson,
Person,
} from '../../../interfaces/person.interface';
import { GraphqlQueryUser, User } from '../../../interfaces/user.interface';
export type SortType<OrderByTemplate> =
| {
@ -26,33 +35,64 @@ export type SelectedSortType<OrderByTemplate> = SortType<OrderByTemplate> & {
order: 'asc' | 'desc';
};
export type FilterType<WhereTemplate, FilterValue = Record<string, any>> = {
operands: FilterOperandType[];
label: string;
export type FilterableFieldsType = Person | Company;
export type FilterWhereType = Person | Company | User;
type FilterConfigGqlType<WhereType> = WhereType extends Company
? GraphqlQueryCompany
: WhereType extends Person
? GraphqlQueryPerson
: WhereType extends User
? GraphqlQueryUser
: never;
export type BoolExpType<T> = T extends Company
? Companies_Bool_Exp
: T extends Person
? People_Bool_Exp
: never;
export type FilterConfigType<FilteredType = any, WhereType = any> = {
key: string;
label: string;
icon: ReactNode;
whereTemplate: (
operand: FilterOperandType,
value: FilterValue,
) => WhereTemplate | undefined;
searchQuery: DocumentNode;
searchTemplate: (
operands: FilterOperandType<FilteredType, WhereType>[];
searchConfig: WhereType extends SearchableType
? SearchConfigType<WhereType>
: null;
selectedValueRender: (selected: WhereType) => string;
};
export type SearchableType = Person | Company | User;
export type SearchConfigType<SearchType extends SearchableType> = {
query: DocumentNode;
template: (
searchInput: string,
) => People_Bool_Exp | Companies_Bool_Exp | Users_Bool_Exp;
searchResultMapper: (data: any) => {
displayValue: string;
value: FilterValue;
resultMapper: (data: FilterConfigGqlType<SearchType>) => {
value: SearchType;
render: (value: SearchType) => ReactNode;
};
};
export type FilterOperandType = {
export type FilterOperandType<
FilteredType = FilterableFieldsType,
WhereType = any,
> = {
label: string;
id: string;
keyWord: 'ilike' | 'not_ilike' | 'equal' | 'not_equal';
whereTemplate: (value: WhereType) => BoolExpType<FilteredType>;
};
export type SelectedFilterType<WhereTemplate> = FilterType<WhereTemplate> & {
value: string;
operand: FilterOperandType;
where: WhereTemplate;
export type SelectedFilterType<
FilteredType = FilterableFieldsType,
WhereType = any,
> = {
key: string;
value: WhereType;
displayValue: string;
label: string;
icon: ReactNode;
operand: FilterOperandType<FilteredType, WhereType>;
};