From 33e882ee77bcaacf0f492e49aff58a3a748bc670 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 24 Sep 2021 14:09:20 +0000
Subject: [PATCH 1/2] PMCORE-3348

---
 .../assets/js/components/utils/BreadCrumb.vue | 38 +++++++++++++------
 .../assets/js/home/TaskMetrics/Breadcrumb.vue |  0
 .../js/home/TaskMetrics/VueChartLvZero.vue    | 21 +++++++++-
 .../assets/js/home/TaskMetrics/VueCharts.vue  | 13 +++----
 4 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 resources/assets/js/home/TaskMetrics/Breadcrumb.vue

diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue
index c8181a131..8a921c945 100644
--- a/resources/assets/js/components/utils/BreadCrumb.vue
+++ b/resources/assets/js/components/utils/BreadCrumb.vue
@@ -1,18 +1,18 @@
 <template>
-  <nav aria-label="breadcrumb">
+  <nav>
     <ol class="vp-breadcrumb">
       <li
         v-for="item in formatOptions(options)"
         :key="item.label"
         :class="item.classObject"
       >
-        <span v-if="item.classObject.active === true">{{ item.label }}</span>
-        <a
-          v-if="item.classObject.active === false"
-          href="#"
-          @click="item.onClick"
-          >{{ item.label }}</a
-        >
+        <span v-if="item.data.color">
+          <div
+            class="vp-color-breadcrumb"
+            :style="{ backgroundColor: item.data.color }"
+          ></div
+        ></span>
+        <span>{{ item.label }}</span>
       </li>
       <div
         v-for="item in settings"
@@ -49,13 +49,13 @@ export default {
       for (let i = 0; i <= options.length - 1; i++) {
         if (i === options.length - 1) {
           options[i].classObject = {
-            "breadcrumb-item": true,
+            "vp-breadcrumb-item": true,
             active: true,
             "vp-inline-block": true,
           };
         } else {
           options[i].classObject = {
-            "breadcrumb-item": true,
+            "vp-breadcrumb-item": true,
             active: false,
             "vp-inline-block": true,
           };
@@ -75,18 +75,32 @@ export default {
 }
 
 .vp-bread-crumbs-settings {
-  line-height: 20px;
+  line-height: 40px;
+  font-size: 18px;
+  padding-right: 10px;
 }
 
 .vp-breadcrumb {
-  padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
   background-color: #e9ecef;
   border-radius: 0.25rem;
+  line-height: 40px;
+  height: 40px;
 }
 
 .vp-inline-block {
   display: inline-block;
 }
+
+.vp-breadcrumb-item {
+  color: grey;
+  padding-right: 35px;
+}
+
+.vp-color-breadcrumb {
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+}
 </style>
diff --git a/resources/assets/js/home/TaskMetrics/Breadcrumb.vue b/resources/assets/js/home/TaskMetrics/Breadcrumb.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index 82e9f02b5..2ca7625b7 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -1,7 +1,7 @@
 <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_NUMBER_TASKS")}}</h6>
+      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NUMBER_TASKS") }}</h6>
       <BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
       <apexchart
         v-show="typeView === 'donut'"
@@ -85,6 +85,7 @@ export default {
                 id: that.currentSelection["List Name"],
                 name: that.currentSelection["List Name"],
                 level: 0,
+                color: that.formatColor(that.currentSelection["Color"]),
                 data: that.currentSelection,
               });
             },
@@ -230,6 +231,24 @@ export default {
         },
       ]);
     },
+    formatColor(color) {
+      let code = "#ffffff";
+      switch (color) {
+        case "green":
+          code = "#179a6e";
+          break;
+        case "yellow":
+          code = "#feb019";
+          break;
+        case "blue":
+          code = "#008ffb";
+          break;
+        case "gray":
+          code = "#8f99a0";
+          break;
+      }
+      return code;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index 2313fb54c..e0f82be8e 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -52,9 +52,9 @@ export default {
     let that = this;
     return {
       level: 0,
-      key1: _.random(0,100),
-      key2: _.random(0,100),
-      key3: _.random(0,100),
+      key1: _.random(0, 100),
+      key2: _.random(0, 100),
+      key3: _.random(0, 100),
       data: [],
       settingsBreadCrumbs: [
         {
@@ -129,13 +129,10 @@ export default {
             onClick() {
               that.onChangeLevel(el.level);
             },
+            data: el,
           });
         }
       });
-      res.push({
-        label: this.$t("ID_SELECT"),
-        onClick() {},
-      });
       switch (this.level) {
         case 0:
           return {
@@ -150,7 +147,7 @@ export default {
           };
           break;
       }
-    }
+    },
   },
 };
 </script>

From 4bee0cb89fa38cb64a16545df458bb283dae45a6 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 24 Sep 2021 14:11:49 +0000
Subject: [PATCH 2/2] PMCORE-3348

---
 resources/assets/js/home/TaskMetrics/VueChartLvZero.vue | 5 +++++
 resources/assets/js/home/TaskMetrics/VueCharts.vue      | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index 2ca7625b7..8ba78b7be 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -231,6 +231,11 @@ export default {
         },
       ]);
     },
+    /**
+     * Format color for show in breadcrumb
+     * @param {string} color
+     * @returns {string}
+     */
     formatColor(color) {
       let code = "#ffffff";
       switch (color) {
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index e0f82be8e..75b8d9b1b 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -147,7 +147,7 @@ export default {
           };
           break;
       }
-    },
+    }
   },
 };
 </script>