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

section2 data to main

Browse Source
This commit is contained in:
sonika 2023-09-04 21:10:31 +05:30
parent ab27164ed8
commit 25c213d1f7
3 changed files with 206 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/Components/PatientForm/FamilyFormSection2.tsx
View File

@ -2,27 +2,26 @@ import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel,
import { useFormik } from "formik"; import { useFormik } from "formik";
import * as yup from "yup"; import * as yup from "yup";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import React, { useEffect } from 'react';
interface FormValues { interface Patient {
maritalStatus: string; maritalStatus: string | undefined,
numberOfChildren: string; numberOfChildren: string | undefined,
ages: string; occupation: string | undefined,
occupation: string; hoursPerWeek: number | string | undefined,
hoursPerWeek: number | string; employer: string | undefined,
employer: string; businessPhone: string | undefined,
businessPhone: string; spouseName: string | undefined,
spouseName: string; spouseEmployer: string | undefined,
spouseEmployer: string; spouseBusinessPhone: string | undefined,
spouseBusinessPhone: string; emergencyContact: string | undefined,
emergencyContact: string; relationship: string | undefined,
relationship: string; spousePhone: string | undefined,
spousePhone: string;
} }
const validationSchema = yup.object({ const validationSchema = yup.object({
maritalStatus:yup.string().required("Marital Status is required"), maritalStatus:yup.string().required("Marital Status is required"),
numberOfChildren:yup.string().required("Full name is required"), numberOfChildren:yup.string().required("Full name is required"),
ages:yup.string().required("Full name is required"),
occupation:yup.string().required("Occupation is required"), occupation:yup.string().required("Occupation is required"),
// hoursPerWeek: yup.number().required('Required'), // hoursPerWeek: yup.number().required('Required'),
// employer:yup.string().required("Full name is required"), // employer:yup.string().required("Full name is required"),
@ -35,12 +34,28 @@ const validationSchema = yup.object({
spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"), spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
}); });
export default function FamilyFormSection(){ type Props = {
const formik = useFormik<FormValues>({ handleFormSection2Data:(
initialValues:{ maritalStatus: string | undefined,
numberOfChildren: string | undefined,
occupation: string | undefined,
hoursPerWeek: number | string | undefined,
employer: string | undefined,
businessPhone: string | undefined,
spouseName: string | undefined,
spouseEmployer: string | undefined,
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
)=> void
}
export default function FamilyFormSection({handleFormSection2Data}:Props){
const [patient, setPatient] = React.useState<Patient>({
maritalStatus:'', maritalStatus:'',
numberOfChildren:'', numberOfChildren:'',
ages:'',
occupation:'', occupation:'',
hoursPerWeek:'', hoursPerWeek:'',
employer:'', employer:'',
@ -51,15 +66,27 @@ export default function FamilyFormSection(){
emergencyContact:'', emergencyContact:'',
relationship:'', relationship:'',
spousePhone:'' spousePhone:''
}, });
validationSchema,
onSubmit:(values)=>{ useEffect(()=>{
console.log(values); handleFormSection2Data(
} patient.maritalStatus,
}) patient.numberOfChildren,
patient.occupation,
patient.hoursPerWeek,
patient.employer,
patient.businessPhone,
patient.spouseName,
patient.spouseEmployer,
patient.spouseBusinessPhone,
patient.emergencyContact,
patient.relationship,
patient.spousePhone,
)
},[patient])
return( return(
<> <>
<form onSubmit={formik.handleSubmit}>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={8} className='collapsable-form-style-radioButtons'> <Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
@ -68,9 +95,14 @@ export default function FamilyFormSection(){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue="married" defaultValue="married"
name="maritalStatus" name="maritalStatus"
onChange={formik.handleChange} value={patient.maritalStatus}
value={formik.values.maritalStatus}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
maritalStatus: e.target.value,
}));
}}
// error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)} // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
// helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus} // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
> >
@ -93,9 +125,14 @@ export default function FamilyFormSection(){
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.numberOfChildren} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
numberOfChildren: e.target.value,
}));
}}
value={patient.numberOfChildren}
// onBlur={formik.handleBlur}
// error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)} // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
// helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren} // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
/> />
@ -107,9 +144,14 @@ export default function FamilyFormSection(){
label="Occupation" label="Occupation"
className='collapsable-form-style' className='collapsable-form-style'
name='occupation' name='occupation'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.occupation} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
occupation: e.target.value,
}));
}}
value={patient.occupation}
// onBlur={formik.handleBlur}
// error={formik.touched.occupation && Boolean(formik.errors.occupation)} // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
// helperText={formik.touched.occupation && formik.errors.occupation} // helperText={formik.touched.occupation && formik.errors.occupation}
/> />
@ -122,9 +164,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='hoursPerWeek' name='hoursPerWeek'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.hoursPerWeek} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
hoursPerWeek: e.target.value,
}));
}}
value={patient.hoursPerWeek}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -134,9 +181,14 @@ export default function FamilyFormSection(){
label="Employer" label="Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='employer' name='employer'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.employer} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
employer: e.target.value,
}));
}}
value={patient.employer}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -146,9 +198,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='businessPhone' name='businessPhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.businessPhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
businessPhone: e.target.value,
}));
}}
value={patient.businessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -164,9 +221,14 @@ export default function FamilyFormSection(){
label="Spouse's Name" label="Spouse's Name"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseName' name='spouseName'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseName} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spouseName: e.target.value,
}));
}}
value={patient.spouseName}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -175,9 +237,14 @@ export default function FamilyFormSection(){
label="Spouse's Employer" label="Spouse's Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseEmployer' name='spouseEmployer'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseEmployer} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spouseEmployer: e.target.value,
}));
}}
value={patient.spouseEmployer}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -187,9 +254,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseBusinessPhone' name='spouseBusinessPhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseBusinessPhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spouseBusinessPhone: e.target.value,
}));
}}
value={patient.spouseBusinessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -202,12 +274,16 @@ export default function FamilyFormSection(){
<TextField <TextField
variant="outlined" variant="outlined"
label="Emergency Contact" label="Emergency Contact"
type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='emergencyContact' name='emergencyContact'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.emergencyContact} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
emergencyContact: e.target.value,
}));
}}
value={patient.emergencyContact}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -216,9 +292,14 @@ export default function FamilyFormSection(){
label="Relationship" label="Relationship"
className='collapsable-form-style' className='collapsable-form-style'
name='relationship' name='relationship'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.relationship} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
relationship: e.target.value,
}));
}}
value={patient.relationship}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -228,13 +309,17 @@ export default function FamilyFormSection(){
label="Phone" label="Phone"
className='collapsable-form-style' className='collapsable-form-style'
name='spousePhone' name='spousePhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spousePhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spousePhone: e.target.value,
}));
}}
value={patient.spousePhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form>
</> </>
) )
}; };

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

@ -94,25 +94,51 @@ export default function PatientForm(){
zipCode?: string|undefined, zipCode?: string|undefined,
gender?: string|undefined, gender?: string|undefined,
) =>{ ) =>{
setSection1Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,}) setSection1Data({
fullName,
homePhone,
cellPhone,
email,
age,
dateOfBirth,
socialSecurityNumber,
mailingAddress,
city,
state,
zipCode,
gender,
})
} }
// const handleFormSection2Data = ( const handleFormSection2Data = (
// fullName?: string|undefined, maritalStatus: string | undefined,
// homePhone?: string|undefined, numberOfChildren: string | undefined,
// cellPhone?: string|undefined, occupation: string | undefined,
// email?: string|undefined, hoursPerWeek: number | string | undefined,
// age?: number|undefined|string, employer: string | undefined,
// dateOfBirth?: string|undefined, businessPhone: string | undefined,
// socialSecurityNumber?: string|undefined, spouseName: string | undefined,
// mailingAddress?: string|undefined, spouseEmployer: string | undefined,
// city?: string|undefined, spouseBusinessPhone: string | undefined,
// state?: string|undefined, emergencyContact: string | undefined,
// zipCode?: string|undefined, relationship: string | undefined,
// gender?: string|undefined, spousePhone: string | undefined,
// ) =>{ ) =>{
// setSection2Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,}) setSection2Data({
// } maritalStatus,
numberOfChildren,
occupation,
hoursPerWeek,
employer,
businessPhone,
spouseName,
spouseEmployer,
spouseBusinessPhone,
emergencyContact,
relationship,
spousePhone,
})
}
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
@ -127,7 +153,7 @@ export default function PatientForm(){
setIsChecked(event.target.checked); setIsChecked(event.target.checked);
}; };
console.log(section1Data,"wyeytweevfde") console.log(section1Data,"wyeytweevfde",section2Data)
return( return(
@ -162,7 +188,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<FamilyFormSection/> <FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>

5
src/Components/PatientForm/PersonalSection1.tsx
View File

@ -111,11 +111,6 @@ export default function PersonalSection({handleFormSection1Data}:Props){
// }, // },
// }); // });
console.log("sdfdsfsd",patient)
return( return(
<> <>
<Grid container direction="row" className='section1-test-class'> <Grid container direction="row" className='section1-test-class'>