feat: Added card counts for boards

client/src/components/BoardActions/BoardActions.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 import Filters from './Filters';
 import Memberships from '../Memberships';
 import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';
@@ -9,6 +11,7 @@ import styles from './BoardActions.module.scss';
 
 const BoardActions = React.memo(
   ({
+    cardCount,
     memberships,
     labels,
     filterUsers,
@@ -28,9 +31,14 @@ const BoardActions = React.memo(
     onLabelMove,
     onLabelDelete,
   }) => {
+    const [t] = useTranslation();
+
     return (
       <div className={styles.wrapper}>
         <div className={styles.actions}>
+          <div className={classNames(styles.cardsCount, styles.action)}>
+            {cardCount} {[cardCount !== 1 ? t('common.cards') : t('common.card')]}
+          </div>
           <div className={styles.action}>
             <Memberships
               items={memberships}
@@ -67,6 +75,7 @@ const BoardActions = React.memo(
 
 BoardActions.propTypes = {
   /* eslint-disable react/forbid-prop-types */
+  cardCount: PropTypes.number.isRequired,
   memberships: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
   filterUsers: PropTypes.array.isRequired,

client/src/components/BoardActions/BoardActions.module.scss

@@ -1,4 +1,9 @@
 :global(#app) {
+  .cardsCount {
+    color: #798d99;
+    font-size: 12px;
+  }
+
   .action {
     flex: 0 0 auto;
     margin-right: 20px;

client/src/containers/BoardActionsContainer.js

@@ -7,6 +7,11 @@ import { BoardMembershipRoles } from '../constants/Enums';
 import BoardActions from '../components/BoardActions';
 
 const mapStateToProps = (state) => {
+  const listIds = selectors.selectListIdsForCurrentBoard(state);
+  const listCardsCount = listIds.map(
+    (list) => selectors.selectCardIdsByListId(state, list).cardIdsFull.length,
+  );
+  const cardCount = listCardsCount.reduce((sum, count) => sum + count, 0);
   const allUsers = selectors.selectUsers(state);
   const isCurrentUserManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
   const memberships = selectors.selectMembershipsForCurrentBoard(state);
@@ -19,6 +24,7 @@ const mapStateToProps = (state) => {
     !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
 
   return {
+    cardCount,
     memberships,
     labels,
     filterUsers,