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

update public notice submission form with responsive

master
Alex Cheung 1 year ago
parent
337b5e4efc
commit
c95c9fce7e
3 changed files with 163 additions and 170 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/components/cards/AuthFooter.js
  2. +103
    -106
      src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
  3. +59
    -63
      src/utils/FieldUtils.js

+ 1
- 1
src/components/cards/AuthFooter.js View File

@@ -7,7 +7,7 @@ const AuthFooter = () => {
const matchDownSM = useMediaQuery((theme) => theme.breakpoints.down('sm'));

return (
<Container maxWidth= "xl">
<Container maxWidth= "xl" sx={{minHeight: '5vh'}}>
<Stack
direction={matchDownSM ? 'column' : 'row'}
justifyContent={matchDownSM ? 'center' : 'flex-start'}


+ 103
- 106
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js View File

@@ -5,7 +5,7 @@ import {
Button,
RadioGroup,
Dialog, DialogTitle, DialogContent, DialogActions,
Stack
Stack, Box
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
@@ -110,8 +110,8 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {


return (
<Grid container>
<Grid item xs={12} mb={3}>
<Grid container sx={{minHeight: '95vh',backgroundColor:'#ffffff'}} 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>
@@ -121,110 +121,107 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
{/* <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=".doc,.docx,.xls,.xlsx"
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 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
})}
</Grid>
<Grid item xs={12} md={12}>
{FieldUtils.getPhoneField({
label:"聯繫電話:",
valueName:{
code: "tel_countryCode",
num:"phoneNumber"
},
form: formik
})}
</Grid>
<Grid item xs={12} md={12}>
{FieldUtils.getPhoneField({
label:"聯繫傳真:",
valueName:{
code: "fax_countryCode",
num:"faxNumber"
},
form: formik
})}
</Grid>
<Grid item xs={12} lg={12}>
<Grid container alignItems={"center"}>
<Grid item xs={12} lg={4}
sx={{display: 'flex', alignItems: 'center'}}>
目標期數:
</Grid>
<Grid item xs={12} 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 xs={12} md={12} lg={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item xs={12} lg={4}
sx={{display: 'flex', alignItems: 'center'}}>
犒件檔案 ({"檔案大小應<10MB"}):
</Grid>
<Grid item xs={12} lg={3}>
<input
id="uploadFileBtn"
name="file"
type="file"
accept=".doc,.docx,.xls,.xlsx"
style={{ display: 'none' }}
onChange={(event)=> {
readFile(event)
}}
/>
<label htmlFor="uploadFileBtn">
<Button
component="span"
variant="outlined"
size="large"
>{attachment?"上傳檔案":"重新上傳"}</Button>
</label>
</Grid>
<Grid item xs={12} lg={4}>
{attachment.name}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12}>
{FieldUtils.getTextArea({
label:"備註:",
valueName:"remarks",
form: formik
})}
</Grid>
<Grid item xs={12}>
<center>
<Button
variant="contained"
type="submit"
size="large"
>申請公共啟事</Button>
</center>
</Grid>
</Grid>
</form>
</Box>
</Grid>
</form>
<div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>注意</DialogTitle>


+ 59
- 63
src/utils/FieldUtils.js View File

@@ -1,6 +1,6 @@

import {
Grid, TextField
Grid, TextField, Stack
} from '@mui/material';

import Combo from "./Combo";
@@ -29,73 +29,68 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
}

export const getTextField = ({ label, valueName, form, disabled }) => {
return <Grid item xs={12} lg={4} >
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>;
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>;
}

export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
return <Grid item xs={12} lg={4} >
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled,
multiline: true,
row: 10,
minRows: 4,
maxRows: 4,
props
})}
</Grid>
</Grid>
</Grid>;
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled,
multiline: true,
row: 10,
minRows: 4,
maxRows: 4,
props
})}
</Grid>
</Grid>;
}

export const getPhoneField = ({ label, valueName, form, disabled }) => {
return <Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={2}>
{initField({
type: "tel",
valueName: valueName.code,
form: form,
disabled: disabled
})}
</Grid>
<Grid item xs={4}>
{initField({
type: "tel",
valueName: valueName.num,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>;
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={9} lg={9}>
<Stack direction="row">
{initField({
type: "tel",
valueName: valueName.code,
form: form,
disabled: disabled,
width:'25%'
})}
{initField({
type: "tel",
valueName: valueName.num,
form: form,
disabled: disabled
})}
</Stack>
</Grid>
</Grid>;
}


@@ -183,7 +178,7 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
</Grid>;
}

export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, ...props }) => {
export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps,width, ...props }) => {
let err = Boolean(form.errors[valueName]);

return <TextField
@@ -204,6 +199,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, placehol
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
width:width?width:'100%'
}}
{...props}
/>


Write Preview
Loading…
Cancel
Save