Merged in bugfix/PMCORE-3366 (pull request #8179)

Bugfix/PMCORE-3366

Approved-by: Rodrigo Quelca
This commit is contained in:
Henry Jonathan Quispe Quispe
2021-09-28 13:18:50 +00:00
committed by Julio Cesar Laura Avendaño
10 changed files with 275 additions and 141 deletions

View File

@@ -166,7 +166,6 @@ export default {
},
watch: {
color() {
console.log("colores");
},
},
methods: {

View File

@@ -6,13 +6,15 @@
:key="item.label"
:class="item.classObject"
>
<span v-if="item.data.color">
<div
class="vp-color-breadcrumb"
:style="{ backgroundColor: item.data.color }"
></div
></span>
<span>{{ item.label }}</span>
<span @click="item.onClick">
<span v-if="item.color">
<div
class="vp-color-breadcrumb"
:style="{ backgroundColor: item.color }"
></div
></span>
<span>{{ item.label }}</span>
</span>
</li>
<div
v-for="item in settings"
@@ -47,19 +49,11 @@ export default {
formatOptions(data) {
let options = data;
for (let i = 0; i <= options.length - 1; i++) {
if (i === options.length - 1) {
options[i].classObject = {
"vp-breadcrumb-item": true,
active: true,
"vp-inline-block": true,
};
} else {
options[i].classObject = {
"vp-breadcrumb-item": true,
active: false,
"vp-inline-block": true,
};
}
options[i].classObject = {
"vp-breadcrumb-item": true,
active: false,
"vp-inline-block": true,
};
}
return options;
},

View File

@@ -1,5 +1,5 @@
<template>
<div class="pm-all-view-popover">
<div class="pm-tm-view-popover">
<b-popover
:target="target"
ref="popover"
@@ -39,6 +39,7 @@
value-field="key"
text-field="value"
name="flavour-2a"
class="process-view-popover"
@change="changeOptions"
stacked
></b-form-checkbox-group>
@@ -68,7 +69,6 @@ export default {
results: [],
allColumns: false,
localSelected: [],
selected: [],
};
},
mounted() {
@@ -137,7 +137,7 @@ export default {
res.push(o.key);
});
}
this.selected = res;
this.localSelected = res;
},
/**
* Handler when change options event
@@ -167,4 +167,11 @@ export default {
.v-popover-footer {
display: flow-root;
}
.process-view-popover {
margin-bottom: 1rem;
overflow-y: auto;
display: block;
max-height: 200px;
}
</style>

View File

@@ -10,6 +10,7 @@
<modal-new-request ref="newRequest"></modal-new-request>
<div class="d-inline-flex p-2">
<vue-charts
:key="random"
ref="pm-vue-chart"
@onChangeLevel="changeLevel"
:levels="visited"
@@ -17,7 +18,7 @@
<div class="vp-6"></div>
<drill-down :visited="visited" @onChangeLevel="changeLevel" />
</div>
</div>
</div>
</template>
<script>
@@ -27,11 +28,12 @@ import DrillDown from "./DrillDown.vue";
import VueCharts from "./VueCharts.vue";
import defaultMixins from "./defaultMixins";
import _ from "lodash";
export default {
name: "TaskMetrics",
mixins: [defaultMixins],
components: {
ButtonFleft,
ButtonFleft,
ModalNewRequest,
DrillDown,
VueCharts,
@@ -40,13 +42,17 @@ export default {
data() {
let that = this;
return {
visited: this.settings && this.settings.visited ? this.settings.visited : [
{
level: 0,
active: true,
id: _.random(0,100),
}
]
random: _.random(0, 100000),
visited:
this.settings && this.settings.visited
? this.settings.visited
: [
{
level: 0,
active: true,
id: _.random(0, 100),
},
],
};
},
created() {},
@@ -59,27 +65,30 @@ export default {
* Change level in drill down
*/
changeLevel(data) {
let item = _.find(this.visited, data);
this.visited.forEach(function (elem) {
elem.active = false;
let item = _.findIndex(this.visited, (el) => {
return el.id == data.id;
});
if(!item) {
this.visited.forEach(function (elem) {
elem.active = false;
});
data.active = true;
item != -1 ? this.visited.splice(item, 1, data) : null;
if (item == -1) {
data.active = true;
this.visited = _.filter(this.visited, function(o) {
return o.level < data.level;
this.visited = _.filter(this.visited, function (o) {
return o.level < data.level;
});
this.visited.push(data);
} else {
item.active = true;
}
this.random = _.random(0, 100000);
this.$emit("updateSettings", {
data: this.visited,
key: "visited",
page: "task-metrics",
type: "normal",
id: this.id
id: this.id,
});
},
},
},
};
</script>

View File

@@ -6,11 +6,12 @@
</h6>
<div>
<BreadCrumb
:options="breadCrumbs.data"
:options="dataBreadcrumbs()"
:settings="settingsBreadcrumbs"
/>
<ProcessPopover
:options="optionsProcesses"
:selected="selectedProcesses"
@onChange="onChangeSearchPopover"
target="pm-task-process"
ref="pm-task-process"
@@ -25,10 +26,11 @@
:show-labels="false"
track-by="id"
label="name"
@select="changeOption"
></multiselect>
</div>
<label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP10") }}</label>
<label class="vp-inline-block vp-padding-l20">{{
$t("ID_TOP10")
}}</label>
<div class="vp-inline-block">
<b-form-checkbox
v-model="top"
@@ -104,7 +106,7 @@ export default {
BreadCrumb,
ProcessPopover,
},
props: ["data", "breadCrumbs"],
props: ["data"],
data() {
let that = this;
return {
@@ -122,7 +124,7 @@ export default {
optionsCategory: [],
optionsProcesses: [],
selectedProcesses: [],
top: false,
top: this.data[2] ? this.data[2].data.top : true,
width: 0,
totalCases: [],
currentSelection: null,
@@ -186,7 +188,20 @@ export default {
this.getCategories();
this.getProcesses();
},
watch: {},
watch: {
category(nvalue, old) {
this.changeOption();
},
optionsCategory(nvalue, old) {
this.category = this.data[2] ? this.data[2].data.category : nvalue[0];
},
optionsProcesses(nvalue, old) {
this.selectedProcesses = this.data[2]
? this.data[2].data.selectedProcesses
: _.flatMap(nvalue, (n) => n.key);
this.changeOption();
},
},
computed: {},
updated() {},
beforeCreate() {},
@@ -221,9 +236,6 @@ export default {
.processList(query || "")
.then((response) => {
that.formatDataProcesses(response.data);
that.changeOption({
id: "all",
});
})
.catch((e) => {
console.error(err);
@@ -247,25 +259,19 @@ export default {
array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
});
this.optionsCategory = array;
this.category = array[0];
},
/**
* Format processes for popover
* @param {*} data
*/
formatDataProcesses(data) {
let sels = [],
labels = [],
let labels = [],
array = [];
_.each(data, (el) => {
array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
sels.push(el["PRO_ID"]);
labels;
});
this.optionsProcesses = array;
this.selectedProcesses = sels;
//Update the labels
this.dataProcesses = data;
},
@@ -273,25 +279,25 @@ export default {
* Change the options in TOTAL CASES BY PROCESS
* @param {*} option
*/
changeOption(option) {
changeOption() {
let that = this,
dt = {};
if (this.data.length > 1) {
if (this.category && this.selectedProcesses.length > 0 && this.data[1]) {
dt = {
category: option.id,
category: this.category.id,
caseList: this.data[1].id.toLowerCase(),
processes: this.selectedProcesses,
top: this.top,
};
option.id == "all" ? delete dt.category : null;
this.category.id == "all" ? delete dt.category : null;
Api.process
.totalCasesByProcess(dt)
.then((response) => {
that.totalCases = response.data;
that.formatTotalCases(response.data);
})
})
.catch((e) => {
console.error(err);
console.error(e);
});
}
},
@@ -327,17 +333,8 @@ export default {
* @param {*} data
*/
onUpdateColumnSettings(data) {
let res;
this.selectedProcesses = data;
res = _.intersectionBy(this.totalCases, data, (el) => {
if (_.isNumber(el)) {
return el;
}
if (_.isObject(el) && el["PRO_ID"]) {
return el["PRO_ID"];
}
});
this.formatTotalCases(res);
this.changeOption();
},
/**
* Update labels in chart
@@ -365,9 +362,7 @@ export default {
* Force update view when update level
*/
forceUpdateView() {
this.changeOption({
id: 0,
});
this.changeOption();
},
/**
* Event handler change input search popover
@@ -402,7 +397,11 @@ export default {
id: this.currentSelection["PRO_ID"],
name: this.currentSelection["PRO_TITLE"],
level: 2,
data: this.currentSelection,
data: {
top: this.top,
category: this.category,
selectedProcesses: this.selectedProcesses,
},
});
},
/**
@@ -429,6 +428,20 @@ export default {
});
eventBus.$emit("home::sidebar::click-item", taskList);
},
/**
* Return the breadcrumbs
*/
dataBreadcrumbs() {
let res = [];
if (this.data[1]) {
res.push({
label: this.data[1]["name"],
onClick() {},
color: this.data[1]["color"],
});
}
return res;
},
},
};
</script>

View File

@@ -1,10 +1,10 @@
<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_RISK_MATRIX")}}</h6>
<h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}</h6>
<div>
<BreadCrumb
:options="breadCrumbs.data"
:options="dataBreadcrumbs()"
:settings="settingsBreadcrumbs"
/>
<div class="vp-width-p30 vp-inline-block">
@@ -36,9 +36,7 @@
></b-form-datepicker>
</div>
<div class="vp-inline-block">
<label class="form-label">{{
$t("ID_TOP")
}}</label>
<label class="form-label">{{ $t("ID_TOP") }}</label>
</div>
<div class="vp-inline-block">
<multiselect
@@ -127,11 +125,23 @@ export default {
let that = this;
return {
currentSelection: null,
dateFrom: moment().format("YYYY-MM-DD"),
dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
dateNow: "",
size: { name: this.$t("ID_ALL"), id: "all" },
riskType: "ON_TIME",
dateFrom:
this.data[3] && this.data[3].data.dateFromRisk
? this.data[3].data.dateFromRisk
: moment().format("YYYY-MM-DD"),
dateTo:
this.data[3] && this.data[3].data.dateToRisk
? this.data[3].data.dateToRisk
: moment().add(30, "d").format("YYYY-MM-DD"),
dateNow: moment().format("DD/MM/YYYY h:mm:ss a"),
size:
this.data[3] && this.data[3].data.size
? this.data[3].data.size
: { name: this.$t("ID_ALL"), id: "all" },
riskType:
this.data[3] && this.data[3].data.riskType
? this.data[3].data.riskType
: "ON_TIME",
settingsBreadcrumbs: [
{
class: "fas fa-info-circle",
@@ -227,9 +237,10 @@ export default {
.totalCasesByRisk(dt)
.then((response) => {
that.formatDataRange(response.data);
that.updateSettings();
})
.catch((e) => {
console.error(err);
console.error(e);
});
}
},
@@ -298,7 +309,7 @@ export default {
this.$refs["LevelThreeChart"].updateOptions({
yaxis: {
max: 0,
tickAmount: 7
tickAmount: 7,
},
title: {
text: "Days before being Overdue",
@@ -309,7 +320,7 @@ export default {
this.$refs["LevelThreeChart"].updateOptions({
yaxis: {
max: 0,
tickAmount: 7
tickAmount: 7,
},
title: {
text: "Days before being At-Risk",
@@ -421,6 +432,46 @@ export default {
});
});
},
/**
* Return the breadcrumbs
*/
dataBreadcrumbs() {
let res = [];
if (this.data[1]) {
res.push({
label: this.data[1]["name"],
onClick() {},
color: this.data[1]["color"],
});
}
if (this.data[2]) {
res.push({
label: this.data[2]["name"],
onClick() {},
color: null,
});
}
return res;
},
/**
* UPdate settings user config
*/
updateSettings() {
this.$emit("updateDataLevel", {
id: "level3",
name: this.data[2]["name"],
level: 3,
data: {
dateFrom: this.data[3].data.dateFrom,
dateTo: this.data[3].data.dateTo,
period: this.data[3].data.period,
dateFromRisk: this.dateFrom,
dateToRisk: this.dateTo,
size: this.size,
riskType: this.riskType,
},
});
},
},
};
</script>

View File

@@ -6,7 +6,7 @@
</h6>
<div>
<BreadCrumb
:options="breadCrumbs.data"
:options="dataBreadcrumbs()"
:settings="settingsBreadcrumbs"
/>
<div class="vp-width-p30 vp-inline-block">
@@ -94,13 +94,17 @@ export default {
Multiselect,
BreadCrumb,
},
props: ["data", "breadCrumbs"],
props: ["data"],
data() {
let that = this;
return {
dateFrom: moment().format("YYYY-MM-DD"),
dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
period: "day",
dateFrom: this.data[3]
? this.data[3].data.dateFrom
: moment().format("YYYY-MM-DD"),
dateTo: this.data[3]
? this.data[3].data.dateTo
: moment().add(30, "d").format("YYYY-MM-DD"),
period: this.data[3] ? this.data[3].data.period : "day",
periodOptions: [
{ text: this.$t("ID_DAY"), value: "day" },
{ text: this.$t("ID_MONTH"), value: "month" },
@@ -155,12 +159,12 @@ export default {
this.changeOption();
},
watch: {
dateFrom () {
dateFrom() {
this.validateDateTo();
},
dateTo () {
dateTo() {
this.validateDateTo();
}
},
},
computed: {},
updated() {},
@@ -230,10 +234,14 @@ export default {
*/
onClickDrillDown() {
this.$emit("updateDataLevel", {
id: this.data[2]["id"],
id: "level2",
name: this.data[2]["name"],
level: 3,
data: null,
data: {
dateFrom: this.dateFrom,
dateTo: this.dateTo,
period: this.period,
},
});
},
/**
@@ -282,7 +290,7 @@ export default {
* Validate range date
*/
validateDateTo() {
if (this.dateFrom !== '' && this.dateTo !== '') {
if (this.dateFrom !== "" && this.dateTo !== "") {
if (this.dateFrom > this.dateTo) {
this.stateDateTo = false;
} else {
@@ -290,6 +298,27 @@ export default {
}
}
},
/**
* Return the breadcrumbs
*/
dataBreadcrumbs() {
let res = [];
if (this.data[1]) {
res.push({
label: this.data[1]["name"],
onClick() {},
color: this.data[1]["color"],
});
}
if (this.data[2]) {
res.push({
label: this.data[2]["name"],
onClick() {},
color: null,
});
}
return res;
},
},
};
</script>

View File

@@ -2,22 +2,19 @@
<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>
<BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
<BreadCrumb :options="dataBreadcrumbs" :settings="settingsBreadcrumbs" />
<apexchart
v-show="typeView === 'donut'"
ref="apexchart1"
:width="width"
:options="optionsDonut"
:series="seriesDonut"
></apexchart>
<apexchart
v-show="typeView === 'bar'"
ref="apexchart2"
:width="width"
:options="optionsBar"
:series="seriesBar"
></apexchart>
<div class="row">
<div class="col-sm vp-align-right">
<button
@@ -52,7 +49,7 @@ export default {
name: "VueChartLvZero",
mixins: [],
components: { BreadCrumb },
props: ["breadCrumbs"],
props: [],
data() {
let that = this;
return {
@@ -68,6 +65,57 @@ export default {
onClick() {},
},
],
dataBreadcrumbs: [
{
label: that.$i18n.t("ID_INBOX"),
onClick() {
that.$emit("updateDataLevel", {
id: that.$i18n.t("ID_INBOX"),
name: that.$i18n.t("ID_INBOX"),
level: 1,
color: "#179a6e",
});
},
color: "#179a6e",
},
{
label: this.$i18n.t("ID_DRAFT"),
onClick() {
that.$emit("updateDataLevel", {
id: that.$i18n.t("ID_DRAFT"),
name: that.$i18n.t("ID_DRAFT"),
level: 1,
color: "#feb019",
});
},
color: "#feb019",
},
{
label: this.$i18n.t("ID_PAUSED"),
onClick() {
that.$emit("updateDataLevel", {
id: that.$i18n.t("ID_PAUSED"),
name: that.$i18n.t("ID_PAUSED"),
level: 1,
color: "#008ffb",
});
},
color: "#008ffb",
},
{
label: this.$i18n.t("ID_UNASSIGNED"),
onClick() {
that.$emit("updateDataLevel", {
id: that.$i18n.t("ID_UNASSIGNED"),
name: that.$i18n.t("ID_UNASSIGNED"),
level: 1,
color: "#8f99a0",
});
},
color: "#8f99a0",
},
],
optionsDonut: {
labels: [
this.$i18n.t("ID_INBOX"),
@@ -78,20 +126,10 @@ export default {
chart: {
id: "apexchart1",
type: "donut",
events: {
legendClick: function (chartContext, seriesIndex, config) {
that.currentSelection = that.data[seriesIndex];
that.$emit("updateDataLevel", {
id: that.currentSelection["List Name"],
name: that.currentSelection["List Name"],
level: 1,
color: that.formatColor(that.currentSelection["Color"]),
data: that.currentSelection,
});
},
},
events: {},
},
legend: {
show: false,
position: "top",
offsetY: 0,
},
@@ -127,6 +165,7 @@ export default {
},
},
legend: {
show: false,
position: "top",
offsetY: 0,
},

View File

@@ -1,29 +1,23 @@
<template>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<vue-chart-lv-zero
v-show="level === 0"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-zero v-if="level === 0" @updateDataLevel="updateDataLevel" />
<vue-chart-lv-one
:key="key1"
v-show="level === 1"
v-if="level === 1"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-two
:key="key2"
v-show="level === 2"
v-if="level === 2"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-three
:key="key3"
v-show="level === 3"
:data="levels"
:breadCrumbs="dataBreadCrumbs()"
@updateDataLevel="updateDataLevel"
/>
</div>
</template>
@@ -44,13 +38,13 @@ export default {
VueChartLvTwo,
VueChartLvThree,
},
props: ["levels"],
props: ["levels"],
data() {
let that = this;
let that = this;
return {
key1: _.random(0,100),
key2: _.random(0,100),
key3: _.random(0,100),
key1: _.random(0, 100),
key2: _.random(0, 100),
key3: _.random(0, 100),
settingsBreadCrumbs: [
{
class: "fas fa-info-circle",
@@ -63,9 +57,9 @@ export default {
mounted() {},
watch: {},
computed: {
level: function () {
return _.find(this.levels, {'active': true }).level;
}
level: function () {
return _.find(this.levels, { active: true }).level;
},
},
updated() {},
beforeCreate() {},
@@ -104,7 +98,7 @@ export default {
res.push({
label: el.name,
onClick() {
this.$emit("onChangeLevel", el);
this.$emit("onChangeLevel", el);
},
data: el,
});
@@ -124,7 +118,7 @@ export default {
};
break;
}
}
},
},
};
</script>

View File

@@ -164,7 +164,6 @@ export default {
this.data.reasonPause = this.pauseData.reasonPause;
api.cases.pauseCase(this.data)
.then((response) => {
console.log(response);
if (response.statusText == "OK" || response.status === 200) {
that.$refs["modal-pause-case"].hide();
that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()