Persist update on board drag and drop (#328)

* chore: move dnd lib comment aligned with import

* feature: add onUpdate on board

* chore: remove multi entity pipelines

* feature: add pipelineProgressableType field

* feature: fetch progressableType in board

* feature: implement on update to persist progress change

front/src/pages/opportunities/Opportunities.tsx

@@ -1,11 +1,33 @@
+import { useCallback } from 'react';
+
 import { IconTargetArrow } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 
+import {
+  PipelineProgress,
+  PipelineStage,
+  useUpdateOnePipelineProgressMutation,
+} from '../../generated/graphql';
 import { Board } from '../../modules/opportunities/components/Board';
 import { useBoard } from '../../modules/opportunities/hooks/useBoard';
 
 export function Opportunities() {
-  const { initialBoard, items, loading, error } = useBoard();
+  const { initialBoard, items, loading, error, pipelineEntityIdsMapper } =
+    useBoard();
+  const [updatePipelineProgress] = useUpdateOnePipelineProgressMutation();
+
+  const onUpdate = useCallback(
+    async (
+      entityId: NonNullable<PipelineProgress['progressableId']>,
+      pipelineStageId: NonNullable<PipelineStage['id']>,
+    ) => {
+      const pipelineProgressId = pipelineEntityIdsMapper(entityId);
+      updatePipelineProgress({
+        variables: { id: pipelineProgressId, pipelineStageId },
+      });
+    },
+    [updatePipelineProgress, pipelineEntityIdsMapper],
+  );
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error...</div>;
@@ -13,7 +35,7 @@ export function Opportunities() {
     return <div>Initial board or items not found</div>;
   return (
     <WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
-      <Board initialBoard={initialBoard} items={items} />
+      <Board initialBoard={initialBoard} items={items} onUpdate={onUpdate} />
     </WithTopBarContainer>
   );
 }