Sammy/t 134 i see all filters in the dropdown (#78)

* feature: add filter dropdown

* test: add story for FilterDropdown

* feature: display filterOperand on top of dropdown

* feature: display filter operand

* feature: fix index and display selected filter

* refactor: set TopOption button inside dropdown file

* feature: move availableFilters outside the fitler component

* refactor: make the available sorts and filter optionnal

* refactor: rename availableSorts

* feature: add a resetState property on onOutsideClick

* feature: add filters and set  filters on Dropdown component

* feature: set filters on click in dropdown

* test: verify button is active after filters are set

* feature: display sorts and filters

* refactor: move SelectedFilters in SortAndFilter

* refactor: move SelectedFilters in dedicated file

* refactor: remove Id and use Key

front/src/pages/people/People.tsx

@@ -2,7 +2,11 @@ import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import styled from '@emotion/styled';
-import { peopleColumns, sortsAvailable } from './people-table';
+import {
+  availableFilters,
+  peopleColumns,
+  availableSorts,
+} from './people-table';
 import { mapPerson } from '../../interfaces/person.interface';
 import { useCallback, useState } from 'react';
 import {
@@ -38,7 +42,8 @@ function People() {
             viewName="All People"
             viewIcon={faList}
             onSortsUpdate={updateSorts}
-            sortsAvailable={sortsAvailable}
+            availableSorts={availableSorts}
+            availableFilters={availableFilters}
           />
         }
       </StyledPeopleContainer>

front/src/pages/people/people-table.tsx

@@ -17,35 +17,63 @@ import CompanyChip from '../../components/chips/CompanyChip';
 import PersonChip from '../../components/chips/PersonChip';
 import { Person } from '../../interfaces/person.interface';
 import PipeChip from '../../components/chips/PipeChip';
-import { SortType } from '../../components/table/table-header/SortAndFilterBar';
 import EditableCell from '../../components/table/EditableCell';
 import { OrderByFields, updatePerson } from '../../services/people';
+import {
+  FilterType,
+  SortType,
+} from '../../components/table/table-header/interface';
 
-export const sortsAvailable = [
+export const availableSorts = [
   {
-    id: 'fullname',
+    key: 'fullname',
     label: 'People',
     icon: faUser,
   },
   {
-    id: 'company_name',
+    key: 'company_name',
     label: 'Company',
     icon: faBuildings,
   },
   {
-    id: 'email',
+    key: 'email',
     label: 'Email',
     icon: faEnvelope,
   },
-  { id: 'phone', label: 'Phone', icon: faPhone },
+  { key: 'phone', label: 'Phone', icon: faPhone },
   {
-    id: 'created_at',
+    key: 'created_at',
     label: 'Created at',
     icon: faCalendar,
   },
-  { id: 'city', label: 'City', icon: faMapPin },
+  { key: 'city', label: 'City', icon: faMapPin },
 ] satisfies Array<SortType<OrderByFields>>;
 
+export const availableFilters = [
+  {
+    key: 'fullname',
+    label: 'People',
+    icon: faUser,
+  },
+  {
+    key: 'company_name',
+    label: 'Company',
+    icon: faBuildings,
+  },
+  {
+    key: 'email',
+    label: 'Email',
+    icon: faEnvelope,
+  },
+  { key: 'phone', label: 'Phone', icon: faPhone },
+  {
+    key: 'created_at',
+    label: 'Created at',
+    icon: faCalendar,
+  },
+  { key: 'city', label: 'City', icon: faMapPin },
+] satisfies FilterType[];
+
 const columnHelper = createColumnHelper<Person>();
 export const peopleColumns = [
   columnHelper.accessor('fullName', {