@@ -71,6 +134,7 @@ export default {
order_direction: "DESC",
status: "",
showTable: true,
+ tableHeaders: [],
sortOrder: [
{
field: "ID",
@@ -88,7 +152,7 @@ export default {
}
},
mounted() {
- this.setFields();
+ this.setupColumns();
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
this.fetch();
this.$root.$on("dropdownSelectionTask", this.fetchData);
@@ -151,6 +215,11 @@ export default {
)
.then((response) => {
this.showTable = response.data.data.length !== 0;
+ for (const record of response.data.data) {
+ record["case_title"] = this.formatCaseTitle(record.process_request, record);
+ record["color_badge"] = this.formatColorBadge(record["due_at"]);
+ record["element_name"] = this.formatActiveTask(record);
+ }
this.tableData = response.data;
this.countResponse = this.tableData.meta.total;
this.countOverdue = `${this.tableData.meta.in_overdue}`;
@@ -174,20 +243,56 @@ export default {
});
});
},
+ formatActiveTask(row) {
+ return `
+
+ ${row.element_name}
+ `;
+ },
+ formatColorBadge(date) {
+ const days = this.remainingTime(date);
+ return days >= 0 ? "primary" : "danger";
+ },
+ formatCaseTitle(processRequest, record) {
+ return `
+
+ ${
+ processRequest.case_title_formatted ||
+ processRequest.case_title ||
+ record.case_title ||
+ ""
+ }
+ `;
+ },
+ openTask() {},
getColumns() {
const columns = [
{
label: "Task",
- field: "task",
+ field: "element_name",
sortable: true,
- default: true
+ default: true,
+ width: 153,
},
{
- label: "Request",
- field: "request",
+ label: "Priority",
+ field: "is_priority",
+ sortable: false,
+ default: true,
+ width: 48,
+ },
+ {
+ label: "Case title",
+ field: "case_title",
+ name: "__slot:case_number",
sortable: true,
- default: true
- }
+ default: true,
+ width: 314,
+ truncate: true,
+ },
];
if (this.status === "CLOSED") {
@@ -195,19 +300,22 @@ export default {
label: "Completed",
field: "completed_at",
sortable: true,
- default: true
+ default: true,
+ width: 220,
});
} else {
columns.push({
label: "Due",
field: "due_at",
sortable: true,
- default: true
+ default: true,
+ width: 220,
});
}
return columns;
},
- setFields() {
+ setupColumns() {
+ this.tableHeaders = this.getColumns();
const columns = this.getColumns();
columns.forEach((column) => {
@@ -221,6 +329,10 @@ export default {
field.field = "element_name";
field.sortField = "element_name";
break;
+ case "is_priority":
+ field.name = "__slot:is_priority";
+ field.field = "is_priority";
+ break;
case "request":
field.name = "__slot:requestName";
field.sortField = "process_requests.id,process_requests.name";
@@ -254,10 +366,6 @@ export default {
name: "__slot:preview",
title: ""
});
-
- this.$nextTick(() => {
- this.$refs.vuetable.normalizeFields();
- });
},
formatDate(value, format) {
format = format || "";
@@ -311,7 +419,51 @@ export default {
this.pmql = "";
this.pmql = searchData;
this.fetch();
+ },
+ formatRemainingTime(date) {
+ const millisecondsPerDay = 1000 * 60 * 60 * 24;
+ const remaining = this.remainingTime(date);
+ const daysRemaining = Math.ceil(remaining / millisecondsPerDay);
+ if (daysRemaining <= 1 && daysRemaining >= -1) {
+ const hoursRemaining = Math.ceil(remaining / (1000 * 60 * 60));
+ return `${hoursRemaining}H`;
+ }
+
+ return `${daysRemaining}D`;
+ },
+ remainingTime(date) {
+ date = moment(date);
+ if (!date.isValid()) {
+ return 0;
+ }
+ return date.diff(this.now);
+ },
+ sanitizeTooltip(html) {
+ let cleanHtml = html.replace(/
[\s\S]*?<\/script>/gi, "");
+ cleanHtml = cleanHtml.replace(/[\s\S]*?<\/style>/gi, "");
+ cleanHtml = cleanHtml.replace(
+ /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
+ ""
+ );
+ cleanHtml = cleanHtml.replace(/\s+/g, " ");
+
+ return cleanHtml;
}
}
};
+
+
diff --git a/src/mixins/datatable.js b/src/mixins/datatable.js
index 5d0bdcfc9..d14ee455d 100644
--- a/src/mixins/datatable.js
+++ b/src/mixins/datatable.js
@@ -1,3 +1,5 @@
+import { get } from "lodash";
+
export default {
data() {
return {
@@ -28,6 +30,90 @@ export default {
}
this.orderDirection = sortOrder[0].direction;
this.fetch();
+ },
+ getNestedPropertyValue(obj, header) {
+ return this.format(get(obj, header.field), header);
+ },
+ format(value, header) {
+ let config = "";
+ if (header.format === "datetime") {
+ config = ProcessMaker.user.datetime_format;
+ value = this.convertUTCToLocal(value, config);
+ }
+ if (header.format === "date") {
+ config = ProcessMaker.user.datetime_format.replace(
+ /[\sHh:msaAzZ]/g,
+ ""
+ );
+ value = this.convertUTCToLocal(value, config);
+ }
+ return value;
+ },
+ convertUTCToLocal(value, config) {
+ if (value) {
+ if (moment(value).isValid()) {
+ return window.moment(value).format(config);
+ }
+ return value;
+ }
+ return "-";
+ },
+ containsHTML(text) {
+ const doc = new DOMParser().parseFromString(text, "text/html");
+ return Array.from(doc.body.childNodes).some(
+ (node) => node.nodeType === Node.ELEMENT_NODE
+ );
+ },
+ isComponent(content) {
+ if (content && typeof content === "object") {
+ return content.component && typeof content.props === "object";
+ }
+ return false;
+ },
+ sanitize(html) {
+ return this.removeScripts(html);
+ },
+ removeScripts(input) {
+ const doc = new DOMParser().parseFromString(input, "text/html");
+
+ const scripts = doc.querySelectorAll("script");
+ scripts.forEach((script) => {
+ script.remove();
+ });
+
+ const styles = doc.querySelectorAll("style");
+ styles.forEach((style) => {
+ style.remove();
+ });
+
+ return doc.body.innerHTML;
+ },
+ changePage(page) {
+ this.page = page;
+ this.fetch();
+ },
+ changePerPage(value) {
+ this.perPage = value;
+ this.fetch();
+ },
+ formatAvatar(user) {
+ return {
+ component: "AvatarImage",
+ props: {
+ size: "25",
+ "input-data": user,
+ "hide-name": false,
+ "name-clickable": true
+ }
+ };
+ },
+ formatCategory(categories) {
+ return categories.map((item) => item.name).join(", ");
+ },
+ checkIfTooltipIsNeeded(e, v) {
+ if (e.target.offsetWidth >= e.target.scrollWidth) {
+ e.preventDefault();
+ }
}
}
};
+ {{ $t(column.label) }}
+