PMCORE-3956:Tasks > Many options are displaying in the Cases List when columns are hiding or showing

CR

resources/assets/js/admin/settings/customCaseList/Tables.vue

@@ -12,9 +12,7 @@
         ref="table" 
     >
         <div slot="actions" slot-scope="props">
-            <div @mouseenter="updateDataEllipsis(props.row)" @mouseleave="showEllipsis = false">
+            <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
         </div>
         <div slot="owner" slot-scope="props">
             <OwnerCell :data="props.row.owner" />
@@ -46,10 +44,6 @@ export default {
     },
     data() {
         return {
-            dataEllipsis: {
-                buttons: {}
-            },
-            showEllipsis: false,
             newList: {
                 title: this.$i18n.t("New List"),
                 class: "btn-success",
@@ -278,8 +272,8 @@ export default {
         */
         updateDataEllipsis(data) {
             let that = this;
-            this.showEllipsis = !this.showEllipsis;
+            return {
-            this.dataEllipsis = {
+                APP_UID: data.id,
                 buttons: {
                     note: {
                         name: "edit",
@@ -313,17 +307,6 @@ export default {
                     }
                 }
             }
-            if (this.showEllipsis) {
-                for (let ellipsis in this.$refs) {
-                    if (!ellipsis.indexOf('ellipsis')) {
-                        if (ellipsis !== 'ellipsis' + data.APP_UID) {
-                            this.$refs[ellipsis].hideActionButtons();
-                        }
-                    }
-                }
-                this.showEllipsis = false;
-            }
-            
         },
         importCustomCaseList() {
             this.$refs["modal-import"].show();

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

@@ -3,7 +3,7 @@
         <div 
             class="ellipsis-button align-middle"
             v-show="!showActions"
-            @mouseover="showActionButtons"
+            @mouseenter="showActionButtons"
         >
             <span>
                 <i class="fas fa-ellipsis-v"></i>
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import eventBus from "./../../home/EventBus/eventBus"
 export default {
     name: "Ellipsis",
     props: {
@@ -44,7 +45,16 @@ export default {
             showActions: false
         }
     },
-    mounted () {},
+    mounted () {
+        eventBus.$on('closeEllipsis', this.hideActionButtons);
+    },
+    deactivated () {
+        eventBus.$off('closeEllipsis', this.hideActionButtons);
+    },
+    destroyed () {
+        eventBus.$off('closeEllipsis', this.hideActionButtons);
+    },
+
     methods: {
         /**
          * Callback function from parent
@@ -63,6 +73,7 @@ export default {
             this.showActions = true;
             if (this.showActions) {
                 if (this.$parent.Row !== undefined) {
+                    eventBus.$emit('closeEllipsis', this.data);
                     for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
                         this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
                     }
@@ -82,16 +93,20 @@ export default {
         },
         /**
          * Hide action buttons
+         * @param {object} dataE
          */
-        hideActionButtons() {
+        hideActionButtons(dataE) {
             var i,
                 elelemts;
-            this.showActions = false;
             if (this.$parent.Row !== undefined) {
+                if (this.data.APP_UID !== dataE.APP_UID) {
+                    this.showActions = false;
                     for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
                         this.$parent.$parent.$parent.$children[i].$el.style.opacity = 1
                     }
+                }
             } else if (this.$parent.item !== undefined) {
+                this.showActions = false;
                 if (this.$parent.$parent.$parent.$refs.vueListView !== undefined) {
                     elelemts = this.$parent.$el.getElementsByClassName('col-sm-5');
                     elelemts[0].style.opacity = 1;

resources/assets/js/home/CustomCaseList/CustomCaseList.vue

@@ -128,14 +128,7 @@
                 slot="actions"
                 slot-scope="props"
             >
-                <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
+                <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-                    <ellipsis
-                        v-if="dataEllipsis"
-                        :data="dataEllipsis"
-                        :ref="'ellipsis' + props.row.APP_UID"
-                    >
-                    </ellipsis>
-                </div>
             </div>
         </v-server-table>
         <VueCardView
@@ -160,12 +153,7 @@
                         </div>
                     </b-col>
                     <b-col sm="12">
-                        <div @mouseover="updateDataEllipsis(props.item)">
+                        <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-                            <ellipsis 
-                                v-if="dataEllipsis" 
-                                :data="dataEllipsis">
-                            </ellipsis>
-                        </div>
                     </b-col>
                 </b-row>
             </b-col>
@@ -223,9 +211,7 @@
                 </div>
             </b-col>
             <b-col sm="12">
-                <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+                <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-                <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-                </div>
             </b-col>
             </b-row>
         </div>
@@ -446,10 +432,6 @@ export default {
                 PAUSED: this.$i18n.t("ID_PAUSED"),
                 UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
             },
-            dataEllipsis: {
-                buttons: {},
-            },
-            showEllipsis: false,
             dataSubtitle: {
                 subtitle: this.data.pageName,
                 icon: this.data.pageIcon,
@@ -1152,19 +1134,8 @@ export default {
          * Show options in the ellipsis
          * @param {objec} data
          */
-        updateDataEllipsis(data, view = false) {
+        updateDataEllipsis(data) {
-            this.showEllipsis = !this.showEllipsis;
+            return this.ellipsisItemFactory(data, this.data.pageParent);
-            this.dataEllipsis = this.ellipsisItemFactory(data, this.data.pageParent);
-            if (this.showEllipsis && view) {
-                for (let ellipsis in this.$refs) {
-                    if (!ellipsis.indexOf('ellipsis')) {
-                        if (ellipsis !== 'ellipsis' + data.APP_UID) {
-                            this.$refs[ellipsis].hideActionButtons();
-                        }
-                    }
-                }
-                this.showEllipsis = false;
-            }
         },
         /**
          * Show the alert message
@@ -1229,6 +1200,7 @@ export default {
           let that = this;
           let dataEllipsisMap = {
             inbox: {
+              APP_UID: data.APP_UID,
               buttons: {
                   open: {
                       name: "open",
@@ -1261,6 +1233,7 @@ export default {
               },
             },
             draft: {
+              APP_UID: data.APP_UID,
               buttons: {
                 open: {
                   name: "open",
@@ -1279,6 +1252,7 @@ export default {
               }
             },
             paused: {
+              APP_UID: data.APP_UID,  
               buttons: {
                 note: {
                   name: "case note",
@@ -1304,6 +1278,7 @@ export default {
               }
             },
             unassigned: {
+              APP_UID: data.APP_UID,  
               buttons: {
                 note: {
                   name: "case note",

resources/assets/js/home/Draft/Draft.vue

@@ -96,9 +96,7 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
       </div>
     </v-server-table>
     <VueCardView
@@ -118,9 +116,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -249,9 +245,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -502,10 +496,6 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: {
-        buttons: {}
-      },
-      showEllipsis: false,
       dataSubtitle: null,
       hiddenItems: ['bySendBy']
     };
@@ -806,10 +796,10 @@ export default {
      * Show options in the ellipsis
      * @param {object} data
      */
-    updateDataEllipsis(data, view = false) {
+    updateDataEllipsis(data) {
       let that = this;
-      this.showEllipsis = !this.showEllipsis;
+      return {
-      this.dataEllipsis = {
+        APP_UID: data.APP_UID,
         buttons: {
           open: {
             name: "open",
@@ -827,16 +817,6 @@ export default {
           },
         }
       }
-      if (this.showEllipsis && view) {
-        for (let ellipsis in this.$refs) {
-          if (!ellipsis.indexOf('ellipsis')) {
-            if (ellipsis !== 'ellipsis' + data.APP_UID) {
-              this.$refs[ellipsis].hideActionButtons();
-            }
-          }
-        }
-        this.showEllipsis = false;
-      }
     },
     /**
      * Show the alert message

resources/assets/js/home/Inbox/Inbox.vue

@@ -119,9 +119,7 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
       </div>
     </v-server-table>
     <VueCardView
@@ -141,9 +139,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -285,9 +281,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -564,10 +558,6 @@ export default {
         PAUSED: this.$i18n.t("ID_PAUSED"),
         UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
       },
-      dataEllipsis: {
-        buttons: {}
-      },
-      showEllipsis: false,
       dataSubtitle: null,
     };
   },
@@ -932,10 +922,10 @@ export default {
      * Show options in the ellipsis 
      * @param {objec} data
      */
-    updateDataEllipsis(data, view = false) {
+    updateDataEllipsis(data) {
       let that = this;
-      this.showEllipsis = !this.showEllipsis;
+      return {
-      this.dataEllipsis = {
+        APP_UID: data.APP_UID,
         buttons: {
           open: {
             name: "open",
@@ -967,16 +957,6 @@ export default {
           }
         }
       }
-      if (this.showEllipsis && view) {
-        for (let ellipsis in this.$refs) {
-          if (!ellipsis.indexOf('ellipsis')) {
-            if (ellipsis !== 'ellipsis' + data.APP_UID) {
-              this.$refs[ellipsis].hideActionButtons();
-            }
-          }
-        }
-        this.showEllipsis = false;
-      }
     },
       /**
        * Show the alert message

resources/assets/js/home/Paused/Paused.vue

@@ -118,9 +118,7 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
       </div>
     </v-server-table>
     <VueCardView
@@ -140,9 +138,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -267,9 +263,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -530,10 +524,6 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: {
-        buttons: {}
-      },
-      showEllipsis: false,
       dataSubtitle: null
     };
   },
@@ -888,10 +878,10 @@ export default {
      * Show options in the ellipsis 
      * @param {object} data
      */
-    updateDataEllipsis(data, view = false) {
+    updateDataEllipsis(data) {
       let that = this;
-      this.showEllipsis = !this.showEllipsis;
+      return {
-      this.dataEllipsis = {
+        APP_UID: data.APP_UID,
         buttons: {
           note: {
             name: "case note",
@@ -916,16 +906,6 @@ export default {
           }
         }
       }
-      if (this.showEllipsis && view) {
-        for (let ellipsis in this.$refs) {
-          if (!ellipsis.indexOf('ellipsis')) {
-            if (ellipsis !== 'ellipsis' + data.APP_UID) {
-              this.$refs[ellipsis].hideActionButtons();
-            }
-          }
-        }
-        this.showEllipsis = false;
-      }
     },
     /**
      * Show the alert message

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -107,9 +107,7 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
       </div>
     </v-server-table>
     <VueCardView
@@ -129,9 +127,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -273,9 +269,7 @@
             </div>
           </b-col>
           <b-col sm="12">
-            <div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
           </b-col>
         </b-row>
       </div>
@@ -549,10 +543,6 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: {
-        buttons: {}
-      },
-      showEllipsis: false,
       dataSubtitle: null
     };
   },
@@ -879,10 +869,10 @@ export default {
      * Show options in the ellipsis 
      * @param {object} data
      */
-    updateDataEllipsis(data, view = false) {
+    updateDataEllipsis(data) {
       let that = this;
-      this.showEllipsis = !this.showEllipsis;
+      return {
-      this.dataEllipsis = {
+        APP_UID: data.APP_UID,
         buttons: {
           note: {
             name: "case note",
@@ -900,16 +890,6 @@ export default {
           }
         }
       }
-      if (this.showEllipsis && view) {
-        for (let ellipsis in this.$refs) {
-          if (!ellipsis.indexOf('ellipsis')) {
-            if (ellipsis !== 'ellipsis' + data.APP_UID) {
-              this.$refs[ellipsis].hideActionButtons();
-            }
-          }
-        }
-        this.showEllipsis = false;
-      }
     },
     /**
      * Show the alert message