From 10883dcf7a2a1f77ac26fc117788944ed715a312 Mon Sep 17 00:00:00 2001
From: Fabio Guachalla <fabio.guachalla@processmaker.com>
Date: Fri, 8 Oct 2021 12:54:24 -0400
Subject: [PATCH] PMCORE-3402:Task Action Options should be displayed when
 mouse is over ellipsis and closed when ellipsis lose focus

Custom case list

CR
---
 .../js/admin/Modals/ModalDeleteCaseList.vue    |  1 -
 .../admin/settings/customCaseList/Tables.vue   |  4 ++--
 .../assets/js/components/utils/ellipsis.vue    | 18 ++++++------------
 .../js/home/CustomCaseList/CustomCaseList.vue  | 10 ++++------
 resources/assets/js/home/Draft/Draft.vue       | 12 ++++++------
 resources/assets/js/home/Home.vue              |  2 +-
 resources/assets/js/home/Inbox/Inbox.vue       | 12 ++++++------
 resources/assets/js/home/Paused/Paused.vue     | 12 ++++++------
 .../assets/js/home/Unassigned/Unassigned.vue   | 12 ++++++------
 .../assets/js/home/modal/ModalClaimCase.vue    |  1 -
 .../assets/js/home/modal/ModalPauseCase.vue    |  1 -
 .../assets/js/home/modal/ModalReassignCase.vue |  1 -
 .../assets/js/home/modal/ModalUnpauseCase.vue  |  1 -
 13 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue b/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
index e0deaf197..2567a20ad 100644
--- a/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
+++ b/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
@@ -58,7 +58,6 @@ export default {
                 if (response.statusText === "OK" || response.status === 200) {
                     that.$refs["modal-delete-list"].hide();
                     that.$parent.$refs["table"].getData();
-                    that.$parent.$refs['ellipsis-' + that.data.id].hideActionButtons();
                 }
             });
         }
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index 59d34a59b..a22fe8d6e 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -12,8 +12,8 @@
         ref="table" 
     >
         <div slot="actions" slot-scope="props">
-            <div @click="updateDataEllipsis(props.row)">
-                <ellipsis :ref="`ellipsis-${props.row.id}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div @mouseover="updateDataEllipsis(props.row)">
+                <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
         </div>
         <div slot="owner" slot-scope="props">
diff --git a/resources/assets/js/components/utils/ellipsis.vue b/resources/assets/js/components/utils/ellipsis.vue
index c47997d9c..d1480f1e6 100644
--- a/resources/assets/js/components/utils/ellipsis.vue
+++ b/resources/assets/js/components/utils/ellipsis.vue
@@ -6,6 +6,7 @@
                     class="v-inline"
                     v-show="showActions"
                     ref="ellipsis"
+                    @mouseleave="hideActionButtons"
                 >
                     <div class="buttonGroup">
                         <b-button
@@ -23,16 +24,16 @@
         <div 
             class="ellipsis-button align-middle"
             v-show="!showActions"
+            @mouseover="showActionButtons"
         >
-            <div @click="showActionButtons()">
+            <span>
                 <i class="fas fa-ellipsis-v"></i>
-            </div>
+            </span>
         </div>
     </div>
 </template>
 
 <script>
-import eventBus from '../../home/EventBus/eventBus';
 export default {
     name: "Ellipsis",
     props: {
@@ -43,12 +44,7 @@ export default {
             showActions: false
         }
     },
-    mounted(){
-        let that = this;
-            eventBus.$on('ellipsis::hide', (data) => {
-                that.hideActionButtons();
-            });
-    },
+    mounted () {},
     methods: {
         /**
          * Callback function from parent
@@ -63,10 +59,8 @@ export default {
          */
         showActionButtons() {
             var i,
-                showOld = this.showActions,
                 elelemts;
-            eventBus.$emit("ellipsis::hide",{});
-            this.showActions = !showOld;
+            this.showActions = true;
             if (this.showActions) {
                 if (this.$parent.Row !== undefined) {
                     for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
diff --git a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
index 5bf4ebe6b..95bd8b410 100644
--- a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
+++ b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
@@ -69,9 +69,8 @@
                 {{ props.row.PRIORITY }}
             </div>
             <div slot="actions" slot-scope="props">
-                <div @click="updateDataEllipsis(props.row)">
+                <div @mouseover="updateDataEllipsis(props.row)">
                     <ellipsis
-                        :ref="`ellipsis-${props.row.APP_UID}`"
                         v-if="dataEllipsis"
                         :data="dataEllipsis"
                     >
@@ -100,9 +99,8 @@
                         </div>
                     </b-col>
                     <b-col sm="12">
-                        <div @click="updateDataEllipsis(props.item)">
+                        <div @mouseover="updateDataEllipsis(props.item)">
                             <ellipsis 
-                                :ref="`ellipsis-${props.item.APP_UID}`"
                                 v-if="dataEllipsis" 
                                 :data="dataEllipsis">
                             </ellipsis>
@@ -158,8 +156,8 @@
                 </div>
             </b-col>
             <b-col sm="12">
-                <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-                <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+                <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+                <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
                 </div>
             </b-col>
             </b-row>
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 8bd9298ec..4e0f568ea 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -59,8 +59,8 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        <div @mouseover="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -77,8 +77,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -151,8 +151,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 76eb52d42..a71391c07 100755
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -295,7 +295,7 @@ export default {
             } else {
                 this.page = "MyCases";
             }
-            if (window.config._nodeId === "CASES_SENT" && this.defaultOption !== "") {
+            if (window.config._nodeId === "CASES_SENT" && this.defaultOption.indexOf('openApplicationUid') > 0) {
                 this.cleanDefaultOption();
                 this.showAlert(this.$i18n.t("ID_NO_PERMISSION_NO_PARTICIPATED_CASES"));
             }
diff --git a/resources/assets/js/home/Inbox/Inbox.vue b/resources/assets/js/home/Inbox/Inbox.vue
index 28d97f8df..7ef212d47 100644
--- a/resources/assets/js/home/Inbox/Inbox.vue
+++ b/resources/assets/js/home/Inbox/Inbox.vue
@@ -67,8 +67,8 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        <div @mouseover="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -85,8 +85,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -166,8 +166,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index 984ae4cd7..f5f0bc717 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -66,8 +66,8 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        <div @mouseover="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -84,8 +84,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -165,8 +165,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index f0553d2ce..835252f4b 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -61,8 +61,8 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        <div @mouseover="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -79,8 +79,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -160,8 +160,8 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
diff --git a/resources/assets/js/home/modal/ModalClaimCase.vue b/resources/assets/js/home/modal/ModalClaimCase.vue
index 519455a8d..cb8b2da5e 100644
--- a/resources/assets/js/home/modal/ModalClaimCase.vue
+++ b/resources/assets/js/home/modal/ModalClaimCase.vue
@@ -59,7 +59,6 @@ export default {
       api.cases.claim(this.data).then((response) => {
         if (response.status === 200) {
           that.$refs["modal-claim-case"].hide();
-          that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
           if (that.$parent.$refs["vueTable"] !== undefined) {
             that.$parent.$refs["vueTable"].getData();
           }
diff --git a/resources/assets/js/home/modal/ModalPauseCase.vue b/resources/assets/js/home/modal/ModalPauseCase.vue
index 158e252a2..cfe85dc18 100644
--- a/resources/assets/js/home/modal/ModalPauseCase.vue
+++ b/resources/assets/js/home/modal/ModalPauseCase.vue
@@ -166,7 +166,6 @@ export default {
         .then((response) => {
           if (response.statusText == "OK" || response.status === 200) {
             that.$refs["modal-pause-case"].hide();
-            that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
             if (that.$parent.$refs["vueTable"] !== undefined) {
               that.$parent.$refs["vueTable"].getData();
             }
diff --git a/resources/assets/js/home/modal/ModalReassignCase.vue b/resources/assets/js/home/modal/ModalReassignCase.vue
index 75c8cc491..8fcd08b57 100644
--- a/resources/assets/js/home/modal/ModalReassignCase.vue
+++ b/resources/assets/js/home/modal/ModalReassignCase.vue
@@ -149,7 +149,6 @@ export default {
       api.cases.reassingCase(this.data).then((response) => {
         if (response.statusText == "OK" || response.status === 200) {
           that.$refs["modal-reassign-case"].hide();
-          that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
           if (that.$parent.$refs["vueTable"] !== undefined) {
             that.$parent.$refs["vueTable"].getData();
           }
diff --git a/resources/assets/js/home/modal/ModalUnpauseCase.vue b/resources/assets/js/home/modal/ModalUnpauseCase.vue
index a23ff0eca..8cadddeb3 100644
--- a/resources/assets/js/home/modal/ModalUnpauseCase.vue
+++ b/resources/assets/js/home/modal/ModalUnpauseCase.vue
@@ -55,7 +55,6 @@ export default {
       api.cases.unpause(this.data).then((response) => {
         if (response.statusText == "OK" || response.status === 200) {
           that.$refs["modal-unpause-case"].hide();
-          that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
           if (that.$parent.$refs["vueTable"] !== undefined) {
             that.$parent.$refs["vueTable"].getData();
           }