PMCORE-3348

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>
+        <span v-if="item.data.color">
-        <a
+          <div
-          v-if="item.classObject.active === false"
+            class="vp-color-breadcrumb"
-          href="#"
+            :style="{ backgroundColor: item.data.color }"
-          @click="item.onClick"
+          ></div
-          >{{ item.label }}</a
+        ></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>

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>

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

@@ -52,9 +52,9 @@ export default {
     let that = this;
     return {
       level: 0,
-      key1: _.random(0,100),
+      key1: _.random(0, 100),
-      key2: _.random(0,100),
+      key2: _.random(0, 100),
-      key3: _.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>