alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add form

master
Anna Ho 1 year ago
parent
4b994b70cc
commit
7a0865a8a8
2 changed files with 202 additions and 184 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +195
    -0
      src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
  2. +7
    -184
      src/pages/PublicNotice/ApplyForm/index.js

+ 195
- 0
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js View File

@@ -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(<FormControlLabel value={data.id} control={<Radio />} label={label} />);
}
return selection;
}

function zeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}

return (
<Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12}>
<Typography variant="h5">申請公共啟事</Typography>
</Grid>
<form style={{ width: "100%"}} onSubmit={formik.handleSubmit} >

<Grid container spacing={1}>
<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 xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
目標期數:
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
id="issueId"
name="issueId"
defaultValue={formik.values.issueId}
>
{
getIssueSelection()
}
</RadioGroup>
</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 lg={12}>
<center>
<input
id="uploadFileBtn"
name="file"
type="file"
accept="image/png, image/jpeg"
onChange={(event)=> {
readFile(event)
}}
/>
{/* <Button
variant="contained"
size="large"
onClick={()=>{
onUploadClick();
}}
>上傳文件</Button> */}
</center>
</Grid>
<Grid item lg={12}>
<center>
<Button
variant="contained"
type="submit"
size="large"
>申請公共啟事</Button>
</center>
</Grid>
</Grid>
</form>
</Grid>
);
};


export default PublicNoticeApplyForm;

+ 7
- 184
src/pages/PublicNotice/ApplyForm/index.js View File

@@ -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(<FormControlLabel value={data.id} control={<Radio />} 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 ?
<LoadingComponent/>
:
<Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12}>
<Typography variant="h5">申請公共啟事</Typography>
</Grid>
<form style={{ width: "100%"}} onSubmit={formik.handleSubmit} >

<Grid container spacing={1}>
<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 xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
目標期數:
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
id="issueId"
name="issueId"
defaultValue={defaultIssueId}
>
{
getIssueSelection()
}
</RadioGroup>
</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 lg={12}>
<center>
<input
id="uploadFileBtn"
name="file"
type="file"
accept="image/png, image/jpeg"
onChange={(event)=> {
readFile(event)
}}
/>
{/* <Button
variant="contained"
size="large"
onClick={()=>{
onUploadClick();
}}
>上傳文件</Button> */}
</center>
</Grid>
<Grid item lg={12}>
<center>
<Button
variant="contained"
type="submit"
size="large"
>申請公共啟事</Button>
</center>
</Grid>
</Grid>
</form>
</Grid>
<PublicNoticeApplyForm
loadedData={userData}
/>
);
};


export default PublicNoticeApplyForm;
export default ApplyForm;

Write Preview
Loading…
Cancel
Save