diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js new file mode 100644 index 0000000..472afb6 --- /dev/null +++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js @@ -0,0 +1,195 @@ +// material-ui +import { + Grid, + Typography, + Button, + Radio, + RadioGroup, + FormControlLabel +} 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 * as DateUtils from "utils/DateUtils"; + +import {useNavigate} from "react-router-dom"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const PublicNoticeApplyForm = ({loadedData}) => { + const [formData, setFormData] = React.useState([]); + const [attachment, setAttachment] = React.useState({}); + const navigate=useNavigate(); + + React.useEffect(()=>{ + setFormData(loadedData); + },[]); + + const formik = useFormik({ + enableReinitialize:true, + initialValues:loadedData, + validationSchema:yup.object().shape({ + group: yup.string().max(255), + groupTitle: yup.string().max(255), + groupNo: yup.string().max(255), + contactPerson: yup.string().max(40).nullable(), + 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位數字').required('請輸入8位數字'), + remarks: yup.string().max(255).nullable(), + }), + onSubmit:values=>{ + 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]); + } + + const getIssueSelection=()=>{ + var selection = []; + for (var i = 0; i < formData?.gazetteIssueList?.length; i++) { + let data = formData.gazetteIssueList[i]; + "2023 Vol 027, No. 36, 8 Sep 2023 (Fri)" + let label = data.year + +" Vol. "+zeroPad(data.volume,3) + +", No. "+zeroPad(data.issueNo,2) + +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)"); + selection.push(} label={label} />); + } + return selection; + } + + function zeroPad(num, places) { + var zero = places - num.toString().length + 1; + return Array(+(zero > 0 && zero)).join("0") + num; + } + + return ( + + + 申請公共啟事 + +
+ + + + {FieldUtils.getTextField({ + label:"聯絡人:", + valueName:"contactPerson", + form: formik + })} + + + {FieldUtils.getPhoneField({ + label:"聯繫電話:", + valueName:{ + code: "tel_countryCode", + num:"phoneNumber" + }, + form: formik + })} + + + {FieldUtils.getPhoneField({ + label:"聯繫傳真:", + valueName:{ + code: "fax_countryCode", + num:"faxNumber" + }, + form: formik + })} + + + + + + 目標期數: + + + + { + getIssueSelection() + } + + + + + + + {FieldUtils.getTextArea({ + label:"備註:", + valueName:"remarks", + form: formik + })} + + +
+ { + readFile(event) + }} + /> + {/* */} +
+ + +
+ +
+ + + +
+ + ); +}; + + +export default PublicNoticeApplyForm; diff --git a/src/pages/PublicNotice/ApplyForm/index.js b/src/pages/PublicNotice/ApplyForm/index.js index 00f7180..f93c96f 100644 --- a/src/pages/PublicNotice/ApplyForm/index.js +++ b/src/pages/PublicNotice/ApplyForm/index.js @@ -1,75 +1,19 @@ // material-ui -import { - Grid, - Typography, - Button, - Radio, - RadioGroup, - FormControlLabel -} 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 * as DateUtils from "utils/DateUtils"; -import {useNavigate} from "react-router-dom"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; - const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); +const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); +const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyForm'))); // ==============================|| DASHBOARD - DEFAULT ||============================== // -const PublicNoticeApplyForm = () => { +const ApplyForm = () => { const [userData, setUserData] = React.useState([]); const [isLoading, setLoding] = React.useState(true); - const [attachment, setAttachment] = React.useState({}); - const [defaultIssueId, setDefaultIssueId] = React.useState(0); - const navigate=useNavigate(); - - - const formik = useFormik({ - enableReinitialize:true, - initialValues:userData, - validationSchema:yup.object().shape({ - group: yup.string().max(255), - groupTitle: yup.string().max(255), - groupNo: yup.string().max(255), - contactPerson: yup.string().max(40).nullable(), - 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位數字').required('請輸入8位數字'), - remarks: yup.string().max(255).nullable(), - }), - onSubmit:values=>{ - 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"); - } - }); - } - }); React.useEffect(()=>{ loadUserData(); @@ -85,7 +29,6 @@ const PublicNoticeApplyForm = () => { response["fax_countryCode"] = response?.contactFaxNo?.countryCode; response["faxNumber"] = response?.contactFaxNo?.faxNumber; response["issueId"] = response?.gazetteIssueList[0].id; - setDefaultIssueId(response?.gazetteIssueList[0].id); setUserData(response); } }); @@ -95,135 +38,15 @@ const PublicNoticeApplyForm = () => { setLoding(false); }, [userData]); - // const onUploadClick=()=>{ - // document.getElementById('uploadFileBtn').click(); - // } - - const readFile=(event)=>{ - setAttachment(event.target.files[0]); - } - - const getIssueSelection=()=>{ - var selection = []; - for (var i = 0; i < userData?.gazetteIssueList?.length; i++) { - let data = userData.gazetteIssueList[i]; - "2023 Vol 027, No. 36, 8 Sep 2023 (Fri)" - let label = data.year - +" Vol. "+zeroPad(data.volume,3) - +", No. "+zeroPad(data.issueNo,2) - +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)"); - selection.push(} label={label} />); - } - return selection; - } - - function zeroPad(num, places) { - var zero = places - num.toString().length + 1; - return Array(+(zero > 0 && zero)).join("0") + num; - } - return ( isLoading ? : - - - 申請公共啟事 - -
- - - - {FieldUtils.getTextField({ - label:"聯絡人:", - valueName:"contactPerson", - form: formik - })} - - - {FieldUtils.getPhoneField({ - label:"聯繫電話:", - valueName:{ - code: "tel_countryCode", - num:"phoneNumber" - }, - form: formik - })} - - - {FieldUtils.getPhoneField({ - label:"聯繫傳真:", - valueName:{ - code: "fax_countryCode", - num:"faxNumber" - }, - form: formik - })} - - - - - - 目標期數: - - - - { - getIssueSelection() - } - - - - - - - {FieldUtils.getTextArea({ - label:"備註:", - valueName:"remarks", - form: formik - })} - - -
- { - readFile(event) - }} - /> - {/* */} -
- - -
- -
- - - -
- + ); }; -export default PublicNoticeApplyForm; +export default ApplyForm;