From be4a542ca9c1afb73f078867f5a97bfab24b055f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miquel=20Mart=C3=ADn?= <miquel.martin@bitgenoma.com>
Date: Sat, 16 Nov 2024 19:37:46 +0100
Subject: [PATCH 1/2] feat(cards): add card counters

---
 src/components/Controls.vue    | 33 ++++++++++++++++++++++++++++++++-
 src/components/board/Stack.vue | 25 +++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index e9b81a921..fc9872fa4 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -22,7 +22,8 @@
 		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
 			<h2 dir="auto">
-				{{ board.title }}
+				<span class="board__title-text">{{ board.title }}</span>
+				<span class="board__title-counter">{{ cardsCount }}</span>
 			</h2>
 			<p v-if="showArchived">
 				({{ t('deck', 'Archived cards') }})
@@ -348,6 +349,12 @@ export default {
 			// get user object including displayname from the list of all users with acces
 			return this.board.users.filter((user) => this.board.activeSessions.includes(user.uid))
 		},
+		stacksByBoard() {
+			return this.$store.getters.stacksByBoard(this.board?.id) || []
+		},
+		cardsCount() {
+			return this.stacksByBoard.reduce((count, stack) => count + (this.$store.getters.cardsByStack(stack.id)?.length || 0), 0)
+		},
 	},
 	watch: {
 		board(current, previous) {
@@ -358,6 +365,13 @@ export default {
 				this.setPageTitle(current.title)
 			}
 		},
+		stacksByBoard: {
+			handler(newStacks) {
+				this.updateCardsCount(newStacks)
+			},
+			immediate: true,
+			deep: true,
+		},
 	},
 	beforeMount() {
 		subscribe('deck:board:show-new-card', this.clickShowAddCardModel)
@@ -474,6 +488,9 @@ export default {
 				this.setFilter()
 			}
 		},
+		updateCardsCount(stacks) {
+			this.cardsCount = stacks.reduce((count, stack) => count + (stack.cards?.length || 0), 0)
+		},
 	},
 }
 </script>
@@ -504,6 +521,20 @@ export default {
 				background-color: transparent;
 				margin: var(--default-grid-baseline);
 			}
+
+			.board__title-text {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				flex-grow: 1; /* Ocupa el máximo espacio disponible */
+			}
+
+			.board__title-counter {
+				flex-shrink: 0;
+				margin-left: 8px;
+				color: var(--color-info-text);
+				font-size: 0.9em;
+			}
 		}
 
 		#stack-add form {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index cc066fd60..09b30df9a 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -11,7 +11,8 @@
 			:aria-label="stack.title">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!canManage || isArchived" tabindex="0">
-					{{ stack.title }}
+					<span class="stack__title-text">{{ stack.title }}</span>
+					<span class="stack__title-counter">{{ cardsCount }}</span>
 				</h3>
 				<h3 v-else-if="!editing"
 					title="stack.title"
@@ -21,7 +22,8 @@
 					class="stack__title"
 					@click="startEditing(stack)"
 					@keydown.enter="startEditing(stack)">
-					{{ stack.title }}
+					<span class="stack__title-text">{{ stack.title }}</span>
+					<span class="stack__title-counter">{{ cardsCount }}</span>
 				</h3>
 				<form v-else-if="editing"
 					v-click-outside="cancelEdit"
@@ -204,6 +206,9 @@ export default {
 				return !card.archived
 			})
 		},
+		cardsCount() {
+			return this.cardsByStack?.length || 0
+		},
 		dragHandleSelector() {
 			return this.canEdit && !this.showArchived ? null : '.no-drag'
 		},
@@ -422,11 +427,27 @@ export default {
 			border-radius: 3px;
 			padding: 4px 4px;
 			font-size: var(--default-font-size);
+			display: flex;
+			justify-content: space-between; /* Asegura separación entre título y contador */
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
 				border-radius: 3px;
 			}
+
+			.stack__title-text {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				flex-grow: 1; /* Ocupa el máximo espacio disponible */
+			}
+
+			.stack__title-counter {
+				flex-shrink: 0;
+				margin-left: 8px;
+				color: var(--color-info-text);
+				font-size: 0.9em;
+			}
 		}
 
 		form {

From 7ac299228179212d708ca868b815c86fce72d239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miquel=20Mart=C3=ADn?= <miquel.martin@bitgenoma.com>
Date: Mon, 13 Jan 2025 20:45:08 +0100
Subject: [PATCH 2/2] add aria-label

---
 src/components/Controls.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index fc9872fa4..fb5478fed 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -22,8 +22,8 @@
 		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
 			<h2 dir="auto">
-				<span class="board__title-text">{{ board.title }}</span>
-				<span class="board__title-counter">{{ cardsCount }}</span>
+				<span aria-label="Board title" class="board__title-text">{{ board.title }}</span>
+				<span aria-label="Number of cards" class="board__title-counter">{{ cardsCount }}</span>
 			</h2>
 			<p v-if="showArchived">
 				({{ t('deck', 'Archived cards') }})