First round of refactor EntityBoards (#1067)

front/src/pages/opportunities/Opportunities.tsx

@@ -1,20 +1,27 @@
 import { useCallback, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 
 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
-import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline/components/BoardActionBarButtonDeletePipelineProgress';
-import { EntityBoard } from '@/pipeline/components/EntityBoard';
-import { EntityBoardActionBar } from '@/pipeline/components/EntityBoardActionBar';
 import {
   defaultPipelineProgressOrderBy,
+  GET_PIPELINES,
   PipelineProgressesSelectedSortType,
 } from '@/pipeline/queries';
+import { BoardActionBarButtonDeleteBoardCard } from '@/ui/board/components/BoardActionBarButtonDeleteBoardCard';
+import { EntityBoard } from '@/ui/board/components/EntityBoard';
+import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
+import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { IconTargetArrow } from '@/ui/icon/index';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { PipelineProgressOrderByWithRelationInput } from '~/generated/graphql';
+import {
+  PipelineProgressOrderByWithRelationInput,
+  useDeleteManyPipelineProgressMutation,
+  useUpdatePipelineStageMutation,
+} from '~/generated/graphql';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
 export function Opportunities() {
@@ -35,24 +42,62 @@ export function Opportunities() {
     [],
   );
 
+  const [updatePipelineStage] = useUpdatePipelineStageMutation();
+
+  function handleEditColumnTitle(boardColumnId: string, newTitle: string) {
+    updatePipelineStage({
+      variables: {
+        id: boardColumnId,
+        data: { name: newTitle },
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
+    });
+  }
+
+  function handleEditColumnColor(boardColumnId: string, newColor: string) {
+    updatePipelineStage({
+      variables: {
+        id: boardColumnId,
+        data: { color: newColor },
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
+    });
+  }
+
+  const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
+
+  async function handleDelete(cardIdsToDelete: string[]) {
+    await deletePipelineProgress({
+      variables: {
+        ids: cardIdsToDelete,
+      },
+    });
+  }
+
   return (
     <WithTopBarContainer
       title="Opportunities"
       icon={<IconTargetArrow size={theme.icon.size.md} />}
     >
-      <RecoilScope SpecificContext={CompanyBoardContext}>
-        <HooksCompanyBoard
-          availableFilters={opportunitiesBoardOptions.filters}
-          orderBy={orderBy}
-        />
-        <EntityBoard
-          boardOptions={opportunitiesBoardOptions}
-          updateSorts={updateSorts}
-        />
-        <EntityBoardActionBar>
-          <BoardActionBarButtonDeletePipelineProgress />
-        </EntityBoardActionBar>
-      </RecoilScope>
+      <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
+        <RecoilScope SpecificContext={CompanyBoardContext}>
+          <HooksCompanyBoard
+            availableFilters={opportunitiesBoardOptions.filters}
+            orderBy={orderBy}
+          />
+          <EntityBoard
+            boardOptions={opportunitiesBoardOptions}
+            updateSorts={updateSorts}
+            onEditColumnColor={handleEditColumnColor}
+            onEditColumnTitle={handleEditColumnTitle}
+          />
+          <EntityBoardActionBar>
+            <BoardActionBarButtonDeleteBoardCard onDelete={handleDelete} />
+          </EntityBoardActionBar>
+        </RecoilScope>
+      </BoardOptionsContext.Provider>
     </WithTopBarContainer>
   );
 }

front/src/pages/opportunities/opportunitiesBoardOptions.tsx

@@ -1,6 +1,6 @@
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
 import { NewCompanyProgressButton } from '@/companies/components/NewCompanyProgressButton';
-import { BoardOptions } from '@/pipeline/types/BoardOptions';
+import { BoardOptions } from '@/ui/board/types/BoardOptions';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { opportunitiesFilters } from './opportunities-filters';