From e971d628ddd097e3dda73664420d83a91bb19d68 Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Tue, 15 Feb 2022 10:20:41 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B04565=20Add=20a=20message=20indicator=20t?=
 =?UTF-8?q?o=20caselog=20tabs=20toggler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activity-panel/_activity-panel.scss       | 20 +++++++++++++
 js/layouts/activity-panel/activity-panel.js   | 28 +++++++++++++++++--
 .../layouts/activity-panel/layout.html.twig   |  1 +
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/css/backoffice/layout/activity-panel/_activity-panel.scss b/css/backoffice/layout/activity-panel/_activity-panel.scss
index fa0d4f433..7917bf5e1 100644
--- a/css/backoffice/layout/activity-panel/_activity-panel.scss
+++ b/css/backoffice/layout/activity-panel/_activity-panel.scss
@@ -41,6 +41,12 @@ $ibo-activity-panel--tab-title-decoration--border-radius: $ibo-border-radius-300
 
 $ibo-activity-panel--tab-title-draft-indicator--margin-x: $ibo-activity-panel--tab-title-decoration--margin-right !default;
 
+$ibo-activity-panel--tab-title-messages-count--margin-left: $ibo-activity-panel--tab-title-draft-indicator--margin-x !default;
+$ibo-activity-panel--tab-title-messages-count--background-color: $ibo-color-grey-200 !default;
+$ibo-activity-panel--tab-title-messages-count--padding-x: $ibo-spacing-200 !default;
+$ibo-activity-panel--tab-title-messages-count--padding-y: $ibo-spacing-0 !default;
+$ibo-activity-panel--tab-title-messages-count--border-radius: $ibo-border-radius-300 !default;
+
 $ibo-activity-panel--tab-title-text--max-width: 100px !default;
 
 /* - Tab toolbar */
@@ -180,6 +186,9 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 		.ibo-activity-panel--tab-title{
 			background-color: $ibo-activity-panel--tab-title--is-active--background-color;
 		}
+    .ibo-activity-panel--tab-title-messages-count{
+      display: none;
+    }
 	}
   &.ibo-is-draft{
     .ibo-activity-panel--tab-title-draft-indicator{
@@ -213,6 +222,17 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 	border-radius: $ibo-activity-panel--tab-title-decoration--border-radius;
 	@extend %ibo-depression-100;
 }
+.ibo-activity-panel--tab-title-messages-count{
+  display: inline-block;
+  margin-left: $ibo-activity-panel--tab-title-messages-count--margin-left;
+  background-color: $ibo-activity-panel--tab-title-messages-count--background-color;
+  padding: $ibo-activity-panel--tab-title-messages-count--padding-y $ibo-activity-panel--tab-title-messages-count--padding-x;
+  border-radius: $ibo-activity-panel--tab-title-messages-count--border-radius;
+
+  &[data-messages-count="0"]{
+    display: none;
+  }
+}
 .ibo-activity-panel--tab-title-draft-indicator{
   display: none;
   margin-left: $ibo-activity-panel--tab-title-draft-indicator--margin-x;
diff --git a/js/layouts/activity-panel/activity-panel.js b/js/layouts/activity-panel/activity-panel.js
index f526b9ca4..aa698bf66 100644
--- a/js/layouts/activity-panel/activity-panel.js
+++ b/js/layouts/activity-panel/activity-panel.js
@@ -922,9 +922,10 @@ $(function()
 							return false;
 						}
 
-						// Update the feed
+						// Update the feed and tab toggler message counter
 						for (let sCaseLogAttCode in oData.data.entries) {
 							me._AddEntry(oData.data.entries[sCaseLogAttCode], 'start');
+							me._IncreaseTabTogglerMessagesCounter(sCaseLogAttCode);
 						}
 						me._ApplyEntriesFilters();
 
@@ -946,7 +947,30 @@ $(function()
 						me._UnfreezeCaseLogsEntryForms();
 					});
 			},
-
+			/**
+			 * Increase a tab toggler number of messages indicator given a caselog attribute code
+			 *
+			 * @param sCaseLogAttCode {string} A caselog attribute code
+			 * @return {void}
+			 * @private
+			 */
+			_IncreaseTabTogglerMessagesCounter: function(sCaseLogAttCode){
+				let oTabTogglerCounter = this._GetTabTogglerFromCaseLogAttCode(sCaseLogAttCode).find('[data-role="ibo-activity-panel--tab-title-messages-count"]');
+				let iNewCounterValue = parseInt(oTabTogglerCounter.attr('data-messages-count')) + 1;
+				
+				oTabTogglerCounter.attr('data-messages-count', iNewCounterValue).text(iNewCounterValue);
+			},
+			/**
+			 * Return tab toggler given a caselog attribute code
+			 *
+			 * @param sCaseLogAttCode {string} A caselog attribute code
+			 * @return {Object}
+			 * @private
+			 */
+			_GetTabTogglerFromCaseLogAttCode: function(sCaseLogAttCode)
+			{
+				return this.element.find(this.js_selectors.tab_toggler+'[data-tab-type="caselog"][data-caselog-attribute-code="'+sCaseLogAttCode+'"]')
+			},
 			// - Helpers on object lock
 			/**
 			 * Initialize the lock watcher on a regular basis
diff --git a/templates/base/layouts/activity-panel/layout.html.twig b/templates/base/layouts/activity-panel/layout.html.twig
index f24b48936..66e927d3c 100644
--- a/templates/base/layouts/activity-panel/layout.html.twig
+++ b/templates/base/layouts/activity-panel/layout.html.twig
@@ -17,6 +17,7 @@
                     <a href="#" class="ibo-activity-panel--tab-title" data-role="ibo-activity-panel--tab-title">
                         <span class="ibo-activity-panel--tab-title-decoration" data-role="ibo-activity-panel--tab-title-decoration"></span>
                         <span class="ibo-activity-panel--tab-title-text" data-role="ibo-activity-panel--tab-title-text" title="{{ aCaseLogData.title }}">{{ aCaseLogData.title }}</span>
+                        <span class="ibo-activity-panel--tab-title-messages-count" data-role="ibo-activity-panel--tab-title-messages-count" data-messages-count="{{ aCaseLogData.total_messages_count }}">{{ aCaseLogData.total_messages_count }}</span>
                         <span class="ibo-activity-panel--tab-title-draft-indicator"
                               data-role="ibo-activity-panel--tab-title-draft-indicator"
                               data-tooltip-content="{{ 'UI:Layout:ActivityPanel:Tab:Log:DraftIndicator:Tooltip'|dict_s }}">