From bfd748e1757cfc45f0a268c5dd3fee839458a1ef Mon Sep 17 00:00:00 2001
From: proof3 <124drak@gmail.com>
Date: Wed, 2 Aug 2023 22:51:17 +0400
Subject: [PATCH] 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
---
 .../pipeline/components/EntityBoardColumn.tsx    |  1 +
 .../modules/ui/board/components/BoardColumn.tsx  | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/front/src/modules/pipeline/components/EntityBoardColumn.tsx b/front/src/modules/pipeline/components/EntityBoardColumn.tsx
index f67a88d2dd..9ecae715d8 100644
--- a/front/src/modules/pipeline/components/EntityBoardColumn.tsx
+++ b/front/src/modules/pipeline/components/EntityBoardColumn.tsx
@@ -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) => (
diff --git a/front/src/modules/ui/board/components/BoardColumn.tsx b/front/src/modules/ui/board/components/BoardColumn.tsx
index 7e0eb1bc91..c5b7905d3e 100644
--- a/front/src/modules/ui/board/components/BoardColumn.tsx
+++ b/front/src/modules/ui/board/components/BoardColumn.tsx
@@ -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