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

// material-ui
import {
    Grid, 
    Typography, 
    Button,
    RadioGroup,
    Dialog, DialogTitle, DialogContent, DialogActions,
    Stack
} 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 {useNavigate} from "react-router-dom";

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

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

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: '100%',
        height: '100%',
        backgroundSize:'cover'
      }
    // React.useEffect(()=>{
    //     setFormData(loadedData);
    // },[]);

    const formik = useFormik({
        enableReinitialize:true,
        initialValues:loadedData,
        validationSchema:yup.object().shape({
            contactPerson: yup.string().max(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).nullable(),
        }),
        onSubmit:values=>{
            if(!values.issueId){
                setWarningText("請選擇目標期數");
                setIsWarningPopUp(true);
                return;
            }
            if(!attachment){
                setWarningText("請選擇上傳文件");
                setIsWarningPopUp(true);
                return;
            }else if(attachment.size >= (10*1024*1034)){
                setWarningText("上傳文件大小應<10MB");
                setIsWarningPopUp(true);
                return;
            }
            console.log(values);
            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:values.issueId,
                    remarks:values.remarks,
                },
                files: [attachment],
                onSuccess: function(){
                    navigate("/publicNotice");
                }
            });
        }
    });

    const readFile=(event)=>{
        setAttachment(event.target.files[0]);
    }


    return (
            <Grid container>
                <Grid item xs={12} mb={3}>
                    <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}>
                    <Typography variant="h5">申請公共啟事</Typography>
                </Grid> */}
                <form style={{ width: "100%"}} onSubmit={formik.handleSubmit}>

                <Grid container spacing={1} sx={{minHeight: '80vh'}}>
                <Grid item lg={4}></Grid>
                {FieldUtils.getTextField({
                        label:"聯絡人:",
                        valueName:"contactPerson",
                        form: formik
                    })}
                <Grid item lg={4}></Grid>
                <Grid item lg={4}></Grid>
                {FieldUtils.getPhoneField({
                        label:"聯繫電話:",
                        valueName:{
                            code: "tel_countryCode",
                            num:"phoneNumber"
                        },
                        form: formik
                    })}
                <Grid item lg={4}></Grid>
                <Grid item lg={4}></Grid>
                {FieldUtils.getPhoneField({
                        label:"聯繫傳真:",
                        valueName:{
                            code: "fax_countryCode",
                            num:"faxNumber"
                        },
                        form: formik
                    })}
                <Grid item lg={4}></Grid>
                <Grid item lg={4}></Grid>
                <Grid item lg={4}>
                    <Grid container alignItems={"center"}>
                        <Grid item lg={4}
                                sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                            目標期數:
                        </Grid>
                        <Grid item lg={6}>
                            <RadioGroup
                                aria-labelledby="demo-radio-buttons-group-label"
                                id="issueId"
                                name="issueId"
                                defaultValue={formik.values.issueId}
                            >
                                {
                                    selections
                                }
                            </RadioGroup>
                        </Grid>
                    </Grid>
                </Grid>
                <Grid item lg={4}></Grid>
                <Grid item lg={4}></Grid>
                <Grid item lg={4}>
                    <Grid container alignItems={"center"}>
                        <Grid item lg={4}
                                sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                            上傳文件 ({"檔案大小應<10MB"}):
                        </Grid>
                        <Grid item lg={4}>
                            {attachment.name}
                        </Grid>
                        <Grid item lg={3}>
                            <input 
                                id="uploadFileBtn" 
                                name="file" 
                                type="file" 
                                accept="image/png, image/jpeg.doc,.pdf,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 
                                style={{ display: 'none' }}
                                onChange={(event)=> { 
                                    readFile(event) 
                                 }}
                                />
                            <label htmlFor="uploadFileBtn">
                                <Button 
                                    component="span"
                                    variant="outlined" 
                                    size="large"
                                    >{attachment?"上傳文件":"重新上傳"}</Button>
                            </label>
                        </Grid>
                    </Grid>
                </Grid>
                <Grid item lg={4}></Grid>
                <Grid item lg={4}></Grid>
                {FieldUtils.getTextArea({
                        label:"備註:",
                        valueName:"remarks",
                        form: formik
                    })}
                <Grid item lg={4}></Grid>
                
                <Grid item xs={12}>
                    <center>
                        <Button 
                            variant="contained" 
                            type="submit"
                            size="large"
                            >申請公共啟事</Button>
                    </center>
                </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>
            </Grid>
    );
};


export default PublicNoticeApplyForm;