PNSPS-frontend-MaterialUI/src/pages/Setting/DrImport/index.js

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";

import {
    Grid, Typography, Button,
    Stack, Box,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import { notifyDownloadSuccess } from 'utils/CommonFunction';

import { FormattedMessage, useIntl } from "react-intl";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

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

const Index = () => {
    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");
    const [resultStr, setResultStr] = React.useState("");

    const intl = useIntl();


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


    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
            ) {
                HttpUtils.postWithFiles({
                    url: UrlUtils.DR_IMPORT,
                    params:null,
                    files: [event.target.files[0]],
                    onSuccess: function (responData) {
                        if(responData?.msg){
                            setResultStr(<><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
                        }else if(responData?.success){
                            setResultStr(<><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>)
                        }
                    }
                });
            } else {
                setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
                setIsWarningPopUp(true);
                setAttachment({});
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
        }
        document.getElementById("uploadFileBtn").value = "";
    }

    return (
        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" alignItems="center">
            <Grid item xs={12} md={12} width="100%" >
                <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' } }}>
                            DR Import
                        </Typography>
                    </Stack>
                </div>
            </Grid>

            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%">
                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>
                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

                        <Button
                            aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                            component="span"
                            variant="outlined"
                            size="large"
                            onClick={()=>{
                                HttpUtils.fileDownload({
                                    url: UrlUtils.DR_EXPORT,
                                    onSuccess: ()=>{
                                        notifyDownloadSuccess();
                                    }
                                });
                            }}
                        >Export DR Excel</Button>
                            <Grid item sx={{ pl: 4 }}>
                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                    <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
                                        <input
                                            id="uploadFileBtn"
                                            name="file"
                                            type="file"
                                            accept=".xlsx"
                                            style={{ display: 'none' }}
                                            onChange={(event) => {
                                                readFile(event)
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item >
                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                    <Grid item xs={12} >
                                        <label htmlFor="uploadFileBtn">
                                            <Button
                                                aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                                                component="span"
                                                variant="outlined"
                                                size="large"
                                            >Import DR Excel</Button>
                                        </label>
                                    </Grid>
                                    
                                </Grid>
                            </Grid>
                     
                    </Stack>
                </Box>
            </Grid>

            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%" >
                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>

                    <Typography variant="h4">Result:</Typography>
                    <Box xs={12} md={12} sx={{ pl: 4 }}>
                        {resultStr}
                    </Box>


                </Box>
            </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>
                        Action Fail
                    </DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button
                            aria-label={intl.formatMessage({ id: 'ok' })}
                            onClick={() => { setIsWarningPopUp(false); }}
                        >
                            <FormattedMessage id="ok" />
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid>
    );
};

export default Index;