-
-
+
+ {{ dataControl.count }}
+
@@ -48,44 +44,21 @@
-
- {{ $t("View All") }}
-
-
-
-
-
- {{ $t("Completed") }}
-
-
-
-
-
- {{ $t("In Progress") }}
+ {{ $t(option) }}
@@ -95,42 +68,21 @@
-
-
- {{ $t("View All") }}
-
-
-
- {{ $t("Overdue") }}
-
-
-
-
-
- {{ $t("In Progress") }}
+ {{ $t(option) }}
@@ -172,10 +124,10 @@
{{ $t(title) }}
-
+
diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index c138bd457..a8c28ead7 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -1,54 +1,67 @@
-
-
+
-
-
-
-
+
- #{{ props.rowData.id }}
-
-
-
- {{
- props.rowData.name
- }}
-
-
-
-
- {{ props.rowData.status.label }}
-
-
-
-
+ {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
+
+
+
+
+
-
+
-
+
-
+
+
+
-
-
-
-
+ {{ getNestedPropertyValue(row, header) }}
+
+ {{ getNestedPropertyValue(row, header) }}
+
+
+
+
+
-
@@ -72,13 +85,15 @@ export default {
orderDirection: "DESC",
additionalParams: "",
showTable: true,
+ pmqlSearch: "",
sortOrder: [
{
field: "id",
sortField: "id",
direction: "desc"
}
- ]
+ ],
+ tableHeaders: [],
};
},
computed: {
@@ -87,7 +102,7 @@ export default {
}
},
mounted() {
- this.setFields();
+ this.setupColumns();
this.pmql = `requester = "${Processmaker.user.username}"`;
this.fetch();
this.$root.$on("dropdownSelectionRequest", this.fetchData);
@@ -102,6 +117,10 @@ export default {
pmql = this.pmql;
}
+ if (this.pmqlSearch) {
+ pmql = pmql + "AND" + this.pmqlSearch;
+ }
+
let { filter } = this;
if (filter && filter.length) {
@@ -135,7 +154,8 @@ export default {
.then((response) => {
this.showTable = response.data.data.length !== 0;
for (const record of response.data.data) {
- // format Status
+ record.case_number = this.formatOpenCase(record, "case_number");
+ record.case_title = this.formatOpenCase(record, "case_title");
record.status = this.formatStatus(record.status);
}
this.tableData = response.data;
@@ -158,39 +178,6 @@ export default {
});
});
},
- setFields() {
- this.fields.push({
- name: "__slot:ids",
- field: "id",
- sortField: "id",
- sortable: true,
- title: "#"
- });
-
- this.fields.push({
- name: "__slot:name",
- field: "name",
- sortField: "name",
- sortable: true,
- title: () => this.$t("Name")
- });
-
- this.fields.push({
- name: "__slot:status",
- field: "status",
- sortField: "status",
- sortable: true,
- title: () => this.$t("Status")
- });
-
- this.fields.push({
- name: "__slot:actions",
- title: ""
- });
- this.$nextTick(() => {
- this.$refs.vuetable.normalizeFields();
- });
- },
formatStatus(status) {
let color = "";
let label = "";
@@ -215,9 +202,20 @@ export default {
color = "success";
label = "In Progress";
}
- return { color, label };
+ return ` ${label} `;
},
- openRequest(data, index) {
+ /**
+ * Add the formart to column to open a case in other tab
+ */
+ formatOpenCase(value, option) {
+ const attr = value;
+ if (option === "case_title") {
+ attr[option] = value.case_title_formatted || value.case_title || "";
+ }
+ return `${attr[option]}`;
+ },
+ openRequest(data) {
return `/requests/${data.id}`;
},
classDueDate(value) {
@@ -231,25 +229,114 @@ export default {
: "text-dark";
},
fetchData(selectedOptions) {
- if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
+ if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "View All") {
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
}
if (
selectedOptions[0] === "as_participant" &&
- selectedOptions[1] !== "all"
+ selectedOptions[1] !== "View All"
) {
this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
}
- if (selectedOptions[1] === "all") {
+ if (selectedOptions[1] === "View All") {
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
}
this.fetch();
},
fetchSearch(searchData) {
- this.pmql = "";
- this.pmql = searchData;
+ this.pmqlSearch = "";
+ this.pmqlSearch = searchData;
this.fetch();
+ },
+ setupColumns() {
+ const columns = this.getColumns();
+ this.tableHeaders = this.getColumns();
+
+ columns.forEach((column) => {
+ const field = {
+ title: () => this.$t(column.label),
+ };
+
+ switch (column.field) {
+ case "id":
+ field.name = "__slot:ids";
+ field.title = "#";
+ break;
+ case "participants":
+ field.name = "__slot:participants";
+ break;
+ case "name":
+ field.name = "__slot:name";
+ break;
+ case "case_title":
+ field.name = "__slot:case_title";
+ break;
+ default:
+ field.name = column.name || column.field;
+ }
+
+ if (!field.field) {
+ field.field = column.field;
+ }
+
+ if (column.format === "datetime") {
+ field.callback = "formatDateUser|datetime";
+ }
+
+ if (column.format === "date") {
+ field.callback = "formatDateUser|date";
+ }
+
+ if (column.sortable === true && !field.sortField) {
+ field.sortField = column.field;
+ }
+
+ this.fields.push(field);
+ });
+
+ this.fields.push({
+ name: "__slot:actions",
+ title: ""
+ });
+ },
+ getColumns() {
+ return [
+ {
+ label: "Case #",
+ field: "case_number",
+ sortable: true,
+ default: true,
+ width: 96,
+ fixed_width: 96
+ },
+ {
+ label: "Case title",
+ field: "case_title",
+ sortable: true,
+ default: true,
+ truncate: true,
+ width: 314,
+ fixed_width: 314,
+ resizable: false
+ },
+ {
+ label: "Status",
+ field: "status",
+ sortable: true,
+ default: true,
+ width: 113,
+ fixed_width: 314,
+ resizable: false,
+ filter_subject: { type: "Status" }
+ }
+ ];
}
}
};
+
+
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index f6e9e43f2..6a6662817 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -1,48 +1,134 @@
-
-
-
+
-
-
+
- #{{ props.rowData.process_request.id }}
- {{ props.rowData.process_request.name }}
-
+
+
+ {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
+
+
+
+
+
+
+
+
+
+
+ {{ formatRemainingTime(row.due_at) }}
+
+ {{ getNestedPropertyValue(row, header) }}
+
+
+
+ ![]()
+
+
+
+
-
-
- {{ formatDate(props.rowData.due_at) }}
-
-
-
-
- {{ formatDate(props.rowData.completed_at) }}
-
-
-
-
-
-
+
+
+
+
+
- {{ props.rowData.element_name }}
-
+ 
+ {{ $t(column.label) }}
+
+ {{ $t(column.label) }}
+
+
+
+
+ {{ getNestedPropertyValue(row, header) }}
+
+ {{ getNestedPropertyValue(row, header) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
@@ -71,6 +157,8 @@ export default {
order_direction: "DESC",
status: "",
showTable: true,
+ tableHeaders: [],
+ pmqlSearch: "",
sortOrder: [
{
field: "ID",
@@ -78,8 +166,16 @@ export default {
direction: "DESC"
}
],
+ advancedFilter: "",
tasksPreview:
- (window.SharedComponents && window.SharedComponents.TasksHome) || {}
+ (window.SharedComponents && window.SharedComponents.TasksHome) || {},
+ taskTooltip:
+ (window.SharedComponents && window.SharedComponents.TaskTooltip) || {},
+ rowPosition: {},
+ ellipsisShow: false,
+ isTooltipVisible: false,
+ disableRuleTooltip: false,
+ hiderTimer: null
};
},
computed: {
@@ -88,8 +184,8 @@ export default {
}
},
mounted() {
- this.setFields();
- this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+ this.setupColumns();
+ this.pmql = `(user_id = ${ProcessMaker.user.id})`;
this.fetch();
this.$root.$on("dropdownSelectionTask", this.fetchData);
this.$root.$on("searchTask", this.fetchSearch);
@@ -111,6 +207,10 @@ export default {
pmql = this.pmql;
}
+ if (this.pmqlSearch) {
+ pmql = pmql + "AND" + this.pmqlSearch;
+ }
+
if (this.filterDropdowns !== undefined) {
filterDropdowns = this.filterDropdowns;
}
@@ -145,12 +245,20 @@ export default {
ProcessMaker.apiClient
.get(
`tasks?page=${this.page}&include=process,processRequest,processRequest.user,user,data` +
- `&pmql=${encodeURIComponent(pmql)}&per_page=${
- this.perPage
- }${filterParams}${this.getSortParam()}&non_system=true&${filterDropdowns}`
+ `&pmql=${encodeURIComponent(pmql)}
+ &per_page=${this.perPage}
+ ${filterParams}
+ ${this.getSortParam()}
+ ${this.advancedFilter}
+ &non_system=true&${filterDropdowns}`
)
.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,19 +282,81 @@ export default {
});
});
},
+ formatActiveTask(row) {
+ return `
+
+ ${row.element_name}
+ `;
+ },
+ formatColorBadge(date) {
+ const days = this.remainingTime(date);
+ return days >= 0 ? "primary" : "danger";
+ },
+ formatCaseTitle(processRequest, record) {
+ const draftBadge = this.verifyDraft(record);
+ return `
+ ${draftBadge}
+
+ ${this.getCaseTitle(processRequest, record)}
+ `;
+ },
+ getCaseTitle(process, record) {
+ return (
+ process.case_title_formatted ||
+ process.case_title ||
+ record.case_title ||
+ ""
+ );
+ },
+ verifyDraft(record) {
+ let draftBadge = "";
+ if (record.draft && record.status !== "CLOSED") {
+ draftBadge = `
+
+ ${this.$t("Draft")}
+
+ `;
+ }
+ return draftBadge;
+ },
+ openTask(data) {
+ return `/tasks/${data.id}/edit`;
+ },
+ openRequest(data) {
+ return `/requests/${data.id}`;
+ },
getColumns() {
const columns = [
{
label: "Task",
- field: "task",
+ field: "element_name",
sortable: true,
- default: true
+ default: true,
+ width: 153,
+ fixed_width: 153,
+ resizable: false
+ },
+ {
+ label: "Priority",
+ field: "is_priority",
+ sortable: false,
+ default: true,
+ width: 48,
+ fixed_width: 48,
+ resizable: false
},
{
- label: "Request",
- field: "request",
+ label: "Case title",
+ field: "case_title",
+ name: "__slot:case_number",
sortable: true,
- default: true
+ default: true,
+ width: 314,
+ truncate: true,
+ fixed_width: 314,
+ resizable: false
}
];
@@ -195,19 +365,26 @@ export default {
label: "Completed",
field: "completed_at",
sortable: true,
- default: true
+ default: true,
+ width: 220,
+ fixed_width: 220,
+ resizable: false
});
} else {
columns.push({
label: "Due",
field: "due_at",
sortable: true,
- default: true
+ default: true,
+ width: 220,
+ fixed_width: 220,
+ resizable: false
});
}
return columns;
},
- setFields() {
+ setupColumns() {
+ this.tableHeaders = this.getColumns();
const columns = this.getColumns();
columns.forEach((column) => {
@@ -221,6 +398,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 +435,6 @@ export default {
name: "__slot:preview",
title: ""
});
-
- this.$nextTick(() => {
- this.$refs.vuetable.normalizeFields();
- });
},
formatDate(value, format) {
format = format || "";
@@ -298,9 +475,15 @@ export default {
: "text-dark";
},
fetchData(selectedOption) {
- if (selectedOption === "In Progress" || selectedOption === "all") {
- this.filterDropdowns = "";
- this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+ this.filterDropdowns = "";
+ this.pmql = `(user_id = ${ProcessMaker.user.id})`
+ this.advancedFilter = "";
+ if (selectedOption === "Self-service") {
+ this.pmql = "";
+ this.advancedFilter = `&advanced_filter=[${encodeURIComponent('{"subject":{"type":"Status","value":"status"},"operator":"=","value":"Self Service"}')}]`;
+ }
+ if (selectedOption === "In Progress") {
+ this.pmql = this.pmql + `AND (status = "In Progress")`;
}
if (selectedOption === "Overdue") {
this.filterDropdowns = "overdue=true";
@@ -308,10 +491,126 @@ export default {
this.fetch();
},
fetchSearch(searchData) {
- this.pmql = "";
- this.pmql = searchData;
+ this.pmqlSearch = "";
+ this.pmqlSearch = 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;
+ },
+ getImgPriority(data) {
+ return data ? "/img/priority.svg" : "/img/no-priority.svg";
+ },
+ togglePriority(taskId, isPriority) {
+ ProcessMaker.apiClient
+ .put(`tasks/${taskId}/setPriority`, { is_priority: isPriority })
+ .then(() => {
+ this.fetch();
+ });
+ },
+ handleRowMouseover(row) {
+ debugger;
+ if (this.ellipsisShow) {
+ this.isTooltipVisible = !this.disableRuleTooltip;
+ this.clearHideTimer();
+ return;
+ }
+ this.clearHideTimer();
+
+ const tableContainer = document.getElementById("table-container");
+ const rectTableContainer = tableContainer.getBoundingClientRect();
+ const topAdjust = rectTableContainer.top;
+
+ let elementHeight = 28;
+
+ this.isTooltipVisible = !this.disableRuleTooltip;
+ this.tooltipRowData = row;
+
+ const rowElement = document.getElementById(`row-${row.id}`);
+ let yPosition = 0;
+
+ const rect = rowElement.getBoundingClientRect();
+ yPosition = rect.top + window.scrollY;
+
+ const selectedFiltersBar = document.querySelector(
+ ".selected-filters-bar"
+ );
+ const selectedFiltersBarHeight = selectedFiltersBar
+ ? selectedFiltersBar.offsetHeight
+ : 0;
+
+ elementHeight -= selectedFiltersBarHeight;
+
+ const rightBorderX = rect.right;
+
+ const bottomBorderY = yPosition - topAdjust - elementHeight + 100;
+
+ this.rowPosition = {
+ x: rightBorderX,
+ y: bottomBorderY
+ };
+ },
+ handleRowMouseleave() {
+ this.startHideTimer();
+ },
+ startHideTimer() {
+ this.hideTimer = setTimeout(() => {
+ this.hideTooltip();
+ }, 500);
+ },
+ clearHideTimer() {
+ clearTimeout(this.hideTimer);
+ },
+ hideTooltip() {
+ if (this.ellipsisShow) {
+ return;
+ }
+ this.isTooltipVisible = false;
}
}
};
+
+
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 7cf9f4936..054ad1cf4 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -951,10 +951,10 @@ export default [
label: "List Table",
options: [
{ value: "My Tasks", content: "My Tasks" },
- { value: "My Requests", content: "My Requests" },
+ { value: "My Requests", content: "My Cases" },
{
value: "Start New Request",
- content: "Start New Request"
+ content: "Start New Case"
}
]
}
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();
+ }
}
}
};