PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

// material-ui
import {
    Grid,
    Typography,
    Button,
    RadioGroup,
    Dialog, DialogTitle, DialogContent, DialogActions,
    Stack, Box
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as FieldUtils from "utils/FieldUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import ForwardIcon from '@mui/icons-material/Forward';

import { useNavigate } from "react-router-dom";
import { notifyActionSuccess } from 'utils/CommonFunction';

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

const PublicNoticeApplyForm = ({ loadedData, selections }) => {
    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");
    const [attachment, setAttachment] = React.useState({});

    const [issueId, setIssueId] = React.useState(loadedData.issueId);
    const navigate = useNavigate();

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: 'auto',
        height: 'auto',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#0C489E',
        backgroundPosition: 'right'
    }
    // React.useEffect(()=>{
    //     setFormData(loadedData);
    // },[]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: loadedData,
        validationSchema: yup.object().shape({
            contactPerson: yup.string().max(40, "不得超過 40 個字符").required('請輸入聯絡人'),
            tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
            fax_countryCode: yup.string().min(3, '請輸入3位數字'),
            phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
            faxNumber: yup.string().min(8, '請輸入8位數字'),
            remarks: yup.string().max(255, "不得超過 255 個字符").nullable(),
        }),
        onSubmit: values => {
            if (!values.issueId) {
                setWarningText("請選擇目標期數");
                setIsWarningPopUp(true);
                return;
            }
            if (!attachment) {
                setWarningText("請選擇上傳檔案");
                setIsWarningPopUp(true);
                return;
            } else if (!attachment.size || attachment.size <= 0) {
                setWarningText("請上傳有效檔案");
                setIsWarningPopUp(true);
                return;
            } else if (attachment.size >= (10 * 1024 * 1034)) {
                setWarningText("上傳檔案大小應<10MB");
                setIsWarningPopUp(true);
                return;
            }
            HttpUtils.postWithFiles({
                url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,
                params: {
                    id: 0,
                    contactPerson: values.contactPerson,
                    contactTelNo: {
                        countryCode: values.tel_countryCode,
                        phoneNumber: values.phoneNumber
                    },
                    contactFaxNo: {
                        countryCode: values.fax_countryCode,
                        faxNumber: values.faxNumber
                    },
                    issueId: issueId,
                    remarks: values.remarks ? values.remarks : "",
                },
                files: [attachment],
                onSuccess: function () {
                    notifyActionSuccess('申請提交成功!')
                    navigate("/publicNotice");
                    // location.reload(); 
                }
            });
        }
    });

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (file.name.toLowerCase().substr(file.name.length - 4).includes(".doc")
                || file.name.toLowerCase().substr(file.name.length - 5).includes(".docx")
                || file.name.toLowerCase().substr(file.name.length - 4).includes(".xls")
                || file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
            ) {
                setAttachment(event.target.files[0]);
            } else {
                setWarningText("請上傳有效檔案 (檔案格式: .doc, .docx, .xls, .xlsx)");
                setIsWarningPopUp(true);
                setAttachment({});
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
        }
    }


    return (
        <Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">
            <Grid item xs={12} md={12} width="100%" >
                <div style={BackgroundHead}>
                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                        <Typography ml={15} color='#FFF' variant="h4">申請公共啟事</Typography>
                    </Stack>
                </div>
            </Grid>
            <Grid item xs={12} width="60%">
                <Button title="返回" sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
                    <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                </Button>
            </Grid>
            {/* <Grid item xs={12}>
                    <Typography variant="h5">申請公共啟事</Typography>
                </Grid> */}
            <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
                    <form onSubmit={formik.handleSubmit}>
                        <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                {FieldUtils.getTextField({
                                    label: "聯絡人:",
                                    valueName: "contactPerson",
                                    form: formik,
                                    disabled: true
                                })}
                            </Grid>
                            <Grid item xs={12} md={12}>
                                {FieldUtils.getPhoneField({
                                    label: "聯繫電話:",
                                    disabled: true,
                                    valueName: {
                                        code: "tel_countryCode",
                                        num: "phoneNumber",
                                    },
                                    form: formik
                                })}
                            </Grid>
                            <Grid item xs={12} md={12}>
                                {FieldUtils.getPhoneField({
                                    label: "聯繫傳真:",
                                    disabled: true,
                                    valueName: {
                                        code: "fax_countryCode",
                                        num: "faxNumber",
                                    },
                                    form: formik
                                })}
                            </Grid>
                            <Grid item xs={12} lg={12}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">目標期數:</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={6} lg={6}>
                                        <RadioGroup
                                            aria-labelledby="demo-radio-buttons-group-label"
                                            id="issueId"
                                            name="issueId"
                                            defaultValue={issueId}
                                            onChange={(event) => {
                                                setIssueId(event.target.value);
                                            }}
                                        >
                                            {
                                                selections
                                            }
                                        </RadioGroup>
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12} lg={12}>
                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">稿件檔案 ({"檔案大小應<10MB"}):</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={3} lg={3}>
                                        <input
                                            id="uploadFileBtn"
                                            name="file"
                                            type="file"
                                            accept=".doc,.docx,.xls,.xlsx"
                                            style={{ display: 'none' }}
                                            onChange={(event) => {
                                                readFile(event)
                                            }}
                                        />
                                        {attachment.name}
                                    </Grid>
                                    <Grid item xs={12} md={3} lg={3}>
                                        <label htmlFor="uploadFileBtn">
                                            <Button
                                                component="span"
                                                variant="outlined"
                                                size="large"
                                            >{attachment ? "上傳檔案" : "重新上傳"}</Button>
                                        </label>
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12} lg={12}>
                                {FieldUtils.getTextArea({
                                    label: "備註:",
                                    valueName: "remarks",
                                    form: formik,
                                    inputProps: { maxLength: 255 }
                                })}
                            </Grid>
                            <Grid item xs={12}>
                                <center>
                                    <Button
                                        variant="contained"
                                        type="submit"
                                        size="large"
                                    >申請公共啟事</Button>
                                </center>
                            </Grid>
                        </Grid>
                    </form>
                </Box>
            </Grid>
            <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>
        </Grid>
    );
};


export default PublicNoticeApplyForm;