admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Filters on Table views (#95)

Browse Source 
* Add filter search logic

WIP Filter search

Implement filters

test: fix sorts tests

test: fix filter test

feature: search person and display firstname in results

feature: fix test for filter component

test: mock search filters

refactor: create a useSearch hook

refactor: move debounce in useSearch and reset status of filter selection

feature: debounce set filters

refactor: remove useless setSorts

feature: add where variable to people query

feature: strongly type Filters

feature: update WhereTemplate method

feature: implement filtering on full name

feature: type the useSearch hook

feature: use where reducer

refactor: create a type for readability

feature: use query and mapper from filters

feature: implement filter by company

feature: search filter results on filter select

feature: add loading and results to search results in filters

refactor: move render search results in a function

feature: display a LOADING when it loads

feature: split search input and search filter for different debounce

refactor: remove some warnings

refactor: remove some warnings

* Write test 1

* Write test 2

* test: useSearch is tested

* test: update names of default people data

* test: add a filter search

* Test 3

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Sammy Teillet
2023-05-04 13:54:46 +02:00
committed by GitHub
parent 27d5edc031
commit 6a8a8f0728
33 changed files with 913 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,10 @@
import { DocumentNode } from 'graphql';
import { ReactNode } from 'react';
import {
Companies_Bool_Exp,
People_Bool_Exp,
Users_Bool_Exp,
} from '../../../generated/graphql';
export type SortType<SortKey = string> = {
label: string;
@ -6,20 +12,30 @@ export type SortType<SortKey = string> = {
icon?: ReactNode;
};
export type FilterType<FilterKey = string> = {
label: string;
key: FilterKey;
icon: ReactNode;
};
export type SelectedFilterType = {
id: string;
label: string;
value: string;
operand: { id: string; label: string };
icon: ReactNode;
};
export type SelectedSortType<SortField = string> = SortType<SortField> & {
order: 'asc' | 'desc';
};
export type FilterType<WhereTemplate, T = Record<string, string>> = {
label: string;
key: string;
icon: ReactNode;
whereTemplate: (operand: FilterOperandType, value: T) => WhereTemplate;
searchQuery: DocumentNode;
searchTemplate: (
searchInput: string,
) => People_Bool_Exp | Companies_Bool_Exp | Users_Bool_Exp;
searchResultMapper: (data: any) => { displayValue: string; value: T };
};
export type FilterOperandType = {
label: string;
id: string;
keyWord: 'ilike' | 'not_ilike';
};
export type SelectedFilterType<WhereTemplate> = FilterType<WhereTemplate> & {
value: string;
operand: FilterOperandType;
where: WhereTemplate;
};