LIONER-frontend/src/pages/client/ClientSearchPage/index.js

// material-ui
import {
    Grid, Typography
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../../auth/utils";
import {
//     GET_DIVISION_FROM_SUB_DIVISION,
    GET_CLIENT_PATH,
//     GET_SEARCH_TEMPLATE_COMBO_PATH,
//     GET_SEARCH_TEMPLATE_PATH
} from "../../../utils/ApiPathConst";
import * as React from "react";
import LoadingComponent from "../../extra-pages/LoadingComponent";
import ClientTable from "./ClientTable";
import ClientSearchForm from "./ClientSearchForm";
import Qs from "qs";
// import Autocomplete from "@mui/material/Autocomplete";
import {isObjEmpty} from "../../../utils/Utils";
import {isFormEmpty} from "../../../utils/CommonFunction";
// import UploadContext from "../../components/UploadProvider";
// import {useLocation} from "react-router-dom";
// import dayjs from "dayjs";

import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ClientSearchPage = () => {
    const [onReady, setOnReady] = useState(false);
    const [expanded, setExpanded] = React.useState(true);
    const [record,setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});

    function getClientList() {
        // const userSubDivision = queryParams.get('userSubDivision');
        // const year = queryParams.get('year');
        // const temp = {
        //     fromDate: year === null ? null : dayjs(year+"-01-01").format('YYYY-MM-DD'),
        //     toDate: year === null ? null : dayjs(year+"-12-31").format('YYYY-MM-DD'),
        //     divisionIdList: userSubDivision === "true" ? [userDivision.id] : null,
        // };
        axios.get(`${apiPath}${GET_CLIENT_PATH}`, {
                params: searchCriteria,
                // params: isInit? temp : searchCriteria,
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            }
        )
            .then((response) => {
                if (response.status === 200) {
                    if (!isFormEmpty(searchCriteria) && !isObjEmpty(response.data.records)) {
                        setExpanded(false);
                    }
                    setRecord(response.data.records);
                    setOnReady(true);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    useEffect(() => {
        getClientList();
    }, [searchCriteria]);
    
    // useEffect(() => {
    //     if(isObjEmpty(searchCriteria)){
    //         getClientList();
    //     }
    //     console.log("1st");
    // }, []);

    function applySearch(input) {
        // console.log("SearchCriteria:")
        // console.log(input)
        setSearchCriteria(input);
    }

    return (
        <Grid container rowSpacing={3} columnSpacing={2.75} >
            <ThemeProvider theme={LIONER_FORM_THEME}>
                <Grid item xs={12} md={12} lg={12} >
                    <Grid container maxWidth justifyContent="space-between" sx={{mt:-2, width:CARD_MAX_WIDTH}} >
                        <Grid item xs={4} s={4} md={4} lg={4}
                            sx={{ mb: -2.25, display: 'flex', alignItems: 'center'}}>
                            <Typography variant="h4">Search Client</Typography>
                        </Grid>
                    </Grid>
                </Grid>

                {/* Search Form */}
                <Grid item xs={12} md={12} lg={12}>
                    <ClientSearchForm
                        // isUpdating={isUpdating}
                        // setIsUpdating={setIsUpdating}
                        applySearch={applySearch}
                        // refTemplateData={refTemplateData}
                        // getTemplateList={getTemplateList}
                        setExpanded={setExpanded}
                        expanded={expanded}
                        // userDivision={userDivision}
                    />
                </Grid>

                {!onReady? <LoadingComponent/> :
                // Client Table
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                            content={false}
                            sx={{mt:{lg:-1.5}, width: CARD_MAX_WIDTH}}

                    >
                        <div style={{/*height: expanded? '46vh' : '75vh',*/ width: '100%'}}>
                            <ClientTable
                                recordList={record}
                                pageSize={10}
                                expanded={expanded}
                            />
                        </div>
                    </MainCard>
                </Grid>
                }
            </ThemeProvider>
        </Grid>

    );
};

export default ClientSearchPage;