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

Complete case list

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

@@ -12,8 +12,8 @@
         ref="table" 
     >
         <div slot="actions" slot-scope="props">
-            <div @mouseover="updateDataEllipsis(props.row)">
+            <div @mouseenter="updateDataEllipsis(props.row)" @mouseleave="showEllipsis = false">
-                <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
         </div>
         </div>
         <div slot="owner" slot-scope="props">
@@ -279,7 +279,6 @@ export default {
         updateDataEllipsis(data) {
             let that = this;
             this.showEllipsis = !this.showEllipsis;
-            if (this.showEllipsis) {
             this.dataEllipsis = {
                 buttons: {
                     note: {
@@ -314,7 +313,17 @@ 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();
@@ -323,6 +332,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .float-right {
     padding-left: 1.5%;
 }

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

@@ -1,5 +1,14 @@
 <template>
     <div>
+        <div 
+            class="ellipsis-button align-middle"
+            v-show="!showActions"
+            @mouseover="showActionButtons"
+        >
+            <span>
+                <i class="fas fa-ellipsis-v"></i>
+            </span>
+        </div>
         <div class="float-right" v-show="showActions">
             <transition name="fade">
                 <div
@@ -21,15 +30,6 @@
                 </div>
             </transition>
         </div>
-        <div 
-            class="ellipsis-button align-middle"
-            v-show="!showActions"
-            @mouseover="showActionButtons"
-        >
-            <span>
-                <i class="fas fa-ellipsis-v"></i>
-            </span>
-        </div>
     </div>
 </template>
 
@@ -124,6 +124,7 @@ export default {
         z-index: 999;
         display: inline-flex !important;
         opacity: 1 !important;
+        height: 50px !important;
     }
     .btn-outline-info {
         border: none;

resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue

@@ -662,6 +662,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .VuePagination__count {
     display: none;
 }

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

@@ -128,10 +128,11 @@
                 slot="actions"
                 slot-scope="props"
             >
-                <div @mouseover="updateDataEllipsis(props.row)">
+                <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
                     <ellipsis
                         v-if="dataEllipsis"
                         :data="dataEllipsis"
+                        :ref="'ellipsis' + props.row.APP_UID"
                     >
                     </ellipsis>
                 </div>
@@ -1151,10 +1152,18 @@ export default {
          * Show options in the ellipsis
          * @param {objec} data
          */
-        updateDataEllipsis(data) {
+        updateDataEllipsis(data, view = false) {
             this.showEllipsis = !this.showEllipsis;
-            if (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;
             }
         },
         /**
@@ -1334,6 +1343,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-todo {
     padding-top: 20px;
     padding-bottom: 20px;

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

@@ -96,8 +96,8 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseover="updateDataEllipsis(props.row)">
+        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -806,10 +806,9 @@ export default {
      * Show options in the ellipsis
      * @param {object} data
      */
-    updateDataEllipsis(data) {
+    updateDataEllipsis(data, view = false) {
       let that = this;
       this.showEllipsis = !this.showEllipsis;
-      if (this.showEllipsis) {
       this.dataEllipsis = {
         buttons: {
           open: {
@@ -828,6 +827,15 @@ 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;
       }
     },
     /**
@@ -884,6 +892,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-draft {
   padding-top: 20px;
   padding-bottom: 20px;

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

@@ -119,8 +119,8 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseover="updateDataEllipsis(props.row)">
+        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -932,10 +932,9 @@ export default {
      * Show options in the ellipsis 
      * @param {objec} data
      */
-    updateDataEllipsis(data) {
+    updateDataEllipsis(data, view = false) {
       let that = this;
       this.showEllipsis = !this.showEllipsis;
-        if (this.showEllipsis) {
       this.dataEllipsis = {
         buttons: {
           open: {
@@ -968,6 +967,15 @@ 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;
       }
     },
       /**
@@ -1024,6 +1032,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-todo {
   padding-top: 20px;
   padding-bottom: 20px;

resources/assets/js/home/MyCases/MyCases.vue

@@ -796,15 +796,13 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-mycases {
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
 }
-/*.btn-clear-sort {
-    position: fixed;
-    margin-top: 16px;
-    margin-left: -11px;
-}*/
 </style>

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

@@ -118,8 +118,8 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseover="updateDataEllipsis(props.row)">
+        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -888,10 +888,9 @@ export default {
      * Show options in the ellipsis 
      * @param {object} data
      */
-    updateDataEllipsis(data) {
+    updateDataEllipsis(data, view = false) {
       let that = this;
       this.showEllipsis = !this.showEllipsis;
-      if (this.showEllipsis) {
       this.dataEllipsis = {
         buttons: {
           note: {
@@ -917,6 +916,15 @@ 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;
       }
     },
     /**
@@ -973,6 +981,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-paused {
   padding-top: 20px;
   padding-bottom: 20px;

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

@@ -107,8 +107,8 @@
         slot="actions"
         slot-scope="props"
       >
-        <div @mouseover="updateDataEllipsis(props.row)">
+        <div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -879,10 +879,9 @@ export default {
      * Show options in the ellipsis 
      * @param {object} data
      */
-    updateDataEllipsis(data) {
+    updateDataEllipsis(data, view = false) {
       let that = this;
       this.showEllipsis = !this.showEllipsis;
-      if (this.showEllipsis) {
       this.dataEllipsis = {
         buttons: {
           note: {
@@ -901,6 +900,15 @@ 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;
       }
     },
     /**
@@ -957,6 +965,9 @@ export default {
 };
 </script>
 <style>
+.VueTables__row {
+  height: 75px;
+}
 .v-container-unassigned {
   padding-top: 20px;
   padding-bottom: 20px;