PNSPS-frontend-MaterialUI/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js

// material-ui
import {
    Grid,
    // Typography,
    Tab,
    Box,
    // Button
} from '@mui/material';

import { TabPanel, TabContext, TabList } from '@mui/lab';
import { 
    // useEffect, 
    useState } from "react";
// import { useNavigate } from "react-router-dom";
import * as React from "react";
// import * as HttpUtils from "../../../utils/HttpUtils";
// import * as UrlUtils from "../../../utils/ApiPathConst";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));


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

const PublicNotice = () => {
    const [submittedList, ] = useState([]);
    const [inProgressList, ] = useState([]);
    const [pendingPaymentList, ] = useState([]);
    const [isLoading,] = useState(false);
    const [selectedTab, setSelectedTab] = useState("1");
    // const navigate = useNavigate();


    // useEffect(() => {
    //     loadData();
    // }, []);

    const reloadPage = () => {
        window.location.reload(false);
    }

    // const loadData = () => {
    //     setLoding(true);
    //     HttpUtils.get({
    //         url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`,
    //         onSuccess: function (response) {
    //             setSubmittedList(response["submitted"]);
    //             setInProgressList(response["inProgress"]);
    //             setPendingPaymentList(response["pendingPayment"]);
    //             setPendingPublishList(response["pendingPublish"]);
    //         }
    //     });
    // };

    // useEffect(() => {
    //     setLoding(false);
    // }, [submittedList]);

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    }

    // const onBtnClick = () => {
    //     navigate('/publicNotice/apply')
    // }

    return (
        isLoading ?
            <LoadingComponent />
            :
            <Grid container sx={{minHeight: '40vh'}}>
                {/*col 2*/}
                <Grid item xs={12}>
                    <TabContext value={selectedTab}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                            <TabList onChange={handleChange} aria-label="lab API tabs example">
                                <Tab label={"已提交(" + submittedList.length + ")"} value="1" />
                                <Tab label={"處理中(" + inProgressList.length + ")"} value="2" />
                                <Tab label={"待付款(" + pendingPaymentList.length + ")"} value="3" />
                            </TabList>
                        </Box>
                        <TabPanel value="1">
                            <BaseGrid
                                rows={submittedList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="2">
                            <BaseGrid
                                rows={inProgressList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="3">
                            <PendingPaymentTab
                                rows={pendingPaymentList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;