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'
import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";


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

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

    const _sx = {
        padding: "4 2 4 2",
        boxShadow: 1,
        border: 1,
        borderColor: '#DDD',
        '& .MuiDataGrid-cell': {
            borderTop: 1,
            borderBottom: 1,
            borderColor: "#EEE"
        },
        '& .MuiDataGrid-footerContainer': {
            border: 1,
            borderColor: "#EEE"
        },
        '& .MuiTabPanel-root': {
            padding: '0px',
        }
    }

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: '100%',
        height: '100%',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#0C489E',
        backgroundPosition: 'right'
    }

    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"]);
                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} sx={{ mt: 3}} >
                    <Stack direction="row" justifyContent="flex-end" alignItems="center">
                        <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                        <Box sx={{ mr: { md: "47px" } }}>
                            <Button variant="contained" onClick={() => { onBtnClick() }}><Typography variant="pnspsButtonText">申請公共啟事</Typography></Button>
                        </Box>
                        </ThemeProvider>
                    </Stack>
                </Grid>
                {/*col 2*/}

                {
                    JSON.parse(localStorage.getItem('userData')).creditor ? (
                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '1%', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                            <TabContext value={selectedTab}>
                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}>
                                    <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
                                        <Tab label={"處理中 (" + submittedList?.length + ")"} value="1" />
                                        <Tab label={"待發布 (" + pendingPublishList?.length + ")"} value="3" />
                                        <Tab label={"待付款 (" + pendingPaymentList?.length + ")"} value="4" />
                                        <Tab label="搜尋申請記錄" value="5" />
                                    </TabList>
                                </Box>
                                <TabPanel value="1">
                                    <BaseGrid
                                        rows={submittedList}
                                        reloadFunction={reloadPage}
                                    />
                                </TabPanel>
                                <TabPanel value="3">
                                    <BaseGrid
                                        rows={pendingPublishList}
                                        reloadFunction={reloadPage}
                                    />
                                </TabPanel>
                                <TabPanel value="4">
                                    <BaseGrid
                                        rows={pendingPaymentList}
                                        reloadFunction={reloadPage}
                                    />
                                </TabPanel>
                                <TabPanel value="5">
                                    <SearchTab
                                        rows={pendingPublishList}
                                        reloadFunction={reloadPage}
                                    />
                                </TabPanel>
                            </TabContext>
                        </Grid>
                    ) : (
                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%',backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                            <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={"待付款 (" + 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="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;