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

resources/jscomposition/base/table/BaseTable.vue

@@ -2,7 +2,7 @@
   <div
     class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
       tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
-    <table class="tw-w-full tw-border-collapse">
+    <table class="tw-w-full tw-border-collapse tw-table-fixed">
       <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
         <tr>
           <THeader

resources/jscomposition/base/table/TCell.vue

@@ -1,13 +1,16 @@
 <template>
-  <td class="tw-p-3">
+  <td
+    class="tw-relative"
+    :style="{ width: `${column.width}px` }">
     <div
-      v-if="!column.cellRenderer"
-      :style="{ maxWidth: `${column.width}px` }">
+      v-if="!column.cellRenderer">
       <slot
         :columns="columns"
         :column="column"
         :row="row">
-        {{ getValue() }}
+        <div class="tw-p-3">
+          {{ getValue() }}
+        </div>
       </slot>
     </div>
     <component

resources/jscomposition/base/table/THeader.vue

@@ -1,25 +1,22 @@
 <template>
-  <th>
-    <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-justify-between">
-      <div
-        class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
-        :style="{ width: width + 'px' }">
-        <slot>
-          {{ getValue() }}
-        </slot>
-      </div>
-
-      <div class="tw-h-auto tw-flex tw-items-center">
-        <slot name="filter" />
-      </div>
+  <th
+    class="tw-relative"
+    :style="{ width: width + 'px' }">
+    <div
+      class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis">
+      <slot>
+        {{ getValue() }}
+      </slot>
+    </div>
 
-      <div
-        :class="{ '!tw-cursor-col-resize': column.resizable }"
-        class="tw-w-[5px] tw-cursor-default tw-border-r tw-border-gray-400"
-        @mousedown="column.resizable ? columnResize.startResize($event) : null">
-        &nbsp;
-      </div>
+    <div class="tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-5 tw-flex tw-items-center">
+      <slot name="filter" />
     </div>
+
+    <div
+      class="tw-absolute tw-right-0 tw-top-0 tw-w-1
+        tw-h-full tw-cursor-col-resize tw-select-none tw-border-r tw-border-gray-400"
+      @mousedown="column.resizable ? columnResize.startResize($event) : null" />
   </th>
 </template>
 

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;

resources/jscomposition/base/ui/AppPopover.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="tooltipWrapper"
-    class="tooltip-wrapper"
+    class="tw-relative"
     @mouseenter="($event) => hover && showTooltip($event)"
     @mouseleave="($event) => hover && hideTooltip($event)">
     <slot name="default" />
@@ -178,11 +178,6 @@ export default {
 </script>
 
 <style scoped>
-.tooltip-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
 .tooltip-content {
   position: fixed;
   z-index: 1000;

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,13 @@ const getData = async () => {
   return objectsList;
 };
 
-export { getData };
+export const getDataTask = async ({ params, pagination }) => {
+  const response = await api.get("tasks-by-case/", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
+
+  return response.data.data;
+};

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>
 

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 },

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>

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,39 @@ const dataPagination = ref({
   perPage: 15,
 });
 
+const formatData = (filter) => ({
+  params: {
+    case_number: getRequestId(),
+    status: "ACTIVE",
+    ...filter,
+  },
+  pagination: {
+    page: dataPagination.value.page,
+    perPage: dataPagination.value.perPage,
+  },
+});
+
+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>

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
@@ -63,13 +67,29 @@ const requestNumberColumn = () => ({
   header: "Request #",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
 });
 
 const requestNameColumn = () => ({
   field: "case_title",
   header: "Request Name",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
 });
 
 const currentTaskColumn = () => ({

resources/jscomposition/cases/casesDetail/api/data.js → 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;