PMCORE-3162:improvement to ellipsis component

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

@@ -5,48 +5,14 @@
                 class="v-inline"
                 v-show="showActions"
             >
-                <div class="buttonGroup" @focus="hidebuttonsAction()">
+                <div class="buttonGroup">
                     <b-button
-                        v-if="data.showClaim"
+                        v-for="item in data.buttons"
+                        :key="item.name"
                         variant="outline-info"
-                        @click="claimCase"
+                        @click="executeFunction(item.fn)"
                     >
-                        <i class="fas fa-briefcase"></i>
+                        <i :class="item.icon"></i>
-                    </b-button>
-                    <b-button
-                        v-if="data.showOpen"
-                        variant="outline-info"
-                        @click="openCase"
-                    >
-                        <i class="far fa-edit"></i>
-                    </b-button>
-                    <b-button
-                        v-show="data.showPlay"
-                        variant="outline-info"
-                        @click="unPauseCase"
-                    >
-                        <i class="far fa-play-circle"></i>
-                    </b-button>
-                    <b-button
-                        v-show="data.showPause"
-                        variant="outline-info"
-                        @click="pauseCase"
-                    >
-                        <i class="far fa-pause-circle"></i>
-                    </b-button>
-                    <b-button
-                        v-show="data.showReassign"
-                        variant="outline-info"
-                        @click="reassingCase"
-                    >
-                        <i class="fas fa-redo"></i>
-                    </b-button>
-                    <b-button
-                        v-show="data.showNote"
-                        variant="outline-info"
-                        @click="openCaseNote"
-                    >
-                        <i class="far fa-comments"></i>
                     </b-button>
                 </div>
             </div>
@@ -71,6 +37,14 @@ export default {
         }
     },
     methods: {
+        /**
+         * Callback function from parent
+         */
+        executeFunction(fn) {
+            if (fn) {
+                fn();
+            }
+        },
         /**
          * Show the action buttons by row
          */
@@ -95,54 +69,6 @@ export default {
                     this.$parent.$parent.$parent.$children[i].$el.style.opacity = 1
                 }
         },
-        /**
-         * Call the event to reassign a case
-         */
-        reassingCase() {
-            this.hideActionButtons();
-            console.log("Action Reassing Case");
-            console.log(this.data);
-        },
-        /**
-         * Call the event to open a case
-         */
-        openCase() {
-            this.hideActionButtons();
-            console.log("Action Open Case");
-            console.log(this.data);
-        },
-        /**
-         * Call the event to unpause a case
-         */
-        unPauseCase() {
-            this.hideActionButtons();
-            console.log("Action Unpause Case");
-            console.log(this.data);
-        },
-        /**
-         * Call the event to pause a case
-         */
-        pauseCase() {
-            this.hideActionButtons();
-            console.log("Action Pause Case");
-            console.log(this.data);
-        },
-        /**
-         * Call the event to open case note
-         */
-        openCaseNote() {
-            this.hideActionButtons();
-            console.log("Action Case Note");
-            console.log(this.data);
-        },
-        /**
-         * Call the event to claim a case
-         */
-        claimCase() {
-            this.hideActionButtons();
-            console.log("Action Claim Case");
-            console.log(this.data);
-        }
     }
 }
 </script>

resources/assets/js/home/Draft.vue

@@ -123,7 +123,10 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: null,
+      dataEllipsis: {
+        buttons: {}
+      },
+      showEllipsis: false
     };
   },
   created() {
@@ -131,7 +134,6 @@ export default {
   },
   mounted() {
     this.openDefaultCase();
-    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -329,33 +331,28 @@ export default {
       this.$refs["vueTable"].getData();
     },
     /**
-     * set data by default in the ellipsis component 
+     * Show options in the ellipsis 
-     */
-    setDataEllipsis() {
-      this.dataEllipsis = {
-        showNote: false,
-        showReassign: false,
-        showPause: false,
-        showPlay: false,
-        showOpen: false,
-        showClaim: false
-      }
-    },
-    /**
-     * 
      */
     updateDataEllipsis(data) {
+      let that = this;
+      this.showEllipsis = !this.showEllipsis;
+      if (this.showEllipsis) {
         this.dataEllipsis = {
-        APP_UID: data.APP_UID || "",
+          buttons: {
-        PRO_UID: data.PRO_UID || "",
+            open: {
-        showOpen: true,
+              name: "open",
-        showNote: true,
+              icon: "far fa-edit",
-        showPlay: false,
+              fn: function() {console.log(data.APP_UID);}
-        showReassign: false,
+            },
-        showPause: false,
+            note: {
-        showClaim: false
+              name: "case note",
-      };
+              icon: "far fa-comments",
+              fn: function() {console.log("comments");}
+            },
           }
+        }
+      }
+    },
   },
 };
 </script>

resources/assets/js/home/Paused.vue

@@ -142,7 +142,10 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: null,
+      dataEllipsis: {
+        buttons: {}
+      },
+      showEllipsis: false
     };
   },
   created() {
@@ -151,7 +154,6 @@ export default {
   mounted() {
     // force to open case
     this.openDefaultCase();
-    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -360,33 +362,33 @@ export default {
       this.$refs["vueTable"].getData();
     },
     /**
-     * set data by default in the ellipsis component 
+     * Show options in the ellipsis 
-     */
-    setDataEllipsis() {
-      this.dataEllipsis = {
-        showNote: false,
-        showReassign: false,
-        showPause: false,
-        showPlay: false,
-        showOpen: false,
-        showClaim: false
-      }
-    },
-    /**
-     * 
      */
     updateDataEllipsis(data) {
+      let that = this;
+      this.showEllipsis = !this.showEllipsis;
+      if (this.showEllipsis) {
         this.dataEllipsis = {
-        APP_UID: data.APP_UID || "",
+          buttons: {
-        PRO_UID: data.PRO_UID || "",
+            note: {
-        showOpen: false,
+              name: "case note",
-        showNote: true,
+              icon: "far fa-comments",
-        showPlay: true,
+              fn: function() {console.log("comments");}
-        showReassign: true,
+            },
-        showPause: false,
+            play: {
-        showClaim: false
+              name: "play case",
-      };
+              icon: "far fa-play-circle",
+              fn: function() {console.log("play case");}
+            },
+            reassign: {
+              name: "reassign case",
+              icon: "fas fa-redo",
+              fn: function() {console.log("reassign case");}
             }
+          }
+        }
+      }
+    },
   },
 };
 </script>

resources/assets/js/home/Todo.vue

@@ -139,7 +139,10 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: null
+      dataEllipsis: {
+        buttons: {}
+      },
+      showEllipsis: false
     };
   },
   created() {
@@ -148,7 +151,6 @@ export default {
   mounted() {
     // force to open case
     this.openDefaultCase();
-    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -354,33 +356,33 @@ export default {
       this.$refs["vueTable"].getData();
     },
     /**
-     * set data by default in the ellipsis component 
+     * Show options in the ellipsis 
-     */
-    setDataEllipsis() {
-      this.dataEllipsis = {
-        showNote: false,
-        showReassign: false,
-        showPause: false,
-        showPlay: false,
-        showOpen: false,
-        showClaim: false
-      }
-    },
-    /**
-     * 
      */
     updateDataEllipsis(data) {
+      let that = this;
+      this.showEllipsis = !this.showEllipsis;
+      if (this.showEllipsis) {
         this.dataEllipsis = {
-        APP_UID: data.APP_UID || "",
+          buttons: {
-        PRO_UID: data.PRO_UID || "",
+            open: {
-        showOpen: true,
+              name: "open",
-        showNote: true,
+              icon: "far fa-edit",
-        showPlay: false,
+              fn: function() {console.log(data.APP_UID);}
-        showReassign: true,
+            },
-        showPause: true,
+            note: {
-        showClaim: false
+              name: "case note",
-      };
+              icon: "far fa-comments",
+              fn: function() {console.log("comments");}
+            },
+            pause: {
+              name: "pause case",
+              icon: "far fa-pause-circle",
+              fn: function() {console.log("pause case");}
             }
+          }
+        }
+      }
+    },
   },
 };
 </script>

resources/assets/js/home/Unassigned.vue

@@ -140,12 +140,14 @@ export default {
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
       },
-      dataEllipsis: null,
+      dataEllipsis: {
+        buttons: {}
+      },
+      showEllipsis: false
     };
   },
   mounted() {
     this.initFilters();
-    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -338,29 +340,39 @@ export default {
      */
     setDataEllipsis() {
       this.dataEllipsis = {
-        showNote: false,
+        showNote: true,
-        showReassign: false,
+        showPause: true,
-        showPause: false,
+        showClaim: true
-        showPlay: false,
-        showOpen: false,
-        showClaim: false
       }
     },
     /**
-     * 
+     * Show options in the ellipsis 
      */
     updateDataEllipsis(data) {
+      let that = this;
+      this.showEllipsis = !this.showEllipsis;
+      if (this.showEllipsis) {
         this.dataEllipsis = {
-        APP_UID: data.APP_UID || "",
+          buttons: {
-        PRO_UID: data.PRO_UID || "",
+            note: {
-        showOpen: false,
+              name: "case note",
-        showNote: true,
+              icon: "far fa-comments",
-        showPlay: false,
+              fn: function() {console.log("comments");}
-        showReassign: false,
+            },
-        showPause: true,
+            pause: {
-        showClaim: true
+              name: "pause case",
-      };
+              icon: "far fa-pause-circle",
+              fn: function() {console.log("pause case");}
+            },
+            claim: {
+              name: "claim case",
+              icon: "fas fa-briefcase",
+              fn: function() {console.log("claim case");}
             }
+          }
+        }
+      }
+    },
   },
 };
 </script>