From c1809ca2a65691429f6fffe0bd676b9795d1e417 Mon Sep 17 00:00:00 2001 From: Henry Jonas Date: Wed, 25 Sep 2024 16:26:57 -0400 Subject: [PATCH 1/4] FOUR-19328: Enable the order desc/asc Tasks tab --- .../cases/casesDetail/api/index.js | 92 ++++++++++++++++++- .../casesDetail/components/CaseDetail.vue | 5 +- .../casesDetail/components/TabHistory.vue | 5 +- .../cases/casesDetail/components/Tabs.vue | 44 ++++----- .../casesDetail/components/TaskTable.vue | 49 ++++++++-- .../cases/casesDetail/config/columns.js | 18 ++-- .../{api/data.js => variables/index.js} | 2 + .../cases/casesMain/config/columns.js | 16 ++-- .../system/table/FilterableTable.vue | 34 +++---- .../jscomposition/system/table/SortTable.vue | 47 ++++++++++ .../{ => defaultFilter}/FilterColumn.vue | 6 +- .../{ => defaultFilter}/FooterButtons.vue | 2 +- .../{ => defaultFilter}/SortingButtons.vue | 0 .../table/filter/defaultFilter/index.js | 11 +++ .../operator/BetweenOperator.vue | 0 .../operator/DateBetweenOperator.vue | 0 .../operator/DateOperator.vue | 0 .../operator/FilterOperator.vue | 2 +- .../operator/InOperator.vue | 0 .../operator/InputOperator.vue | 0 .../{ => defaultFilter}/operator/index.js | 0 .../operator/operatorConfig.js | 0 .../system/table/filter/index.js | 13 +-- .../filter/sortableFilter/SortableFilter.vue | 43 +++++++++ .../table/filter/sortableFilter/index.js | 5 + resources/jscomposition/system/table/index.js | 4 + 26 files changed, 305 insertions(+), 93 deletions(-) rename resources/jscomposition/cases/casesDetail/{api/data.js => variables/index.js} (81%) create mode 100644 resources/jscomposition/system/table/SortTable.vue rename resources/jscomposition/system/table/filter/{ => defaultFilter}/FilterColumn.vue (93%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/FooterButtons.vue (91%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/SortingButtons.vue (100%) create mode 100644 resources/jscomposition/system/table/filter/defaultFilter/index.js rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/BetweenOperator.vue (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/DateBetweenOperator.vue (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/DateOperator.vue (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/FilterOperator.vue (97%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/InOperator.vue (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/InputOperator.vue (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/index.js (100%) rename resources/jscomposition/system/table/filter/{ => defaultFilter}/operator/operatorConfig.js (100%) create mode 100644 resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue create mode 100644 resources/jscomposition/system/table/filter/sortableFilter/index.js diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js index 5f710fa384..a42174b5e6 100644 --- a/resources/jscomposition/cases/casesDetail/api/index.js +++ b/resources/jscomposition/cases/casesDetail/api/index.js @@ -1,6 +1,6 @@ -export default {}; +import { api } from "../variables"; -const getData = async () => { +export const getData = async () => { const objectsList = []; for (let i = 0; i <= 31; i += 1) { @@ -22,4 +22,90 @@ const getData = async () => { return objectsList; }; -export { getData }; +const dataTask = () => ({ + data: [ + { + id: 6, + element_name: "Form Task", + user_id: 1, + process_id: 2, + due_at: "2024-09-23T19:30:36+00:00", + process_request_id: 3, + user_viewed_at: "2024-09-20 19:31:04", + advanceStatus: "open", + process: { + id: 2, + name: "hpa", + has_timer_start_events: false, + projects: "[]", + }, + user: { + id: 1, + firstname: "Admin", + lastname: "User", + username: "admin", + avatar: null, + fullname: "Admin User", + }, + can_view_parent_request: false, + }, + ], + meta: { + filter: "", + sort_by: "", + sort_order: "", + count: 1, + total_pages: 1, + in_overdue: 0, + current_page: 1, + from: 1, + last_page: 1, + links: [ + { + url: null, + label: "« Previous", + active: false, + }, + { + url: "http:\/\/localhost:8092\/api\/1.0\/tasks-by-case?page=1", + label: "1", + active: true, + }, + { + url: null, + label: "Next »", + active: false, + }, + ], + path: "http:\/\/localhost:8092\/api\/1.0\/tasks-by-case", + per_page: 10, + to: 1, + total: 1, + }, +}); + +export const getAllDataTask = async ({ page, perPage }) => { + const response = []; + + for (let index = 0; index < perPage; index += 1) { + const allData = dataTask(); + const item = allData.data[0]; + item.id = index + 100 * page; + item.element_name = `${page} ${item.element_name}`; + response.push(item); + } + + return response; +}; + +export const getDataTask = async ({ params, pagination }) => { + if (api) { + const response = await api.get("tasks-by-case/", { + params, + }); + + return response.data.data; + } + + return getAllDataTask(pagination); +}; diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue index 8840094815..35f4511670 100644 --- a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue +++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue @@ -1,9 +1,8 @@ diff --git a/resources/jscomposition/cases/casesDetail/components/TabHistory.vue b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue index cbff365a6f..6a8adf283a 100644 --- a/resources/jscomposition/cases/casesDetail/components/TabHistory.vue +++ b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue @@ -6,8 +6,7 @@ :commentable_type="comentableType" :adding="false" :readonly="status === 'COMPLETED'" - :timeline="false" - /> + :timeline="false" /> @@ -16,7 +15,7 @@ import { defineComponent, ref } from "vue"; import TimeLine from "../../../../js/components/Timeline.vue"; import { getRequestId, getRequestStatus, getComentableType, getProcessName, -} from "../api/data"; +} from "../variables"; export default defineComponent({ components: { TimeLine }, diff --git a/resources/jscomposition/cases/casesDetail/components/Tabs.vue b/resources/jscomposition/cases/casesDetail/components/Tabs.vue index 0f0f056932..8d1a8514bb 100644 --- a/resources/jscomposition/cases/casesDetail/components/Tabs.vue +++ b/resources/jscomposition/cases/casesDetail/components/Tabs.vue @@ -1,29 +1,25 @@ diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue index d1b033172c..9c48b82560 100644 --- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue +++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue @@ -1,21 +1,27 @@ diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js index a08592af5e..900db6b560 100644 --- a/resources/jscomposition/cases/casesDetail/config/columns.js +++ b/resources/jscomposition/cases/casesDetail/config/columns.js @@ -7,54 +7,58 @@ export default {}; // Column for Task const taskNumberColumn = () => ({ - field: "case_number", + field: "id", header: "Tasks #", resizable: true, width: 200, + filter: true, cellRenderer: () => ({ component: LinkCell, params: { click: (row, column, columns) => { - window.document.location = `/tasks/${row.case_number}/edit`; + window.document.location = `/tasks/${row.id}/edit`; }, }, }), }); const taskNameColumn = () => ({ - field: "case_title", + field: "element_name", header: "Task Name", resizable: true, width: 200, + filter: true, cellRenderer: () => ({ component: LinkCell, params: { click: (row, column, columns) => { - window.document.location = `/tasks/${row.case_number}/edit`; + window.document.location = `/tasks/${row.id}/edit`; }, }, }), }); const processNameColumn = () => ({ - field: "process_name", + field: "process.name", header: "Process", resizable: true, width: 200, }); const assignedColumn = () => ({ - field: "assigned", + field: "user.fullname", header: "Assigned", resizable: true, width: 200, + filter: true, }); const dueDateColumn = () => ({ - field: "due_date", + field: "due_at", header: "Due Date", resizable: true, width: 200, + filter: true, }); // Columns for Requests diff --git a/resources/jscomposition/cases/casesDetail/api/data.js b/resources/jscomposition/cases/casesDetail/variables/index.js similarity index 81% rename from resources/jscomposition/cases/casesDetail/api/data.js rename to resources/jscomposition/cases/casesDetail/variables/index.js index 15aef3da60..70f1e26039 100644 --- a/resources/jscomposition/cases/casesDetail/api/data.js +++ b/resources/jscomposition/cases/casesDetail/variables/index.js @@ -7,3 +7,5 @@ export const getRequestStatus = () => request.status; export const getComentableType = () => comentable_type; export const getProcessName = () => request.process.name; + +export const api = window.ProcessMaker?.apiClient; diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js index a1746b0f1e..90f90028dc 100644 --- a/resources/jscomposition/cases/casesMain/config/columns.js +++ b/resources/jscomposition/cases/casesMain/config/columns.js @@ -60,7 +60,7 @@ export const caseNumberColumn = () => ({ resizable: true, width: 100, filter: { - type: "string", + dataType: "string", operators: ["=", ">", ">=", "in", "between"], }, cellRenderer: () => ({ @@ -87,7 +87,7 @@ export const caseTitleColumn = () => ({ }, }), filter: { - type: "string", + dataType: "string", operators: ["=", ">", ">=", "in", "between"], }, }); @@ -105,7 +105,7 @@ export const processColumn = () => ({ }, }), filter: { - type: "string", + dataType: "string", operators: ["="], }, }); @@ -124,7 +124,7 @@ export const taskColumn = () => ({ }, }), filter: { - type: "string", + dataType: "string", operators: ["="], }, }); @@ -143,7 +143,7 @@ export const participantsColumn = () => ({ }, }), filter: { - type: "string", + dataType: "string", operators: ["="], }, }); @@ -157,7 +157,7 @@ export const statusColumn = () => ({ component: StatusCell, }), filter: { - type: "string", + dataType: "string", operators: ["="], }, }); @@ -169,7 +169,7 @@ export const startedColumn = () => ({ width: 200, formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"), filter: { - type: "datetime", + dataType: "datetime", operators: ["between", ">", ">=", "<", "<="], }, }); @@ -181,7 +181,7 @@ export const completedColumn = () => ({ width: 200, formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"), filter: { - type: "datetime", + dataType: "datetime", operators: ["between", ">", ">=", "<", "<="], }, }); diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue index 2af1e92220..f58b5ab632 100644 --- a/resources/jscomposition/system/table/FilterableTable.vue +++ b/resources/jscomposition/system/table/FilterableTable.vue @@ -5,36 +5,26 @@ class="tw-grow tw-overflow-y-scroll"> - diff --git a/resources/jscomposition/system/table/SortTable.vue b/resources/jscomposition/system/table/SortTable.vue new file mode 100644 index 0000000000..080e6fef4b --- /dev/null +++ b/resources/jscomposition/system/table/SortTable.vue @@ -0,0 +1,47 @@ + + diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue similarity index 93% rename from resources/jscomposition/system/table/filter/FilterColumn.vue rename to resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue index aa5718a5cb..43e625d64f 100644 --- a/resources/jscomposition/system/table/filter/FilterColumn.vue +++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue @@ -20,7 +20,7 @@ @@ -32,7 +32,7 @@ diff --git a/resources/jscomposition/system/table/filter/sortableFilter/index.js b/resources/jscomposition/system/table/filter/sortableFilter/index.js new file mode 100644 index 0000000000..6d8f856462 --- /dev/null +++ b/resources/jscomposition/system/table/filter/sortableFilter/index.js @@ -0,0 +1,5 @@ +import SortableFilter from "./SortableFilter.vue"; + +export { + SortableFilter, +}; diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js index 26f3b8ab32..f6470d7d1e 100644 --- a/resources/jscomposition/system/table/index.js +++ b/resources/jscomposition/system/table/index.js @@ -1,8 +1,12 @@ import FilterableTable from "./FilterableTable.vue"; +import SortTable from "./SortTable.vue"; +import Pagination from "./Pagination.vue"; export * from "./cell/index"; export * from "./filter/index"; export { FilterableTable, + SortTable, + Pagination, }; From cab3c625fcc9930ee2a7dcc1af5cff9836d0c780 Mon Sep 17 00:00:00 2001 From: Henry Jonas Date: Thu, 26 Sep 2024 10:32:19 -0400 Subject: [PATCH 2/4] FOUR-19328: Enable the order desc/asc Tasks tab --- .../jscomposition/base/table/BaseTable.vue | 2 +- resources/jscomposition/base/table/TCell.vue | 11 ++- .../jscomposition/base/table/THeader.vue | 47 ++++++---- .../table/composables/columnComposable.js | 2 +- .../jscomposition/base/ui/AppPopover.vue | 7 +- .../cases/casesDetail/api/index.js | 91 ++----------------- .../casesDetail/components/TaskTable.vue | 4 +- .../system/table/cell/CaseTitleCell.vue | 3 +- .../system/table/cell/LinkCell.vue | 3 +- .../table/cell/TruncatedOptionsCell.vue | 17 ++-- 10 files changed, 57 insertions(+), 130 deletions(-) diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue index 85961890bf..5c757cd94e 100644 --- a/resources/jscomposition/base/table/BaseTable.vue +++ b/resources/jscomposition/base/table/BaseTable.vue @@ -2,7 +2,7 @@
- +
- @@ -59,3 +56,15 @@ export default defineComponent({ }, }); + diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js index 2ce357f833..dde1e46c5c 100644 --- a/resources/jscomposition/base/table/composables/columnComposable.js +++ b/resources/jscomposition/base/table/composables/columnComposable.js @@ -16,7 +16,7 @@ export const columnResizeComposable = (column) => { const doResize = (event) => { if (isResizing.value) { const diff = event.pageX - startX.value; - const min = 63; + const min = 30; const currentWidth = Math.max(min, startWidth.value + diff); column.width = currentWidth; diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue index f6043eb892..df33d1e9df 100644 --- a/resources/jscomposition/base/ui/AppPopover.vue +++ b/resources/jscomposition/base/ui/AppPopover.vue @@ -1,7 +1,7 @@
+
+ v-if="!column.cellRenderer"> - {{ getValue() }} +
+ {{ getValue() }} +
- 		-
-
- - {{ getValue() }} - -
- -
- -
+
+
+ + {{ getValue() }} + +
-
-   -
+
+
+ +