tambah pagination dan search daily monitoring

2024-02-15 10:43:32 +07:00
parent 814eb014f7
commit 14949a47f9
7 changed files with 455 additions and 108 deletions
--- a/Modules/Internal/Http/Controllers/Api/DailyMonitoringController.php
+++ b/Modules/Internal/Http/Controllers/Api/DailyMonitoringController.php
@@ -1,7 +1,7 @@
 <?php

 namespace Modules\Internal\Http\Controllers\Api;
-
+use App\Helpers\Helper;
 use App\Models\DailyMonitoring;
 use App\Models\RequestDailyMonitoring;
 use App\Models\MedicalPlan;
@@ -10,8 +10,10 @@ use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 use Illuminate\Support\Facades\Validator;
+use Modules\Internal\Transformers\DailyMonitoringResource;
 use App\Models\File;

+
 /**
 * Bagaskoro BSD 27-10-2023
 *
@@ -36,7 +38,7 @@ class DailyMonitoringController extends Controller
    /**
     * Member List
     */
-    public function GetMemberList()
+    public function GetMemberList(Request $request)
    {
        $memberList = DB::table('request_logs')
            ->leftJoin('members', 'request_logs.member_id', '=', 'members.id')
@@ -45,18 +47,18 @@ class DailyMonitoringController extends Controller
            ->select('members.member_id','members.name','members.members_effective_date AS startdate','members.members_expire_date AS enddate', 'request_logs.submission_date as addmision_date', 'organizations.name as provider' )
            ->where('request_logs.service_code', 'IP')
            ->where('request_logs.deleted_at', null)
+            ->when($request->search, function ($q, $search) {
+                $q->where('members.member_id', 'LIKE', "%".$search."%");
+                $q->orWhere('members.name','LIKE',"%".$search."%");
+            })
            // ->where('request_logs.status_final_log', 'approved')
            ->groupBy('request_logs.member_id')
            ->orderBy('request_logs.created_at', 'desc')
-            ->get();
+            // ->get()
+            ->paginate();

-        return response()->json([
-            'error'   => false,
-            'message' => "success",
-            'data'    => [
-                'member_list'=> $memberList,
-            ]
-        ],200);
+        
+        return Helper::paginateResources(DailyMonitoringResource::collection($memberList));
    }

    /**
@@ -76,8 +78,12 @@ class DailyMonitoringController extends Controller
            ->where('request_logs.service_code', 'IP')
            ->where('request_logs.status_final_log', 'approved')
            ->where("request_logs.member_id", "=", $memberDetail->id)
+            ->when($request->search, function ($q, $search) {
+                $q->where('request_logs.code', 'LIKE', "%".$search."%");
+            })
            ->orderBy("request_logs.created_at", "desc")
-            ->get();
+            // ->get()
+            ->paginate();

        return response()->json([
            'error'   => false,
--- a/Modules/Internal/Transformers/DailyMonitoringResource.php
+++ b/Modules/Internal/Transformers/DailyMonitoringResource.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Modules\Internal\Transformers;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DailyMonitoringResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+
+        $data = [
+            'member_id' => $this->member_id,
+            'name' => $this->name,
+            'start_date' => $this->startdate,
+            'end_date' => $this->enddate,
+            'addmision_date' => $this->addmision_date,
+            'provider' => $this->provider,
+        ];
+
+        return $data;
+    }
+}
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/ClaimList.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/ClaimList.tsx
@@ -2,7 +2,7 @@
 * Core
 * ============================================
 */
-import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Grid, Stack } from "@mui/material";

 /**
 * Component
@@ -15,65 +15,232 @@ import ClaimListRow from "./ClaimListRow";
 * ============================================
 */
 import { ClaimListType } from "../Model/Types";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { Button } from "@mui/material";
+import DataTable from '../../../../components/LaravelTable';
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from "@/@types/paginated-data";
+import { useParams, useSearchParams } from "react-router-dom";
+import { TextField } from "@mui/material";
+import { ButtonGroup } from "@mui/material";

 type Props = {
    claim_list: ClaimListType[] | null,
 }

 export default function ClaimList({ ...props }: Props) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { member_id } = useParams();
+    // State
+    // --------------------
+    const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
+    const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+        LaravelPaginatedDataDefault
+    );
    // Tabel Style
    // --------------------
    const TableHeadStyle = {
        fontWeight: 'bold',
    };

-    return (
-        <Box>
-            <TableContainer component={Paper}>
-                <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
-                    {/* Head Table */}
-                    <TableHead>
-                        <TableRow>
-                            <TableCell style={TableHeadStyle} align="left" width={50} />
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
-                            <TableCell align="left" width={"10"} />
-                        </TableRow>
-                    </TableHead>
+     // Load Data
+    // -------------------
+    const loadDataTableData = async (appliedFilter: any | null = null) => {
+        setDataTableLoading(true);
+        const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+       
+        const response = await axios.get('/case_management/claimlist/'+member_id, {params: filter})
+        setDataTableLoading(false);
+        setDataTableData(response.data);
+    }

-                    {/* Body Table */}
-                    {props.claim_list == null ?
+    const applyFilter = async (searchFilter: { search: string }) => {
+        await loadDataTableData(searchFilter);
+        setSearchParams(searchFilter);
+    };
+
+    const handlePageChange = (event: ChangeEvent, value: number): void => {
+        const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+        
+        loadDataTableData(filter);
+        setSearchParams(filter);
+    };
+
+    useEffect(() => {
+        loadDataTableData();
+    }, [])
+
+    function SearchInput(props: any) {
+        // SEARCH
+        const searchInput = useRef<HTMLInputElement>(null);
+        const [searchText, setSearchText] = useState('');
+    
+        const handleSearchChange = (event: any) => {
+          const newSearchText = event.target.value ?? '';
+          setSearchText(newSearchText);
+        };
+    
+        const handleSearchSubmit = (event: any) => {
+          event.preventDefault();
+          props.onSearch({ search: searchText }); // Trigger to Parent
+        };
+    
+        useEffect(() => {
+          // Trigger First Search
+          setSearchText(searchParams.get('search') ?? '');
+        }, []);
+    
+        return (
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Code'
+            />
+          </form>
+        );
+    }
+
+    function ImportForm(props: any) {
+        // IMPORT
+        // Create Button Menu
+        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+        const createMenu = Boolean(anchorEl);
+        const importForm = useRef<HTMLInputElement>(null);
+        const [currentImportFileName, setCurrentImportFileName] = useState(null);
+         const [importLoading, setImportLoading] = useState(false);
+    
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+        };
+        const handleClose = () => {
+          setAnchorEl(null);
+        };
+    
+        const handleImportButton = () => {
+          if (importForm?.current) {
+            handleClose();
+            importForm.current ? importForm.current.click() : console.log('No File selected');
+          } else {
+            alert('No file selected');
+          }
+        };
+    
+        const handleCancelImportButton = () => {
+
+        };
+    
+        const handleImportChange = (event: any) => {
+          if (event.target.files[0]) {
+            setCurrentImportFileName(event.target.files[0].name);
+          } else {
+            setCurrentImportFileName(null);
+          }
+        };
+    
+        const handleUpload = () => {
+          
+        };
+    
+        const handleGetTemplate = (type :string) => {
+          
+        }
+    
+        const handleGetData = (type :string) => {
+         
+        }
+
+        return (
+          <div>
+            {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+                <SearchInput onSearch={applyFilter} />
+                {/* <Button
+                  variant="contained"
+                  startIcon={<AddIcon />}
+                  sx={{ p: 1.8 }}
+                  onClick={() => {
+                    navigate('/claim-requests/create');
+                  }}
+                >
+                  Create
+                </Button> */}
+              </Stack>
+            )}
+          </div>
+        );
+    }
+   
+
+    function TableContent() {
+        return (
+            <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+                {/* Head Table */}
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={TableHeadStyle} align="left" width={50} />
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
+                        <TableCell align="left" width={"10"} />
+                    </TableRow>
+                </TableHead>
+
+                {/* Body Table */}
+                {dataTableData.data.claim_list == null ?
+                (
+                    <TableBody>
+                        <TableRow>
+                            <TableCell colSpan={7} align="center">Loading</TableCell>
+                        </TableRow>
+                    </TableBody>
+                )
+                :
+                (
+                    dataTableData.data.claim_list.data.length == 0 ?
                    (
                        <TableBody>
                            <TableRow>
-                                <TableCell colSpan={7} align="center">Loading</TableCell>
+                                <TableCell colSpan={7} align="center">No Data</TableCell>
                            </TableRow>
                        </TableBody>
                    )
                    :
                    (
-                        props.claim_list.length == 0 ?
-                        (
-                            <TableBody>
-                                <TableRow>
-                                    <TableCell colSpan={7} align="center">No Data</TableCell>
-                                </TableRow>
-                            </TableBody>
-                        )
-                        :
-                        (
-                            <TableBody>
-                                {props.claim_list.map((row: ClaimListType, index) => (
-                                    <ClaimListRow key={index} number={index+1} row={row} />
-                                ))}
-                            </TableBody>
-                        )
-                    )}
-                </Table>
-            </TableContainer>
-        </Box>
-    )
+                        <TableBody>
+                            {dataTableData.data.claim_list.data.map((row: ClaimListType, index) => (
+                                <ClaimListRow key={index} number={index+1} row={row} />
+                            ))}
+                        </TableBody>
+                    )
+                )}
+            </Table>
+        )
+    }
+
+    return (
+        <Grid container>
+          <Grid item sm={12}>
+            <ImportForm />
+          </Grid>
+    
+          <Grid item sm={12}>
+            <DataTable
+              isLoading={dataTableIsLoading}
+              lastRequest={0}
+              data={dataTableData}
+              handlePageChange={handlePageChange}
+              TableContent={<TableContent />}
+            />
+          </Grid>
+        </Grid>
+      );
 }
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringList.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringList.tsx
@@ -2,8 +2,8 @@
 * Core
 * ============================================
 */
-import { useEffect, useState } from "react";
-import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Stack, TextField, Button, Menu, } from "@mui/material";

 /**
 * Types & Functions
@@ -12,12 +12,21 @@ import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, Tabl
 import { getDailyMonitoringList } from "../Model/Functions";
 import { DailyMonitoringListType } from "../Model/Types";
 import DailyMonitoringListRow from "./DailyMonitoringListRow";
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from "@/@types/paginated-data";
+import { Grid } from "@mui/material";
+import DataTable from '../../../../components/LaravelTable';
+import { MenuItem } from "@mui/material";
+import { useSearchParams } from "react-router-dom";
+import axios from "@/utils/axios";

 export default function DailyMonitoringList() {
+    const [searchParams, setSearchParams] = useSearchParams();
    // State
    // --------------------
    const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
-    const [dataTableData, setDataTableData] = useState<DailyMonitoringListType[]>([]);
+    const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+        LaravelPaginatedDataDefault
+    );

    // Tabel Style
    // --------------------
@@ -25,69 +34,205 @@ export default function DailyMonitoringList() {
        fontWeight: 'bold',
    };

+    
+
    // Load Data
    // -------------------
-    const loadDataTableData = async () => {
+    const loadDataTableData = async (appliedFilter: any | null = null) => {
        setDataTableLoading(true);
-
-        const response = await getDailyMonitoringList();
-
+        const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+       
+        const response = await axios.get('/case_management/memberlist', {params: filter})
        setDataTableLoading(false);
-        setDataTableData(response);
+        setDataTableData(response.data);
    }

+    const applyFilter = async (searchFilter: { search: string }) => {
+        await loadDataTableData(searchFilter);
+        setSearchParams(searchFilter);
+    };
+    
+    const handlePageChange = (event: ChangeEvent, value: number): void => {
+        const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+        loadDataTableData(filter);
+        setSearchParams(filter);
+    };
+
    useEffect(() => {
        loadDataTableData();
    }, [])

-    return (
-        <Box>
-            <TableContainer component={Paper}>
-                <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
-                    {/* Head Table */}
-                    <TableHead>
-                        <TableRow>
-                            <TableCell style={TableHeadStyle} align="left" width={50} />
-                            <TableCell style={TableHeadStyle} align="left" width={150}>Member ID</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Provider</TableCell>
-                            <TableCell align="left" width={"10"} />
-                        </TableRow>
-                    </TableHead>
+    function SearchInput(props: any) {
+        // SEARCH
+        const searchInput = useRef<HTMLInputElement>(null);
+        const [searchText, setSearchText] = useState('');
+    
+        const handleSearchChange = (event: any) => {
+          const newSearchText = event.target.value ?? '';
+          setSearchText(newSearchText);
+        };
+    
+        const handleSearchSubmit = (event: any) => {
+          event.preventDefault();
+          props.onSearch({ search: searchText }); // Trigger to Parent
+        };
+    
+        useEffect(() => {
+          // Trigger First Search
+          setSearchText(searchParams.get('search') ?? '');
+        }, []);
+    
+        return (
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Member Code or Member Name...'
+            />
+          </form>
+        );
+    }

-                    {/* Body Table */}
-                    {dataTableIsLoading ?
+    function ImportForm(props: any) {
+        // IMPORT
+        // Create Button Menu
+        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+        const createMenu = Boolean(anchorEl);
+        const importForm = useRef<HTMLInputElement>(null);
+        const [currentImportFileName, setCurrentImportFileName] = useState(null);
+         const [importLoading, setImportLoading] = useState(false);
+    
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+        };
+        const handleClose = () => {
+          setAnchorEl(null);
+        };
+    
+        const handleImportButton = () => {
+          if (importForm?.current) {
+            handleClose();
+            importForm.current ? importForm.current.click() : console.log('No File selected');
+          } else {
+            alert('No file selected');
+          }
+        };
+    
+        const handleCancelImportButton = () => {
+
+        };
+    
+        const handleImportChange = (event: any) => {
+          if (event.target.files[0]) {
+            setCurrentImportFileName(event.target.files[0].name);
+          } else {
+            setCurrentImportFileName(null);
+          }
+        };
+    
+        const handleUpload = () => {
+          
+        };
+    
+        const handleGetTemplate = (type :string) => {
+          
+        }
+    
+        const handleGetData = (type :string) => {
+         
+        }
+
+        return (
+          <div>
+            {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+                <SearchInput onSearch={applyFilter} />
+                {/* <Button
+                  variant="contained"
+                  startIcon={<AddIcon />}
+                  sx={{ p: 1.8 }}
+                  onClick={() => {
+                    navigate('/claim-requests/create');
+                  }}
+                >
+                  Create
+                </Button> */}
+              </Stack>
+            )}
+          </div>
+        );
+    }
+
+    function TableContent(){
+        return (
+            <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+                {/* Head Table */}
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={TableHeadStyle} align="left" width={50} />
+                        <TableCell style={TableHeadStyle} align="left" width={150}>Member ID</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Provider</TableCell>
+                        <TableCell align="left" width={"10"} />
+                    </TableRow>
+                </TableHead>
+
+                {/* Body Table */}
+                {dataTableIsLoading ?
+                (
+                    <TableBody>
+                        <TableRow>
+                            <TableCell colSpan={7} align="center">Loading</TableCell>
+                        </TableRow>
+                    </TableBody>
+                )
+                :
+                (
+                    dataTableData.data.length == 0 ?
                    (
                        <TableBody>
                            <TableRow>
-                                <TableCell colSpan={6} align="center">Loading</TableCell>
+                                <TableCell colSpan={7} align="center">No Data</TableCell>
                            </TableRow>
                        </TableBody>
                    )
                    :
                    (
-                        dataTableData.length == 0 ?
-                        (
-                            <TableBody>
-                                <TableRow>
-                                    <TableCell colSpan={6} align="center">No Data</TableCell>
-                                </TableRow>
-                            </TableBody>
-                        )
-                        :
-                        (
-                          <TableBody>
-                            {dataTableData.map((row: DailyMonitoringListType, index) => (
-                                <DailyMonitoringListRow key={index} number={index+1} row={row} />
-                            ))}
-                          </TableBody>
-                        )
-                    )}
-                </Table>
-            </TableContainer>
-        </Box>
-    )
+                        <TableBody>
+                        {dataTableData.data.map((row: DailyMonitoringListType, index) => (
+                            <DailyMonitoringListRow key={index} number={index+1} row={row} />
+                        ))}
+                        </TableBody>
+                    )
+                )}
+            </Table>
+        )
+    }
+
+    return (
+        <Grid container>
+          <Grid item sm={12}>
+            <ImportForm />
+          </Grid>
+    
+          <Grid item sm={12} marginTop={2}>
+            <DataTable
+              isLoading={dataTableIsLoading}
+              lastRequest={0}
+              data={dataTableData}
+              handlePageChange={handlePageChange}
+              TableContent={<TableContent />}
+            />
+          </Grid>
+        </Grid>
+      );
+
 }
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringListRow.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringListRow.tsx
@@ -42,7 +42,7 @@ export default function DailyMonitoringListRow ({ ...props }: Props) {
                        variant="ghost"
                        color="default"
                    >
-                        {fDate(props.row.startdate)}
+                        {fDate(props.row.start_date)}
                    </Label>
                </TableCell>
                <TableCell align="left">
@@ -50,7 +50,7 @@ export default function DailyMonitoringListRow ({ ...props }: Props) {
                        variant="ghost"
                        color="default"
                    >
-                        {fDate(props.row.enddate)}
+                        {fDate(props.row.end_date)}
                    </Label>
                </TableCell>
                <TableCell align="left">
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Functions.ts
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Functions.ts
@@ -7,10 +7,10 @@ import { fDate, fDateOnly } from '@/utils/formatTime';
 /**
 * Listing Daily Monitoring
 */
-export const getDailyMonitoringList = async (  ): Promise<DailyMonitoringListType[]> => {
-    const response = await axios.get('/case_management/memberlist')
+export const getDailyMonitoringList = async ( param: any) => {
+    const response = await axios.get('/case_management/memberlist', {params: param})
        .then((res) =>{
-            return res.data.data.member_list;
+            return res.data;
        })
        .catch((res) => {
            enqueueSnackbar("server error !", {
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Types.ts
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Types.ts
@@ -4,8 +4,8 @@
 export type DailyMonitoringListType = {
    member_id   : string,
    name        : string,
-    startdate   : string,
-    enddate     : string,
+    start_date   : string,
+    end_date     : string,
    addmision_date : string,
    provider : string
 }