From 28864bbb32fc875027c736cdd5826cfabee91d83 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 30 Sep 2024 17:16:43 -0400
Subject: [PATCH 1/7] feature/FOUR-19330

---
 .../cases/casesDetail/api/index.js            | 73 +++++++++++++++----
 .../casesDetail/components/RequestTable.vue   | 21 +++++-
 .../cases/casesDetail/config/columns.js       |  4 +-
 3 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index f1d3f30f26..5b26a657a8 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,25 +1,66 @@
 import { api } from "../variables";
 
-export const getData = async () => {
-  const objectsList = [];
+export const formatActiveTasks = (value) => value.map((task) => `
+      <a href="${this.openTask(task)}">
+        ${task.element_name}
+      </a>
+    `).join("<br/>");
 
-  for (let i = 0; i <= 31; i += 1) {
-    const obj = {
-      id: `${i}`,
-      case_number: 100,
-      case_title: `Case Title ${i}`,
-      process_name: `Process ${i}`,
-      assigned: `Avatar ${i}`,
-      current_task: `Task ${i}`,
-      status: `badge ${i}`,
-      started: `21/21/${i}`,
-      due_date: `21/21/${i}`,
-    };
+export const formatStatus = (status) => {
+  let color;
+  let label;
+  switch (status) {
+    case "DRAFT":
+      color = "danger";
+      label = "Draft";
+      break;
+    case "CANCELED":
+      color = "danger";
+      label = "Canceled";
+      break;
+    case "COMPLETED":
+      color = "primary";
+      label = "Completed";
+      break;
+    case "ERROR":
+      color = "danger";
+      label = "Error";
+      break;
+    default:
+      color = "success";
+      label = "In Progress";
+  }
+  return (
+    `<span class="badge badge-${color} status-${color}">${this.$t(label)}</span>`
+  );
+};
 
-    objectsList.push(obj);
+export const transformData = (dataInput) => {
+  const data = _.cloneDeep(dataInput);
+  // Clean up fields for meta pagination so vue table pagination can understand
+  data.meta.last_page = data.meta.total_pages;
+  data.meta.from = (data.meta.current_page - 1) * data.meta.per_page;
+  data.meta.to = data.meta.from + data.meta.count;
+  data.data = this.jsonRows(data.data);
+  for (let record of data.data) {
+    if (record["active_tasks"]) {
+      record["active_tasks"] = formatActiveTasks(record["active_tasks"]);
+    }
+    record["status"] = this.formatStatus(record["status"]);
+    record["participants"] = this.formatParticipants(record["participants"]);
   }
+  return data;
+};
+
+export const getData = async ({ params, pagination }) => {
+  const response = await api.get("requests-by-case", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
 
-  return objectsList;
+  return transformData(response.data);
 };
 
 export const getDataTask = async ({ params, pagination }) => {
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index 797ed4606b..c5287841be 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -16,6 +16,7 @@ import { defineComponent, ref, onMounted } from "vue";
 import { BaseTable, Pagination } from "../../../base";
 import { getData } from "../api/index";
 import { getColumns } from "../config/columns";
+import { getRequestId } from "../variables";
 
 export default defineComponent({
   components: { BaseTable, Pagination },
@@ -23,14 +24,25 @@ export default defineComponent({
     const data = ref(null);
     const columnsConfig = ref(null);
     const dataPagination = ref({
-      total: 153,
-      page: 0,
-      pages: 10,
+      total: 15,
+      page: 1,
+      pages: 1,
       perPage: 15,
     });
 
+    const formatData = () => ({
+      params: {
+        case_number: getRequestId(),
+        include: "participants,activeTasks",
+      },
+      pagination: {
+        page: dataPagination.value.page,
+        perPage: dataPagination.value.perPage,
+      },
+    });
+
     onMounted(async () => {
-      data.value = await getData();
+      data.value = await getData(formatData());
       columnsConfig.value = getColumns("requests");
     });
 
@@ -38,6 +50,7 @@ export default defineComponent({
       data,
       dataPagination,
       columnsConfig,
+      formatData,
     };
   },
 });
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index a3be35c151..05e753f046 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -78,7 +78,7 @@ const requestNumberColumn = () => ({
 });
 
 const requestNameColumn = () => ({
-  field: "case_title",
+  field: "name",
   header: "Request Name",
   resizable: true,
   width: 200,
@@ -108,7 +108,7 @@ const statusColumn = () => ({
 });
 
 const startedColumn = () => ({
-  field: "started_date",
+  field: "created_at",
   header: "started",
   resizable: true,
   width: 200,

From ef065bd7a57931d997c0286f48d2040365b64d95 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 30 Sep 2024 17:18:35 -0400
Subject: [PATCH 2/7] feature/FOUR-19330

---
 .../jscomposition/cases/casesDetail/api/index.js     | 12 ++++++------
 .../cases/casesDetail/config/columns.js              |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 5b26a657a8..9712f7d293 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -42,13 +42,13 @@ export const transformData = (dataInput) => {
   data.meta.from = (data.meta.current_page - 1) * data.meta.per_page;
   data.meta.to = data.meta.from + data.meta.count;
   data.data = this.jsonRows(data.data);
-  for (let record of data.data) {
-    if (record["active_tasks"]) {
-      record["active_tasks"] = formatActiveTasks(record["active_tasks"]);
+  data.data.forEach(record => {
+    if (record.active_tasks) {
+      record.active_tasks = formatActiveTasks(record.active_tasks);
     }
-    record["status"] = this.formatStatus(record["status"]);
-    record["participants"] = this.formatParticipants(record["participants"]);
-  }
+    record.status = formatStatus(record.status);
+    record.participants = this.formatParticipants(record.participants);
+  });
   return data;
 };
 
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index 05e753f046..81e27ab897 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -66,6 +66,7 @@ const requestNumberColumn = () => ({
   field: "id",
   header: "Request #",
   resizable: true,
+  sortable: true,
   width: 200,
   cellRenderer: () => ({
     component: LinkCell,
@@ -80,6 +81,7 @@ const requestNumberColumn = () => ({
 const requestNameColumn = () => ({
   field: "name",
   header: "Request Name",
+  sortable: true,
   resizable: true,
   width: 200,
   cellRenderer: () => ({
@@ -102,6 +104,7 @@ const currentTaskColumn = () => ({
 const statusColumn = () => ({
   field: "status",
   header: "Status",
+  sortable: true,
   resizable: true,
   width: 200,
   cellRenderer: () => StatusCell,
@@ -110,6 +113,7 @@ const statusColumn = () => ({
 const startedColumn = () => ({
   field: "created_at",
   header: "started",
+  sortable: true,
   resizable: true,
   width: 200,
 });

From 748e4abf220c7bb5a3d4f26e3e4df6029029692a Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 1 Oct 2024 16:46:57 -0400
Subject: [PATCH 3/7] feature/FOUR-19330

---
 .../cases/casesDetail/api/index.js            | 66 +++++--------------
 .../casesDetail/components/RequestTable.vue   | 22 +++++--
 .../cases/casesDetail/config/columns.js       | 36 +++++++---
 .../cases/casesMain/config/columns.js         |  1 +
 .../system/table/cell/StatusCell.vue          |  4 ++
 .../table/cell/TruncatedOptionsCell.vue       | 36 +++++++++-
 6 files changed, 98 insertions(+), 67 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 9712f7d293..7586bb903a 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,56 +1,20 @@
 import { api } from "../variables";
 
-export const formatActiveTasks = (value) => value.map((task) => `
-      <a href="${this.openTask(task)}">
-        ${task.element_name}
-      </a>
-    `).join("<br/>");
+export const formatActiveTasks = (value) => value.map((task) => `${task.element_name}`).join(", ");
 
-export const formatStatus = (status) => {
-  let color;
-  let label;
-  switch (status) {
-    case "DRAFT":
-      color = "danger";
-      label = "Draft";
-      break;
-    case "CANCELED":
-      color = "danger";
-      label = "Canceled";
-      break;
-    case "COMPLETED":
-      color = "primary";
-      label = "Completed";
-      break;
-    case "ERROR":
-      color = "danger";
-      label = "Error";
-      break;
-    default:
-      color = "success";
-      label = "In Progress";
-  }
-  return (
-    `<span class="badge badge-${color} status-${color}">${this.$t(label)}</span>`
-  );
-};
-
-export const transformData = (dataInput) => {
-  const data = _.cloneDeep(dataInput);
-  // Clean up fields for meta pagination so vue table pagination can understand
-  data.meta.last_page = data.meta.total_pages;
-  data.meta.from = (data.meta.current_page - 1) * data.meta.per_page;
-  data.meta.to = data.meta.from + data.meta.count;
-  data.data = this.jsonRows(data.data);
-  data.data.forEach(record => {
-    if (record.active_tasks) {
-      record.active_tasks = formatActiveTasks(record.active_tasks);
-    }
-    record.status = formatStatus(record.status);
-    record.participants = this.formatParticipants(record.participants);
-  });
-  return data;
-};
+// export const transformData = (dataInput) => {
+//   const data = _.cloneDeep(dataInput);
+//   // Clean up fields for meta pagination so vue table pagination can understand
+//   data.meta.last_page = data.meta.total_pages;
+//   data.meta.from = (data.meta.current_page - 1) * data.meta.per_page;
+//   data.meta.to = data.meta.from + data.meta.count;
+//   for (let record of data.data) {
+//     if (record.active_tasks) {
+//       record.current_task = formatActiveTasks(record.active_tasks);
+//     }
+//   };
+//   return data;
+// };
 
 export const getData = async ({ params, pagination }) => {
   const response = await api.get("requests-by-case", {
@@ -60,7 +24,7 @@ export const getData = async ({ params, pagination }) => {
     },
   });
 
-  return transformData(response.data);
+  return response.data.data;
 };
 
 export const getDataTask = async ({ params, pagination }) => {
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index c5287841be..bc4cef05de 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
-    <BaseTable
+    <SortTable
       id="request-table"
       :columns="columnsConfig"
-      :data="data" />
+      :data="data"
+      @changeFilter="onChangeFilter" />
     <Pagination
       :total="dataPagination.total"
       :page="dataPagination.page"
@@ -13,13 +14,13 @@
 
 <script>
 import { defineComponent, ref, onMounted } from "vue";
-import { BaseTable, Pagination } from "../../../base";
+import { SortTable, Pagination } from "../../../system";
 import { getData } from "../api/index";
 import { getColumns } from "../config/columns";
 import { getRequestId } from "../variables";
 
 export default defineComponent({
-  components: { BaseTable, Pagination },
+  components: { SortTable, Pagination },
   setup() {
     const data = ref(null);
     const columnsConfig = ref(null);
@@ -30,10 +31,11 @@ export default defineComponent({
       perPage: 15,
     });
 
-    const formatData = () => ({
+    const formatData = (filter) => ({
       params: {
         case_number: getRequestId(),
         include: "participants,activeTasks",
+        ...filter,
       },
       pagination: {
         page: dataPagination.value.page,
@@ -41,8 +43,15 @@ export default defineComponent({
       },
     });
 
+    const onChangeFilter = async (dataFilter) => {
+      data.value = await getData(formatData({
+        order_by: dataFilter.field,
+        order_direction: dataFilter.filter,
+      }));
+    };
+
     onMounted(async () => {
-      data.value = await getData(formatData());
+      data.value = await getData(formatData({}));
       columnsConfig.value = getColumns("requests");
     });
 
@@ -51,6 +60,7 @@ export default defineComponent({
       dataPagination,
       columnsConfig,
       formatData,
+      onChangeFilter,
     };
   },
 });
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index 81e27ab897..fedc9a347a 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,6 +1,7 @@
 import {
-  StatusCell,
   LinkCell,
+  StatusCell,
+  TruncatedOptionsCell,
 } from "../../../system/index";
 
 export default {};
@@ -12,6 +13,9 @@ const taskNumberColumn = () => ({
   resizable: true,
   width: 200,
   filter: true,
+  formatter:(row, column, columns)=>{
+    return row.element_name;
+  },
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -66,7 +70,7 @@ const requestNumberColumn = () => ({
   field: "id",
   header: "Request #",
   resizable: true,
-  sortable: true,
+  filter: { type: "sortable" },
   width: 200,
   cellRenderer: () => ({
     component: LinkCell,
@@ -81,9 +85,9 @@ const requestNumberColumn = () => ({
 const requestNameColumn = () => ({
   field: "name",
   header: "Request Name",
-  sortable: true,
   resizable: true,
   width: 200,
+  filter: { type: "sortable" },
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -95,25 +99,41 @@ const requestNameColumn = () => ({
 });
 
 const currentTaskColumn = () => ({
-  field: "current_task",
-  header: "Current Task",
+  field: "active_tasks",
+  header: "Task",
   resizable: true,
   width: 200,
+  formatter:(row, column, columns)=>{
+    return row.active_tasks.length? row.active_tasks[0].element_name : "";
+  },
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `/tasks/${option.id}/edit`;
+      },
+      formatterOptions:(option, row, column, columns)=>{
+        return option.element_name;
+      }
+    },
+  }),
 });
 
 const statusColumn = () => ({
   field: "status",
   header: "Status",
-  sortable: true,
+  filter: { type: "sortable" },
   resizable: true,
   width: 200,
-  cellRenderer: () => StatusCell,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
 });
 
 const startedColumn = () => ({
   field: "created_at",
   header: "started",
-  sortable: true,
+  filter: { type: "sortable" },
   resizable: true,
   width: 200,
 });
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 90f90028dc..8438aea43a 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -119,6 +119,7 @@ export const taskColumn = () => ({
     component: TruncatedOptionsCell,
     params: {
       click: (option, row, column, columns) => {
+        console.log("algo?");
         window.document.location = `/tasks/${option.id}/edit`;
       },
     },
diff --git a/resources/jscomposition/system/table/cell/StatusCell.vue b/resources/jscomposition/system/table/cell/StatusCell.vue
index d736b57092..9556db9a3a 100644
--- a/resources/jscomposition/system/table/cell/StatusCell.vue
+++ b/resources/jscomposition/system/table/cell/StatusCell.vue
@@ -31,6 +31,10 @@ export const statuses = {
     color: "green",
     label: "In progress",
   },
+  ACTIVE: {
+    color: "green",
+    label: "In progress",
+  },
 };
 
 export default defineComponent({
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index 9a341d73c8..e6c369cc5d 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -1,10 +1,21 @@
 <template>
   <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <div class="tw-overflow-hidden tw-text-ellipsis ">
-      {{ row[column.field][0].name }}
+      <a
+        v-if="optionsModel.length <= 1"
+        class="hover:tw-text-blue-500"
+        href="#"
+        @click.prevent.stop="onClickOption(row[column.field][0], 0)">
+        {{ getValue() }}
+
+      </a>
+      <span v-else>
+        {{ getValue() }}
+      </span>
     </div>
 
     <AppPopover
+      v-if="optionsModel.length > 1"
       v-model="show"
       :hover="false"
       position="bottom"
@@ -25,7 +36,7 @@
             class="hover:tw-bg-gray-100"
             @click.prevent.stop="onClickOption(option, index)">
             <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
-              {{ option.name || option.id }}
+              {{ getValueOption(option, index) }}
             </span>
           </li>
         </ul>
@@ -35,6 +46,7 @@
 </template>
 <script>
 import { defineComponent, ref } from "vue";
+import { isFunction } from "lodash";
 import { AppPopover } from "../../../base/index";
 
 export default defineComponent({
@@ -58,11 +70,29 @@ export default defineComponent({
       type: Function,
       default: new Function(),
     },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
   },
   setup(props) {
     const show = ref(false);
     const optionsModel = ref(props.row[props.column.field]);
 
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return props.row[props.column.field].length ? props.row[props.column.field][0].name : "";
+    };
+
+    const getValueOption = (option, index) => {
+      if (isFunction(props.formatterOptions)) {
+        return props.formatterOptions(option, props.row, props.column, props.columns);
+      }
+      return "";
+    };
+
     const onClick = () => {
       show.value = !show.value;
     };
@@ -81,6 +111,8 @@ export default defineComponent({
       onClose,
       onClickOption,
       onClick,
+      getValue,
+      getValueOption,
     };
   },
 });

From 79b98a3fad5d89cf1109f724f0c8790c10bfe80f Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 1 Oct 2024 16:55:24 -0400
Subject: [PATCH 4/7] feature/FOUR-19330

---
 .../jscomposition/cases/casesDetail/api/index.js | 16 ----------------
 .../cases/casesMain/config/columns.js            |  1 -
 2 files changed, 17 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 7586bb903a..f4eee3d338 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,21 +1,5 @@
 import { api } from "../variables";
 
-export const formatActiveTasks = (value) => value.map((task) => `${task.element_name}`).join(", ");
-
-// export const transformData = (dataInput) => {
-//   const data = _.cloneDeep(dataInput);
-//   // Clean up fields for meta pagination so vue table pagination can understand
-//   data.meta.last_page = data.meta.total_pages;
-//   data.meta.from = (data.meta.current_page - 1) * data.meta.per_page;
-//   data.meta.to = data.meta.from + data.meta.count;
-//   for (let record of data.data) {
-//     if (record.active_tasks) {
-//       record.current_task = formatActiveTasks(record.active_tasks);
-//     }
-//   };
-//   return data;
-// };
-
 export const getData = async ({ params, pagination }) => {
   const response = await api.get("requests-by-case", {
     params: {
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 8438aea43a..90f90028dc 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -119,7 +119,6 @@ export const taskColumn = () => ({
     component: TruncatedOptionsCell,
     params: {
       click: (option, row, column, columns) => {
-        console.log("algo?");
         window.document.location = `/tasks/${option.id}/edit`;
       },
     },

From 7221dcfba6d06a9e3dbed8ee77e44e74e8b3e20d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 2 Oct 2024 09:17:39 -0400
Subject: [PATCH 5/7] feature/FOUR-19330

---
 .../cases/casesDetail/api/index.js            | 23 ++++++++++++++++++-
 .../casesDetail/components/RequestTable.vue   |  6 ++---
 .../cases/casesDetail/config/columns.js       | 16 ++++++-------
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index f4eee3d338..03decef09c 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,6 +1,27 @@
 import { api } from "../variables";
 
-export const getData = async ({ params, pagination }) => {
+export const getData = async () => {
+  const objectsList = [];
+
+  for (let i = 0; i <= 31; i += 1) {
+    const obj = {
+      id: `${i}`,
+      case_number: 100,
+      case_title: `Case Title ${i}`,
+      process_name: `Process ${i}`,
+      assigned: `Avatar ${i}`,
+      current_task: `Task ${i}`,
+      status: `badge ${i}`,
+      started: `21/21/${i}`,
+      due_date: `21/21/${i}`,
+    };
+
+    objectsList.push(obj);
+  }
+  return objectsList;
+};
+
+export const getDataRequests = async ({ params, pagination }) => {
   const response = await api.get("requests-by-case", {
     params: {
       ...params,
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index bc4cef05de..c3b38c5c19 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -15,7 +15,7 @@
 <script>
 import { defineComponent, ref, onMounted } from "vue";
 import { SortTable, Pagination } from "../../../system";
-import { getData } from "../api/index";
+import { getDataRequests } from "../api/index";
 import { getColumns } from "../config/columns";
 import { getRequestId } from "../variables";
 
@@ -44,14 +44,14 @@ export default defineComponent({
     });
 
     const onChangeFilter = async (dataFilter) => {
-      data.value = await getData(formatData({
+      data.value = await getDataRequests(formatData({
         order_by: dataFilter.field,
         order_direction: dataFilter.filter,
       }));
     };
 
     onMounted(async () => {
-      data.value = await getData(formatData({}));
+      data.value = await getDataRequests(formatData({}));
       columnsConfig.value = getColumns("requests");
     });
 
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index fedc9a347a..ba8e86033c 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -68,10 +68,10 @@ const dueDateColumn = () => ({
 // Columns for Requests
 const requestNumberColumn = () => ({
   field: "id",
-  header: "Request #",
+  header: "Request ID",
   resizable: true,
   filter: { type: "sortable" },
-  width: 200,
+  width: 80,
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -82,9 +82,9 @@ const requestNumberColumn = () => ({
   }),
 });
 
-const requestNameColumn = () => ({
+const processNameColumnRequest = () => ({
   field: "name",
-  header: "Request Name",
+  header: "Process Name",
   resizable: true,
   width: 200,
   filter: { type: "sortable" },
@@ -102,7 +102,7 @@ const currentTaskColumn = () => ({
   field: "active_tasks",
   header: "Task",
   resizable: true,
-  width: 200,
+  width: 140,
   formatter:(row, column, columns)=>{
     return row.active_tasks.length? row.active_tasks[0].element_name : "";
   },
@@ -124,14 +124,14 @@ const statusColumn = () => ({
   header: "Status",
   filter: { type: "sortable" },
   resizable: true,
-  width: 200,
+  width: 140,
   cellRenderer: () => ({
     component: StatusCell,
   }),
 });
 
 const startedColumn = () => ({
-  field: "created_at",
+  field: "initiated_at",
   header: "started",
   filter: { type: "sortable" },
   resizable: true,
@@ -149,7 +149,7 @@ export const getColumns = (type) => {
     ],
     requests: [
       requestNumberColumn(),
-      requestNameColumn(),
+      processNameColumnRequest(),
       currentTaskColumn(),
       statusColumn(),
       startedColumn(),

From 6e48543b5abd121f6fe57d0a9b09c385078f94cf Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 2 Oct 2024 09:23:20 -0400
Subject: [PATCH 6/7] feature/FOUR-19330

---
 resources/jscomposition/cases/casesDetail/api/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 03decef09c..abecd0f8f8 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -18,6 +18,7 @@ export const getData = async () => {
 
     objectsList.push(obj);
   }
+
   return objectsList;
 };
 

From 01a5a72fdb6dd6649471051d75969e6de3501247 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 2 Oct 2024 10:29:54 -0400
Subject: [PATCH 7/7] feature/FOUR-19330

---
 .../cases/casesDetail/config/columns.js            | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index ba8e86033c..609e8ace13 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -66,7 +66,7 @@ const dueDateColumn = () => ({
 });
 
 // Columns for Requests
-const requestNumberColumn = () => ({
+const requestIdColumn = () => ({
   field: "id",
   header: "Request ID",
   resizable: true,
@@ -82,7 +82,7 @@ const requestNumberColumn = () => ({
   }),
 });
 
-const processNameColumnRequest = () => ({
+const processRequestColumn = () => ({
   field: "name",
   header: "Process Name",
   resizable: true,
@@ -98,7 +98,7 @@ const processNameColumnRequest = () => ({
   }),
 });
 
-const currentTaskColumn = () => ({
+const taskColumn = () => ({
   field: "active_tasks",
   header: "Task",
   resizable: true,
@@ -132,7 +132,7 @@ const statusColumn = () => ({
 
 const startedColumn = () => ({
   field: "initiated_at",
-  header: "started",
+  header: "Started",
   filter: { type: "sortable" },
   resizable: true,
   width: 200,
@@ -148,9 +148,9 @@ export const getColumns = (type) => {
       dueDateColumn(),
     ],
     requests: [
-      requestNumberColumn(),
-      processNameColumnRequest(),
-      currentTaskColumn(),
+      requestIdColumn(),
+      processRequestColumn(),
+      taskColumn(),
       statusColumn(),
       startedColumn(),
     ],