update

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

@@ -69,7 +69,6 @@ export default {
       results: [],
       allColumns: false,
       localSelected: [],
-      selected: [],
     };
   },
   mounted() {
@@ -138,7 +137,7 @@ export default {
           res.push(o.key);
         });
       }
-      this.selected = res;
+      this.localSelected = res;
     },
     /**
      * Handler when change options event

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

@@ -10,6 +10,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <div class="d-inline-flex p-2">
       <vue-charts
+        :key="random"
         ref="pm-vue-chart"
         @onChangeLevel="changeLevel"
         :levels="visited"
@@ -27,6 +28,7 @@ import DrillDown from "./DrillDown.vue";
 import VueCharts from "./VueCharts.vue";
 
 import defaultMixins from "./defaultMixins";
+import _ from "lodash";
 export default {
   name: "TaskMetrics",
   mixins: [defaultMixins],
@@ -40,13 +42,17 @@ export default {
   data() {
     let that = this;
     return {
-      visited: this.settings && this.settings.visited ? this.settings.visited : [
+      random: _.random(0, 100000),
+      visited:
+        this.settings && this.settings.visited
+          ? this.settings.visited
+          : [
               {
                 level: 0,
                 active: true,
                 id: _.random(0, 100),
-          }
-      ]
+              },
+            ],
     };
   },
   created() {},
@@ -59,25 +65,26 @@ export default {
      * Change level in drill down
      */
     changeLevel(data) {
-      let item  = _.find(this.visited, data);
+      let item = _.findIndex(this.visited, data);
       this.visited.forEach(function (elem) {
         elem.active = false;
       });
-      if(!item) {
+      data.active = true;
+      item != -1 ? this.visited.splice(item, 1, data) : null;
+      if (item == -1) {
         data.active = true;
         this.visited = _.filter(this.visited, function (o) {
           return o.level < data.level;
         });
         this.visited.push(data);
-      } else {
-        item.active = true;
       }
+      this.random = _.random(0, 100000);
       this.$emit("updateSettings", {
         data: this.visited,
         key: "visited",
         page: "task-metrics",
         type: "normal",
-        id: this.id
+        id: this.id,
       });
     },
   },

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

@@ -11,6 +11,7 @@
         />
         <ProcessPopover
           :options="optionsProcesses"
+          :selected="selectedProcesses"
           @onChange="onChangeSearchPopover"
           target="pm-task-process"
           ref="pm-task-process"
@@ -25,7 +26,6 @@
             :show-labels="false"
             track-by="id"
             label="name"
-            @select="changeOption"
           ></multiselect>
         </div>
         <label class="vp-inline-block vp-padding-l20">{{
@@ -124,7 +124,7 @@ export default {
       optionsCategory: [],
       optionsProcesses: [],
       selectedProcesses: [],
-      top: true,
+      top: this.data[2] ? this.data[2].data.top : true,
       width: 0,
       totalCases: [],
       currentSelection: null,
@@ -188,7 +188,20 @@ export default {
     this.getCategories();
     this.getProcesses();
   },
-  watch: {},
+  watch: {
+    category(nvalue, old) {
+      this.changeOption();
+    },
+    optionsCategory(nvalue, old) {
+      this.category = this.data[2] ? this.data[2].data.category : nvalue[0];
+    },
+    optionsProcesses(nvalue, old) {
+      this.selectedProcesses = this.data[2]
+        ? this.data[2].data.selectedProcesses
+        : _.flatMap(nvalue, (n) => n.key);
+      this.changeOption();
+    },
+  },
   computed: {},
   updated() {},
   beforeCreate() {},
@@ -223,10 +236,6 @@ export default {
         .processList(query || "")
         .then((response) => {
           that.formatDataProcesses(response.data);
-          that.changeOption({
-            id: "all",
-            paged: false,
-          });
         })
         .catch((e) => {
           console.error(err);
@@ -250,25 +259,19 @@ export default {
         array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
       });
       this.optionsCategory = array;
-      this.category = array[0];
     },
     /**
      * Format processes for popover
      * @param {*} data
      */
     formatDataProcesses(data) {
-      let sels = [],
-        labels = [],
+      let labels = [],
         array = [];
-
       _.each(data, (el) => {
         array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
-        sels.push(el["PRO_ID"]);
         labels;
       });
       this.optionsProcesses = array;
-      this.selectedProcesses = sels;
-
       //Update the labels
       this.dataProcesses = data;
     },
@@ -276,17 +279,17 @@ export default {
      * Change the options in TOTAL CASES BY PROCESS
      * @param {*} option
      */
-    changeOption(option) {
+    changeOption() {
       let that = this,
         dt = {};
-      if (this.data.length > 1) {
+      if (this.category && this.selectedProcesses.length > 0 && this.data[1]) {
         dt = {
-          category: option.id,
+          category: this.category.id,
           caseList: this.data[1].id.toLowerCase(),
           processes: this.selectedProcesses,
           top: this.top,
         };
-        option.id == "all" ? delete dt.category : null;
+        this.category.id == "all" ? delete dt.category : null;
         Api.process
           .totalCasesByProcess(dt)
           .then((response) => {
@@ -294,7 +297,7 @@ export default {
             that.formatTotalCases(response.data);
           })
           .catch((e) => {
-            console.error(err);
+            console.error(e);
           });
       }
     },
@@ -330,17 +333,8 @@ export default {
      * @param {*} data
      */
     onUpdateColumnSettings(data) {
-      let res;
       this.selectedProcesses = data;
-      res = _.intersectionBy(this.totalCases, data, (el) => {
-        if (_.isNumber(el)) {
-          return el;
-        }
-        if (_.isObject(el) && el["PRO_ID"]) {
-          return el["PRO_ID"];
-        }
-      });
-      this.formatTotalCases(res);
+      this.changeOption();
     },
     /**
      * Update labels in chart
@@ -368,9 +362,7 @@ export default {
      * Force update view when update level
      */
     forceUpdateView() {
-      this.changeOption({
-        id: 0,
-      });
+      this.changeOption();
     },
     /**
      * Event handler change input search popover
@@ -405,7 +397,11 @@ export default {
         id: this.currentSelection["PRO_ID"],
         name: this.currentSelection["PRO_TITLE"],
         level: 2,
-        data: this.currentSelection,
+        data: {
+          top: this.top,
+          category: this.category,
+          selectedProcesses: this.selectedProcesses,
+        },
       });
     },
     /**
@@ -481,6 +477,5 @@ export default {
 .vp-flex1 {
   flex: 1;
 }
-
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

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

@@ -1,24 +1,24 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <vue-chart-lv-zero
-      v-show="level === 0"
+      v-if="level === 0"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-one
       :key="key1"
-      v-show="level === 1"
+      v-if="level === 1"
       :data="levels"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-two
       :key="key2"
-      v-show="level === 2"
+      v-if="level === 2"
       :data="levels"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-three
       :key="key3"
-      v-show="level === 3"
+      v-if="level === 3"
       :data="levels"
     />
   </div>