fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PMCORE-3328: Task Metrics is not saving per user the last drilling down level navigated in the Task Navigator PMCORE_3.7.0 build

Browse Source
This commit is contained in:
Rodrigo Quelca
2021-09-24 16:35:54 +00:00
parent 5146d8b7e4
commit 0e59394eb9
7 changed files with 146 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
resources/assets/js/home/TaskMetrics/DrillDown.vue
View File

@@ -8,7 +8,7 @@
<h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NAVIGATOR") }}</h6>
</div>
<div
v-for="item in loadItems(data, level)"
v-for="item in loadItems()"
:key="item.content"
class="vp-padding-b10"
@click="onClick(item)"
@@ -29,7 +29,7 @@ export default {
name: "DrillDown",
mixins: [],
components: {},
props: ["level"],
props: ["visited"],
data() {
let that = this;
return {
@@ -37,35 +37,39 @@ export default {
"rounded-circle": true,
"v-pm-drill-down-number": true,
"vp-btn-secondary": true,
"vp-btn-primary-inactive": false,
"btn-primary": false,
"vp-block": true,
},
data: [
{
label: that.$t("ID_LEVEL"),
content: "0",
click() {
that.$emit("onChangeLevel", 0);
content: 0,
click(elem) {
console.log(elem);
that.$emit("onChangeLevel", elem);
},
},
{
label: that.$t("ID_LEVEL"),
content: "1",
click() {
that.$emit("onChangeLevel", 1);
content: 1,
click(elem) {
that.$emit("onChangeLevel", elem);
},
},
{
label: that.$t("ID_LEVEL"),
content: "2",
click() {
that.$emit("onChangeLevel", 2);
content: 2,
click(elem) {
that.$emit("onChangeLevel", elem);
},
},
{
label: that.$t("ID_LEVEL"),
content: "3",
click() {},
content: 3,
click(elem) {
that.$emit("onChangeLevel", elem);
},
},
],
};
@@ -73,7 +77,11 @@ export default {
created() {},
mounted() {},
watch: {},
computed: {},
computed: {
level: function () {
return _.find(this.visited, {'active': true }).level ;
}
},
updated() {},
beforeCreate() {},
methods: {
@@ -81,37 +89,34 @@ export default {
* Click in drill option
*/
onClick(item) {
let array,
i = 0,
nindex;
array = _.clone(this.data);
array.forEach((el) => {
if (el.content === item.content) {
nindex = i;
}
i++;
});
this.index = nindex;
if (nindex <= this.level) {
item.click(item);
let elem =_.find(this.visited, {'level': item.content });
if (elem) {
item.click(elem);
}
},
/**
* Load items in drill items
*/
loadItems(items, index) {
loadItems() {
let array,
i = 0,
that = this;
array = _.clone(items);
that = this,
item;
array = _.clone(this.data);
array.forEach((el) => {
el.classObject = _.clone(that.classObject);
if (i <= index) {
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = true;
}
i += 1;
});
item =_.find(this.visited, {'level': el.content });
if (item) {
if (item.active){
el.classObject["vp-btn-primary-inactive"] = false;
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = true;
} else {
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = false;
el.classObject["vp-btn-primary-inactive"] = true;
}
}
});
return array;
},
},
@@ -155,6 +160,18 @@ export default {
border-color: #6c757d;
}
.vp-btn-primary-inactive {
color: #6c757d;
background-color: #007bff;
border-color: #007bff;
}
.vp-btn-primary-inactive:hover {
color: #6c757d;
background-color: #0066d3;
border-color: #0066d3;
}
.v-pm-drill-down {
vertical-align: top;
padding-left: 50px;

53
resources/assets/js/home/TaskMetrics/TaskMetrics.vue
View File

@@ -12,12 +12,12 @@
<vue-charts
ref="pm-vue-chart"
@onChangeLevel="changeLevel"
:level="level"
:levels="visited"
/>
<div class="vp-6"></div>
<drill-down :level="level" @onChangeLevel="updateVueChart" />
<drill-down :visited="visited" @onChangeLevel="changeLevel" />
</div>
</div>
</div>
</template>
<script>
@@ -31,21 +31,27 @@ export default {
name: "TaskMetrics",
mixins: [defaultMixins],
components: {
ButtonFleft,
ButtonFleft,
ModalNewRequest,
DrillDown,
VueCharts,
},
props: [],
props: ["settings"],
data() {
let that = this;
return {
level: 0,
visited: this.settings && this.settings.visited ? this.settings.visited : [
{
level: 0,
active: true
}
]
};
},
created() {},
mounted() {},
watch: {},
mounted() {
debugger;
},
computed: {},
updated() {},
beforeCreate() {},
@@ -53,15 +59,28 @@ export default {
/**
* Change level in drill down
*/
changeLevel(lv) {
this.level = lv;
},
/**
* update data in charts
*/
updateVueChart(lv) {
this.$refs["pm-vue-chart"].onChangeLevel(lv);
},
changeLevel(data) {
let item = _.find(this.visited, {level: data.level });
debugger;
this.visited.forEach(function (elem) {
elem.active = false;
});
if(!item) {
data.active = true;
this.visited.push(data);
} else {
// console.log("change lavel");
item.active = true;
}
this.$emit("updateSettings", {
data: this.visited,
key: "visited",
page: "task-metrics",
type: "normal",
id: this.id
});
},
},
};
</script>

10
resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
View File

@@ -276,10 +276,10 @@ export default {
changeOption(option) {
let that = this,
dt = {};
if (this.data.length > 0) {
if (this.data.length > 1) {
dt = {
category: option.id,
caseList: this.data[0].id.toLowerCase(),
caseList: this.data[1].id.toLowerCase(),
processes: this.selectedProcesses,
top: this.top,
};
@@ -289,7 +289,7 @@ export default {
.then((response) => {
that.totalCases = response.data;
that.formatTotalCases(response.data);
})
})
.catch((e) => {
console.error(err);
});
@@ -401,7 +401,7 @@ export default {
this.$emit("updateDataLevel", {
id: this.currentSelection["PRO_ID"],
name: this.currentSelection["PRO_TITLE"],
level: 1,
level: 2,
data: this.currentSelection,
});
},
@@ -409,7 +409,7 @@ export default {
* Show popover data options
*/
onClickData() {
let taskList = this.data[0].id.toLowerCase(),
let taskList = this.data[1].id.toLowerCase(),
obj = {
autoshow: false,
fieldId: "processName",

6
resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
View File

@@ -215,8 +215,8 @@ export default {
dt;
if (this.dateFrom && this.dateTo) {
dt = {
process: this.data[1].id,
caseList: this.data[0].id.toLowerCase(),
process: this.data[2].id,
caseList: this.data[1].id.toLowerCase(),
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
riskStatus: this.riskType,
@@ -272,7 +272,7 @@ export default {
});
this.updateApexchartAxis();
if (this.data[0].id.toLowerCase() == "draft") {
if (this.data[1].id.toLowerCase() == "draft") {
this.series = []; // Draft is empty
} else {
this.series = serie;

52
resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
View File

@@ -178,22 +178,24 @@ export default {
changeOption() {
let that = this,
dt;
if (this.dateFrom && this.dateTo && this.period) {
dt = {
processId: this.data[1].id,
caseList: this.data[0].id.toLowerCase(),
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
groupBy: this.period,
};
Api.process
.totalCasesByRange(dt)
.then((response) => {
that.formatDataRange(response.data);
})
.catch((e) => {
console.error(e);
});
if (this.data.length > 2) {
if (this.dateFrom && this.dateTo && this.period) {
dt = {
processId: this.data[2].id,
caseList: this.data[1].id.toLowerCase(),
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
groupBy: this.period,
};
Api.process
.totalCasesByRange(dt)
.then((response) => {
that.formatDataRange(response.data);
})
.catch((e) => {
console.error(e);
});
}
}
},
/**
@@ -212,13 +214,13 @@ export default {
this.$refs["LevelTwoChart"].updateOptions({
labels: labels,
title: {
text: this.data[0]["PRO_TITLE"],
text: this.data[1]["PRO_TITLE"],
align: "left",
},
});
this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
{
name: this.data[0]["PRO_TITLE"],
name: this.data[1]["PRO_TITLE"],
data: serie,
},
]);
@@ -228,9 +230,9 @@ export default {
*/
onClickDrillDown() {
this.$emit("updateDataLevel", {
id: this.data[1]["id"],
name: this.data[1]["name"],
level: 2,
id: this.data[2]["id"],
name: this.data[2]["name"],
level: 3,
data: null,
});
},
@@ -238,7 +240,7 @@ export default {
* Show popover data options
*/
onClickData() {
let taskList = this.data[0].id.toLowerCase(),
let taskList = this.data[1].id.toLowerCase(),
obj = [
{
autoshow: false,
@@ -246,10 +248,10 @@ export default {
filterVar: "process",
label: "",
options: {
label: this.data[1]["name"],
value: this.data[1]["id"],
label: this.data[2]["name"],
value: this.data[2]["id"],
},
value: this.data[1]["id"],
value: this.data[2]["id"],
},
{
autoShow: false,

2
resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
View File

@@ -84,7 +84,7 @@ export default {
that.$emit("updateDataLevel", {
id: that.currentSelection["List Name"],
name: that.currentSelection["List Name"],
level: 0,
level: 1,
data: that.currentSelection,
});
},

59
resources/assets/js/home/TaskMetrics/VueCharts.vue
View File

@@ -8,24 +8,21 @@
<vue-chart-lv-one
:key="key1"
v-show="level === 1"
:data="data"
@onChangeLevel="onChangeLevel"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-two
:key="key2"
v-show="level === 2"
:data="data"
@onChangeLevel="onChangeLevel"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-three
:key="key3"
v-show="level === 3"
:data="data"
@onChangeLevel="onChangeLevel"
:data="levels"
:breadCrumbs="dataBreadCrumbs()"
/>
</div>
@@ -47,15 +44,15 @@ export default {
VueChartLvTwo,
VueChartLvThree,
},
props: [],
props: ["levels"],
data() {
let that = this;
let that = this;
return {
level: 0,
// level: 0,
key1: _.random(0,100),
key2: _.random(0,100),
key3: _.random(0,100),
data: [],
// data: [],
settingsBreadCrumbs: [
{
class: "fas fa-info-circle",
@@ -67,7 +64,12 @@ export default {
created() {},
mounted() {},
watch: {},
computed: {},
computed: {
level: function () {
//return 0
return _.find(this.levels, {'active': true }).level;
}
},
updated() {},
beforeCreate() {},
methods: {
@@ -75,13 +77,12 @@ export default {
* Set data level 0
*/
updateDataLevel(data) {
this.data.push(data);
this.level = data.level + 1;
this.$emit("onChangeLevel", data.level + 1);
this.updateKey();
this.$emit("onChangeLevel", data);
this.updateKey(data.level);
},
updateKey() {
switch (this.level) {
updateKey(level) {
debugger;
switch (level) {
case 0:
break;
case 1:
@@ -95,26 +96,6 @@ export default {
break;
}
},
/**
* Format data to vue charts any level
*/
formatData() {
return {
level: this.level,
data: this.data,
};
},
/**
* Change level with changes in data
* @param {object} lv
*/
onChangeLevel(lv) {
_.remove(this.data, function (n) {
return n.level >= lv;
});
this.level = lv;
this.$emit("onChangeLevel", this.level);
},
/**
* Format data for data beadcrumbs
*/
@@ -122,12 +103,12 @@ export default {
let res = [],
that = this,
index = 0;
_.each(this.data, (el) => {
_.each(this.levels, (el) => {
if (index <= that.level && el.data) {
res.push({
label: el.name,
onClick() {
that.onChangeLevel(el.level);
this.$emit("onChangeLevel", el);
},
});
}