322 lines
11 KiB
Vue
322 lines
11 KiB
Vue
<template>
|
|
<div id="people">
|
|
<ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
|
|
<ModalPreview ref="modal-preview"></ModalPreview>
|
|
<ModalImport ref="modal-import"></ModalImport>
|
|
<button-fleft :data="newList"></button-fleft>
|
|
<button-fleft :data="importList"></button-fleft>
|
|
<v-server-table
|
|
:data="tableData"
|
|
:columns="columns"
|
|
:options="options"
|
|
ref="table"
|
|
>
|
|
<div slot="actions" slot-scope="props">
|
|
<div @click="updateDataEllipsis(props.row)">
|
|
<ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
|
|
</div>
|
|
</div>
|
|
<div slot="owner" slot-scope="props">
|
|
<OwnerCell :data="props.row.owner" />
|
|
</div>
|
|
</v-server-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Api from "./Api/CaseList";
|
|
import ButtonFleft from "../../../components/home/ButtonFleft.vue";
|
|
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 ModalImport from "./../../Modals/ModalImport.vue";
|
|
import download from "downloadjs";
|
|
|
|
export default {
|
|
name: "Tables",
|
|
props: ["module"],
|
|
components: {
|
|
ButtonFleft,
|
|
Ellipsis,
|
|
OwnerCell,
|
|
ModalDeleteCaseList,
|
|
ModalPreview,
|
|
ModalImport,
|
|
},
|
|
data() {
|
|
return {
|
|
dataEllipsis: {
|
|
buttons: {}
|
|
},
|
|
showEllipsis: false,
|
|
newList: {
|
|
title: this.$i18n.t("New List"),
|
|
class: "btn-success",
|
|
onClick: () => {
|
|
this.$emit("showSketch", {
|
|
name: "",
|
|
description: "",
|
|
tableUid: "",
|
|
iconList: "far fa-check-circle",
|
|
iconColor: '#000000',
|
|
iconColorScreen: '#FFFFFF',
|
|
type: this.module
|
|
|
|
});
|
|
|
|
//TODO button
|
|
}
|
|
},
|
|
importList: {
|
|
title: this.$i18n.t("Import List"),
|
|
class: "btn-success",
|
|
onClick: () => {
|
|
this.importCustomCaseList();
|
|
}
|
|
},
|
|
columns: [
|
|
"name",
|
|
"process",
|
|
"tableName",
|
|
"owner",
|
|
"createDate",
|
|
"updateDate",
|
|
"actions"
|
|
],
|
|
tableData: [],
|
|
options: {
|
|
filterable: true,
|
|
headings: {
|
|
name: this.$i18n.t("ID_NAME"),
|
|
process: this.$i18n.t("ID_PROCESS"),
|
|
tableName: this.$i18n.t("ID_PM_TABLE"),
|
|
owner: this.$i18n.t("ID_OWNER"),
|
|
createDate: this.$i18n.t("ID_DATE_CREATED"),
|
|
updateDate: this.$i18n.t("ID_DATE_UPDATED"),
|
|
actions: ""
|
|
},
|
|
texts: {
|
|
count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
|
|
first: this.$i18n.t("ID_FIRST"),
|
|
last: this.$i18n.t("ID_LAST"),
|
|
filter: this.$i18n.t("ID_FILTER") + ":",
|
|
limit: this.$i18n.t("ID_RECORDS") + ":",
|
|
page: this.$i18n.t("ID_PAGE") + ":",
|
|
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
|
|
},
|
|
requestFunction(data) {
|
|
return this.$parent.$parent.getCasesForVueTable(data);
|
|
},
|
|
|
|
},
|
|
customColumns: [],
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* Get cases data by module
|
|
* @param {object} datas
|
|
* @returns {object}
|
|
*/
|
|
getCasesForVueTable(data) {
|
|
let that = this,
|
|
dt,
|
|
paged,
|
|
limit = data.limit,
|
|
start = data.page === 1 ? 0 : limit * (data.page - 1),
|
|
filters = {};
|
|
filters = {
|
|
offset: start,
|
|
limit: limit
|
|
};
|
|
if (data && data.query) {
|
|
filters["search"] = data.query;
|
|
}
|
|
_.forIn(this.filters, function (item, key) {
|
|
if(filters && item.value) {
|
|
filters[item.filterVar] = item.value;
|
|
}
|
|
});
|
|
return new Promise((resolutionFunc, rejectionFunc) => {
|
|
Api.getCaseList(filters, that.module)
|
|
.then((response) => {
|
|
dt = that.formatDataResponse(response.data.data);
|
|
resolutionFunc({
|
|
data: dt,
|
|
count: response.data.total
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
rejectionFunc(e);
|
|
});
|
|
});
|
|
},
|
|
/**
|
|
* Format Response API TODO to grid inbox and columns
|
|
* @param {object} response
|
|
* @returns {object}
|
|
*/
|
|
formatDataResponse(response){
|
|
let that = this,
|
|
data = [],
|
|
userDataFormat;
|
|
_.forEach(response, (v) => {
|
|
userDataFormat = utils.userNameDisplayFormat({
|
|
userName: v.userName || "",
|
|
firstName: v.userFirstname || "",
|
|
lastName: v.userLastname || "",
|
|
format: window.config.FORMATS.format || null
|
|
});
|
|
v["owner"] = {
|
|
userAvatar: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
|
|
window.config.SYS_URI +
|
|
`users/users_ViewPhotoGrid?pUID=${v.userId}` : "",
|
|
userInfo: userDataFormat || "",
|
|
userEmail: v.userEmail,
|
|
userId: v.userId,
|
|
userPosition: v.userPosition || ""
|
|
}
|
|
data.push(v);
|
|
});
|
|
return data;
|
|
},
|
|
/**
|
|
* Show modal to delete a custom case list
|
|
* @param {object} data
|
|
*/
|
|
showModalDelete(data) {
|
|
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", {
|
|
id: data.id,
|
|
name: data.name,
|
|
description: data.description,
|
|
tableUid: data.tableUid,
|
|
tableName: data.tableName,
|
|
iconList: data.iconList,
|
|
iconColor: data.iconColor,
|
|
iconColorScreen: data.iconColorScreen,
|
|
columns: data.columns,
|
|
enableFilter: data.enableFilter,
|
|
type: this.module
|
|
});
|
|
},
|
|
/**
|
|
* Export the Custom Case List in a json
|
|
* @param {object} data
|
|
*/
|
|
downloadCaseList(data) {
|
|
var fileName = data.name,
|
|
typeMime = "text/plain",
|
|
dataExport = [];
|
|
dataExport = this.filterDataToExport(data);
|
|
download(JSON.stringify(dataExport), fileName + ".json", typeMime);
|
|
},
|
|
/**
|
|
* Filter the sensible information to export
|
|
* @param {Array} data
|
|
*/
|
|
filterDataToExport(data) {
|
|
var dataExport = [];
|
|
dataExport.push({
|
|
type: data['type'],
|
|
name: data['name'],
|
|
description: data['description'],
|
|
tableUid: data['tableUid'],
|
|
tableName: data['tableName'],
|
|
columns: data['columns'],
|
|
userId: data['userId'],
|
|
iconList: data['iconList'],
|
|
iconColor: data['iconColor'],
|
|
iconColorScreen: data['iconColorScreen'],
|
|
createDate: data['createDate'],
|
|
updateDate: data['updateDate']
|
|
});
|
|
return dataExport;
|
|
},
|
|
/**
|
|
* 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
importCustomCaseList() {
|
|
this.$refs["modal-import"].show();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.float-right {
|
|
padding-left: 1.5%;
|
|
}
|
|
</style> |