Files
twenty_crm/front/src/pages/opportunities/Opportunities.tsx
Thaïs e388d90976 fix: fix Pipeline Step title and color update in board (#2849)
Fixes a bug where editing a pipeline step's title or color in the board changes the column's label to the column's uuid and the color to gray.
2023-12-06 12:06:46 +01:00

60 lines
1.7 KiB
TypeScript

import styled from '@emotion/styled';
import { CompanyBoard } from '@/companies/board/components/CompanyBoard';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
import { usePipelineSteps } from '@/pipeline/hooks/usePipelineSteps';
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { IconTargetArrow } from '@/ui/display/icon';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageHeader } from '@/ui/layout/page/PageHeader';
const StyledBoardContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
`;
export const Opportunities = () => {
const { handlePipelineStepAdd, handlePipelineStepDelete } =
usePipelineSteps();
const { updateOneRecord: updateOnePipelineStep } =
useUpdateOneRecord<PipelineStep>({
objectNameSingular: 'pipelineStep',
});
const handleEditColumnTitle = ({
columnId,
title,
color,
}: {
columnId: string;
title: string;
color: string;
}) => {
updateOnePipelineStep?.({
idToUpdate: columnId,
input: { name: title, color },
});
};
return (
<PageContainer>
<PageHeader title="Opportunities" Icon={IconTargetArrow}>
<PipelineAddButton />
</PageHeader>
<PageBody>
<StyledBoardContainer>
<CompanyBoard
onColumnAdd={handlePipelineStepAdd}
onColumnDelete={handlePipelineStepDelete}
onEditColumnTitle={handleEditColumnTitle}
/>
</StyledBoardContainer>
</PageBody>
</PageContainer>
);
};