Merge remote-tracking branch 'origin/staging' into origin/production

2024-02-15 13:29:15 +07:00
parent 1d666e81ef f37657b154
commit 47e3d248b7
18 changed files with 683 additions and 178 deletions
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
@@ -8,6 +8,7 @@ import {
  MenuItem,
  Table,
  TableBody,
+  TableSortLabel,
  TableCell,
  TableRow,
  TextField,
@@ -48,10 +49,12 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';
+import { visuallyHidden } from '@mui/utils';

 import { FinalLogType } from '../FinalLog/Model/Types';
 import DialogDeleteFinalLOG from './Components/DialogDeleteFinalLOG';
 import { Delete } from '@mui/icons-material';
+import { HeadCell, Order } from '@/@types/table';
 // import LoadingButton from '@/theme/overrides/LoadingButton';

 export default function List() {
@@ -284,8 +287,14 @@ export default function List() {

  const loadDataTableData = async (appliedFilter: any | null = null) => {
    setDataTableLoading(true);
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/customer-service/request?final_log=1&service_code=OP', { params: filter });
+    const parameters =
+    Object.keys(appliedParams).length !== 0
+      ? appliedParams
+      : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+
+    const response = await axios.get('/customer-service/request?final_log=1&service_code=OP', {
+      params: { ...parameters },
+    });
    // console.log(response.data);
    setDataTableLoading(false);

@@ -472,38 +481,139 @@ export default function List() {
    /* ------------------ END TABLE ROW ------------------ */
  }

+  /* -------------------------------- headCell -------------------------------- */
+  const headCells: HeadCell<never>[] = [
+    {
+      id: 'code',
+      align: 'left',
+      label: 'Code',
+      isSort: true,
+    },
+    {
+      id: 'provider',
+      align: 'left',
+      label: 'Provider',
+      isSort: false,
+    },
+
+    {
+      id: 'name',
+      align: 'left',
+      label: 'Name',
+      isSort: false,
+    },
+    {
+      id: 'submission_date',
+      align: 'left',
+      label: 'Admission Date',
+      isSort: true,
+    },
+    {
+      id: 'service_code',
+      align: 'left',
+      label: 'Service Type',
+      isSort: true,
+    },
+    {
+      id: 'claim_method',
+      align: 'left',
+      label: 'Claim Method',
+      isSort: false,
+    },
+    {
+      id: 'status',
+      align: 'left',
+      label: 'Status',
+      isSort: true,
+    },
+    {
+      id: '',
+      align: 'left',
+      label: 'Action',
+      isSort: false,
+    },
+  ];
+  /* -------------------------------------------------------------------------- */
+
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    handleRequestSort(event, property);
+  };
+
+  /* ------------------------------ handle params ----------------------------- */
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const params = {
+    searchParams: searchParams,
+    setSearchParams: setSearchParams,
+    appliedParams: appliedParams,
+    setAppliedParams: setAppliedParams,
+  };
+
+  /* ------------------------------ handle order ------------------------------ */
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState('submission_date');
+
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orders?.orderBy === property && orders?.order === 'asc';
+    orders?.setOrder(isAsc ? 'desc' : 'asc');
+    orders?.setOrderBy(property);
+    const parameters = Object.fromEntries([
+      ...(params?.searchParams.entries() as IterableIterator<[string, string]>),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    console.log(parameters)
+    params?.setAppliedParams(parameters);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+
+
+
  function TableContent() {
    return (
      <Table aria-label="collapsible table">
        {/* ------------------ TABLE HEADER ------------------ */}
        <TableHead>
          <TableRow>
-            {/* <TableCell style={headStyle} align="left" /> */}
-            {/* <TableCell style={headStyle} align="left">
-              ID Request LOG
-            </TableCell> */}
-            <TableCell style={headStyle} align="left">
-              Code
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Provider
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Name
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Date of Submission
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Service Type
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Claim Method
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Status
-            </TableCell>
-            <TableCell style={headStyle} align="right"></TableCell>
+            {headCells &&
+            headCells.map((headCell, index) => (
+              <TableCell
+                key={index}
+                sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                // @ts-ignore
+                align={headCell.align}
+                sx={{ padding: 2 }}
+                width={headCell.width ? headCell.width : 'auto'}
+              >
+                {headCell.isSort ? (
+                  <TableSortLabel
+                    active={orders?.orderBy === headCell.id}
+                    direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                    onClick={createSortHandler(headCell.id)}
+                  >
+                    {headCell.label}
+                    {orders?.orderBy === headCell.id ? (
+                      <Box component="span" sx={visuallyHidden}>
+                        {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                      </Box>
+                    ) : null}
+                  </TableSortLabel>
+                ) : (
+                  headCell.label
+                )}
+              </TableCell>
+            ))}
          </TableRow>
        </TableHead>
        {/* ------------------ END TABLE HEADER ------------------ */}
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
@@ -39,6 +39,7 @@ export type DetailFinalLogType = {
    marital_status      : string,
    admission_date      : string,
    submission_date     : string,
+    admission_date      : string,
    approved_final_log_at : string,
    service_type        : string,
    claim_method        : string,
--- a/frontend/dashboard/src/pages/CustomerService/Request/List.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/Request/List.tsx
@@ -334,7 +334,7 @@ export default function List() {
  };

  // Called on every row to map the data to the columns
-  function createData(data: RequestLogType): any {
+  function createData(data: RequestLogType) {
    return {
      ...data,
    };
@@ -368,7 +368,7 @@ export default function List() {
          <TableCell align="left">{row.code}</TableCell>
          <TableCell align="left">{row.provider}</TableCell>
          <TableCell align="left">{row.member_name}</TableCell>
-          <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
+          <TableCell align="left"><Label>{fDateTimesecond(row.admission_date)}</Label></TableCell>
          <TableCell align="left">{row.service_name}</TableCell>
          <TableCell align="left">{row.payment_type_name}</TableCell>
          <TableCell align="left">
@@ -514,7 +514,7 @@ export default function List() {
    {
      id: 'submission_date',
      align: 'left',
-      label: 'Submision Date',
+      label: 'Admission Date',
      isSort: true,
    },
    {
--- a/frontend/dashboard/src/pages/CustomerService/Request/Model/Types.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/Request/Model/Types.tsx
@@ -15,7 +15,10 @@ export type RequestLogType = {
    code                : string,
    member              : Member,
    submission_date     : string,
+    admission_date      : string,
    service_name        : string,
+    provider            : string,
+    member_name         : string,
    payment_type_name   : string,
    status_final_log    : string,
    status              : string,