admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refacto board (#661)

Browse Source 
* Refacto pipeline progress board to be entity agnostic

* Abstract hooks as well

* Move files

* Pass specific components as props

* Move board hook to the generic component

* Make dnd and update logic part of the board

* Remove useless call and getch pipelineProgress from hook

* Minot

* improve typing

* Revert "improve typing"

This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659.

* wip

* Get board from initial component

* Move files again

* Lint

* Fix story

* Lint

* Mock pipeline progress

* Fix storybook

* WIP refactor recoil

* Checkpoint: compilation

* Fix dnd

* Fix unselect card

* Checkpoint: compilation

* Checkpoint: New card OK

* Checkpoint: feature complete

* Fix latency for delete

* Linter

* Fix rebase

* Move files

* lint

* Update Stories tests

* lint

* Fix test

* Refactor hook for company progress indexing

* Remove useless type

* Move boardState

* remove gardcoded Id

* Nit

* Fix

* Rename state
This commit is contained in:
Emilien Chauvet
2023-07-14 17:51:16 -07:00
committed by GitHub
parent e93a96b3b1
commit 0a319bcf86
47 changed files with 975 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,97 +1,31 @@
import { useCallback, useMemo } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import { companyBoardOptions } from '@/companies/components/companyBoardOptions';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline-progress/components/BoardActionBarButtonDeletePipelineProgress';
import { EntityBoard } from '@/pipeline-progress/components/EntityBoard';
import { EntityBoardActionBar } from '@/pipeline-progress/components/EntityBoardActionBar';
import { GET_PIPELINES } from '@/pipeline-progress/queries';
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
import { IconTargetArrow } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import {
PipelineProgress,
PipelineStage,
useGetPipelinesQuery,
useUpdateOnePipelineProgressMutation,
useUpdateOnePipelineProgressStageMutation,
} from '../../generated/graphql';
import { Board } from '../../modules/pipeline-progress/components/Board';
import { useBoard } from '../../modules/pipeline-progress/hooks/useBoard';
import { HookCompanyBoard } from './HookCompanyBoard';
export function Opportunities() {
const theme = useTheme();
const pipelines = useGetPipelinesQuery();
const pipelineId = pipelines.data?.findManyPipeline[0]?.id;
const { initialBoard, items } = useBoard(pipelineId || '');
const columns = useMemo(
() =>
initialBoard?.map(({ id, colorCode, title }) => ({
id,
colorCode,
title,
})),
[initialBoard],
);
const [updatePipelineProgress] = useUpdateOnePipelineProgressMutation();
const [updatePipelineProgressStage] =
useUpdateOnePipelineProgressStageMutation();
const handleCardUpdate = useCallback(
async (
pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>,
) => {
await updatePipelineProgress({
variables: {
id: pipelineProgress.id,
amount: pipelineProgress.amount,
closeDate: pipelineProgress.closeDate || null,
},
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
},
[updatePipelineProgress],
);
const handleCardMove = useCallback(
async (
pipelineProgressId: NonNullable<PipelineProgress['id']>,
pipelineStageId: NonNullable<PipelineStage['id']>,
) => {
updatePipelineProgressStage({
variables: {
id: pipelineProgressId,
pipelineStageId,
},
});
},
[updatePipelineProgressStage],
);
return (
<WithTopBarContainer
title="Opportunities"
icon={<IconTargetArrow size={theme.icon.size.md} />}
>
{items && pipelineId ? (
<>
<Board
pipelineId={pipelineId}
columns={columns || []}
initialBoard={initialBoard}
initialItems={items}
onCardMove={handleCardMove}
onCardUpdate={handleCardUpdate}
/>
<EntityBoardActionBar>
<BoardActionBarButtonDeletePipelineProgress />
</EntityBoardActionBar>
</>
) : (
<></>
)}
<HookCompanyBoard />
<RecoilScope SpecificContext={CompanyBoardContext}>
<EntityBoard boardOptions={companyBoardOptions} />
<EntityBoardActionBar>
<BoardActionBarButtonDeletePipelineProgress />
</EntityBoardActionBar>
</RecoilScope>
</WithTopBarContainer>
);
}