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

CR
2022-09-05 11:04:44 -04:00
parent e4d49b0844
commit ea7af90f01
7 changed files with 57 additions and 164 deletions
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/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 v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
+            <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
        </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;
-            this.dataEllipsis = {
+            return {
+                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();
--- a/resources/assets/js/components/utils/ellipsis.vue
+++ b/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;
--- a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
+++ b/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
-                        v-if="dataEllipsis"
-                        :data="dataEllipsis"
-                        :ref="'ellipsis' + props.row.APP_UID"
-                    >
-                    </ellipsis>
-                </div>
+                <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
            </div>
        </v-server-table>
        <VueCardView
@@ -160,12 +153,7 @@
                        </div>
                    </b-col>
                    <b-col sm="12">
-                        <div @mouseover="updateDataEllipsis(props.item)">
-                            <ellipsis 
-                                v-if="dataEllipsis" 
-                                :data="dataEllipsis">
-                            </ellipsis>
-                        </div>
+                        <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
                    </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-                </div>
+                <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
            </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) {
-            this.showEllipsis = !this.showEllipsis;
-            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;
-            }
+        updateDataEllipsis(data) {
+            return this.ellipsisItemFactory(data, this.data.pageParent);
        },
        /**
         * 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",
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/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 v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
      </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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;
-      this.dataEllipsis = {
+      return {
+        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
--- a/resources/assets/js/home/Inbox/Inbox.vue
+++ b/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 v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
      </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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;
-      this.dataEllipsis = {
+      return {
+        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
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/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 v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
      </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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;
-      this.dataEllipsis = {
+      return {
+        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
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/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 v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
-        </div>
+        <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
      </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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 v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-            </div>
+            <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
          </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;
-      this.dataEllipsis = {
+      return {
+        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