Merged in bugfix/PMCORE-3328 (pull request #8169)

PMCORE-3328

Approved-by: Henry Jonathan Quispe Quispe

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

@@ -8,7 +8,7 @@
       <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NAVIGATOR") }}</h6>
     </div>
     <div
-      v-for="item in loadItems(data, level)"
+      v-for="item in loadItems()"
       :key="item.content"
       class="vp-padding-b10"
       @click="onClick(item)"
@@ -29,7 +29,7 @@ export default {
   name: "DrillDown",
   mixins: [],
   components: {},
-  props: ["level"],
+  props: ["visited"],
   data() {
     let that = this;
     return {
@@ -37,35 +37,38 @@ export default {
         "rounded-circle": true,
         "v-pm-drill-down-number": true,
         "vp-btn-secondary": true,
+        "vp-btn-primary-inactive": false,
         "btn-primary": false,
         "vp-block": true,
       },
       data: [
         {
           label: that.$t("ID_LEVEL"),
-          content: "0",
+          content: 0,
-          click() {
+          click(elem) {
-            that.$emit("onChangeLevel", 0);
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "1",
+          content: 1,
-          click() {
+          click(elem) {
-            that.$emit("onChangeLevel", 1);
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "2",
+          content: 2,
-          click() {
+          click(elem) {
-            that.$emit("onChangeLevel", 2);
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "3",
+          content: 3,
-          click() {},
+          click(elem) {
+            that.$emit("onChangeLevel", elem);
+          },
         },
       ],
     };
@@ -73,7 +76,11 @@ export default {
   created() {},
   mounted() {},
   watch: {},
-  computed: {},
+  computed: {
+      level: function () {
+          return _.find(this.visited, {'active': true }).level ;
+      }
+  },
   updated() {},
   beforeCreate() {},
   methods: {
@@ -81,36 +88,33 @@ export default {
      * Click in drill option
      */
     onClick(item) {
-      let array,
+      let elem =_.find(this.visited, {'level': item.content });
-        i = 0,
+      if (elem) {
-        nindex;
+        item.click(elem);
-      array = _.clone(this.data);
-      array.forEach((el) => {
-        if (el.content === item.content) {
-          nindex = i;
-        }
-        i++;
-      });
-      this.index = nindex;
-      if (nindex <= this.level) {
-        item.click(item);
       }
     },
     /**
      * Load items in drill items
      */
-    loadItems(items, index) {
+    loadItems() {
       let array,
-        i = 0,
+        that = this,
-        that = this;
+        item;
-      array = _.clone(items);
+      array = _.clone(this.data);
       array.forEach((el) => {
         el.classObject = _.clone(that.classObject);
-        if (i <= index) {
+        item =_.find(this.visited, {'level': el.content });
+        if (item) {
+            if (item.active){
+              el.classObject["vp-btn-primary-inactive"] = false;
               el.classObject["vp-btn-secondary"] = false;
               el.classObject["btn-primary"] = true;
+            } else {
+              el.classObject["vp-btn-secondary"] = false;
+              el.classObject["btn-primary"] = false;
+              el.classObject["vp-btn-primary-inactive"] = true;
+            }
           }
-        i += 1;
       }); 
       return array;
     },
@@ -155,6 +159,18 @@ export default {
   border-color: #6c757d;
 }
 
+.vp-btn-primary-inactive {
+    color: #6c757d;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.vp-btn-primary-inactive:hover {
+  color: #6c757d;
+  background-color: #0066d3;
+  border-color: #0066d3;
+}
+
 .v-pm-drill-down {
   vertical-align: top;
   padding-left: 50px;

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

@@ -12,10 +12,10 @@
       <vue-charts
         ref="pm-vue-chart"
         @onChangeLevel="changeLevel"
-        :level="level"
+        :levels="visited"
       />
       <div class="vp-6"></div>
-      <drill-down :level="level" @onChangeLevel="updateVueChart" />
+      <drill-down :visited="visited" @onChangeLevel="changeLevel" />
     </div>
   </div>  
 </template>
@@ -36,16 +36,21 @@ export default {
     DrillDown,
     VueCharts,
   },
-  props: [],
+  props: ["settings"],
   data() {
     let that = this;
     return {
+      visited: this.settings && this.settings.visited ? this.settings.visited : [
+          {
               level: 0,
+              active: true,
+              id: _.random(0,100),
+          }
+      ]
     };
   },
   created() {},
   mounted() {},
-  watch: {},
   computed: {},
   updated() {},
   beforeCreate() {},
@@ -53,14 +58,27 @@ export default {
     /**
      * Change level in drill down
      */
-    changeLevel(lv) {
+    changeLevel(data) {
-      this.level = lv;
+      let item  = _.find(this.visited, data);
-    },
+      this.visited.forEach(function (elem) {
-    /**
+          elem.active = false;
-     * update data in charts
+      });
-     */
+      if(!item) {
-    updateVueChart(lv) {
+        data.active = true;
-      this.$refs["pm-vue-chart"].onChangeLevel(lv);
+        this.visited = _.filter(this.visited, function(o) { 
+          return o.level < data.level; 
+        });
+        this.visited.push(data);
+      } else {
+        item.active = true;
+      }
+      this.$emit("updateSettings", {
+        data: this.visited,
+        key: "visited",
+        page: "task-metrics",
+        type: "normal",
+        id: this.id
+      });
   },
   },
 };

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

@@ -276,10 +276,10 @@ export default {
     changeOption(option) {
       let that = this,
         dt = {};
-      if (this.data.length > 0) {
+      if (this.data.length > 1) {
         dt = {
           category: option.id,
-          caseList: this.data[0].id.toLowerCase(),
+          caseList: this.data[1].id.toLowerCase(),
           processes: this.selectedProcesses,
           top: this.top,
         };
@@ -401,7 +401,7 @@ export default {
       this.$emit("updateDataLevel", {
         id: this.currentSelection["PRO_ID"],
         name: this.currentSelection["PRO_TITLE"],
-        level: 1,
+        level: 2,
         data: this.currentSelection,
       });
     },
@@ -409,7 +409,7 @@ export default {
      * Show popover data options
      */
     onClickData() {
-      let taskList = this.data[0].id.toLowerCase(),
+      let taskList = this.data[1].id.toLowerCase(),
         obj = {
           autoshow: false,
           fieldId: "processName",

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

@@ -215,8 +215,8 @@ export default {
         dt;
       if (this.dateFrom && this.dateTo) {
         dt = {
-          process: this.data[1].id,
+          process: this.data[2].id,
-          caseList: this.data[0].id.toLowerCase(),
+          caseList: this.data[1].id.toLowerCase(),
           dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
           dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
           riskStatus: this.riskType,
@@ -272,7 +272,7 @@ export default {
       });
 
       this.updateApexchartAxis();
-      if (this.data[0].id.toLowerCase() == "draft") {
+      if (this.data[1].id.toLowerCase() == "draft") {
         this.series = []; // Draft is empty
       } else {
         this.series = serie;

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

@@ -178,10 +178,11 @@ export default {
     changeOption() {
       let that = this,
         dt;
+      if (this.data.length > 2) {
         if (this.dateFrom && this.dateTo && this.period) {
           dt = {
-          processId: this.data[1].id,
+            processId: this.data[2].id,
-          caseList: this.data[0].id.toLowerCase(),
+            caseList: this.data[1].id.toLowerCase(),
             dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
             dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
             groupBy: this.period,
@@ -195,6 +196,7 @@ export default {
               console.error(e);
             });
         }
+      }
     },
     /**
      * Format response from API
@@ -212,13 +214,13 @@ export default {
       this.$refs["LevelTwoChart"].updateOptions({
         labels: labels,
         title: {
-          text: this.data[0]["PRO_TITLE"],
+          text: this.data[1]["PRO_TITLE"],
           align: "left",
         },
       });
       this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
         {
-          name: this.data[0]["PRO_TITLE"],
+          name: this.data[1]["PRO_TITLE"],
           data: serie,
         },
       ]);
@@ -228,9 +230,9 @@ export default {
      */
     onClickDrillDown() {
       this.$emit("updateDataLevel", {
-        id: this.data[1]["id"],
+        id: this.data[2]["id"],
-        name: this.data[1]["name"],
+        name: this.data[2]["name"],
-        level: 2,
+        level: 3,
         data: null,
       });
     },
@@ -238,7 +240,7 @@ export default {
      * Show popover data options
      */
     onClickData() {
-      let taskList = this.data[0].id.toLowerCase(),
+      let taskList = this.data[1].id.toLowerCase(),
         obj = [
           {
             autoshow: false,
@@ -246,10 +248,10 @@ export default {
             filterVar: "process",
             label: "",
             options: {
-              label: this.data[1]["name"],
+              label: this.data[2]["name"],
-              value: this.data[1]["id"],
+              value: this.data[2]["id"],
             },
-            value: this.data[1]["id"],
+            value: this.data[2]["id"],
           },
           {
             autoShow: false,

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

@@ -84,7 +84,7 @@ export default {
               that.$emit("updateDataLevel", {
                 id: that.currentSelection["List Name"],
                 name: that.currentSelection["List Name"],
-                level: 0,
+                level: 1,
                 color: that.formatColor(that.currentSelection["Color"]),
                 data: that.currentSelection,
               });

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

@@ -8,24 +8,21 @@
     <vue-chart-lv-one
       :key="key1"
       v-show="level === 1"
-      :data="data"
+      :data="levels"
-      @onChangeLevel="onChangeLevel"
       @updateDataLevel="updateDataLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
       :key="key2"
       v-show="level === 2"
-      :data="data"
+      :data="levels"
-      @onChangeLevel="onChangeLevel"
       @updateDataLevel="updateDataLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-three
       :key="key3"
       v-show="level === 3"
-      :data="data"
+      :data="levels"
-      @onChangeLevel="onChangeLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
@@ -47,15 +44,13 @@ export default {
     VueChartLvTwo,
     VueChartLvThree,
   },
-  props: [],
+  props: ["levels"], 
   data() {
     let that = this;  
     return {
-      level: 0,
       key1: _.random(0,100),
       key2: _.random(0,100),
       key3: _.random(0,100),
-      data: [],
       settingsBreadCrumbs: [
         {
           class: "fas fa-info-circle",
@@ -67,7 +62,11 @@ export default {
   created() {},
   mounted() {},
   watch: {},
-  computed: {},
+  computed: {
+      level: function () {
+        return _.find(this.levels, {'active': true }).level;
+      }
+  },
   updated() {},
   beforeCreate() {},
   methods: {
@@ -75,13 +74,11 @@ export default {
      * Set data level 0
      */
     updateDataLevel(data) {
-      this.data.push(data);
+      this.$emit("onChangeLevel", data);
-      this.level = data.level + 1;
+      this.updateKey(data.level);
-      this.$emit("onChangeLevel", data.level + 1);
-      this.updateKey();
     },
-    updateKey() {
+    updateKey(level) {
-      switch (this.level) {
+      switch (level) {
         case 0:
           break;
         case 1:
@@ -95,26 +92,6 @@ export default {
           break;
       }
     },
-    /**
-     * Format data to vue charts any level
-     */
-    formatData() {
-      return {
-        level: this.level,
-        data: this.data,
-      };
-    },
-    /**
-     * Change level with changes in data
-     * @param {object} lv
-     */
-    onChangeLevel(lv) {
-      _.remove(this.data, function (n) {
-        return n.level >= lv;
-      });
-      this.level = lv;
-      this.$emit("onChangeLevel", this.level);
-    },
     /**
      * Format data for data beadcrumbs
      */
@@ -122,12 +99,12 @@ export default {
       let res = [],
         that = this,
         index = 0;
-      _.each(this.data, (el) => {
+      _.each(this.levels, (el) => {
         if (index <= that.level && el.data) {
           res.push({
             label: el.name,
             onClick() {
-              that.onChangeLevel(el.level);
+               this.$emit("onChangeLevel", el);
             },
             data: el,
           });