From 531fd71cb5910d65d0bdab0d99d874d3bf81e185 Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Thu, 26 Aug 2021 20:29:51 -0400
Subject: [PATCH] PMCORE-3240:UI highlight marker in the menu (inbox, draft,
 paused and unnassigned)

---
 resources/assets/js/api/Menu.js               | 16 +++++++++
 .../components/menu/CustomSidebarMenuItem.vue | 23 +++++++++++-
 .../js/components/utils/CustomTooltip.vue     | 36 ++++++++++++++-----
 resources/assets/js/home/Home.vue             | 28 +++++++++++++--
 4 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/resources/assets/js/api/Menu.js b/resources/assets/js/api/Menu.js
index 1ffcd2b0a..aa1a1be45 100644
--- a/resources/assets/js/api/Menu.js
+++ b/resources/assets/js/api/Menu.js
@@ -42,5 +42,21 @@ export let menu = {
                 "Accept-Language": window.config.SYS_LANG
               }
         });
+    },
+    /**
+     * Get the highlight
+     * @returns 
+     */
+    getHighlight() {
+        return axios.get(
+            window.config.SYS_SERVER_API +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/tasks/highlight', {
+            headers: {
+                'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
+                "Accept-Language": window.config.SYS_LANG
+              }
+        });
     }
 };
diff --git a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
index 4a937b359..340ee1b45 100644
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
@@ -37,8 +37,12 @@
                                 isMobileItem
                         "
                     >
+                    
                         <span class="vsm--title">
-                            <custom-tooltip :data="item"></custom-tooltip>
+                            <custom-tooltip
+                                :data="item"
+                                ref="tooltip"
+                            ></custom-tooltip>
                             <b-icon
                                 v-if="item.sortable"
                                 :icon="item.sortIcon"
@@ -220,6 +224,9 @@ export default {
             titleHover: "",
         };
     },
+    mounted() {
+        this.setHighlight();
+    },
     computed: {
         isCollapsed() {
             return this.$parent.isCollapsed;
@@ -293,6 +300,20 @@ export default {
         this.initState();
     },
     methods: {
+        /**
+         * set the highlight
+         */
+        setHighlight() {
+            let that = this;
+            eventBus.$on('highlight', (data) => {
+                var i;
+                for (i = 0; i < data.length; i += 1) {
+                    if (that.item.id && that.item.id === data[i].id) {
+                        that.$refs.tooltip.setHighlight()
+                    }
+                }
+            });
+        },
         /**
          * Match the route to ensure the correct location
          * @param {string} href
diff --git a/resources/assets/js/components/utils/CustomTooltip.vue b/resources/assets/js/components/utils/CustomTooltip.vue
index abb42dd3d..ecb31f6f3 100644
--- a/resources/assets/js/components/utils/CustomTooltip.vue
+++ b/resources/assets/js/components/utils/CustomTooltip.vue
@@ -2,10 +2,16 @@
     <span
         :id="`label-${data.id}`"
         @mouseover="hoverHandler"
-        :title="labelTooltip"
+        v-b-tooltip.hover
+        @mouseleave="unhoverHandler"
+        v-bind:class="{highlightText: isHighlight}"
     >
         {{ data.title }}
-        <b-tooltip :target="`label-${data.id}`" :ref="`tooltip-${data.id}`">
+        <b-tooltip
+            :target="`label-${data.id}`"
+            triggers="hoverHandler"
+            :ref="`tooltip-${data.id}`"
+        >
             {{ labelTooltip }}
         </b-tooltip>
     </span>
@@ -17,21 +23,20 @@ import api from "./../../api/index";
 export default {
     name: "CustomTooltip",
     props: {
-        data: Object,
+        data: Object
     },
     data() {
         return {
             labelTooltip: "",
+            hovering: "",
+            show: false,
             menuMap: {
                 CASES_INBOX: "inbox",
                 CASES_DRAFT: "draft",
                 CASES_PAUSED: "paused",
-                CASES_SELFSERVICE: "unassigned",
-                todo: "inbox",
-                draft: "draft",
-                paused: "paused",
-                unassigned: "unassigned",
+                CASES_SELFSERVICE: "unassigned"
             },
+            isHighlight: false
         };
     },
     methods: {
@@ -39,7 +44,7 @@ export default {
          * Delay the hover event
          */
         hoverHandler() {
-            this.setTooltip();
+            this.hovering = setTimeout(() => { this.setTooltip() }, 3000);
         },
         /**
          * Reset the delay and hide the tooltip
@@ -48,6 +53,7 @@ export default {
             let key = `tooltip-${this.data.id}`;
             this.labelTooltip = "";
             this.$refs[key].$emit("close");
+            clearTimeout(this.hovering);
         },
         /**
          * Set the label to show in the tooltip
@@ -58,8 +64,20 @@ export default {
                 let key = `tooltip-${that.data.id}`;
                 that.labelTooltip = response.data.label;
                 that.$refs[key].$emit("open");
+                that.isHighlight = false;
             });
         },
+        /**
+         * Set bold the label 
+         */
+        setHighlight() {
+            this.isHighlight = true;
+        }
     },
 };
 </script>
+<style>
+.highlightText {
+    font-weight: 900;
+}
+</style>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 42f3a47cf..ce0c20e7f 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -114,7 +114,7 @@ export default {
         this.getUserSettings();
         this.listenerIframe();
         window.setInterval(
-            this.setCounter,
+            this.getHighlight,
             parseInt(window.config.FORMATS.casesListRefreshTime) * 1000
         );
         // adding eventBus listener
@@ -155,7 +155,7 @@ export default {
                 .then((response) => {
                     this.setDefaultCasesMenu(response.data);
                     this.menu = this.mappingMenu(this.setDefaultIcon(response.data));
-                    this.setCounter();
+                    this.getHighlight();
                 })
                 .catch((e) => {
                     console.error(e);
@@ -278,6 +278,7 @@ export default {
                     );
                     data[i]["sortable"] = data[i].customCasesList.length > 1;
                     data[i]["sortIcon"] = "gear-fill";
+                    data[i]['highlight'] = false;
                     data[i] = {
                         component: CustomSidebarMenuItem,
                         props: {
@@ -479,6 +480,29 @@ export default {
         onUpdateFilters(filters) {
             this.filters = filters;
         },
+        getHighlight() {
+            let that = this;
+            if (that.menu.length > 0) {
+            api.menu
+            .getHighlight()
+            .then((response) => {
+                var i,
+                    dataHighlight = [];
+                for (i = 0; i < response.data.length; i += 1) {
+                    if (response.data[i].highlight) {
+                        dataHighlight.push({
+                            id: that.menuMap[response.data[i].item],
+                            highlight: response.data[i].highlight
+                        });
+                    }
+                }
+                eventBus.$emit('highlight', dataHighlight);
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+            }
+        }
     }
 };
 </script>