feature/FOUR-19330

resources/jscomposition/cases/casesDetail/api/index.js

@@ -28,7 +28,18 @@ const getData = async () => {
   return objectsList;
 };
 
-const getDataTask = async ({ params, pagination }) => {
+export const getDataRequests = async ({ params, pagination }) => {
+  const response = await api.get("requests-by-case", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
+
+  return response.data.data;
+};
+
+export const getDataTask = async ({ params, pagination }) => {
   const response = await api.get("tasks-by-case/", {
     params: {
       ...params,

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,31 +14,53 @@
 
 <script>
 import { defineComponent, ref, onMounted } from "vue";
-import { BaseTable, Pagination } from "../../../base";
-import { getData } from "../api/index";
+import { SortTable, Pagination } from "../../../system";
+import { getDataRequests } 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);
     const dataPagination = ref({
-      total: 153,
-      page: 0,
-      pages: 10,
+      total: 15,
+      page: 1,
+      pages: 1,
       perPage: 15,
     });
 
+    const formatData = (filter) => ({
+      params: {
+        case_number: getRequestId(),
+        include: "participants,activeTasks",
+        ...filter,
+      },
+      pagination: {
+        page: dataPagination.value.page,
+        perPage: dataPagination.value.perPage,
+      },
+    });
+
+    const onChangeFilter = async (dataFilter) => {
+      data.value = await getDataRequests(formatData({
+        order_by: dataFilter.field,
+        order_direction: dataFilter.filter,
+      }));
+    };
+
     onMounted(async () => {
-      data.value = await getData();
+      data.value = await getDataRequests(formatData({}));
       columnsConfig.value = getColumns("requests");
     });
 
     return {
       data,
       dataPagination,
       columnsConfig,
+      formatData,
+      onChangeFilter,
     };
   },
 });

resources/jscomposition/cases/casesDetail/config/columns.js

@@ -1,6 +1,7 @@
 import {
-  StatusCell,
   LinkCell,
+  StatusCell,
+  TruncatedOptionsCell,
   CollapseFormCell,
 } from "../../../system/index";
 
@@ -13,6 +14,9 @@ const taskNumberColumn = () => ({
   resizable: true,
   width: 200,
   filter: true,
+  formatter:(row, column, columns)=>{
+    return row.element_name;
+  },
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -63,11 +67,12 @@ const dueDateColumn = () => ({
 });
 
 // Columns for Requests
-const requestNumberColumn = () => ({
+const requestIdColumn = () => ({
   field: "id",
-  header: "Request #",
+  header: "Request ID",
   resizable: true,
-  width: 200,
+  filter: { type: "sortable" },
+  width: 80,
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -78,11 +83,12 @@ const requestNumberColumn = () => ({
   }),
 });
 
-const requestNameColumn = () => ({
-  field: "case_title",
-  header: "Request Name",
+const processRequestColumn = () => ({
+  field: "name",
+  header: "Process Name",
   resizable: true,
   width: 200,
+  filter: { type: "sortable" },
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -93,24 +99,42 @@ const requestNameColumn = () => ({
   }),
 });
 
-const currentTaskColumn = () => ({
-  field: "current_task",
-  header: "Current Task",
+const taskColumn = () => ({
+  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 : "";
+  },
+  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",
+  filter: { type: "sortable" },
   resizable: true,
-  width: 200,
-  cellRenderer: () => StatusCell,
+  width: 140,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
 });
 
 const startedColumn = () => ({
-  field: "started_date",
-  header: "started",
+  field: "initiated_at",
+  header: "Started",
+  filter: { type: "sortable" },
   resizable: true,
   width: 200,
 });
@@ -141,9 +165,9 @@ export const getColumns = (type) => {
       dueDateColumn(),
     ],
     requests: [
-      requestNumberColumn(),
-      requestNameColumn(),
-      currentTaskColumn(),
+      requestIdColumn(),
+      processRequestColumn(),
+      taskColumn(),
       statusColumn(),
       startedColumn(),
     ],

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({

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