PNSPS-frontend-MaterialUI/src/pages/ProofReply_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 }) => {

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

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

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



    const isOverTime = () => {
        let returnBeforeDate = DateUtils.convertToDate(formik.values?.returnBeforeDate);
        if (!returnBeforeDate) return true;
        returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0);

        let current = new Date();
        return current.getTime() > returnBeforeDate;
    }



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

            <Typography variant="h5" 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">
                                Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}
                            </Grid>
                            <Grid item xs={12} md={12} textAlign="left">
                                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>)}
                            </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">
                                        The response timed out, please apply again.
                                    </Grid>
                                </Grid>
                                :
                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                    <Grid item xs={12} md={12} textAlign="left">
                                        Wait for reply.
                                    </Grid>
                                </Grid>
                        )


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

export default FormPanel;