mukeshs/twenty_crm
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

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

@ -11,13 +11,23 @@ import { SortDropdownButton } from './SortDropdownButton';
import { FilterDropdownButton } from './FilterDropdownButton';
import SortAndFilterBar from './SortAndFilterBar';
type OwnProps<SortField> = {
type OwnProps<SortField, FilterProperties> = {
viewName: string;
viewIcon?: ReactNode;
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
onFiltersUpdate?: (sorts: Array<SelectedFilterType>) => void;
availableSorts?: Array<SortType<SortField>>;
availableFilters?: FilterType[];
availableFilters?: FilterType<FilterProperties>[];
filterSearchResults?: {
results: { displayValue: string; value: any }[];
loading: boolean;
};
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
onFiltersUpdate?: (
sorts: Array<SelectedFilterType<FilterProperties>>,
) => void;
onFilterSearch?: (
filter: FilterType<FilterProperties> | null,
searchValue: string,
) => void;
};
const StyledContainer = styled.div`
@ -56,27 +66,32 @@ const StyledFilters = styled.div`
margin-right: ${(props) => props.theme.spacing(2)};
`;
function TableHeader<SortField extends string>({
function TableHeader<SortField extends string, FilterProperties>({
viewName,
viewIcon,
onSortsUpdate,
onFiltersUpdate,
availableSorts,
availableFilters,
}: OwnProps<SortField>) {
filterSearchResults,
onSortsUpdate,
onFiltersUpdate,
onFilterSearch,
}: OwnProps<SortField, FilterProperties>) {
const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
[],
);
const [filters, innerSetFilters] = useState<
Array<SelectedFilterType<FilterProperties>>
>([]);
const setSorts = useCallback(
(sorts: SelectedSortType<SortField>[]) => {
innerSetSorts(sorts);
onSortsUpdate && onSortsUpdate(sorts);
const sortSelect = useCallback(
(sort: SelectedSortType<SortField>) => {
innerSetSorts([sort]);
onSortsUpdate && onSortsUpdate([sort]);
},
[onSortsUpdate],
);
const onSortItemUnSelect = useCallback(
const sortUnselect = useCallback(
(sortId: string) => {
const newSorts = [] as SelectedSortType<SortField>[];
innerSetSorts(newSorts);
@ -85,25 +100,30 @@ function TableHeader<SortField extends string>({
[onSortsUpdate],
);
const [filters, innerSetFilters] = useState<Array<SelectedFilterType>>([]);
const setFilters = useCallback(
(filters: SelectedFilterType[]) => {
innerSetFilters(filters);
onFiltersUpdate && onFiltersUpdate(filters);
const filterSelect = useCallback(
(filter: SelectedFilterType<FilterProperties>) => {
innerSetFilters([filter]);
onFiltersUpdate && onFiltersUpdate([filter]);
},
[onFiltersUpdate],
);
const onFilterItemUnSelect = useCallback(
(filterId: SelectedFilterType['id']) => {
const newFilters = [] as SelectedFilterType[];
const filterUnselect = useCallback(
(filterId: SelectedFilterType<FilterProperties>['key']) => {
const newFilters = [] as SelectedFilterType<FilterProperties>[];
innerSetFilters(newFilters);
onFiltersUpdate && onFiltersUpdate(newFilters);
},
[onFiltersUpdate],
);
const filterSearch = useCallback(
(filter: FilterType<FilterProperties> | null, searchValue: string) => {
onFilterSearch && onFilterSearch(filter, searchValue);
},
[onFilterSearch],
);
return (
<StyledContainer>
<StyledTableHeader>
@ -113,14 +133,16 @@ function TableHeader<SortField extends string>({
</StyledViewSection>
<StyledFilters>
<FilterDropdownButton
filters={filters}
setFilters={setFilters}
isFilterSelected={filters.length > 0}
availableFilters={availableFilters || []}
filterSearchResults={filterSearchResults}
onFilterSelect={filterSelect}
onFilterSearch={filterSearch}
/>
<SortDropdownButton
setSorts={setSorts}
sorts={sorts}
<SortDropdownButton<SortField>
isSortSelected={sorts.length > 0}
availableSorts={availableSorts || []}
onSortSelect={sortSelect}
/>
<DropdownButton label="Settings" isActive={false}></DropdownButton>
@ -129,9 +151,9 @@ function TableHeader<SortField extends string>({
{sorts.length + filters.length > 0 && (
<SortAndFilterBar
sorts={sorts}
onRemoveSort={onSortItemUnSelect}
filters={filters}
onRemoveFilter={onFilterItemUnSelect}
onRemoveSort={sortUnselect}
onRemoveFilter={filterUnselect}
/>
)}
</StyledContainer>