PNSPS-frontend-MaterialUI/src/pages/Proof/Reply_GLD/ProofForm.js

// material-ui
import {
    Typography,
    Grid,
} from '@mui/material';
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as React from "react";
import { useParams } from "react-router-dom";
import { useFormik } from 'formik';
import * as DateUtils from "utils/DateUtils"


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


const FormPanel = ({ formData, isOverTime }) => {

    const [data, setData] = React.useState({});
    const params = useParams();

    React.useEffect(() => {
        if (formData) {
            setData(formData);
        }
    }, [formData]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
    });



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

            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                Public Notice: Proofreading Reply
            </Typography>

            <form onSubmit={formik.handleSubmit}>

                {
                    formik.values.replyDate ?
                        <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                            <Grid item xs={12} md={12} textAlign="left">
                                <Typography variant="h5">Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}</Typography>
                            </Grid>
                            <Grid item xs={12} md={12} textAlign="left">
                                <Typography variant="h5" >Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography>
                            </Grid>
                            {
                                formik.values.action ?
                                    null
                                    :
                                    <Grid item xs={12} md={12} textAlign="left">
                                        <FileList
                                            refId={params.id}
                                            refType={"proofReply"}
                                            dateHideable={true}
                                            disablePagination
                                            disableSelectionOnClick
                                            disableColumnMenu
                                            disableColumnSelector
                                            hideFooter
                                        />
                                    </Grid>
                            }

                        </Grid>
                        :
                        (
                            isOverTime ?
                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                    <Grid item xs={12} md={12} textAlign="left">
                                        <Typography variant="h5">Proofing timed out.  Please apply again.</Typography>
                                    </Grid>
                                </Grid>
                                :
                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                    <Grid item xs={12} md={12} textAlign="left">
                                        <Typography variant="h5">Wait for reply.</Typography>
                                    </Grid>
                                </Grid>
                        )


                }
            </form>
        </MainCard>
    );
};

export default FormPanel;