Merged in feature/PMCORE-3116 (pull request #8048)
PMCORE-3116 Approved-by: Rodrigo Quelca
This commit is contained in:
Fabio Guachalla
269
resources/assets/js/admin/Modals/ModalPreview.vue
Normal file
269
resources/assets/js/admin/Modals/ModalPreview.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<b-modal
|
||||
ref="modal-preview"
|
||||
scrollable
|
||||
size="xl"
|
||||
>
|
||||
<template v-slot:modal-title></template>
|
||||
<b-container fluid>
|
||||
<v-server-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:options="options"
|
||||
ref="table-preview"
|
||||
name="preview"
|
||||
>
|
||||
<div slot="detail">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</div>
|
||||
<div slot="case_number" slot-scope="props">
|
||||
{{ props.row.CASE_NUMBER }}
|
||||
</div>
|
||||
<div slot="case_title" slot-scope="props">
|
||||
{{ props.row.CASE_TITLE }}
|
||||
</div>
|
||||
<div slot="process_name" slot-scope="props">
|
||||
{{ props.row.PROCESS_NAME }}
|
||||
</div>
|
||||
<div slot="task" slot-scope="props">
|
||||
<TaskCell :data="props.row.TASK" />
|
||||
</div>
|
||||
<div slot="send_by" slot-scope="props">
|
||||
<CurrentUserCell :data="props.row.USER_DATA" />
|
||||
</div>
|
||||
<div slot="current_user" slot-scope="props">
|
||||
{{ props.row.USERNAME_DISPLAY_FORMAT }}
|
||||
</div>
|
||||
<div slot="due_date" slot-scope="props">
|
||||
{{ props.row.DUE_DATE }}
|
||||
</div>
|
||||
<div slot="delegation_date" slot-scope="props">
|
||||
{{ props.row.DELEGATION_DATE }}
|
||||
</div>
|
||||
<div slot="priority" slot-scope="props">
|
||||
{{ props.row.PRIORITY }}
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</div>
|
||||
</v-server-table>
|
||||
</b-container>
|
||||
<template #modal-footer>
|
||||
<b-button
|
||||
variant="danger"
|
||||
data-dismiss="modal"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ $t("ID_CANCEL") }}
|
||||
</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
</template>
|
||||
<script>
|
||||
import api from "../../api/index";
|
||||
import utils from "../../utils/utils";
|
||||
import TaskCell from "../../components/vuetable/TaskCell.vue";
|
||||
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue"
|
||||
|
||||
export default {
|
||||
name: "ModalPreview",
|
||||
props: [],
|
||||
components: {
|
||||
TaskCell,
|
||||
CurrentUserCell,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: null,
|
||||
columns: null,
|
||||
tableData: [],
|
||||
options: {
|
||||
filterable: false,
|
||||
pagination: {
|
||||
show: false
|
||||
},
|
||||
headings: {
|
||||
detail: this.$i18n.t("ID_DETAIL_CASE"),
|
||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||
case_title: this.$i18n.t("ID_CASE_TITLE"),
|
||||
process_name: this.$i18n.t("ID_PROCESS_NAME"),
|
||||
task: this.$i18n.t("ID_TASK"),
|
||||
send_by: this.$i18n.t("ID_SEND_BY"),
|
||||
due_date: this.$i18n.t("ID_DUE_DATE"),
|
||||
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
|
||||
priority: this.$i18n.t("ID_PRIORITY"),
|
||||
actions: "",
|
||||
},
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.$parent.$parent.getCasesForPreview(data)
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.$refs["modal-preview"].show();
|
||||
},
|
||||
cancel() {
|
||||
this.$refs["modal-preview"].hide();
|
||||
},
|
||||
/**
|
||||
* Get cases data
|
||||
*/
|
||||
getCasesForPreview(data) {
|
||||
let that = this,
|
||||
dt,
|
||||
paged,
|
||||
limit = data.limit,
|
||||
start = data.page === 1 ? 0 : limit * (data.page - 1),
|
||||
filters = {},
|
||||
sort = "";
|
||||
paged = start + "," + limit;
|
||||
filters = {
|
||||
paged: paged,
|
||||
}
|
||||
_.forIn(this.filters, function (item, key) {
|
||||
if(filters && item.value) {
|
||||
filters[item.filterVar] = item.value;
|
||||
}
|
||||
});
|
||||
if (sort) {
|
||||
filters["sort"] = sort;
|
||||
}
|
||||
return new Promise((resolutionFunc, rejectionFunc) => {
|
||||
switch (that.type) {
|
||||
case 'inbox':
|
||||
api.cases
|
||||
.todo(filters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
resolutionFunc({
|
||||
data: dt,
|
||||
count: response.data.total,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
rejectionFunc(e);
|
||||
});
|
||||
break;
|
||||
case 'draft':
|
||||
api.cases
|
||||
.draft(filters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
resolutionFunc({
|
||||
data: dt,
|
||||
count: response.data.total,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
rejectionFunc(e);
|
||||
});
|
||||
break;
|
||||
case 'paused':
|
||||
api.cases
|
||||
.paused(filters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
resolutionFunc({
|
||||
data: dt,
|
||||
count: response.data.total,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
rejectionFunc(e);
|
||||
});
|
||||
break;
|
||||
case 'unassigned':
|
||||
api.cases
|
||||
.unassigned(filters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
resolutionFunc({
|
||||
data: dt,
|
||||
count: response.data.total,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
rejectionFunc(e);
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format Response API to grid todo and columns
|
||||
*/
|
||||
formatDataResponse(response) {
|
||||
let data = [];
|
||||
_.forEach(response, (v) => {
|
||||
data.push({
|
||||
CASE_NUMBER: v.APP_NUMBER,
|
||||
CASE_TITLE: v.DEL_TITLE,
|
||||
PROCESS_NAME: v.PRO_TITLE,
|
||||
TASK: [{
|
||||
TITLE: v.TAS_TITLE,
|
||||
CODE_COLOR: v.TAS_COLOR,
|
||||
COLOR: v.TAS_COLOR_LABEL,
|
||||
DELAYED_TITLE:
|
||||
v.TAS_STATUS === "OVERDUE"
|
||||
? this.$i18n.t("ID_DELAYED") + ":"
|
||||
: this.statusTitle[v.TAS_STATUS],
|
||||
DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
|
||||
}],
|
||||
USER_DATA: this.formatUser(v.SEND_BY_INFO),
|
||||
USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
|
||||
userName: v.USR_LASTNAME,
|
||||
firstName: v.USR_LASTNAME,
|
||||
lastName: v.USR_LASTNAME,
|
||||
format: window.config.FORMATS.format || null,
|
||||
}),
|
||||
DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
|
||||
DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
|
||||
PRIORITY: v.DEL_PRIORITY_LABEL,
|
||||
DEL_INDEX: v.DEL_INDEX,
|
||||
APP_UID: v.APP_UID,
|
||||
PRO_UID: v.PRO_UID,
|
||||
TAS_UID: v.TAS_UID,
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
/**
|
||||
* Set the format to show user's information
|
||||
* @return {array} dataFormat
|
||||
*/
|
||||
formatUser(data) {
|
||||
var dataFormat = [],
|
||||
userDataFormat;
|
||||
userDataFormat = utils.userNameDisplayFormat({
|
||||
userName: data.user_tooltip.usr_firstname,
|
||||
firstName: data.user_tooltip.usr_lastname,
|
||||
lastName: data.user_tooltip.usr_username,
|
||||
format: window.config.FORMATS.format || null
|
||||
});
|
||||
dataFormat.push({
|
||||
USERNAME_DISPLAY_FORMAT: userDataFormat,
|
||||
EMAIL: data.user_tooltip.usr_email,
|
||||
POSITION: data.user_tooltip.usr_position,
|
||||
AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
|
||||
window.config.SYS_URI +
|
||||
`users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}` : "",
|
||||
UNASSIGNED: userDataFormat !== "" ? true : false
|
||||
});
|
||||
return dataFormat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.VueTables__limit-field {
|
||||
display: none;
|
||||
}
|
||||
.table-responsive {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div id="people">
|
||||
<ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
|
||||
<ModalPreview ref="modal-preview"></ModalPreview>
|
||||
<button-fleft :data="newList"></button-fleft>
|
||||
<button-fleft :data="importList"></button-fleft>
|
||||
<v-server-table
|
||||
@@ -16,11 +17,9 @@
|
||||
</div>
|
||||
<div slot="owner" slot-scope="props">
|
||||
<OwnerCell :data="props.row.owner" />
|
||||
</div>
|
||||
</div>
|
||||
</v-server-table>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import Api from "./Api/CaseList";
|
||||
@@ -29,6 +28,7 @@ import Ellipsis from "../../../components/utils/ellipsis.vue";
|
||||
import utils from "../../../utils/utils";
|
||||
import OwnerCell from "../../../components/vuetable/OwnerCell";
|
||||
import ModalDeleteCaseList from "./../../Modals/ModalDeleteCaseList.vue";
|
||||
import ModalPreview from "./../../Modals/ModalPreview.vue";
|
||||
import download from "downloadjs";
|
||||
|
||||
export default {
|
||||
@@ -38,7 +38,8 @@ export default {
|
||||
ButtonFleft,
|
||||
Ellipsis,
|
||||
OwnerCell,
|
||||
ModalDeleteCaseList
|
||||
ModalDeleteCaseList,
|
||||
ModalPreview,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -105,7 +106,8 @@ export default {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
customColumns: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -184,8 +186,33 @@ export default {
|
||||
this.$refs["modal-delete-list"].data = data;
|
||||
this.$refs["modal-delete-list"].show();
|
||||
},
|
||||
/**
|
||||
* Show modal preview
|
||||
* @param {object} data
|
||||
*/
|
||||
showPreview(data) {
|
||||
|
||||
this.$refs["modal-preview"].columns = this.getColumns(data);
|
||||
this.$refs["modal-preview"].type = data.type;
|
||||
this.$refs["modal-preview"].show();
|
||||
},
|
||||
/**
|
||||
* Get columns to show in the preview
|
||||
* @param {Object} data
|
||||
* @returns {Array} columns
|
||||
*/
|
||||
getColumns(data) {
|
||||
var columns = [],
|
||||
auxColumn,
|
||||
i;
|
||||
for (i = 0; i < data.columns.length; i += 1) {
|
||||
auxColumn = data.columns[i];
|
||||
if (auxColumn.set) {
|
||||
columns.push(auxColumn.field);
|
||||
}
|
||||
}
|
||||
columns.push('actions');
|
||||
columns.unshift('detail');
|
||||
return columns
|
||||
},
|
||||
editCustomCaseList(data) {
|
||||
this.$emit("showSketch", {
|
||||
@@ -212,49 +239,49 @@ export default {
|
||||
download(JSON.stringify(data), fileName + ".json", typeMime);
|
||||
},
|
||||
/**
|
||||
* Show options in the ellipsis
|
||||
* @param {objec} data
|
||||
*/
|
||||
updateDataEllipsis(data) {
|
||||
let that = this;
|
||||
this.showEllipsis = !this.showEllipsis;
|
||||
if (this.showEllipsis) {
|
||||
this.dataEllipsis = {
|
||||
buttons: {
|
||||
open: {
|
||||
name: "delete",
|
||||
icon: "far fa-trash-alt",
|
||||
color: "red",
|
||||
fn: function() {
|
||||
that.showModalDelete(data);
|
||||
* Show options in the ellipsis
|
||||
* @param {objec} data
|
||||
*/
|
||||
updateDataEllipsis(data) {
|
||||
let that = this;
|
||||
this.showEllipsis = !this.showEllipsis;
|
||||
if (this.showEllipsis) {
|
||||
this.dataEllipsis = {
|
||||
buttons: {
|
||||
open: {
|
||||
name: "delete",
|
||||
icon: "far fa-trash-alt",
|
||||
color: "red",
|
||||
fn: function() {
|
||||
that.showModalDelete(data);
|
||||
}
|
||||
},
|
||||
note: {
|
||||
name: "edit",
|
||||
icon: "far fa-edit",
|
||||
fn: function() {
|
||||
that.editCustomCaseList(data);
|
||||
}
|
||||
},
|
||||
reassign: {
|
||||
name: "download",
|
||||
icon: "fas fa-arrow-circle-down",
|
||||
fn: function() {
|
||||
that.downloadCaseList(data);
|
||||
}
|
||||
},
|
||||
pause: {
|
||||
name: "preview",
|
||||
icon: "fas fa-tv",
|
||||
color: "green",
|
||||
fn: function() {
|
||||
that.showPreview(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
note: {
|
||||
name: "edit",
|
||||
icon: "far fa-edit",
|
||||
fn: function() {
|
||||
that.editCustomCaseList(data);
|
||||
}
|
||||
},
|
||||
reassign: {
|
||||
name: "download",
|
||||
icon: "fas fa-arrow-circle-down",
|
||||
fn: function() {
|
||||
that.downloadCaseList(data);
|
||||
}
|
||||
},
|
||||
pause: {
|
||||
name: "preview",
|
||||
icon: "fas fa-tv",
|
||||
color: "green",
|
||||
fn: function() {
|
||||
that.showPreview(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user