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 {
    GET_PUBLIC_NOTICE_LIST_ListByStatus,
    GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted,
    GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment,
    GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish
} 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";
import { FormattedMessage, useIntl } from "react-intl";
import usePageTitle from 'components/usePageTitle';
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const PublicNotice = () => {
    usePageTitle("myPublicNotice");
    
    const [submittedCount, setSubmittedCount] = useState(0);
    const [pendingPaymentCount, setPendingPaymentCount] = useState(0);
    const [pendingPublishCount, setPendingPublishCount] = useState(0);
    const [isLoading, setLoding] = useState(true);
    const [selectedTab, setSelectedTab] = useState("1");
    const navigate = useNavigate();
    const intl = useIntl();

    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 loadData = () => {
        setLoding(true);
        HttpUtils.get({
            url: GET_PUBLIC_NOTICE_LIST_ListByStatus,
            onSuccess: function (response) {
                setSubmittedCount(response.submitted ?? 0);
                setPendingPaymentCount(response.pendingPayment ?? 0);
                setPendingPublishCount(response.pendingPublish ?? 0);
            }
        });
    };

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

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

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

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column">
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                                <FormattedMessage id="myPublicNotice" />
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
                <Grid item xs={12} sm={12} md={12} lg={12} mt={1} sx={{ mt: 3, mr: { xs: 3, sm: 3, md: 0 } }} >
                    <Stack direction="row" justifyContent="flex-end" alignItems="center">
                        <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                            <Box sx={{ mr: { md: "47px" } }}>
                                <Button aria-label={intl.formatMessage({ id: 'applyPublicNotice' })} variant="contained" onClick={() => { onBtnClick() }}>
                                    <FormattedMessage id="applyPublicNotice" />
                                </Button>
                            </Box>
                        </ThemeProvider>
                    </Stack>
                </Grid>
                {/*col 2*/}

                {
                    JSON.parse(localStorage.getItem('userData')).creditor ? (
                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height: '100%', maxWidth: '100%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                            <TabContext value={selectedTab}>
                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY: 'auto' }}>
                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
                                        <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="3" />
                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="4" />
                                        <Tab aria-label={intl.formatMessage({ id: 'searchApplyRecord' })} label={intl.formatMessage({ id: 'searchApplyRecord' })} value="5" />
                                    </TabList>
                                </Box>
                                <TabPanel value="1">
                                    <BaseGrid
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted}
                                        setCount={setSubmittedCount}
                                    />
                                </TabPanel>
                                <TabPanel value="3">
                                    <BaseGrid
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish}
                                        setCount={setPendingPublishCount}
                                    />
                                </TabPanel>
                                <TabPanel value="4">
                                    <BaseGrid
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment}
                                        setCount={setPendingPaymentCount}
                                    />
                                </TabPanel>
                                <TabPanel value="5">
                                    <SearchTab />
                                </TabPanel>
                            </TabContext>
                        </Grid>
                    ) : (
                        <Grid item xs={12} sx={{ minHeight: '80vh', height: "100%", maxHeight: '300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                            <TabContext value={selectedTab}>
                                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
                                        <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="3" />
                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="4" />
                                        <Tab aria-label={intl.formatMessage({ id: 'searchApplyRecord' })} label={intl.formatMessage({ id: 'searchApplyRecord' })} value="5" />
                                    </TabList>
                                </Box>
                                <TabPanel value="1">
                                    <BaseGrid
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted}
                                        setCount={setSubmittedCount}
                                    />
                                </TabPanel>
                                <TabPanel value="3">
                                    <PendingPaymentTab
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment}
                                        setCount={setPendingPaymentCount}
                                    />
                                </TabPanel>
                                <TabPanel value="4">
                                    <BaseGrid
                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish}
                                        setCount={setPendingPublishCount}
                                    />
                                </TabPanel>
                                <TabPanel value="5">
                                    <SearchTab />
                                </TabPanel>
                            </TabContext>
                        </Grid>
                    )
                }

            </Grid>
    );
};


export default PublicNotice;