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

// material-ui
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'

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 { notifySaveSuccess } from 'utils/CommonFunction';

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

const Index = () => {
    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("");

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

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

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

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

    return (
                <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>
                    <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}>
                                <label htmlFor="downloadFileBtn">
                                    <Button
                                        component="span"
                                        variant="contained"
                                        size="large"
                                        disabled={waitDownload}
                                        onClick={doExport}
                                    >
                                        <Typography variant="h5">Export</Typography>
                                    </Button>
                                </label>
                            </ThemeProvider>
                            
                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                <input
                                    id="uploadFileBtn"
                                    name="file"
                                    type="file"
                                    accept=".xlsx"
                                    style={{ display: 'none' }}
                                    disabled={waitImport}
                                    onChange={(event) => {
                                        readFile(event)
                                    }}
                                />
                                <label htmlFor="uploadFileBtn">
                                    <Button
                                        component="span"
                                        variant="contained"
                                        size="large"
                                        disabled={waitImport}
                                    >
                                        <Typography variant="h5">Upload Files</Typography>
                                    </Button>
                                </label>
                            </ThemeProvider>
                            
                        </Stack>
                    </Grid>

                    <div>
                        <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>
                    </div>
                </Grid >
    );
};

export default Index;