diff --git a/src/components/renderer/avatar-dropdown.vue b/src/components/renderer/avatar-dropdown.vue new file mode 100644 index 000000000..63e246b26 --- /dev/null +++ b/src/components/renderer/avatar-dropdown.vue @@ -0,0 +1,22 @@ + + + + diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue index e0919177d..2804a748f 100755 --- a/src/components/renderer/form-list-table.vue +++ b/src/components/renderer/form-list-table.vue @@ -16,12 +16,59 @@ -
- +
+ + +
+ +
@@ -47,13 +94,17 @@ import FormTasks from "./form-tasks.vue"; import FormRequests from "./form-requests.vue"; import FormNewRequest from "./form-new-request.vue"; +import AvatarDropdown from "./avatar-dropdown.vue"; export default { - components: { FormTasks, FormRequests, FormNewRequest }, + components: { FormTasks, FormRequests, FormNewRequest, AvatarDropdown }, mixins: [], props: ["listOption"], data() { return { + titleDropdown: "View All", + countInProgress: "0", + countOverdue: "0", title: this.$t("List Table"), dataControl: {} }; @@ -69,7 +120,9 @@ export default { }, methods: { getData(data) { - this.dataControl = data; + this.dataControl = data.dataControls; + this.countOverdue = data.tasksDropdown[0]; + this.countInProgress = data.tasksDropdown[1]; }, openExternalLink() { window.open(this.dataControl.url, "_blank"); @@ -78,7 +131,7 @@ export default { }; - diff --git a/src/components/renderer/form-new-request.vue b/src/components/renderer/form-new-request.vue index 6d92af2ba..c87456b88 100755 --- a/src/components/renderer/form-new-request.vue +++ b/src/components/renderer/form-new-request.vue @@ -59,6 +59,7 @@ export default { }, fetch() { // Now call our api + window.ProcessMaker.apiClient .get( `start_processes?page=${this.page}&per_page=${this.perPage}&filter=${this.filter}&order_by=category.name,name` + @@ -77,14 +78,15 @@ export default { data.meta.from -= 1; this.$refs.listProcess.data = data; this.$refs.listProcess.setPaginationData(data.meta); - const dataStart = { + const dataControls = { count: "0", showControl: true, showAvatar: false, colorTextStart: "color: #57646F", - url: "#" + url: "" }; - this.$emit("startControl", dataStart); + let tasksDropdown = []; + this.$emit("startControl", { dataControls, tasksDropdown }); }) .catch(() => { this.error = true; diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue index e9fc69bc8..2226c3802 100755 --- a/src/components/renderer/form-requests.vue +++ b/src/components/renderer/form-requests.vue @@ -124,16 +124,18 @@ export default { } this.tableData = response.data; this.countResponse = Object.keys(this.tableData.data).length; - const dataRequests = { + const dataControls = { count: `${this.countResponse}`, showControl: true, showAvatar: true, variant: "primary", textColor: "text-primary", colorText: "color: #1572C2", - url: "/requests" + url: "/requests", + dropdownShow: "requests" }; - this.$emit("requestsCount", dataRequests); + let tasksDropdown = []; + this.$emit("requestsCount", { dataControls, tasksDropdown }); }) .catch(() => { this.tableData = []; diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue index 16422d93f..35577a4d5 100755 --- a/src/components/renderer/form-tasks.vue +++ b/src/components/renderer/form-tasks.vue @@ -53,6 +53,8 @@ export default { mixins: [uniqIdsMixin, datatableMixin], data() { return { + countInProgress: "0", + countOverdue: "0", countResponse: "0", fields: [], data: [], @@ -114,6 +116,8 @@ export default { this.previousPmql = pmql; + let tasksDropdown = []; + // Load from our api client ProcessMaker.apiClient .get( @@ -125,16 +129,21 @@ export default { .then((response) => { this.tableData = response.data; this.countResponse = Object.keys(this.tableData.data).length; - const dataTasks = { + this.countOverdue = `${this.tableData.meta.in_overdue}`; + tasksDropdown.push(this.countOverdue); + this.countInProgress = `${this.tableData.meta.total}`; + tasksDropdown.push(this.countInProgress); + const dataControls = { count: `${this.countResponse}`, showControl: true, showAvatar: true, variant: "warning", textColor: "text-warning", colorText: "color: #ff9900", - url: "/tasks" + url: "/tasks", + dropdownShow: "tasks" }; - this.$emit("tasksCount", dataTasks); + this.$emit("tasksCount", { dataControls, tasksDropdown }); }) .catch(() => { this.tableData = [];