Files
luos/resources/assets/js/home/MyCases/MyCases.vue
2021-08-31 12:09:38 +00:00

712 lines
26 KiB
Vue

<template>
<div id="v-mycases" ref="v-mycases" class="v-container-mycases">
<b-alert
:show="dataAlert.dismissCountDown"
dismissible
:variant="dataAlert.variant"
@dismissed="dataAlert.dismissCountDown = 0"
@dismiss-count-down="countDownChanged"
>
{{ dataAlert.message }}
</b-alert>
<button-fleft :data="newCase"></button-fleft>
<MyCasesFilter
:filters="filters"
:title="title"
:random="random"
:icon="filterHeaderObject.icon"
@onRemoveFilter="onRemoveFilter"
@onUpdateFilters="onUpdateFilters"
/>
<header-counter :data="headers"> </header-counter>
<modal-new-request ref="newRequest"></modal-new-request>
<settings-popover
:options="formatColumnSettings(options.headings)"
target="pm-dr-column-settings"
@onUpdateColumnSettings="onUpdateColumnSettings"
:key="random + 1"
:selected="formatColumnSelected(columns)"
/>
<v-server-table
:data="tableData"
:columns="columns"
:options="options"
ref="vueTable"
name="mycases"
@row-click="onRowClick"
:key="random"
>
<div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div slot="case_number" slot-scope="props">
{{ props.row.CASE_NUMBER }}
</div>
<div slot="thread_title" slot-scope="props">
<ThreadTitleCell :data="props.row.THREAD_TITLE" />
</div>
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="pending_taks" slot-scope="props">
<GroupedCell :data="props.row.PENDING_TASKS" />
</div>
<div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
<div slot="start_date" slot-scope="props">
{{ props.row.START_DATE }}
</div>
<div slot="finish_date" slot-scope="props">
{{ props.row.FINISH_DATE }}
</div>
<div slot="duration" slot-scope="props">
{{ props.row.DURATION }}
</div>
<div slot="actions" slot-scope="props">
<div
class="btn-default"
v-bind:style="{ color: props.row.MESSAGE_COLOR }"
@click="openComments(props.row)"
>
<span class="fas fa-comments"></span>
</div>
</div>
</v-server-table>
<ModalComments
ref="modal-comments"
@postNotes="onPostNotes"
></ModalComments>
</div>
</template>
<script>
import HeaderCounter from "../../components/home/HeaderCounter.vue";
import ButtonFleft from "../../components/home/ButtonFleft.vue";
import ModalNewRequest from "../ModalNewRequest.vue";
import MyCasesFilter from "../../components/search/MyCasesFilter";
import ModalComments from "../modal/ModalComments.vue";
import GroupedCell from "../../components/vuetable/GroupedCell.vue";
import ThreadTitleCell from "../../components/vuetable/ThreadTitleCell.vue"
import api from "../../api/index";
import utils from "../../utils/utils";
import defaultMixins from "./defaultMixins";
import { Event } from "vue-tables-2";
export default {
name: "MyCases",
mixins: [defaultMixins],
components: {
MyCasesFilter,
HeaderCounter,
ButtonFleft,
ModalNewRequest,
GroupedCell,
ModalComments,
ThreadTitleCell,
},
props: ["defaultOption", "settings"],
data() {
let that = this;
return {
dataAlert: {
dismissSecs: 5,
dismissCountDown: 0,
message: "",
variant: "info",
},
metrics: [],
title: this.$i18n.t("ID_MY_CASES"),
filter: "CASES_INBOX",
allView: [],
filterHeader: "STARTED",
filterHeaderObject: {
icon:"fas fa-inbox"
},
headers: [],
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE",
},
random: _.random(0,1000000000),
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
onClick: () => {
this.$refs["newRequest"].show();
},
},
filters:
this.settings && this.settings.filters
? this.settings.filters
: {},
columns:
this.settings && this.settings.columns
? this.settings.columns
: [
"case_number",
"process_name",
"thread_title",
"pending_taks",
"status",
"start_date",
"finish_date",
"duration",
"actions",
],
tableData: [],
options: {
filterable: false,
headings: {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
pending_taks: this.$i18n.t("ID_PENDING_TASKS"),
status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
start_date: this.$i18n.t("ID_START_DATE"),
finish_date: this.$i18n.t("ID_FINISH_DATE"),
duration: this.$i18n.t("ID_DURATION"),
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"),
},
selectable: {
mode: "single",
only: function(row) {
return true;
},
selectAllMode: "page",
programmatic: false,
},
sortable: ["case_number"],
orderBy:
this.settings && this.settings.orderBy
? this.settings.orderBy
: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
settings: {
actions: {
class: "fas fa-cog",
id: "pm-dr-column-settings",
events: {
click() {
that.$root.$emit(
"bv::show::popover",
"pm-dr-column-settings"
);
},
},
},
},
},
translations: null,
pmDateFormat: window.config.FORMATS.dateFormat,
clickCount: 0,
singleClickTimer: null,
statusTitle: {
ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
DRAFT: this.$i18n.t("ID_IN_DRAFT"),
PAUSED: this.$i18n.t("ID_PAUSED"),
UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
},
};
},
mounted() {
let that = this;
this.getHeaders();
this.openDefaultCase();
// force to open start cases modal
// if the user has start case as a default case menu option
if (window.config._nodeId === "CASES_START_CASE") {
this.$refs["newRequest"].show();
}
// define sort event
Event.$on('vue-tables.mycases.sorted', function (data) {
that.$emit("updateSettings", {
data: data,
key: "orderBy",
parent: this.page,
type: "normal",
id: this.id
});
});
},
watch: {
columns: function (val) {
this.$emit("updateSettings", {
data: val,
key: "columns",
parent: this.page,
type: "normal",
id: this.id
});
},
filters: function (val) {
this.$emit("updateSettings", {
data: val,
key: "filters",
parent: this.page,
type: "normal",
id: this.id
});
},
},
computed: {
/**
* Build our ProcessMaker apiClient
*/
ProcessMaker() {
return window.ProcessMaker;
},
},
updated() {},
beforeCreate() {},
methods: {
/**
* Open a case when the component was mounted
*/
openDefaultCase() {
let params;
if (this.defaultOption) {
params = utils.getAllUrlParams(this.defaultOption);
if (params && params.app_uid && params.del_index) {
this.openCase({
APP_UID: params.app_uid,
DEL_INDEX: params.del_index,
});
this.$emit("cleanDefaultOption");
}
}
},
/**
* Row click event handler
* @param {object} event
*/
onRowClick(event) {
let self = this;
self.clickCount += 1;
if (self.clickCount === 1) {
self.singleClickTimer = setTimeout(function() {
self.clickCount = 0;
}, 400);
} else if (self.clickCount === 2) {
clearTimeout(self.singleClickTimer);
self.clickCount = 0;
self.openCaseDetail(event.row);
}
},
/**
* Open selected case
*
* @param {object} item
*/
openCase(item) {
this.$emit("onUpdateDataCase", {
APP_UID: item.APP_UID,
DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
ACTION: "todo",
});
this.$emit("onUpdatePage", "XCase");
},
/**
* Open case detail
*
* @param {object} item
*/
openCaseDetail(item) {
let that = this;
api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
api.cases
.cases_open(_.extend({ ACTION: "todo" }, item))
.then(() => {
that.$emit("onUpdateDataCase", {
APP_UID: item.APP_UID,
DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
APP_NUMBER: item.CASE_NUMBER,
ACTION:
that.filterHeader === "SUPERVISING"
? "to_revise"
: "todo",
});
that.$emit("onUpdatePage", "case-detail");
});
});
},
/**
* Get Cases Headers from BE
*/
getHeaders() {
let that = this;
api.casesHeader.get().then((response) => {
that.headers = that.formatCasesHeaders(response.data);
that.setFilterHeader();
});
},
/**
* Set a filter in the header from Default Cases Menu option
*/
setFilterHeader() {
let header = window.config._nodeId,
filters = this.headers,
filter,
i;
if (header === "CASES_TO_REVISE") {
filter = "SUPERVISING";
}
if (header === "CASES_SENT") {
filter = "STARTED";
}
for (i = 0; i < filters.length; i += 1) {
if (filters[i].item === filter) {
filters[i].onClick(filters[i]);
}
}
},
/**
* Get cases data by header
*/
getCasesForVueTable(data) {
let that = this,
dt,
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {},
sort = "";
filters = {
filter: that.filterHeader,
limit: limit,
offset: start
};
_.forIn(this.filters, function(item, key) {
if (filters && item.value) {
filters[item.filterVar] = item.value;
}
});
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.myCases(filters)
.then((response) => {
dt = that.formatDataResponse(response.data.data);
resolutionFunc({
data: dt,
count: response.data.total,
});
})
.catch((e) => {
rejectionFunc(e);
});
});
},
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data) {
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${
data.ascending === 1 ? "ASC" : "DESC"
}`;
}
return sort;
},
/**
* Format Response API TODO to grid inbox and columns
*/
formatDataResponse(response) {
let that = this,
data = [];
_.forEach(response, (v) => {
data.push({
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.THREAD_TITLES,
PROCESS_NAME: v.PRO_TITLE,
STATUS: v.APP_STATUS,
START_DATE: v.APP_CREATE_DATE_LABEL || "",
FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",
PENDING_TASKS: that.formantPendingTask(
v.PENDING,
v.APP_STATUS
),
DURATION: v.DURATION,
DEL_INDEX: v.DEL_INDEX,
APP_UID: v.APP_UID,
PRO_UID: v.PRO_UID,
TAS_UID: v.TAS_UID,
MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black" : "silver",
});
});
return data;
},
/**
* Format data for pending task.
*/
formantPendingTask(data, status) {
var i,
userDataFormat,
dataFormat = [];
for (i = 0; i < data.length; i += 1) {
userDataFormat = utils.userNameDisplayFormat({
userName: data[i].user_tooltip.usr_username || "",
firstName: data[i].user_tooltip.usr_firstname || "",
lastName: data[i].user_tooltip.usr_lastname || "",
format: window.config.FORMATS.format || null,
});
dataFormat.push({
TAS_NAME: data[i].tas_title,
STATUS: data[i].tas_color,
DELAYED_TITLE: this.delayedTitle(data[i], status),
DELAYED_MSG:
data[i].tas_status === "OVERDUE" &&
status !== "COMPLETED"
? data[i].delay
: "",
AVATAR:
userDataFormat !== ""
? window.config.SYS_SERVER_AJAX +
window.config.SYS_URI +
`users/users_ViewPhotoGrid?pUID=${data[i].user_id}`
: "",
USERNAME:
userDataFormat !== ""
? userDataFormat
: this.$i18n.t("ID_UNASSIGNED"),
POSITION: data[i].user_tooltip.usr_position,
EMAIL: data[i].user_tooltip.usr_email,
UNASSIGNED: userDataFormat !== "" ? true : false,
});
}
return dataFormat;
},
/**
* Prepare the delayed title
* @param {object} data
* @param {string} status
* @returns {string}
*/
delayedTitle(data, status) {
let title = "";
if (status === "COMPLETED") {
title = this.$i18n.t("ID_COMPLETED") + ": ";
title +=
data.tas_status === "ON_TIME"
? this.$i18n.t("ID_ON_TIME")
: this.$i18n.t("ID_TASK_OVERDUE");
} else {
title =
data.tas_status === "OVERDUE"
? this.$i18n.t("ID_DELAYED") + ":"
: this.statusTitle[data.tas_status];
}
return title;
},
/**
* Convert string to date format
*
* @param {string} value
* @return {date} myDate
*/
convertDate(value) {
myDate = new Date(1900, 0, 1, 0, 0, 0);
try {
if (!isNaN(Date.parse(value))) {
var myArray = value.split(" ");
var myArrayDate = myArray[0].split("-");
if (myArray.length > 1) {
var myArrayHour = myArray[1].split(":");
} else {
var myArrayHour = new Array("0", "0", "0");
}
var myDate = new Date(
myArrayDate[0],
myArrayDate[1] - 1,
myArrayDate[2],
myArrayHour[0],
myArrayHour[1],
myArrayHour[2]
);
}
} catch (err) {
throw new Error(err);
}
return myDate;
},
/**
* Get a format for specific date
*
* @param {string} d
* @return {string} dateToConvert
*/
dateFormatCases(d) {
let dateToConvert = d;
const stringToDate = this.convertDate(dateToConvert);
if (this.pmDateFormat === "Y-m-d H:i:s") {
dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
} else if (this.pmDateFormat === "d/m/Y") {
dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
} else if (this.pmDateFormat === "m/d/Y") {
dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
} else if (this.pmDateFormat === "Y/d/m") {
dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
} else if (this.pmDateFormat === "Y/m/d") {
dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
} else if (this.pmDateFormat === "F j, Y, g:i a") {
dateToConvert = dateFormat(
stringToDate,
"mmmm d, yyyy, h:MM tt"
);
} else if (this.pmDateFormat === "m.d.y") {
dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
} else if (this.pmDateFormat === "j, n, Y") {
dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
} else if (this.pmDateFormat === "D M j G:i:s T Y") {
dateToConvert = dateFormat(
stringToDate,
"ddd mmm d HH:MM:ss Z yyyy"
);
} else if (this.pmDateFormat === "M d, Y") {
dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
} else if (this.pmDateFormat === "m D, Y") {
dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
} else if (this.pmDateFormat === "D d M, Y") {
dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
} else if (this.pmDateFormat === "D M, Y") {
dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
} else if (this.pmDateFormat === "d M, Y") {
dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
} else if (this.pmDateFormat === "d m, Y") {
dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
} else if (this.pmDateFormat === "d.m.Y") {
dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
} else {
dateToConvert = dateFormat(
stringToDate,
'dd "de" mmmm "de" yyyy'
);
}
return dateToConvert;
},
/**
* Format Response from HEADERS
* @param {*} response
*/
formatCasesHeaders(response) {
let data = [],
that = this,
info = {
STARTED: {
icon: "fas fa-inbox",
class: "btn-primary",
},
COMPLETED: {
icon: "fas fa-check-square",
class: "btn-success",
},
IN_PROGRESS: {
icon: "fas fa-tasks",
class: "btn-danger",
},
SUPERVISING: {
icon: "fas fa-binoculars",
class: "btn-warning",
},
};
_.forEach(response, (v) => {
//Hack for display the SUPERVISING CARD
if (!(v.id === "SUPERVISING" && v.counter === 0)) {
data.push({
title: v.title,
counter: v.counter,
item: v.id,
icon: info[v.id].icon,
onClick: (obj) => {
that.title = obj.title;
that.filterHeader = obj.item;
that.$refs["vueTable"].setPage(1); // Reset the page when change the header filter
that.$refs["vueTable"].getData();
that.filterHeaderObject = obj;
that.random = _.random(0,1000000000);
},
class: info[v.id].class,
});
}
});
return data;
},
/**
* Open the case notes modal
* @param {object} data - needed to create the data
*/
openComments(data) {
let that = this;
api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
that.$refs["modal-comments"].dataCase = data;
that.$refs["modal-comments"].show();
});
},
onRemoveFilter(data) {},
onUpdateFilters(data) {
this.filters = data.params;
if (data.refresh) {
this.$nextTick(() => {
this.$refs["vueTable"].getData();
});
}
},
/**
* Post notes event handler
*/
onPostNotes() {
this.$refs["vueTable"].getData();
},
/**
* Show the alert message
* @param {string} message - message to be displayen in the body
* @param {string} type - alert type
*/
showAlert(message, type) {
this.dataAlert.message = message;
this.dataAlert.variant = type || "info";
this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
},
/**
* Updates the alert dismiss value to update
* dismissCountDown and decrease
* @param {mumber}
*/
countDownChanged(dismissCountDown) {
this.dataAlert.dismissCountDown = dismissCountDown;
},
},
};
</script>
<style>
.v-container-mycases {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
}
</style>