feat: Improved column card counts - added filtering

client/src/components/List/List.jsx

@@ -15,7 +15,8 @@ import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-ic
 import styles from './List.module.scss';
 
 const List = React.memo(
-  ({ id, index, name, isPersisted, cardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
+  // eslint-disable-next-line prettier/prettier
+  ({ id, index, name, isPersisted, isFiltered, cardIds, cardIdsFull, canEdit, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
@@ -86,6 +87,16 @@ const List = React.memo(
       </Droppable>
     );
 
+    const cardsCountText = () => {
+      return (
+        [
+          isFiltered
+            ? `${cardIds.length} ${t('common.of')} ${cardIdsFull.length} `
+            : `${cardIdsFull.length} `,
+        ] + [cardIdsFull.length !== 1 ? t('common.cards') : t('common.card')]
+      );
+    };
+
     return (
       <Draggable draggableId={`list:${id}`} index={index} isDragDisabled={!isPersisted || !canEdit}>
         {({ innerRef, draggableProps, dragHandleProps }) => (
@@ -117,10 +128,7 @@ const List = React.memo(
                     </Button>
                   </ActionsPopup>
                 )}
-                <div className={styles.cardsCount}>
-                  {cardIds.length}&nbsp;
-                  {cardIds.length !== 1 ? t('common.cards') : t('common.card')}
-                </div>
+                <div className={styles.cardsCount}>{cardsCountText()}</div>
               </div>
               <div
                 ref={listWrapper}
@@ -157,7 +165,9 @@ List.propTypes = {
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  isFiltered: PropTypes.bool.isRequired,
   cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  cardIdsFull: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,

client/src/containers/ListContainer.js

@@ -12,7 +12,7 @@ const makeMapStateToProps = () => {
 
   return (state, { id, index }) => {
     const { name, isPersisted } = selectListById(state, id);
-    const cardIds = selectCardIdsByListId(state, id);
+    const [cardIds, cardIdsFull, isFiltered] = selectCardIdsByListId(state, id);
     const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
     const isCurrentUserEditor =
@@ -23,7 +23,9 @@ const makeMapStateToProps = () => {
       index,
       name,
       isPersisted,
+      isFiltered,
       cardIds,
+      cardIdsFull,
       canEdit: isCurrentUserEditor,
     };
   };

client/src/locales/en/core.js

@@ -160,6 +160,7 @@ export default {
       writeComment: 'Write a comment...',
       card: 'card',
       cards: 'cards',
+      of: 'of',
     },
 
     action: {

client/src/models/List.js

@@ -86,14 +86,15 @@ export default class extends BaseModel {
 
   getFilteredOrderedCardsModelArray() {
     let cardModels = this.getOrderedCardsQuerySet().toModelArray();
+    const cardModelsFull = cardModels;
 
     const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);
     const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id);
-
+    let isFiltered = false;
     if (filterUserIds.length > 0) {
       cardModels = cardModels.filter((cardModel) => {
         const users = cardModel.users.toRefArray();
-
+        isFiltered = true;
         return users.some((user) => filterUserIds.includes(user.id));
       });
     }
@@ -101,12 +102,12 @@ export default class extends BaseModel {
     if (filterLabelIds.length > 0) {
       cardModels = cardModels.filter((cardModel) => {
         const labels = cardModel.labels.toRefArray();
-
+        isFiltered = true;
         return labels.some((label) => filterLabelIds.includes(label.id));
       });
     }
 
-    return cardModels;
+    return [cardModels, cardModelsFull, isFiltered];
   }
 
   deleteRelated() {

client/src/selectors/lists.js

@@ -33,8 +33,12 @@ export const makeSelectCardIdsByListId = () =>
       if (!listModel) {
         return listModel;
       }
-
-      return listModel.getFilteredOrderedCardsModelArray().map((cardModel) => cardModel.id);
+      const cardsModelArray = listModel.getFilteredOrderedCardsModelArray();
+      return [
+        cardsModelArray[0].map((cardModel) => cardModel.id),
+        cardsModelArray[1].map((cardModel) => cardModel.id),
+        cardsModelArray[2],
+      ];
     },
   );