PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/index.js

// material-ui
import {
    Grid,
    Typography,
    Tab,
    Box,
    Button,
    Stack
} 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')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'


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

const PublicNotice = () => {
    const [submittedList, setSubmittedList] = useState([]);
    const [inProgressList, setInProgressList] = useState([]);
    const [pendingPaymentList, setPendingPaymentList] = useState([]);
    const [pendingPublishList, setPendingPublishList] = useState([]);
    const [isLoading, setLoding] = useState(true);
    const [selectedTab, setSelectedTab] = useState("1");
    const navigate = useNavigate();

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: '100%',
        height: '100%',
        backgroundSize:'cover'
      }

    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 >
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                        <Typography ml={15} color='#FFF' variant="h4">我的公共啟事</Typography>
                    </Stack>
                    </div>
                </Grid>
                <Grid item xs={12} mt={1} >
                    <Stack direction="row" justifyContent="flex-end" alignItems="center">
                        <Box sx={{mr:{md:"47px"}}}>
                            <Button variant="contained" onClick={() => { onBtnClick() }}>申請公共啟事</Button>
                        </Box>
                    </Stack>
                </Grid>
                {/*col 2*/}
                <Grid item xs={12} sx={{minHeight: '75vh'}}>
                    <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" />
                                <Tab label={"待發佈(" + pendingPublishList.length + ")"} value="4" />
                                <Tab label="搜尋申請記錄" value="5" />
                            </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>
                        <TabPanel value="4">
                            <BaseGrid
                                rows={pendingPublishList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="5">
                            <SearchTab
                                rows={pendingPublishList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;