pmPaulis · Oct 2, 2024 · Sep 30, 2024 · Sep 30, 2024 · Oct 1, 2024 · Oct 1, 2024
diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,25 +1,14 @@
 import { api } from "../variables";
 
-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);
-  }
+export const getData = async ({ params, pagination }) => {
+  const response = await api.get("requests-by-case", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
 
-  return objectsList;
+  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
@@ -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 { 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);
     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 getData(formatData({
+        order_by: dataFilter.field,
+        order_direction: dataFilter.filter,
+      }));
+    };
+
     onMounted(async () => {
-      data.value = await getData();
+      data.value = await getData(formatData({}));
       columnsConfig.value = getColumns("requests");
     });
 
     return {
       data,
       dataPagination,
       columnsConfig,
+      formatData,
+      onChangeFilter,
     };
   },
 });

diff --git 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,6 +70,7 @@ const requestNumberColumn = () => ({
   field: "id",
   header: "Request #",
   resizable: true,
+  filter: { type: "sortable" },
   width: 200,
   cellRenderer: () => ({
     component: LinkCell,
@@ -78,10 +83,11 @@ const requestNumberColumn = () => ({
 });
 
 const requestNameColumn = () => ({
-  field: "case_title",
+  field: "name",
   header: "Request Name",
   resizable: true,
   width: 200,
+  filter: { type: "sortable" },
   cellRenderer: () => ({
     component: LinkCell,
     params: {
@@ -93,23 +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",
+  filter: { type: "sortable" },
   resizable: true,
   width: 200,
-  cellRenderer: () => StatusCell,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
 });
 
 const startedColumn = () => ({
-  field: "started_date",
+  field: "created_at",
   header: "started",
+  filter: { type: "sortable" },
   resizable: true,
   width: 200,
 });

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