sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

second section

Browse Source
This commit is contained in:
sonika 2023-08-20 19:32:45 +05:30
parent a0f5eeac2b
commit 7f8ddcd292
4 changed files with 149 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.css
View File

@ -7,4 +7,12 @@
.collapsable-form-style .MuiInputBase-root {
width: 300px !important;
margin: 5%;
}
.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{
padding:'15px' !important;
}
.custom-legend-padding fieldset legend {
padding: 25px !important;
}

45
src/Components/PatientForm/FormSection1.tsx
View File

@ -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
View 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>
</>
)
}

62
src/Components/PatientForm/PatientForm.tsx
View File

@ -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 >