1
1
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-21 02:41:33 +03:00

Closes : Add the number of opportunities on each stage ()

* Add the number of oppurtunities on each stage

* Remove excess css properties in Boardcolumn.tsx and use theme

* Remove padding from oppurnities counters
This commit is contained in:
proof3 2023-08-02 22:51:17 +04:00 committed by GitHub
parent 3807d62aeb
commit bfd748e175
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 0 deletions
front/src/modules
pipeline/components
ui/board/components

View File

@ -104,6 +104,7 @@ export function EntityBoardColumn({
pipelineStageId={column.pipelineStageId} pipelineStageId={column.pipelineStageId}
totalAmount={boardColumnTotal} totalAmount={boardColumnTotal}
isFirstColumn={column.index === 0} isFirstColumn={column.index === 0}
numChildren={column.pipelineProgressIds.length}
> >
<BoardColumnCardsContainer droppableProvided={droppableProvided}> <BoardColumnCardsContainer droppableProvided={droppableProvided}>
{column.pipelineProgressIds.map((pipelineProgressId, index) => ( {column.pipelineProgressIds.map((pipelineProgressId, index) => (

View File

@ -60,6 +60,19 @@ const StyledAmount = styled.div`
margin-left: ${({ theme }) => theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledNumChildren = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.rounded};
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
height: 20px;
justify-content: center;
line-height: ${({ theme }) => theme.text.lineHeight.lg};
margin-left: auto;
width: 16px;
`;
type OwnProps = { type OwnProps = {
color?: string; color?: string;
title: string; title: string;
@ -69,6 +82,7 @@ type OwnProps = {
totalAmount?: number; totalAmount?: number;
children: React.ReactNode; children: React.ReactNode;
isFirstColumn: boolean; isFirstColumn: boolean;
numChildren: number;
}; };
export function BoardColumn({ export function BoardColumn({
@ -79,6 +93,7 @@ export function BoardColumn({
totalAmount, totalAmount,
children, children,
isFirstColumn, isFirstColumn,
numChildren,
}: OwnProps) { }: OwnProps) {
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
React.useState(false); React.useState(false);
@ -112,6 +127,7 @@ export function BoardColumn({
<StyledHeader> <StyledHeader>
<Tag onClick={handleTitleClick} color={color} text={title} /> <Tag onClick={handleTitleClick} color={color} text={title} />
{!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>} {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
<StyledNumChildren>{numChildren}</StyledNumChildren>
</StyledHeader> </StyledHeader>
{isBoardColumnMenuOpen && ( {isBoardColumnMenuOpen && (
<BoardColumnMenu <BoardColumnMenu