From 422788a6a31b0001615c4f98fc848f904432aa8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 28 Apr 2021 13:22:23 +0200
Subject: [PATCH] Show comment counter and highlight if unread comments are
 available
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/icons.scss                         |  4 +++-
 lib/Db/Card.php                        |  2 ++
 lib/Service/CardService.php            |  6 ++++--
 src/components/cards/CardBadges.vue    | 29 ++++++++++++++++++++++----
 tests/unit/Db/CardTest.php             |  3 +++
 tests/unit/Service/CardServiceTest.php |  2 +-
 6 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/css/icons.scss b/css/icons.scss
index c782f125d..6f2f35167 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -22,7 +22,9 @@
 .icon-activity {
 	@include icon-color('activity-dark', 'activity', $color-black);
 }
-
+.icon-comment--unread {
+	@include icon-color('comment', 'actions', $color-primary, 1, true);
+}
 
 .avatardiv.circles {
 	background: var(--color-primary);
diff --git a/lib/Db/Card.php b/lib/Db/Card.php
index 4168c7fe2..af2c665c5 100644
--- a/lib/Db/Card.php
+++ b/lib/Db/Card.php
@@ -49,6 +49,7 @@ class Card extends RelationalEntity {
 	protected $notified = false;
 	protected $deletedAt = 0;
 	protected $commentsUnread = 0;
+	protected $commentsCount = 0;
 	
 	protected $relatedStack = null;
 	protected $relatedBoard = null;
@@ -75,6 +76,7 @@ class Card extends RelationalEntity {
 		$this->addRelation('attachmentCount');
 		$this->addRelation('participants');
 		$this->addRelation('commentsUnread');
+		$this->addRelation('commentsCount');
 		$this->addResolvable('owner');
 		
 		$this->addRelation('relatedStack');
diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php
index 629185e21..0cb733c54 100644
--- a/lib/Service/CardService.php
+++ b/lib/Service/CardService.php
@@ -105,8 +105,10 @@ class CardService {
 		$card->setAttachmentCount($this->attachmentService->count($cardId));
 		$user = $this->userManager->get($this->currentUser);
 		$lastRead = $this->commentsManager->getReadMark('deckCard', (string)$card->getId(), $user);
-		$count = $this->commentsManager->getNumberOfCommentsForObject('deckCard', (string)$card->getId(), $lastRead);
-		$card->setCommentsUnread($count);
+		$countUnreadComments = $this->commentsManager->getNumberOfCommentsForObject('deckCard', (string)$card->getId(), $lastRead);
+		$countComments = $this->commentsManager->getNumberOfCommentsForObject('deckCard', (string)$card->getId());
+		$card->setCommentsUnread($countUnreadComments);
+		$card->setCommentsCount($countComments);
 		
 		$stack = $this->stackMapper->find($card->getStackId());
 		$board = $this->boardService->find($stack->getBoardId());
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index c77995f5f..5d046ec7f 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -22,7 +22,13 @@
 
 <template>
 	<div v-if="card" class="badges">
-		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
+		<div v-if="card.commentsCount > 0"
+			v-tooltip="commentsHint"
+			class="icon icon-comment"
+			:class="{ 'icon-comment--unread': card.commentsUnread > 0 }"
+			@click.stop="openComments">
+			{{ card.commentsCount }}
+		</div>
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
 			{{ checkListCheckedCount }}/{{ checkListCount }}
@@ -58,6 +64,21 @@ export default {
 		checkListCheckedCount() {
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
 		},
+		commentsHint() {
+			if (this.card.commentsUnread > 0) {
+				return t('deck', '{count} comments, {unread} unread', {
+					count: this.card.commentsCount,
+					unread: this.card.commentsUnread
+				})
+			}
+			return null
+		},
+	},
+	methods: {
+		openComments() {
+			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
+			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id, tabId: 'comments' } })
+		},
 	},
 }
 </script>
@@ -70,7 +91,7 @@ export default {
 
 		.icon {
 			opacity: 0.5;
-			padding: 12px 18px;
+			padding: 10px 20px;
 			padding-right: 4px;
 			margin-right: 5px;
 			background-position: left;
@@ -78,8 +99,8 @@ export default {
 			span {
 				margin-left: 18px;
 			}
-			&.icon-edit {
-				opacity: 0.5;
+			&.icon-comment--unread {
+				opacity: 1;
 			}
 		}
 	}
diff --git a/tests/unit/Db/CardTest.php b/tests/unit/Db/CardTest.php
index 01f638a07..9465a53e4 100644
--- a/tests/unit/Db/CardTest.php
+++ b/tests/unit/Db/CardTest.php
@@ -83,6 +83,7 @@ class CardTest extends TestCase {
 			'assignedUsers' => null,
 			'deletedAt' => 0,
 			'commentsUnread' => 0,
+			'commentsCount' => 0,
 			'lastEditor' => null,
 			'ETag' => $card->getETag(),
 		], $card->jsonSerialize());
@@ -109,6 +110,7 @@ class CardTest extends TestCase {
 			'assignedUsers' => null,
 			'deletedAt' => 0,
 			'commentsUnread' => 0,
+			'commentsCount' => 0,
 			'lastEditor' => null,
 			'ETag' => $card->getETag(),
 		], $card->jsonSerialize());
@@ -145,6 +147,7 @@ class CardTest extends TestCase {
 			'assignedUsers' => ['user1'],
 			'deletedAt' => 0,
 			'commentsUnread' => 0,
+			'commentsCount' => 0,
 			'lastEditor' => null,
 			'ETag' => $card->getETag(),
 		], $card->jsonSerialize());
diff --git a/tests/unit/Service/CardServiceTest.php b/tests/unit/Service/CardServiceTest.php
index 3e351ac30..890c87f0d 100644
--- a/tests/unit/Service/CardServiceTest.php
+++ b/tests/unit/Service/CardServiceTest.php
@@ -128,7 +128,7 @@ class CardServiceTest extends TestCase {
 		$this->userManager->expects($this->once())
 			->method('get')
 			->willReturn($user);
-		$this->commentsManager->expects($this->once())
+		$this->commentsManager->expects($this->any())
 			->method('getNumberOfCommentsForObject')
 			->willReturn(0);
 		$boardMock = $this->createMock(Board::class);