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

PMCORE-3366

Browse Source
This commit is contained in:
Henry Jordan
2021-09-24 20:17:56 +00:00
parent f24611127e
commit c353ef77f8
7 changed files with 144 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/assets/js/components/utils/BreadCrumb.vue
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;
},

2
resources/assets/js/home/Inbox/defaultMixins.js
View File

@@ -4,7 +4,7 @@ export default {
data() {
let that = this;
return {
typeView: this.settings.view && this.settings.view.typeView
typeView: this.settings && this.settings.view && this.settings.view.typeView
? this.settings.view.typeView
: "GRID",
random: 1,

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

@@ -6,7 +6,7 @@
</h6>
<div>
<BreadCrumb
:options="breadCrumbs.data"
:options="dataBreadcrumbs()"
:settings="settingsBreadcrumbs"
/>
<ProcessPopover
@@ -28,7 +28,9 @@
@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 {
@@ -289,7 +291,7 @@ export default {
.then((response) => {
that.totalCases = response.data;
that.formatTotalCases(response.data);
})
})
.catch((e) => {
console.error(err);
});
@@ -429,6 +431,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>

33
resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
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
@@ -298,7 +296,7 @@ export default {
this.$refs["LevelThreeChart"].updateOptions({
yaxis: {
max: 0,
tickAmount: 7
tickAmount: 7,
},
title: {
text: "Days before being Overdue",
@@ -309,7 +307,7 @@ export default {
this.$refs["LevelThreeChart"].updateOptions({
yaxis: {
max: 0,
tickAmount: 7
tickAmount: 7,
},
title: {
text: "Days before being At-Risk",
@@ -421,6 +419,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>

33
resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
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,7 +94,7 @@ export default {
Multiselect,
BreadCrumb,
},
props: ["data", "breadCrumbs"],
props: ["data"],
data() {
let that = this;
return {
@@ -155,12 +155,12 @@ export default {
this.changeOption();
},
watch: {
dateFrom () {
dateFrom() {
this.validateDateTo();
},
dateTo () {
dateTo() {
this.validateDateTo();
}
},
},
computed: {},
updated() {},
@@ -282,7 +282,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 +290,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>

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

@@ -2,7 +2,7 @@
<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"
@@ -52,7 +52,7 @@ export default {
name: "VueChartLvZero",
mixins: [],
components: { BreadCrumb },
props: ["breadCrumbs"],
props: [],
data() {
let that = this;
return {
@@ -68,6 +68,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 +129,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 +168,7 @@ export default {
},
},
legend: {
show: false,
position: "top",
offsetY: 0,
},

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

@@ -3,27 +3,23 @@
<vue-chart-lv-zero
v-show="level === 0"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-one
:key="key1"
v-show="level === 1"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-two
:key="key2"
v-show="level === 2"
:data="levels"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-three
:key="key3"
v-show="level === 3"
:data="levels"
:breadCrumbs="dataBreadCrumbs()"
/>
</div>
</template>