diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx index 5a72b00..5396f1b 100755 --- a/client/src/components/List/List.jsx +++ b/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( ); + const cardsCountText = () => { + return ( + [ + isFiltered + ? `${cardIds.length} ${t('common.of')} ${cardIdsFull.length} ` + : `${cardIdsFull.length} `, + ] + [cardIdsFull.length !== 1 ? t('common.cards') : t('common.card')] + ); + }; + return ( {({ innerRef, draggableProps, dragHandleProps }) => ( @@ -117,10 +128,7 @@ const List = React.memo( )} -
- {cardIds.length}  - {cardIds.length !== 1 ? t('common.cards') : t('common.card')} -
+
{cardsCountText()}
{ 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, }; }; diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js index 7a0f5b2..32f9801 100644 --- a/client/src/locales/en/core.js +++ b/client/src/locales/en/core.js @@ -160,6 +160,7 @@ export default { writeComment: 'Write a comment...', card: 'card', cards: 'cards', + of: 'of', }, action: { diff --git a/client/src/models/List.js b/client/src/models/List.js index b634a66..7fbef26 100755 --- a/client/src/models/List.js +++ b/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() { diff --git a/client/src/selectors/lists.js b/client/src/selectors/lists.js index 1eddbd9..29690dc 100644 --- a/client/src/selectors/lists.js +++ b/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], + ]; }, );