PMCORE-3616

This commit is contained in:
Henry Jordan
2022-01-04 20:12:31 +00:00
parent d7a81e4d88
commit c5753f6b1a
2 changed files with 83 additions and 114 deletions

View File

@@ -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",

View File

@@ -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>
<style></style>