From 16a16e2ec6e5622466d0deb65ef2fa9a385c0f7e Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Thu, 22 Jul 2021 16:12:03 -0400
Subject: [PATCH] PMCORE-3065

Corrections

CR

Corrections

remove ref
---
 resources/assets/js/api/Menu.js               | 17 +++++
 .../components/menu/CustomSidebarMenuItem.vue |  8 ++-
 .../js/components/utils/CustomTooltip.vue     | 71 +++++++++++++++++++
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/js/components/utils/CustomTooltip.vue

diff --git a/resources/assets/js/api/Menu.js b/resources/assets/js/api/Menu.js
index 6b5d5ab6c..1ffcd2b0a 100644
--- a/resources/assets/js/api/Menu.js
+++ b/resources/assets/js/api/Menu.js
@@ -25,5 +25,22 @@ export let menu = {
                 "Accept-Language": window.config.SYS_LANG
               }
         });
+    },
+    /**
+     * Get the counter of a specific task
+     * @param {string} task 
+     * @returns 
+     */
+    getTooltip(task) {
+        return axios.get(
+            window.config.SYS_SERVER_API +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/'+ task +'/counter', {
+            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 ecd34f17d..1f9f49ba9 100644
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
@@ -34,7 +34,7 @@
                         "
                     >
                         <span class="vsm--title">
-                            {{ item.title }}
+                            <custom-tooltip :data="item"></custom-tooltip>
                             <b-icon
                                 v-if="item.sortable"
                                 :icon="item.sortIcon"
@@ -139,7 +139,7 @@
                     </div>
                 </draggable>
 
-                <template #modal-footer="{ ok, cancel, hide }">
+                <template #modal-footer="{ cancel }">
                     <b-button size="sm" variant="danger" @click="cancel()">
                         Cancel
                     </b-button>
@@ -153,6 +153,8 @@
 import draggable from "vuedraggable";
 import CustomSidebarMenuLink from "./CustomSidebarMenuLink";
 import CustomSidebarMenuIcon from "./CustomSidebarMenuIcon";
+import CustomTooltip from "./../utils/CustomTooltip.vue";
+
 export default {
     name: "CustomSidebarMenuItem",
     props: {
@@ -201,6 +203,7 @@ export default {
         draggable,
         CustomSidebarMenuLink,
         CustomSidebarMenuIcon,
+        CustomTooltip
     },
     data() {
         return {
@@ -210,6 +213,7 @@ export default {
             itemHover: false,
             exactActive: false,
             active: false,
+            titleHover: '',
         };
     },
     computed: {
diff --git a/resources/assets/js/components/utils/CustomTooltip.vue b/resources/assets/js/components/utils/CustomTooltip.vue
new file mode 100644
index 000000000..670ec7c37
--- /dev/null
+++ b/resources/assets/js/components/utils/CustomTooltip.vue
@@ -0,0 +1,71 @@
+<template>
+    <span
+        :id="data.id"
+        @mouseover="hoverHandler"
+        v-b-tooltip.hover
+        :title="labelTooltip"
+        @mouseleave="unhoverHandler"
+    >
+        {{ data.title }}
+    <b-tooltip
+        :target="data.id"
+        triggers="hoverHandler"
+        :show.sync="show"
+    >
+        {{ labelTooltip }}
+    </b-tooltip>
+    </span>
+    
+</template>
+
+<script>
+import api from "./../../api/index";
+
+export default {
+    name: "CustomTooltip",
+    props: {
+        data: Object,
+    },
+    data() {
+        return {
+            labelTooltip: "",
+            hovering: "",
+            show: false,
+            menuMap: {
+                CASES_INBOX: "inbox",
+                CASES_DRAFT: "draft",
+                CASES_PAUSED: "paused",
+                CASES_SELFSERVICE: "unassigned"
+            }
+        }
+    },
+    methods: {
+        /**
+         * Delay the hover event
+         */
+        hoverHandler() {
+            this.hovering = setTimeout(() => { this.setTooltip() }, 3000);
+        },
+        /**
+         * Reset the delay and hide the tooltip
+         */
+        unhoverHandler() {
+            this.labelTooltip = "";
+            this.show = false;
+            clearTimeout(this.hovering);
+        },
+        /**
+         * Set the label to show in the tooltip
+         */
+        setTooltip() {
+            let that = this;
+            api.menu
+                .getTooltip(that.menuMap[that.data.id])
+                .then((response) => {
+                    that.labelTooltip = response.data.label;
+                    that.show = true;
+                });
+        },
+    }
+}
+</script>