Merged in bugfix/PMCORE-3366 (pull request #8179)

Bugfix/PMCORE-3366

Approved-by: Rodrigo Quelca

resources/assets/js/components/iconPicker/IconPicker.vue

@@ -166,7 +166,6 @@ export default {
     },
     watch: {
         color() {
-            console.log("colores");
         },
     },
     methods: {

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

@@ -6,13 +6,15 @@
         :key="item.label"
         :class="item.classObject"
       >
-        <span v-if="item.data.color">
+        <span @click="item.onClick">
-          <div
+          <span v-if="item.color">
-            class="vp-color-breadcrumb"
+            <div
-            :style="{ backgroundColor: item.data.color }"
+              class="vp-color-breadcrumb"
-          ></div
+              :style="{ backgroundColor: item.color }"
-        ></span>
+            ></div
-        <span>{{ item.label }}</span>
+          ></span>
+          <span>{{ item.label }}</span>
+        </span>
       </li>
       <div
         v-for="item in settings"
@@ -47,19 +49,11 @@ export default {
     formatOptions(data) {
       let options = data;
       for (let i = 0; i <= options.length - 1; i++) {
-        if (i === options.length - 1) {
+        options[i].classObject = {
-          options[i].classObject = {
+          "vp-breadcrumb-item": true,
-            "vp-breadcrumb-item": true,
+          active: false,
-            active: true,
+          "vp-inline-block": true,
-            "vp-inline-block": true,
+        };
-          };
-        } else {
-          options[i].classObject = {
-            "vp-breadcrumb-item": true,
-            active: false,
-            "vp-inline-block": true,
-          };
-        }
       }
       return options;
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="pm-all-view-popover">
+  <div class="pm-tm-view-popover">
     <b-popover
       :target="target"
       ref="popover"
@@ -39,6 +39,7 @@
             value-field="key"
             text-field="value"
             name="flavour-2a"
+            class="process-view-popover"
             @change="changeOptions"
             stacked
           ></b-form-checkbox-group>
@@ -68,7 +69,6 @@ export default {
       results: [],
       allColumns: false,
       localSelected: [],
-      selected: [],
     };
   },
   mounted() {
@@ -137,7 +137,7 @@ export default {
           res.push(o.key);
         });
       }
-      this.selected = res;
+      this.localSelected = res;
     },
     /**
      * Handler when change options event
@@ -167,4 +167,11 @@ export default {
 .v-popover-footer {
   display: flow-root;
 }
+
+.process-view-popover {
+  margin-bottom: 1rem;
+  overflow-y: auto;
+  display: block;
+  max-height: 200px;
+}
 </style>

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"
@@ -17,7 +18,7 @@
       <div class="vp-6"></div>
       <drill-down :visited="visited" @onChangeLevel="changeLevel" />
     </div>
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -27,11 +28,12 @@ import DrillDown from "./DrillDown.vue";
 import VueCharts from "./VueCharts.vue";
 
 import defaultMixins from "./defaultMixins";
+import _ from "lodash";
 export default {
   name: "TaskMetrics",
   mixins: [defaultMixins],
   components: {
-    ButtonFleft,  
+    ButtonFleft,
     ModalNewRequest,
     DrillDown,
     VueCharts,
@@ -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:
-              level: 0,
+        this.settings && this.settings.visited
-              active: true,
+          ? this.settings.visited
-              id: _.random(0,100),
+          : [
-          }
+              {
-      ]
+                level: 0,
+                active: true,
+                id: _.random(0, 100),
+              },
+            ],
     };
   },
   created() {},
@@ -59,27 +65,30 @@ export default {
      * Change level in drill down
      */
     changeLevel(data) {
-      let item  = _.find(this.visited, data);
+      let item = _.findIndex(this.visited, (el) => {
-      this.visited.forEach(function (elem) {
+        return el.id == data.id;
-          elem.active = false;
       });
-      if(!item) {
+      this.visited.forEach(function (elem) {
+        elem.active = false;
+      });
+      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) { 
+        this.visited = _.filter(this.visited, function (o) {
-          return o.level < data.level; 
+          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,
       });
-  },
+    },
   },
 };
 </script>

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

@@ -6,11 +6,12 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <ProcessPopover
           :options="optionsProcesses"
+          :selected="selectedProcesses"
           @onChange="onChangeSearchPopover"
           target="pm-task-process"
           ref="pm-task-process"
@@ -25,10 +26,11 @@
             :show-labels="false"
             track-by="id"
             label="name"
-            @select="changeOption"
           ></multiselect>
         </div>
-        <label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP10") }}</label>
+        <label class="vp-inline-block vp-padding-l20">{{
+          $t("ID_TOP10")
+        }}</label>
         <div class="vp-inline-block">
           <b-form-checkbox
             v-model="top"
@@ -104,7 +106,7 @@ export default {
     BreadCrumb,
     ProcessPopover,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
@@ -122,7 +124,7 @@ export default {
       optionsCategory: [],
       optionsProcesses: [],
       selectedProcesses: [],
-      top: false,
+      top: this.data[2] ? this.data[2].data.top : true,
       width: 0,
       totalCases: [],
       currentSelection: null,
@@ -186,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() {},
@@ -221,9 +236,6 @@ export default {
         .processList(query || "")
         .then((response) => {
           that.formatDataProcesses(response.data);
-          that.changeOption({
-            id: "all",
-          });
         })
         .catch((e) => {
           console.error(err);
@@ -247,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 = [],
+      let labels = [],
-        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;
     },
@@ -273,25 +279,25 @@ 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) => {
             that.totalCases = response.data;
             that.formatTotalCases(response.data);
-          })  
+          })
           .catch((e) => {
-            console.error(err);
+            console.error(e);
           });
       }
     },
@@ -327,17 +333,8 @@ export default {
      * @param {*} data
      */
     onUpdateColumnSettings(data) {
-      let res;
       this.selectedProcesses = data;
-      res = _.intersectionBy(this.totalCases, data, (el) => {
+      this.changeOption();
-        if (_.isNumber(el)) {
-          return el;
-        }
-        if (_.isObject(el) && el["PRO_ID"]) {
-          return el["PRO_ID"];
-        }
-      });
-      this.formatTotalCases(res);
     },
     /**
      * Update labels in chart
@@ -365,9 +362,7 @@ export default {
      * Force update view when update level
      */
     forceUpdateView() {
-      this.changeOption({
+      this.changeOption();
-        id: 0,
-      });
     },
     /**
      * Event handler change input search popover
@@ -402,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,
+        },
       });
     },
     /**
@@ -429,6 +428,20 @@ export default {
       });
       eventBus.$emit("home::sidebar::click-item", taskList);
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      return res;
+    },
   },
 };
 </script>

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

@@ -1,10 +1,10 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
-      <h6 class="v-search-title">{{$t("ID_DRILL_DOWN_RISK_MATRIX")}}</h6>
+      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}</h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -36,9 +36,7 @@
           ></b-form-datepicker>
         </div>
         <div class="vp-inline-block">
-          <label class="form-label">{{
+          <label class="form-label">{{ $t("ID_TOP") }}</label>
-            $t("ID_TOP")
-          }}</label>
         </div>
         <div class="vp-inline-block">
           <multiselect
@@ -127,11 +125,23 @@ export default {
     let that = this;
     return {
       currentSelection: null,
-      dateFrom: moment().format("YYYY-MM-DD"),
+      dateFrom:
-      dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
+        this.data[3] && this.data[3].data.dateFromRisk
-      dateNow: "",
+          ? this.data[3].data.dateFromRisk
-      size: { name: this.$t("ID_ALL"), id: "all" },
+          : moment().format("YYYY-MM-DD"),
-      riskType: "ON_TIME",
+      dateTo:
+        this.data[3] && this.data[3].data.dateToRisk
+          ? this.data[3].data.dateToRisk
+          : moment().add(30, "d").format("YYYY-MM-DD"),
+      dateNow: moment().format("DD/MM/YYYY h:mm:ss a"),
+      size:
+        this.data[3] && this.data[3].data.size
+          ? this.data[3].data.size
+          : { name: this.$t("ID_ALL"), id: "all" },
+      riskType:
+        this.data[3] && this.data[3].data.riskType
+          ? this.data[3].data.riskType
+          : "ON_TIME",
       settingsBreadcrumbs: [
         {
           class: "fas fa-info-circle",
@@ -227,9 +237,10 @@ export default {
           .totalCasesByRisk(dt)
           .then((response) => {
             that.formatDataRange(response.data);
+            that.updateSettings();
           })
           .catch((e) => {
-            console.error(err);
+            console.error(e);
           });
       }
     },
@@ -298,7 +309,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being Overdue",
@@ -309,7 +320,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being At-Risk",
@@ -421,6 +432,46 @@ export default {
         });
       });
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
+    /**
+     * UPdate settings user config
+     */
+    updateSettings() {
+      this.$emit("updateDataLevel", {
+        id: "level3",
+        name: this.data[2]["name"],
+        level: 3,
+        data: {
+          dateFrom: this.data[3].data.dateFrom,
+          dateTo: this.data[3].data.dateTo,
+          period: this.data[3].data.period,
+          dateFromRisk: this.dateFrom,
+          dateToRisk: this.dateTo,
+          size: this.size,
+          riskType: this.riskType,
+        },
+      });
+    },
   },
 };
 </script>

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

@@ -6,7 +6,7 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -94,13 +94,17 @@ export default {
     Multiselect,
     BreadCrumb,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
-      dateFrom: moment().format("YYYY-MM-DD"),
+      dateFrom: this.data[3]
-      dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
+        ? this.data[3].data.dateFrom
-      period: "day",
+        : moment().format("YYYY-MM-DD"),
+      dateTo: this.data[3]
+        ? this.data[3].data.dateTo
+        : moment().add(30, "d").format("YYYY-MM-DD"),
+      period: this.data[3] ? this.data[3].data.period : "day",
       periodOptions: [
         { text: this.$t("ID_DAY"), value: "day" },
         { text: this.$t("ID_MONTH"), value: "month" },
@@ -155,12 +159,12 @@ export default {
     this.changeOption();
   },
   watch: {
-    dateFrom () {
+    dateFrom() {
       this.validateDateTo();
     },
-    dateTo () {
+    dateTo() {
       this.validateDateTo();
-    }
+    },
   },
   computed: {},
   updated() {},
@@ -230,10 +234,14 @@ export default {
      */
     onClickDrillDown() {
       this.$emit("updateDataLevel", {
-        id: this.data[2]["id"],
+        id: "level2",
         name: this.data[2]["name"],
         level: 3,
-        data: null,
+        data: {
+          dateFrom: this.dateFrom,
+          dateTo: this.dateTo,
+          period: this.period,
+        },
       });
     },
     /**
@@ -282,7 +290,7 @@ export default {
      * Validate range date
      */
     validateDateTo() {
-      if (this.dateFrom !== '' && this.dateTo !== '') {
+      if (this.dateFrom !== "" && this.dateTo !== "") {
         if (this.dateFrom > this.dateTo) {
           this.stateDateTo = false;
         } else {
@@ -290,6 +298,27 @@ export default {
         }
       }
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
   },
 };
 </script>

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

@@ -2,22 +2,19 @@
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
       <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NUMBER_TASKS") }}</h6>
-      <BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
+      <BreadCrumb :options="dataBreadcrumbs" :settings="settingsBreadcrumbs" />
       <apexchart
         v-show="typeView === 'donut'"
         ref="apexchart1"
-        :width="width"
         :options="optionsDonut"
         :series="seriesDonut"
       ></apexchart>
       <apexchart
         v-show="typeView === 'bar'"
         ref="apexchart2"
-        :width="width"
         :options="optionsBar"
         :series="seriesBar"
       ></apexchart>
-
       <div class="row">
         <div class="col-sm vp-align-right">
           <button
@@ -52,7 +49,7 @@ export default {
   name: "VueChartLvZero",
   mixins: [],
   components: { BreadCrumb },
-  props: ["breadCrumbs"],
+  props: [],
   data() {
     let that = this;
     return {
@@ -68,6 +65,57 @@ export default {
           onClick() {},
         },
       ],
+      dataBreadcrumbs: [
+        {
+          label: that.$i18n.t("ID_INBOX"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_INBOX"),
+              name: that.$i18n.t("ID_INBOX"),
+              level: 1,
+              color: "#179a6e",
+            });
+          },
+          color: "#179a6e",
+        },
+        {
+          label: this.$i18n.t("ID_DRAFT"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_DRAFT"),
+              name: that.$i18n.t("ID_DRAFT"),
+              level: 1,
+              color: "#feb019",
+            });
+          },
+          color: "#feb019",
+        },
+        {
+          label: this.$i18n.t("ID_PAUSED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_PAUSED"),
+              name: that.$i18n.t("ID_PAUSED"),
+              level: 1,
+              color: "#008ffb",
+            });
+          },
+          color: "#008ffb",
+        },
+        {
+          label: this.$i18n.t("ID_UNASSIGNED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_UNASSIGNED"),
+              name: that.$i18n.t("ID_UNASSIGNED"),
+              level: 1,
+              color: "#8f99a0",
+            });
+          },
+
+          color: "#8f99a0",
+        },
+      ],
       optionsDonut: {
         labels: [
           this.$i18n.t("ID_INBOX"),
@@ -78,20 +126,10 @@ export default {
         chart: {
           id: "apexchart1",
           type: "donut",
-          events: {
+          events: {},
-            legendClick: function (chartContext, seriesIndex, config) {
-              that.currentSelection = that.data[seriesIndex];
-              that.$emit("updateDataLevel", {
-                id: that.currentSelection["List Name"],
-                name: that.currentSelection["List Name"],
-                level: 1,
-                color: that.formatColor(that.currentSelection["Color"]),
-                data: that.currentSelection,
-              });
-            },
-          },
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },
@@ -127,6 +165,7 @@ export default {
           },
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },

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

@@ -1,29 +1,23 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
-    <vue-chart-lv-zero
+    <vue-chart-lv-zero v-if="level === 0" @updateDataLevel="updateDataLevel" />
-      v-show="level === 0"
-      @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
-    />
     <vue-chart-lv-one
       :key="key1"
-      v-show="level === 1"
+      v-if="level === 1"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
       :key="key2"
-      v-show="level === 2"
+      v-if="level === 2"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-three
       :key="key3"
       v-show="level === 3"
       :data="levels"
-      :breadCrumbs="dataBreadCrumbs()"
+      @updateDataLevel="updateDataLevel"
     />
   </div>
 </template>
@@ -44,13 +38,13 @@ export default {
     VueChartLvTwo,
     VueChartLvThree,
   },
-  props: ["levels"], 
+  props: ["levels"],
   data() {
-    let that = this;  
+    let that = this;
     return {
-      key1: _.random(0,100),
+      key1: _.random(0, 100),
-      key2: _.random(0,100),
+      key2: _.random(0, 100),
-      key3: _.random(0,100),
+      key3: _.random(0, 100),
       settingsBreadCrumbs: [
         {
           class: "fas fa-info-circle",
@@ -63,9 +57,9 @@ export default {
   mounted() {},
   watch: {},
   computed: {
-      level: function () {
+    level: function () {
-        return _.find(this.levels, {'active': true }).level;
+      return _.find(this.levels, { active: true }).level;
-      }
+    },
   },
   updated() {},
   beforeCreate() {},
@@ -104,7 +98,7 @@ export default {
           res.push({
             label: el.name,
             onClick() {
-               this.$emit("onChangeLevel", el);
+              this.$emit("onChangeLevel", el);
             },
             data: el,
           });
@@ -124,7 +118,7 @@ export default {
           };
           break;
       }
-    }
+    },
   },
 };
 </script>

resources/assets/js/home/modal/ModalPauseCase.vue

@@ -164,7 +164,6 @@ export default {
       this.data.reasonPause = this.pauseData.reasonPause;
       api.cases.pauseCase(this.data)
         .then((response) => {
-            console.log(response);
           if (response.statusText == "OK" || response.status === 200) {
             that.$refs["modal-pause-case"].hide();
             that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()