Feature/filter and sort board (#725)

* Get pipeline progress from stage IDs

* Rename hooks file

* Addd first amount filter

* Add remaining filters

* Design fixes

* Add filtering on creation date or amount

* Fix card updates and creations with the new state management

* Keep ordering when dropping a card

* Add remainint sorts

* Make board header more generic

* Move available filters and sorts to board options

* Fix decorators for test

* Add pipeline stage ids to mock data

* Adapt mock data

* Linter

front/src/testing/decorators.tsx

@@ -3,9 +3,9 @@ import { ApolloProvider } from '@apollo/client';
 import { Decorator } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 
-import { pipeline } from '@/companies/__stories__/mock-data';
-import { HookCompanyBoard } from '@/companies/components/HookCompanyBoard';
+import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
+import { defaultPipelineProgressOrderBy } from '@/pipeline/queries';
 import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
 import { BoardColumnContext } from '@/pipeline/states/BoardColumnContext';
 import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState';
@@ -14,6 +14,7 @@ import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedSta
 import { CellContext } from '@/ui/table/states/CellContext';
 import { RowContext } from '@/ui/table/states/RowContext';
 
+import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { mockedClient } from './mockedClient';
 
@@ -41,8 +42,11 @@ export const CellPositionDecorator: Decorator = (Story) => (
 
 export const BoardDecorator: Decorator = (Story) => (
   <>
-    <HookCompanyBoard />
     <RecoilScope SpecificContext={CompanyBoardContext}>
+      <HooksCompanyBoard
+        availableFilters={[]}
+        orderBy={defaultPipelineProgressOrderBy}
+      />
       <Story />
     </RecoilScope>
   </>
@@ -53,8 +57,7 @@ function HookLoadFakeBoardContextState() {
     pipelineProgressIdScopedState,
     BoardCardContext,
   );
-  const pipelineProgress =
-    pipeline?.pipelineStages?.[0]?.pipelineProgresses?.[0];
+  const pipelineProgress = mockedPipelineProgressData[1];
   useEffect(() => {
     setPipelineProgressId(pipelineProgress?.id || '');
   }, [pipelineProgress?.id, setPipelineProgressId]);
@@ -64,8 +67,11 @@ function HookLoadFakeBoardContextState() {
 export const BoardCardDecorator: Decorator = (Story) => {
   return (
     <>
-      <HookCompanyBoard />
       <RecoilScope SpecificContext={CompanyBoardContext}>
+        <HooksCompanyBoard
+          availableFilters={[]}
+          orderBy={defaultPipelineProgressOrderBy}
+        />
         <RecoilScope SpecificContext={BoardColumnContext}>
           <RecoilScope SpecificContext={BoardCardContext}>
             <HookLoadFakeBoardContextState />

front/src/testing/mock-data/pipeline-progress.ts

@@ -1,8 +1,17 @@
-import { PipelineProgress, User } from '../../generated/graphql';
+import {
+  PipelineProgress,
+  PipelineProgressableType,
+  User,
+} from '../../generated/graphql';
 
 type MockedPipelineProgress = Pick<
   PipelineProgress,
-  'id' | 'amount' | 'closeDate' | 'progressableId'
+  | 'id'
+  | 'amount'
+  | 'closeDate'
+  | 'progressableId'
+  | 'pipelineStageId'
+  | 'progressableType'
 > & {
   accountOwner: Pick<
     User,
@@ -31,13 +40,17 @@ export const mockedPipelineProgressData: Array<MockedPipelineProgress> = [
     closeDate: '2021-10-01T00:00:00.000Z',
     progressableId: '0',
     accountOwner: accountOwner,
+    pipelineStageId: 'another-pipeline-stage-1',
+    progressableType: PipelineProgressableType.Company,
   },
   {
     id: 'fe256b39-3ec3-4fe7-8998-b76aa0bfb600',
     progressableId: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
+    pipelineStageId: 'fe256b39-3ec3-4fe3-8998-b76aa0bfb600',
     amount: 7,
     closeDate: '2021-10-01T00:00:00.000Z',
     accountOwner,
+    progressableType: PipelineProgressableType.Company,
   },
   {
     id: '4a886c90-f4f2-4984-8222-882ebbb905d6',
@@ -45,5 +58,7 @@ export const mockedPipelineProgressData: Array<MockedPipelineProgress> = [
     amount: 100,
     closeDate: '2021-10-01T00:00:00.000Z',
     accountOwner,
+    pipelineStageId: 'fe256b39-3ec3-4fe3-8998-b76aa0bfb600',
+    progressableType: PipelineProgressableType.Company,
   },
 ];