Merged in feature/PMCORE-3312 (pull request #8127)

PMCORE-3312

Approved-by: Rodrigo Quelca

resources/assets/js/home/TaskMetrics/ProcessPopover.vue

@@ -35,7 +35,7 @@
         <b-form-group>
           <b-form-checkbox-group
             v-model="localSelected"
-            :options="results"
+            :options="options"
             value-field="key"
             text-field="value"
             name="flavour-2a"
@@ -60,19 +60,17 @@
 <script>
 export default {
   name: "ProcessPopover",
-  props: ["target"],
+  props: ["target", "options"],
   data() {
     return {
-      options: [],
+      timeCounter:"",
       text: "",
-      results: [],
       allColumns: false,
       localSelected: [],
       selected: [],
     };
   },
   mounted() {
-    this.results = this.options;
     this.localSelected = this.selected;
   },
   methods: {
@@ -82,7 +80,6 @@ export default {
      */
     setOptions(options) {
       this.options = options;
-      this.results = options;
     },
     /**
      * Setter the selected options
@@ -118,17 +115,11 @@ export default {
      * Search in the column name
      */
     search() {
-      let txt = this.text.toLowerCase(),
-        val,
-        opts = [];
-
-      opts = _.filter(this.options, function (o) {
-        val = o.value.toLowerCase();
-
-        return val.search(txt) != -1;
-      });
-
-      this.results = opts;
+      let that = this;
+      clearTimeout(this.timeCounter);
+      this.timeCounter = setTimeout(()=>{
+          that.$emit("onChange", this.text.toLowerCase())
+      }, 500);
     },
     /**
      * Toogle all options in popover
@@ -140,7 +131,7 @@ export default {
           res.push(o.key);
         });
       }
-      this.selected = res;
+      this.localSelected = res;
     },
     /**
      * Handler when change options event

resources/assets/js/home/TaskMetrics/VueChartLvOne.vue

@@ -11,6 +11,7 @@
         />
         <ProcessPopover
           :options="optionsProcesses"
+          @onChange="onChangeSearchPopover"
           target="pm-task-process"
           ref="pm-task-process"
           @onUpdateColumnSettings="onUpdateColumnSettings"
@@ -183,11 +184,12 @@ export default {
     },
     /**
      * Get Processes form API
+     * @param {string} query - Text value in search popover
      */
-    getProcesses() {
+    getProcesses(query) {
       let that = this;
       Api.filters
-        .processList("")
+        .processList(query || "")
         .then((response) => {
           that.formatDataProcesses(response.data);
           that.changeOption({
@@ -334,6 +336,13 @@ export default {
         id: 0,
       });
     },
+    /**
+     * Event handler change input search popover
+     * @param {string} query - value in popover search input
+     */
+    onChangeSearchPopover(query){
+      this.getProcesses(query);
+    }
   },
 };
 </script>

resources/assets/js/home/TaskMetrics/VueCharts.vue

@@ -36,6 +36,7 @@ import VueChartLvZero from "./VueChartLvZero.vue";
 import VueChartLvOne from "./VueChartLvOne.vue";
 import VueChartLvTwo from "./VueChartLvTwo.vue";
 import VueChartLvThree from "./VueChartLvThree.vue";
+import _ from "lodash";
 
 export default {
   name: "VueCharts",
@@ -51,9 +52,9 @@ export default {
     let that = this;
     return {
       level: 0,
-      key1: 1,
-      key2: 1,
-      key3: 1,
+      key1: _.random(0,100),
+      key2: _.random(0,100),
+      key3: _.random(0,100),
       data: [],
       settingsBreadCrumbs: [
         {