second section
This commit is contained in:
sonika
parent
a0f5eeac2b
commit
7f8ddcd292
@ -8,3 +8,11 @@
|
||||
width: 300px !important;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{
|
||||
padding:'15px' !important;
|
||||
}
|
||||
|
||||
.custom-legend-padding fieldset legend {
|
||||
padding: 25px !important;
|
||||
}
|
||||
@ -67,7 +67,7 @@ export default function FormSection1(){
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "",
|
||||
gender: "male",
|
||||
maritalStatus: "",
|
||||
},
|
||||
validationSchema,
|
||||
@ -88,10 +88,10 @@ export default function FormSection1(){
|
||||
return(
|
||||
<>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label=" Patient's Full Name"
|
||||
label="Patient's Full Name"
|
||||
name="fullName"
|
||||
placeholder='Please enter your name'
|
||||
value={formik.values.fullName}
|
||||
@ -173,17 +173,7 @@ export default function FormSection1(){
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
{/* <TextField
|
||||
variant="filled"
|
||||
label="Date of Birth"
|
||||
name="dateOfBirth"
|
||||
type="date"
|
||||
value={formik.values.dateOfBirth}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.dateOfBirth && Boolean(formik.errors.dateOfBirth)}
|
||||
helperText={formik.touched.dateOfBirth && formik.errors.dateOfBirth}
|
||||
/> */}
|
||||
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
@ -251,36 +241,21 @@ export default function FormSection1(){
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} sx={{paddingLeft:"14px"}} className='collapsable-form-style'>
|
||||
<FormControl>
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<RadioGroup
|
||||
// name="gender"
|
||||
value={patient.gender}
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="male"
|
||||
name="radio-buttons-group"
|
||||
onChange={handleChange}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue="male"
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
{/* <Grid item xs={4} className='collapsable-form-style' >
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
name="maritalStatus"
|
||||
value={patient.maritalStatus}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<FormControlLabel value="single" control={<Radio />} label="Single" />
|
||||
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
||||
</RadioGroup>
|
||||
</Grid> */}
|
||||
|
||||
{/* <Grid item xs={3} className='collapsable-form-style' sx={{margin:5}}>
|
||||
<Button type="submit" variant="contained" color="primary" sx={{width:'200px'}}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
|
||||
83
src/Components/PatientForm/FormSection2.tsx
Normal file
83
src/Components/PatientForm/FormSection2.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import { useFormik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
|
||||
export default function FormSection1(){
|
||||
const [state, setState] = React.useState({
|
||||
married: false,
|
||||
single: false,
|
||||
widowed: false,
|
||||
separated: false,
|
||||
divorced: false,
|
||||
});
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setState({ ...state, [event.target.name]: event.target.checked });
|
||||
};
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
|
||||
<form>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={8} className='collapsable-form-style textfield-padding' sx={{paddingLeft:"14px"}}>
|
||||
<FormControl>
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="married"
|
||||
name="radio-buttons-group"
|
||||
onChange={handleChange}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
||||
<FormControlLabel value="single" control={<Radio />} label="Single" />
|
||||
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
|
||||
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
|
||||
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Number of Children/Ages" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Occupation" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Hours/Week" type="number" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Employer" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Spouse's Name" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Spouse's Employer" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Emergency Contact" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Relationship" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Phone" type="tel" className='collapsable-form-style'/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,13 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import Accordion from '@mui/material/Accordion';
|
||||
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import FormSection1 from './FormSection1';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
import FormSection2 from './FormSection2';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
@ -25,6 +30,41 @@ interface Patient {
|
||||
maritalStatus: string;
|
||||
}
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
))(({ theme }) => ({
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: 0,
|
||||
},
|
||||
'&:before': {
|
||||
display: 'none',
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionSummary = styled((props: AccordionSummaryProps) => (
|
||||
<MuiAccordionSummary
|
||||
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
|
||||
{...props}
|
||||
/>
|
||||
))(({ theme }) => ({
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .05)'
|
||||
: 'rgba(0, 0, 0, .03)',
|
||||
flexDirection: 'row-reverse',
|
||||
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'& .MuiAccordionSummary-content': {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
export default function PatientForm(){
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
@ -73,25 +113,19 @@ export default function PatientForm(){
|
||||
>
|
||||
<Typography variant="h6">Basic Patient Information (Part 1)</Typography>
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<FormSection1/>
|
||||
</AccordionDetails>
|
||||
</form>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel2a-content"
|
||||
id="panel2a-header"
|
||||
>
|
||||
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
|
||||
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
|
||||
<Typography variant="h6">Basic Patient Information (Part 2)</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
||||
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
||||
</Typography>
|
||||
<FormSection2/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Grid >
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user