From e6afdfcdb0649fe43350f3175b203b403e0eacaa Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Tue, 4 Jan 2022 20:12:31 +0000
Subject: [PATCH] PMCORE-3616

---
 .../js/home/TaskMetrics/VueChartLvZero.vue    |   8 +-
 .../assets/js/home/TaskMetrics/VueCharts.vue  | 189 ++++++++----------
 2 files changed, 83 insertions(+), 114 deletions(-)

diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index 1b04518a1..302427f48 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -70,7 +70,7 @@ export default {
           label: that.$i18n.t("ID_INBOX"),
           onClick() {
             that.$emit("updateDataLevel", {
-              id: that.$i18n.t("ID_INBOX"),
+              id: "inbox",
               name: that.$i18n.t("ID_INBOX"),
               level: 1,
               color: "#179a6e",
@@ -82,7 +82,7 @@ export default {
           label: this.$i18n.t("ID_DRAFT"),
           onClick() {
             that.$emit("updateDataLevel", {
-              id: that.$i18n.t("ID_DRAFT"),
+              id: "draft",
               name: that.$i18n.t("ID_DRAFT"),
               level: 1,
               color: "#feb019",
@@ -94,7 +94,7 @@ export default {
           label: this.$i18n.t("ID_PAUSED"),
           onClick() {
             that.$emit("updateDataLevel", {
-              id: that.$i18n.t("ID_PAUSED"),
+              id:"paused",
               name: that.$i18n.t("ID_PAUSED"),
               level: 1,
               color: "#008ffb",
@@ -106,7 +106,7 @@ export default {
           label: this.$i18n.t("ID_UNASSIGNED"),
           onClick() {
             that.$emit("updateDataLevel", {
-              id: that.$i18n.t("ID_UNASSIGNED"),
+              id: "unassigned",
               name: that.$i18n.t("ID_UNASSIGNED"),
               level: 1,
               color: "#8f99a0",
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index ca46e149e..0f8a8cc81 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -1,25 +1,28 @@
 <template>
-  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
-    <vue-chart-lv-zero v-if="level === 0" @updateDataLevel="updateDataLevel" />
-    <vue-chart-lv-one
-      :key="key1"
-      v-if="level === 1"
-      :data="levels"
-      @updateDataLevel="updateDataLevel"
-    />
-    <vue-chart-lv-two
-      :key="key2"
-      v-if="level === 2"
-      :data="levels"
-      @updateDataLevel="updateDataLevel"
-    />
-    <vue-chart-lv-three
-      :key="key3"
-      v-if="level === 3"
-      :data="levels"
-      @updateDataLevel="updateDataLevel"
-    />
-  </div>
+    <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+        <vue-chart-lv-zero
+            v-if="level === 0"
+            @updateDataLevel="updateDataLevel"
+        />
+        <vue-chart-lv-one
+            :key="key1"
+            v-if="level === 1"
+            :data="levels"
+            @updateDataLevel="updateDataLevel"
+        />
+        <vue-chart-lv-two
+            :key="key2"
+            v-if="level === 2"
+            :data="levels"
+            @updateDataLevel="updateDataLevel"
+        />
+        <vue-chart-lv-three
+            :key="key3"
+            v-if="level === 3"
+            :data="levels"
+            @updateDataLevel="updateDataLevel"
+        />
+    </div>
 </template>
 
 <script>
@@ -30,97 +33,63 @@ import VueChartLvThree from "./VueChartLvThree.vue";
 import _ from "lodash";
 
 export default {
-  name: "VueCharts",
-  mixins: [],
-  components: {
-    VueChartLvZero,
-    VueChartLvOne,
-    VueChartLvTwo,
-    VueChartLvThree,
-  },
-  props: ["levels"],
-  data() {
-    let that = this;
-    return {
-      key1: _.random(0, 100),
-      key2: _.random(0, 100),
-      key3: _.random(0, 100),
-      settingsBreadCrumbs: [
-        {
-          class: "fas fa-info-circle",
-          onClick() {},
+    name: "VueCharts",
+    mixins: [],
+    components: {
+        VueChartLvZero,
+        VueChartLvOne,
+        VueChartLvTwo,
+        VueChartLvThree,
+    },
+    props: ["levels"],
+    data() {
+        let that = this;
+        return {
+            key1: _.random(0, 100),
+            key2: _.random(0, 100),
+            key3: _.random(0, 100),
+            settingsBreadCrumbs: [
+                {
+                    class: "fas fa-info-circle",
+                    onClick() {},
+                },
+            ],
+        };
+    },
+    created() {},
+    mounted() {},
+    watch: {},
+    computed: {
+        level: function() {
+            return _.find(this.levels, { active: true }).level;
         },
-      ],
-    };
-  },
-  created() {},
-  mounted() {},
-  watch: {},
-  computed: {
-    level: function () {
-      return _.find(this.levels, { active: true }).level;
     },
-  },
-  updated() {},
-  beforeCreate() {},
-  methods: {
-    /**
-     * Set data level 0
-     */
-    updateDataLevel(data) {
-      this.$emit("onChangeLevel", data);
-      this.updateKey(data.level);
+    updated() {},
+    beforeCreate() {},
+    methods: {
+        /**
+         * Set data level 0
+         */
+        updateDataLevel(data) {
+            this.$emit("onChangeLevel", data);
+            this.updateKey(data.level);
+        },
+        updateKey(level) {
+            switch (level) {
+                case 0:
+                    break;
+                case 1:
+                    this.key1++;
+                    break;
+                case 2:
+                    this.key2++;
+                    break;
+                case 3:
+                    this.key3++;
+                    break;
+            }
+        },
     },
-    updateKey(level) {
-      switch (level) {
-        case 0:
-          break;
-        case 1:
-          this.key1++;
-          break;
-        case 2:
-          this.key2++;
-          break;
-        case 3:
-          this.key3++;
-          break;
-      }
-    },
-    /**
-     * Format data for data beadcrumbs
-     */
-    dataBreadCrumbs() {
-      let res = [],
-        that = this,
-        index = 0;
-      _.each(this.levels, (el) => {
-        if (index <= that.level && el.data) {
-          res.push({
-            label: el.name,
-            onClick() {
-              this.$emit("onChangeLevel", el);
-            },
-            data: el,
-          });
-        }
-      });
-      switch (this.level) {
-        case 0:
-          return {
-            data: res,
-            settings: this.settingsBreadCrumbs,
-          };
-          break;
-        default:
-          return {
-            data: res,
-            settings: this.settingsBreadCrumbs,
-          };
-          break;
-      }
-    },
-  },
 };
 </script>
-<style>
-</style>
\ No newline at end of file
+<style></style>