From 4e5c0938fa1697d2548c279d56d85b0f0425a0cf Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Thu, 21 Nov 2024 12:27:13 +0800
Subject: [PATCH] show cards quantity in kanban (#7075)

Co-authored-by: zhouwenxuan <aries@Mac.local>
---
 .../views/kanban/boards/board/header/index.css        | 11 +++++++++++
 .../views/kanban/boards/board/header/index.js         |  5 ++++-
 .../src/metadata/views/kanban/boards/board/index.js   |  2 ++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/metadata/views/kanban/boards/board/header/index.css b/frontend/src/metadata/views/kanban/boards/board/header/index.css
index 8e4d693a92..cbe1fbabae 100644
--- a/frontend/src/metadata/views/kanban/boards/board/header/index.css
+++ b/frontend/src/metadata/views/kanban/boards/board/header/index.css
@@ -9,5 +9,16 @@
 
 .sf-metadata-view-kanban-board-header .sf-metadata-view-kanban-board-header-title {
   flex: 1;
+  display: flex;
   overflow: hidden;
 }
+
+.sf-metadata-view-kanban-board-header .sf-metadata-view-kanban-board-header-title .sf-metadata-ui.cell-formatter-container {
+  width: auto;
+}
+
+.sf-metadata-view-kanban-board-header .sf-metadata-view-kanban-board-header-title .cards-quantity {
+  font-size: 14px;
+  color: #666666;
+  margin-left: 12px;
+}
diff --git a/frontend/src/metadata/views/kanban/boards/board/header/index.js b/frontend/src/metadata/views/kanban/boards/board/header/index.js
index 4b31f13a63..7498ddf4e3 100644
--- a/frontend/src/metadata/views/kanban/boards/board/header/index.js
+++ b/frontend/src/metadata/views/kanban/boards/board/header/index.js
@@ -7,7 +7,7 @@ import { CellType } from '../../../../../constants';
 
 import './index.css';
 
-const Header = ({ readonly, haveFreezed, value, groupByColumn, onDelete, onFreezed, onUnFreezed }) => {
+const Header = ({ readonly, haveFreezed, value, groupByColumn, cardsQuantity, onDelete, onFreezed, onUnFreezed }) => {
   const [active, setActive] = useState(false);
 
   const onMouseEnter = useCallback(() => {
@@ -39,6 +39,7 @@ const Header = ({ readonly, haveFreezed, value, groupByColumn, onDelete, onFreez
         ) : (
           <span>{gettext('Uncategorized')}</span>
         )}
+        <span className="cards-quantity">{cardsQuantity}</span>
       </div>
       {value && !readonly && active && (
         <OpMenu onDelete={onDelete} onFreezed={onFreezed} onUnFreezed={handelUnFreezed} />
@@ -51,6 +52,8 @@ Header.propTypes = {
   readonly: PropTypes.bool,
   value: PropTypes.any,
   groupByColumn: PropTypes.object,
+  haveFreezed: PropTypes.bool,
+  cardsQuantity: PropTypes.number,
   onDelete: PropTypes.func,
   onFreezed: PropTypes.func,
   onUnFreezed: PropTypes.func,
diff --git a/frontend/src/metadata/views/kanban/boards/board/index.js b/frontend/src/metadata/views/kanban/boards/board/index.js
index 8c9a20a29b..a090d2b971 100644
--- a/frontend/src/metadata/views/kanban/boards/board/index.js
+++ b/frontend/src/metadata/views/kanban/boards/board/index.js
@@ -31,6 +31,7 @@ const Board = ({
 }) => {
   const [isDraggingOver, setDraggingOver] = useState(false);
   const boardName = useMemo(() => `sf_metadata_kanban_board_${board.key}`, [board]);
+  const cardsQuantity = useMemo(() => board.children.length, [board.children]);
 
   const { metadata } = useMetadataView();
 
@@ -59,6 +60,7 @@ const Board = ({
         value={board.value}
         groupByColumn={groupByColumn}
         haveFreezed={haveFreezed}
+        cardsQuantity={cardsQuantity}
         onDelete={() => deleteOption(board.key)}
         onFreezed={onFreezed}
         onUnFreezed={onUnFreezed}