PNSPS-frontend-MaterialUI/src/pages/GazetteIssue/index.js

import {
    Grid,
    Typography,
    Stack,
    Button,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import MainCard from 'components/MainCard';

const ExportForm = Loadable(React.lazy(() => import('./ExportForm')));
const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
const GazetteIssueTable = Loadable(React.lazy(() => import('./DataGrid')));

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
};
import { PNSPS_LONG_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { dateStr_Year } from "utils/DateUtils";
import { notifySaveSuccess } from 'utils/CommonFunction';
import { isGrantedAny } from "auth/utils";
import { useIntl } from 'react-intl';

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

const Index = () => {
    const intl = useIntl();
    const [comboData, setComboData] = React.useState([]);
    const [holidayComboData, setHolidayComboData] = React.useState([]);
    const [onReady, setOnReady] = React.useState(false);
    const [onGridReady, setGridOnReady] = React.useState(false);
    const [onSearchReady, setOnSearchReady] = React.useState(false);
    const [onExportReady, setOnExportReady] = React.useState(false);
    const [searchCriteria, setSearchCriteria] = React.useState({
        year: dateStr_Year(new Date()),
    });
    const [exportCriteria, setExportCriteria] = React.useState({});
    const [attachments, setAttachments] = React.useState([]);
    const [waitImport, setWaitImport] = React.useState(false);
    const [waitDownload, setWaitDownload] = React.useState(false);
    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");
    const fileInputRef = React.useRef(null);

    React.useEffect(() => {
        setOnSearchReady(false);
        loadCombo();
    }, [searchCriteria]);

    function loadCombo() {
        HttpUtils.get({
            url: UrlUtils.GET_ISSUE_YEAR_COMBO,
            onSuccess: (responseData) => {
                let combo = responseData;
                setComboData(combo);
                setOnSearchReady(true);
                loadHolidayCombo(true);
            }
        });
    }

    function loadHolidayCombo() {
        HttpUtils.get({
            url: UrlUtils.GET_HOLIDAY_COMBO,
            onSuccess: (responseData) => {
                let combo = responseData;
                setHolidayComboData(combo);
                setOnExportReady(true);
                setOnReady(true);
            }
        });
    }

    function applySearch(input) {
        setGridOnReady(true);
        setSearchCriteria(input);
    }

    function applyExport(input) {
        setExportCriteria(input);
    }

    function applyGridOnReady(input) {
        setGridOnReady(input);
    }

    React.useEffect(() => {
        if (Object.keys(exportCriteria).length > 0) {
            doExport();
        }
    }, [exportCriteria]);

    React.useEffect(() => {
        if (attachments.length > 0) {
            importHoliday();
        }
    }, [attachments]);

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (!file.name.toLowerCase().endsWith(".xlsx")) {
                setWarningText("Please upload a valid file (File format: .xlsx).");
                setIsWarningPopUp(true);
                event.target.value = "";
                return;
            }
            file['id'] = attachments.length;
            setAttachments([...attachments, file]);
            event.target.value = "";
        }
    };

    const doExport = () => {
        setWaitDownload(true);
        HttpUtils.fileDownload({
            url: UrlUtils.GET_ISSUE_LIST,
            params: exportCriteria,
            onResponse: () => {
                setTimeout(() => setWaitDownload(false), 500);
            }
        });
    };

    const importHoliday = () => {
        setWaitImport(true);
        if (!attachments || attachments.length <= 0) {
            setWarningText("Please upload file.");
            setWaitImport(false);
            return;
        }
        HttpUtils.postWithFiles({
            url: UrlUtils.POST_ISSUE_FILE,
            files: attachments,
            onSuccess: () => {
                notifySaveSuccess();
                setWaitImport(false);
                setAttachments([]);
                loadCombo();
            }
        });
    };

    return (
        !onReady ?
            <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" justifyContent="flex-start" alignItems="center">
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Gazette Issue</Typography>
                            </Stack>
                        </div>
                    </Grid>

                    {!onExportReady ?
                        <LoadingComponent /> :
                        <Grid item xs={12} md={12} lg={12} width="100%">
                            <ExportForm
                                applyExport={applyExport}
                                comboData={holidayComboData}
                                waitDownload={waitDownload}
                            />
                        </Grid>
                    }

                    {isGrantedAny(["MAINTAIN_GAZETTE_ISSUE"]) &&
                        <Grid item xs={12} md={12} lg={6} width="100%">
                            <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ ml: 2, mt: 1 }}>
                                <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                    <Button
                                        variant="contained"
                                        size="large"
                                        disabled={waitImport}
                                        type="button"
                                        onClick={() => {
                                            if (fileInputRef.current) {
                                                fileInputRef.current.click();
                                            }
                                        }}
                                        onKeyDown={(event) => {
                                            if (event.key === 'Enter' || event.key === ' ') {
                                                event.preventDefault();
                                                if (fileInputRef.current) {
                                                    fileInputRef.current.click();
                                                }
                                            }
                                        }}
                                    >
                                        <Typography variant="h5">Upload Files</Typography>
                                    </Button>
                                    <input
                                        id="uploadFileBtn"
                                        name="file"
                                        type="file"
                                        accept=".xlsx"
                                        hidden
                                        disabled={waitImport}
                                        onChange={readFile}
                                        aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })}
                                        ref={fileInputRef}
                                    />
                                </ThemeProvider>
                            </Stack>
                        </Grid>
                    }

                    {/* Row 1 */}
                    <Grid item xs={12} md={12} lg={12} width="100%">
                        <SearchForm
                            applySearch={applySearch}
                            comboData={comboData}
                            onGridReady={onGridReady}
                        />
                    </Grid>

                    {/* Row 2 */}
                    {!onSearchReady ?
                        <LoadingComponent /> :
                        <Grid item xs={12} md={12} lg={12} width="100%">
                            <MainCard elevation={0} border={false} content={false}>
                                <GazetteIssueTable
                                    searchCriteria={searchCriteria}
                                    applyGridOnReady={applyGridOnReady}
                                />
                            </MainCard>
                        </Grid>
                    }

                    <Dialog
                        open={isWarningPopUp}
                        onClose={() => setIsWarningPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}
                    >
                        <DialogTitle>
                            <Typography variant="h3">Warning</Typography>
                        </DialogTitle>
                        <DialogContent style={{ display: 'flex' }}>
                            <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setIsWarningPopUp(false)}>
                                <Typography variant="h5">OK</Typography>
                            </Button>
                        </DialogActions>
                    </Dialog>
                </Grid>
            )
    );
};

export default Index;