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

* 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

View File

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

View File

@ -60,6 +60,19 @@ const StyledAmount = styled.div`
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 = {
color?: string;
title: string;
@ -69,6 +82,7 @@ type OwnProps = {
totalAmount?: number;
children: React.ReactNode;
isFirstColumn: boolean;
numChildren: number;
};
export function BoardColumn({
@ -79,6 +93,7 @@ export function BoardColumn({
totalAmount,
children,
isFirstColumn,
numChildren,
}: OwnProps) {
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
React.useState(false);
@ -112,6 +127,7 @@ export function BoardColumn({
<StyledHeader>
<Tag onClick={handleTitleClick} color={color} text={title} />
{!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
<StyledNumChildren>{numChildren}</StyledNumChildren>
</StyledHeader>
{isBoardColumnMenuOpen && (
<BoardColumnMenu