PNSPS-frontend-MaterialUI/src/pages/ProofCreate_FromApp/ProofForm.js

// material-ui
import {
    Dialog, DialogTitle, DialogContent, DialogActions,
    Typography,
    Autocomplete,
    CardContent,
    Grid,
    Stack,
    TextField,
    FormLabel,
    Button
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils";
import MainCard from "components/MainCard";
import * as ComboData from "utils/ComboData";
import * as React from "react";
import { useFormik } from 'formik';
import { useNavigate } from "react-router-dom";
import Loadable from 'components/Loadable';
const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const FormPanel = ({ formData }) => {

    const [data, setData] = React.useState({});
    const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]);
    const [attachments, setAttachments] = React.useState([]);

    const [wait, setWait] = React.useState(false);

    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");

    const navigate = useNavigate()

    React.useEffect(() => {
        if (formData) {
            setData(formData);
            if (formData.groupType == "A") {
                setColumnPrice(ComboData.proofPrice[1])
                formData['length'] = 18;
            }
        }
    }, [formData]);


    React.useEffect(() => {
        if (!attachments || attachments.length <= 0) {
            formik.setFieldValue("length", 0);
            formik.setFieldValue("noOfPages", 0);
            formik.setFieldValue("fee", 0);
            return;
        }

        doCalculate();

    }, [attachments]);

    const doCalculate = () => {
        setWait(true);
        if (!attachments || attachments.length <= 0) {
            setWarningText("Unable to calculate, please upload a valid document.");
            setIsWarningPopUp(true);
            setWait(false);
            return;
        }
        HttpUtils.postWithFiles({
            url: UrlUtils.PROOF_CHECK_PRICE,
            params: {
                appId: data.id,
            },
            files: attachments,
            onSuccess: function (responseData) {
                if (responseData.data.detail) {
                    setWarningText("Unable to calculate, please upload a valid document or input manually.");
                    setIsWarningPopUp(true);
                    return;
                }
                formik.setFieldValue("length", responseData.data.length);
                let colValue = 0;
                setColumnPrice(ComboData.proofPrice.find(obj => {
                    colValue = obj.value;
                    return obj.colCount === responseData.data.column
                }));
                formik.setFieldValue("noOfPages", responseData.data.no_of_page);
                formik.setFieldValue("fee", (data.groupType == "A" ? 6552 * responseData.data.no_of_page : responseData.data.length * colValue));
                setWait(false);
            },
            onError: function () {
                setWarningText("Unable to calculate, please input manually.");
                setIsWarningPopUp(true);
                setWait(false);
            }
        });
    }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
        onSubmit: values => {
            if (!attachments || attachments.length <= 0) {
                setWarningText("Please upload file.");
                setIsWarningPopUp(true);
                return;
            }
            // console.log(values);
            HttpUtils.postWithFiles({
                url: UrlUtils.CREATE_PROOF,
                params: {
                    appId: values.id,
                    fee: values.fee,
                    length: values.length,
                    colCount: columnPrice.colCount,
                    noOfPages: values.noOfPages,
                },
                files: attachments,
                onSuccess: function () {
                    navigate("/proof/search");
                }
            });
        }
    });

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {
                setWarningText("Please upload a valid file (File format: .pdf).");
                setIsWarningPopUp(true);
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
            if (file.size >= (10 * 1024 * 1034)) {
                setWarningText("The file size for uploading should be less than 10MB");
                setIsWarningPopUp(true);
                return;
            }

            file['id'] = attachments.length;
            setAttachments([
                ...attachments,
                file
            ]);
            document.getElementById("uploadFileBtn").value = "";
        }
    }




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

            <form onSubmit={formik.handleSubmit}>
                {/*row 1*/}
                <CardContent sx={{ px: 2.5, pt: 3 }}>
                    <Grid item justifyContent="space-between" alignItems="center">
                        Proof
                    </Grid>
                </CardContent>

                {/*row 2*/}
                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                    <Grid item xs={12} md={12}>
                        <input
                            id="uploadFileBtn"
                            name="file"
                            type="file"
                            accept=".pdf"
                            style={{ display: 'none' }}
                            disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)}
                            onChange={(event) => {
                                readFile(event)
                            }}
                        />
                        <label htmlFor="uploadFileBtn">
                            <Button
                                component="span"
                                variant="contained"
                                size="large"
                                disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)}
                            > Upload Files</Button>
                        </label>
                    </Grid>


                    <Grid item xs={12} md={12}>
                        <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />
                    </Grid>

                    {
                        wait ?
                            <Grid item xs={12} md={12}>
                                Doing calculate, please wait ...
                            </Grid>
                            :
                            <Grid item xs={12} md={12}>
                                <Button
                                    size="large"
                                    variant="contained"
                                    onClick={doCalculate}
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end'
                                    }}>
                                    Calculate
                                </Button>
                            </Grid>
                    }



                    {
                        formik.values.groupType == "A" ?
                            <Grid item xs={12} md={12}>
                                <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
                                    <TextField
                                        fullWidth
                                        size="small"
                                        type="text"
                                        onChange={(event) => {
                                            const value = event.target.value;
                                            formik.setFieldValue("length", value);
                                            formik.setFieldValue("fee", 6552 * value);
                                        }}
                                        name="noOfPages"
                                        value={formik.values["noOfPages"]}
                                        variant="outlined"
                                        sx={
                                            {
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                                width: '15%'
                                            }
                                        }
                                    />
                                    <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
                                        pages
                                    </FormLabel>
                                    <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
                                        x
                                    </FormLabel>
                                    <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
                                        ${formik.values.price ? formik.values.price : "6,552"}
                                    </FormLabel>
                                </Stack>
                            </Grid>
                            :
                            <Grid item xs={12} md={12}>
                                <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
                                    <TextField
                                        fullWidth
                                        size="small"
                                        type="text"
                                        onChange={(event) => {
                                            const value = event.target.value;
                                            formik.setFieldValue("length", value);
                                            formik.setFieldValue("fee", columnPrice.value * value);
                                        }}
                                        name="length"
                                        value={formik.values["length"]}
                                        variant="outlined"
                                        sx={
                                            {
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                                width: '15%'
                                            }
                                        }
                                    />
                                    <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
                                        cm
                                    </FormLabel>

                                    <FormLabel sx={{ paddingLeft: 2, paddingRight: 4, textAlign: "center" }}>
                                        x
                                    </FormLabel>

                                    <Autocomplete
                                        sx={{
                                            width: "15%"
                                        }}
                                        disablePortal
                                        id="price"
                                        options={ComboData.proofPrice}
                                        value={columnPrice}
                                        inputValue={(columnPrice?.label) ? columnPrice?.label : ""}
                                        getOptionLabel={(option) => option.label ? option.label : ""}
                                        onChange={(event, newValue) => {
                                            setColumnPrice(newValue)
                                            formik.values["fee"] = newValue.value * formik.values.length;
                                        }}
                                        renderInput={(params) => (
                                            <TextField {...params}
                                                InputLabelProps={{
                                                    shrink: true
                                                }}
                                                sx={{
                                                    width: "100%"
                                                }}
                                            />
                                        )}
                                    />
                                </Stack>
                            </Grid>
                    }





                    <Grid item xs={12} md={12}>
                        <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
                            <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>
                                Necessary fee:
                            </FormLabel>
                            <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
                                $
                            </FormLabel>
                            <TextField
                                fullWidth
                                size="small"
                                type="text"
                                onChange={formik.handleChange}
                                name="fee"
                                value={formik.values["fee"]}
                                variant="outlined"
                                sx={
                                    {
                                        "& .MuiInputBase-input.Mui-disabled": {
                                            WebkitTextFillColor: "#000000",
                                            background: "#f8f8f8",
                                        },
                                        width: '15%'
                                    }
                                }
                            />

                        </Stack>
                    </Grid>


                    <Grid item xs={12} md={12}>
                        <Button
                            size="large"
                            variant="contained"
                            color="success"
                            type="submit"
                            sx={{
                                textTransform: 'capitalize',
                                alignItems: 'end'
                            }}>
                            Save
                        </Button>
                    </Grid>

                </Grid>


            </form>
            <div>
                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
                    <DialogTitle>Warning</DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default FormPanel;