PMCORE-3356:Custom cases list does not display its tooltip

resources/assets/js/api/Menu.js

@@ -40,9 +40,27 @@ export let menu = {
             headers: {
                 'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
                 "Accept-Language": window.config.SYS_LANG
-              }
+            }
         });
     },
+    /**
+     * Get the counter of a specific custom case list
+     * @param {Object} data 
+     * @returns 
+     */
+    getTooltipCaseList(data) {
+        return axios.get(
+            window.config.SYS_SERVER_API +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/' + data.page + '/counter/caseList/' + data.id, {
+                headers: {
+                    'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
+                    "Accept-Language": window.config.SYS_LANG
+                }
+            }
+        );
+    },
     /**
      * Get the highlight
      * @returns 

resources/assets/js/components/menu/CustomSidebarMenuItem.vue

@@ -39,15 +39,10 @@
                         "
                     >
                         <span :class="item.specialType != 'header'?'vsm--title': 'vsm--header vsm--title--header'">
-                            <template v-if="itemTaskList">
-                                <custom-tooltip
-                                    :data="item"
-                                    ref="tooltip"
-                                ></custom-tooltip>
-                            </template>
-                            <template v-else>
-                                <span> {{ item.title }} </span>
-                            </template>
+                            <custom-tooltip
+                                :data="item"
+                                ref="tooltip"
+                            ></custom-tooltip>
                             <b-icon
                                 v-if="item.sortable"
                                 :icon="item.sortIcon"

resources/assets/js/components/utils/CustomTooltip.vue

@@ -12,6 +12,9 @@
             v-if="showTooltip"
         >
             {{ labelTooltip }}
+            <p v-if="labelDescription !== ''">
+                {{ labelDescription }}
+            </p>
         </b-tooltip>
     </span>
 </template>
@@ -27,6 +30,7 @@ export default {
     data() {
         return {
             labelTooltip: "",
+            labelDescription: "",
             hovering: "",
             show: false,
             menuMap: {
@@ -54,6 +58,7 @@ export default {
          */
         unhoverHandler() {
             this.labelTooltip = "";
+            this.labelDescription = "";
             this.showTooltip = false;
             this.isLoading = false;
             clearTimeout(this.hovering);
@@ -63,11 +68,21 @@ export default {
          */
         setTooltip() {
             let that = this;
-            api.menu.getTooltip(that.data.page).then((response) => {
-                that.showTooltip = true;
-                that.isLoading = false;
-                that.labelTooltip = response.data.label;
-            });
+            if (this.menuMap[this.data.id]) {
+                api.menu.getTooltip(that.data.page).then((response) => {
+                    that.showTooltip = true;
+                    that.isLoading = false;
+                    that.labelTooltip = response.data.label;
+                });
+            } else {
+                api.menu.getTooltipCaseList(that.data)
+                .then((response) => {
+                    that.showTooltip = true;
+                    that.isLoading = false;
+                    that.labelTooltip = response.data.label;
+                    that.labelDescription = response.data.description;
+                });
+            }
         },
         /**
          * Set bold the label