PNSPS-frontend-MaterialUI/src/pages/DemandNote/Create/SearchForm.js

// material-ui
import {
    Button,
    Grid, TextField,
    Autocomplete,
    Typography,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import * as DateUtils from "utils/DateUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils";
import { useNavigate } from "react-router-dom";
import { notifyDownloadSuccess } from 'utils/CommonFunction';
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";


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


const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _publishCount }) => {

    const [isFailPopUp, setIsFailPopUp] = React.useState(false);
    const [failText, setFailText] = React.useState("");

    const [confirmPopUp, setConfirmPopUp] = React.useState(false);
    const [dueDate, setDueDate] = React.useState(DateUtils.dateStr(new Date()));

    const [isSuccessPopUp, setIsSuccessPopUp] = React.useState(false);
    const [resultCount, setResultCount] = React.useState(0);
    const [dnIdList, setDnIdList] = React.useState([]);

    const [issueSelected, setIssueSelected] = React.useState({});
    const [paymentCount, setPaymentCount] = React.useState(0);
    const [publishCount, setPublishCount] = React.useState(0);
    const [issueCombo, setIssueCombo] = React.useState([]);
    const navigate = useNavigate()

    React.useEffect(() => {
        if (issueComboData && issueComboData.length > 0) {
            setIssueCombo(issueComboData);
        }
    }, [issueComboData]);

    React.useEffect(() => {
        setPaymentCount(_paymentCount);
    }, [_paymentCount]);

    React.useEffect(() => {
        setPublishCount(_publishCount);
    }, [_publishCount]);

    React.useEffect(() => {
        onPreView();
    }, [issueSelected]);

    function getIssueLabel(data) {
        if (data == {}) return "";
        return data.issueYear
            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
    }

    const onSubmit = () => {
        if (!issueSelected?.id) {
            setFailText("Fail Create: Please select Gazette Issue.");
            setIsFailPopUp(true);
            return;
        } else {
            setDueDate(DateUtils.dateStr(new Date()));
            setConfirmPopUp(true);
        }
    };

    const doDnCreate=()=>{
        setConfirmPopUp(false);
        HttpUtils.post({
            url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
            params:{
                dueDate: dueDate
            },
            onSuccess: function (responseData) {
                setResultCount(responseData.count);
                setDnIdList(responseData.idList);
                setIsSuccessPopUp(true);
            }
        });
    }

    const fileDownload = () => {
        HttpUtils.fileDownload({
            method:'post',
            url: UrlUtils.DEMAND_NOTE_EXPORT,
            params: {
                "dnIdList": dnIdList
            },
            onSuccess: function () {
                notifyDownloadSuccess();
            }
        });
    }

    const onNavigate = () => {
        setIsSuccessPopUp(false);
        if(resultCount > 0)
            navigate('/paymentPage/demandNote');
    };

    const onPreView = () => {
        if (!issueSelected?.id) {
            return;
        }
        const temp = {
            issueId: issueSelected.id,
        };
        applySearch(temp);
    };

    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}
        >

            <form>
                {/*row 1*/}
                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                    {/*row 1*/}
                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
                        <Typography variant="h5" >
                            Please Select Gazette Issue :
                        </Typography>
                    </Grid>
                    {/*row 2*/}

                    <Grid container display="flex" alignItems={"center"} sx={{mb:3}}>
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}>
                        <Autocomplete
                            disablePortal
                            size="small"
                            id="issueId"
                            options={issueCombo}
                            value={issueSelected}
                            inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
                            getOptionLabel={(option) => getIssueLabel(option)}
                            onChange={(event, newValue) => {
                                if (newValue !== null) {
                                    setIssueSelected(newValue);
                                }
                            }}
                            renderInput={(params) => (
                                <TextField {...params}
                                    label="Gazette Issue"
                                    InputLabelProps={{
                                        shrink: true
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    {/* <Grid item sx={{ ml: 3, mr: 3}} >
                        <Button
                            size="large"
                            variant="contained"
                            onClick={onPreView}
                            sx={{
                                textTransform: 'capitalize',
                                alignItems: 'end'
                            }}>
                            <Typography variant="h5">Preview</Typography>
                        </Button>
                    </Grid> */}
                    <Grid item sx={{ ml: 3, mr: 3 }} >
                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                        <Button
                            variant="contained"
                            onClick={onSubmit}
                            color="success"
                        >
                            Create
                        </Button>
                        </ThemeProvider>
                    </Grid>

                    <Grid item sx={{ ml: 3, mr: 3 }} >
                        <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
                    </Grid>

                    <Grid item sx={{ ml: 3, mr: 3 }} >
                        <Typography variant="h5">Pending Publish: {publishCount}</Typography>
                    </Grid>
                </Grid>
                </Grid>
            </form>
            <div>
                <Dialog
                    open={isFailPopUp}
                    onClose={() => setIsFailPopUp(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">Action Fail</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsFailPopUp(false)}><Typography variant="h5">OK</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
            <div>
                <Dialog
                    open={confirmPopUp}
                    onClose={() => setConfirmPopUp(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">Create Confirm</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Grid container alignItems={"center"}>
                            <Grid item md={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                <Typography variant="h4" style={{ padding: '16px' }}>Due Date: </Typography>
                          
                            </Grid>
                            <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <TextField
                                fullWidth
                                type="date"
                                defaultValue={dueDate}
                                InputProps={{ inputProps: { min: DateUtils.dateStr(new Date()) } }}
                                onChange={(newValue) => {
                                    setDueDate(newValue.currentTarget.value)
                                }}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>
                        </Grid>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                        <Button onClick={() => doDnCreate()}><Typography variant="h5">Confirm</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
            <div>
                <Dialog
                    open={isSuccessPopUp}
                    onClose={() => setIsSuccessPopUp(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">Create Result</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Grid container alignItems={"center"}>
                            <Grid item md={12}>
                                <Typography variant="h4" style={{ padding: '16px' }}>Created DN record: {resultCount}</Typography>
                            </Grid>
                            {resultCount == 0 ? <></> :
                                <Grid item md={12}>
                                    <Button
                                        size="large"
                                        onClick={()=>fileDownload()}
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}>
                                        <Typography variant="h5">Click here to download GDNS xml file.</Typography>
                                    </Button>
                                </Grid>
                            }

                        </Grid>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => onNavigate()}><Typography variant="h5">OK</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default SearchPublicNoticeForm;