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

// material-ui
import {
    Dialog, DialogTitle, DialogContent, DialogActions,
    Typography,
    Grid,
    Stack,
    TextField,
    FormLabel,
    Button,
    RadioGroup, Radio,
    FormControlLabel
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils";
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as React from "react";
import * as yup from 'yup';
import { useParams } from "react-router-dom";
import { useFormik } from 'formik';
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils"
import Loadable from 'components/Loadable';
import { notifyActionSuccess } from 'utils/CommonFunction';
const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));

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


const FormPanel = ({ formData }) => {

    const [data, setData] = React.useState({});
    const [attachments, setAttachments] = React.useState([]);

    const [actionValue, setActionValue] = React.useState(true);

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

    const navigate = useNavigate()
    const params = useParams();

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

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
        validationSchema: yup.object().shape({
            vaild: yup.string().max(255, "請輸入你的登入密碼").required('請輸入你的登入密碼'),
        }),
        onSubmit: values => {
            if (!actionValue) {
                if (!attachments || attachments.length <= 0) {
                    setWarningText("請選擇上傳檔案");
                    setIsWarningPopUp(true);
                    return;
                }
            }

            if (isOverTime()) {
                setWarningText("回覆逾時，請重新申請。");
                setIsWarningPopUp(true);
                return;
            }
            // console.log(values);
            HttpUtils.postWithFiles({
                url: UrlUtils.REPLY_PROOF,
                params: {
                    id: data.id,
                    action: actionValue,
                    vaild: values.vaild,
                },
                files: attachments ? attachments : [],
                onSuccess: function () {
                    if (actionValue) {
                        notifyActionSuccess("提交成功!")
                        navigate("/proof/pay/" + params.id);
                    } else {
                        notifyActionSuccess("提交成功!")
                        navigate("/proof/search");
                    }
                },
                onFail: function (response) {
                    setWarningText("行動失敗: 請檢查內容並再次提交回覆");
                    setIsWarningPopUp(true);
                    console.log(response);
                },
                onError: function (error) {
                    setWarningText("行動失敗: 請檢查內容並再次提交回覆");
                    setIsWarningPopUp(true);
                    console.log(error);
                }
            });
        }
    });

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {
                setWarningText("請上傳有效檔案 (檔案格式: .pdf)");
                setIsWarningPopUp(true);
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
            if (file.size >= (10 * 1024 * 1034)) {
                setWarningText("上傳檔案大小應<10MB");
                setIsWarningPopUp(true);
                return;
            }

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

    const isOverTime = () => {
        let returnBeforeDate = DateUtils.convertToDate(formik.values?.returnBeforeDate);
        if (!returnBeforeDate) return true;
        let current = new Date();
        return current.getTime() > returnBeforeDate;
    }



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

            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                公共啟事：校對回覆
            </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">校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)}</Typography>
                            </Grid>
                            <Grid item xs={12} md={12} textAlign="left">
                                <Typography variant="h5">校對回覆: {formik.values.action ? (<span style={{ color: 'green' }}>可以付印（稿件正確）</span>) : (<span style={{ color: 'red' }}>未能付印（需要修改）</span>)}</Typography>
                            </Grid>
                            {
                                formik.values.action ?
                                    null
                                    :
                                    <Grid item xs={12} md={12} textAlign="left">
                                        <FileList
                                            lang="ch"
                                            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">回覆逾時，請重新申請。</Typography>
                                    </Grid>
                                </Grid>
                                :
                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>

                                    <Grid item xs={12} md={12}>
                                        <RadioGroup
                                            aria-labelledby="demo-radio-buttons-group-label"
                                            id="action"
                                            name="action"
                                            defaultValue={true}
                                            onChange={(event) => {
                                                setActionValue(event.target.value == "true" ? true : false);
                                            }}
                                        >
                                            <FormControlLabel value={true} control={<Radio />} label="可以付印（稿件正確）" />
                                            <FormControlLabel value={false} control={<Radio />} label="未能付印（需要修改）" />
                                        </RadioGroup>
                                    </Grid>


                                    {
                                        actionValue ?
                                            null
                                            :
                                            <>
                                                <Grid item xs={12} md={12} textAlign="left">
                                                    <Typography variant="h5">請上載稿件修改的檔案：</Typography>
                                                </Grid>

                                                <Grid item xs={12} md={12} textAlign="left">
                                                    <input
                                                        id="uploadFileBtn"
                                                        name="file"
                                                        type="file"
                                                        accept=".pdf"
                                                        style={{ display: 'none' }}
                                                        disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
                                                        onChange={(event) => {
                                                            readFile(event)
                                                        }}
                                                    />
                                                    <label htmlFor="uploadFileBtn">
                                                        <Button
                                                            component="span"
                                                            variant="contained"
                                                            size="large"
                                                            disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
                                                        >
                                                            <Typography variant="h5">上載</Typography>
                                                        </Button>
                                                    </label>
                                                </Grid>


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

                                    <Grid item xs={12} md={12} lg={12}>
                                        <Stack direction="row" alignItems="center">
                                            <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>
                                                <Typography variant="h5">簽署：</Typography>
                                            </FormLabel>
                                            <TextField
                                                fullWidth
                                                type="password"
                                                onChange={formik.handleChange}
                                                name="vaild"
                                                variant="outlined"
                                                error={Boolean(formik.errors["vaild"])}
                                                helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ' '}
                                                placeholder="請輸入你的登入密碼"
                                                sx={
                                                    {
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                        width: '50%'
                                                    }
                                                }
                                            />

                                        </Stack>
                                    </Grid>


                                    <Grid item xs={12} md={12} textAlign="left">
                                        <Button
                                            size="large"
                                            variant="contained"
                                            color="success"
                                            type="submit"
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            <Typography variant="h5">提交回覆</Typography>
                                        </Button>
                                    </Grid>

                                </Grid>

                        )


                }



            </form>
            <div>
                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
                    <DialogTitle>注意</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;