FOUR-19328: Enable the order desc/asc Tasks tab

pmPaulis · Sep 26, 2024 · Sep 25, 2024 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024
commit c1809ca2a65691429f6fffe0bd676b9795d1e417
diff --git 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: "&laquo; Previous",
+        active: false,
+      },
+      {
+        url: "http:\/\/localhost:8092\/api\/1.0\/tasks-by-case?page=1",
+        label: "1",
+        active: true,
+      },
+      {
+        url: null,
+        label: "Next &raquo;",
+        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
@@ -1,9 +1,8 @@
 <template>
-  <div class="container-fluid">
+  <div class="tw-pb-4">
     <Tabs
       :tab-default="tabDefault"
-      :tabs="tabs"
-    />
+      :tabs="tabs" />
   </div>
 </template>
 

diff --git 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" />
   </div>
 </template>
 
@@ -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
@@ -1,29 +1,25 @@
 <template>
   <div class="tw-block">
-    <div class="tw-border-b tw-border-gray-200">
-      <nav
-        class="tw-mb-px tw-flex tw-space-x-8"
-        aria-label="Tabs"
-      >
-        <template v-for="(tab, index) in tabs">
-          <a
-            v-if="tab.show"
-            :key="index"
-            :href="tab.href"
-            class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
-            :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
-              : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
-            ]"
-            :aria-current="tab.current ? 'page' : undefined"
-            @click="selectTab(tab)"
-          >
-            {{ tab.name }}
-          </a>
-        </template>
-      </nav>
-      <div class="tw-mt-3">
-        <component :is="content" />
-      </div>
+    <nav
+      class="tw-mb-px tw-flex tw-space-x-8"
+      aria-label="Tabs">
+      <template v-for="(tab, index) in tabs">
+        <a
+          v-if="tab.show"
+          :key="index"
+          :href="tab.href"
+          class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
+          :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
+            : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
+          ]"
+          :aria-current="tab.current ? 'page' : undefined"
+          @click="selectTab(tab)">
+          {{ tab.name }}
+        </a>
+      </template>
+    </nav>
+    <div class="tw-mt-3">
+      <component :is="content" />
     </div>
   </div>
 </template>

diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -1,21 +1,27 @@
 <template>
-  <div>
-    <BaseTable
+  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+    <SortTable
       id="task-table"
       :columns="columnsConfig"
-      :data="data" />
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll"
+      @changeFilter="onChangeFilter" />
+
     <Pagination
       :total="dataPagination.total"
       :page="dataPagination.page"
-      :pages="dataPagination.pages" />
+      :pages="dataPagination.pages"
+      @perPage="onPerPage"
+      @go="onGo" />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { BaseTable, Pagination } from "../../../base";
-import { getData } from "../api/index";
+import { SortTable, Pagination } from "../../../system";
+import { getDataTask } from "../api/index";
 import { getColumns } from "../config/columns";
+import { getRequestId } from "../variables";
 
 const data = ref(null);
 const columnsConfig = ref(null);
@@ -26,8 +32,37 @@ const dataPagination = ref({
   perPage: 15,
 });
 
+const formatData = (filter) => ({
+  params: {
+    case_number: getRequestId(),
+    ...filter,
+  },
+  pagination: {
+    ...dataPagination,
+  },
+});
+
+const onGo = async (page) => {
+  dataPagination.value.page = page;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onPerPage = async (perPage) => {
+  dataPagination.value.perPage = perPage;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onChangeFilter = async (dataFilter) => {
+  data.value = await getDataTask(formatData({
+    order_by: dataFilter.field,
+    order_direction: dataFilter.filter,
+  }));
+};
+
 onMounted(async () => {
-  data.value = await getData();
+  data.value = await getDataTask(formatData({}));
   columnsConfig.value = getColumns("tasks");
 });
 </script>
diff --git 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/...composition/cases/casesDetail/api/data.js → ...tion/cases/casesDetail/variables/index.js b/...composition/cases/casesDetail/api/data.js → ...tion/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
@@ -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", ">", ">=", "<", "<="],
   },
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;