Add Filters on Table views (#95)

* 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>

front/src/components/table/Table.tsx

@@ -10,18 +10,30 @@ import TableHeader from './table-header/TableHeader';
 import styled from '@emotion/styled';
 import {
   FilterType,
+  SelectedFilterType,
   SelectedSortType,
   SortType,
 } from './table-header/interface';
 
-type OwnProps<TData, SortField> = {
+type OwnProps<TData, SortField, FilterProperties> = {
   data: Array<TData>;
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
   viewIcon?: React.ReactNode;
-  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => 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 StyledTable = styled.table`
@@ -75,15 +87,18 @@ const StyledTableScrollableContainer = styled.div`
   flex: 1;
 `;
 
-function Table<TData, SortField extends string>({
+function Table<TData, SortField extends string, FilterProperies>({
   data,
   columns,
   viewName,
   viewIcon,
-  onSortsUpdate,
   availableSorts,
   availableFilters,
-}: OwnProps<TData, SortField>) {
+  filterSearchResults,
+  onSortsUpdate,
+  onFiltersUpdate,
+  onFilterSearch,
+}: OwnProps<TData, SortField, FilterProperies>) {
   const table = useReactTable({
     data,
     columns,
@@ -95,9 +110,12 @@ function Table<TData, SortField extends string>({
       <TableHeader
         viewName={viewName}
         viewIcon={viewIcon}
-        onSortsUpdate={onSortsUpdate}
         availableSorts={availableSorts}
         availableFilters={availableFilters}
+        filterSearchResults={filterSearchResults}
+        onSortsUpdate={onSortsUpdate}
+        onFiltersUpdate={onFiltersUpdate}
+        onFilterSearch={onFilterSearch}
       />
       <StyledTableScrollableContainer>
         <StyledTable>