section2 data to main
This commit is contained in:
sonika
parent
ab27164ed8
commit
25c213d1f7
@ -2,27 +2,26 @@ import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel,
|
||||
import { useFormik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface FormValues {
|
||||
maritalStatus: string;
|
||||
numberOfChildren: string;
|
||||
ages: string;
|
||||
occupation: string;
|
||||
hoursPerWeek: number | string;
|
||||
employer: string;
|
||||
businessPhone: string;
|
||||
spouseName: string;
|
||||
spouseEmployer: string;
|
||||
spouseBusinessPhone: string;
|
||||
emergencyContact: string;
|
||||
relationship: string;
|
||||
spousePhone: string;
|
||||
interface Patient {
|
||||
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,
|
||||
}
|
||||
|
||||
const validationSchema = yup.object({
|
||||
maritalStatus:yup.string().required("Marital Status 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"),
|
||||
// hoursPerWeek: yup.number().required('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"),
|
||||
});
|
||||
|
||||
export default function FamilyFormSection(){
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
type Props = {
|
||||
handleFormSection2Data:(
|
||||
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:'',
|
||||
numberOfChildren:'',
|
||||
ages:'',
|
||||
occupation:'',
|
||||
hoursPerWeek:'',
|
||||
employer:'',
|
||||
@ -51,15 +66,27 @@ export default function FamilyFormSection(){
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
spousePhone:''
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
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(
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
@ -68,9 +95,14 @@ export default function FamilyFormSection(){
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="married"
|
||||
name="maritalStatus"
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.maritalStatus}
|
||||
value={patient.maritalStatus}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
maritalStatus: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
|
||||
// helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
|
||||
>
|
||||
@ -93,9 +125,14 @@ export default function FamilyFormSection(){
|
||||
label="Number of Children/Ages"
|
||||
className='collapsable-form-style'
|
||||
name='numberOfChildren'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.numberOfChildren}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
numberOfChildren: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.numberOfChildren}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
|
||||
// helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
|
||||
/>
|
||||
@ -107,9 +144,14 @@ export default function FamilyFormSection(){
|
||||
label="Occupation"
|
||||
className='collapsable-form-style'
|
||||
name='occupation'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.occupation}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
occupation: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.occupation}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.occupation && Boolean(formik.errors.occupation)}
|
||||
// helperText={formik.touched.occupation && formik.errors.occupation}
|
||||
/>
|
||||
@ -122,9 +164,14 @@ export default function FamilyFormSection(){
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='hoursPerWeek'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.hoursPerWeek}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
hoursPerWeek: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.hoursPerWeek}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
@ -134,9 +181,14 @@ export default function FamilyFormSection(){
|
||||
label="Employer"
|
||||
className='collapsable-form-style'
|
||||
name='employer'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.employer}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
employer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.employer}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
@ -146,9 +198,14 @@ export default function FamilyFormSection(){
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='businessPhone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.businessPhone}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
businessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.businessPhone}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -164,9 +221,14 @@ export default function FamilyFormSection(){
|
||||
label="Spouse's Name"
|
||||
className='collapsable-form-style'
|
||||
name='spouseName'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseName}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.spouseName}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
@ -175,9 +237,14 @@ export default function FamilyFormSection(){
|
||||
label="Spouse's Employer"
|
||||
className='collapsable-form-style'
|
||||
name='spouseEmployer'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseEmployer}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseEmployer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.spouseEmployer}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
@ -187,9 +254,14 @@ export default function FamilyFormSection(){
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='spouseBusinessPhone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseBusinessPhone}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseBusinessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.spouseBusinessPhone}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -202,12 +274,16 @@ export default function FamilyFormSection(){
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Emergency Contact"
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='emergencyContact'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.emergencyContact}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
emergencyContact: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.emergencyContact}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
@ -216,9 +292,14 @@ export default function FamilyFormSection(){
|
||||
label="Relationship"
|
||||
className='collapsable-form-style'
|
||||
name='relationship'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.relationship}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
relationship: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.relationship}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
@ -228,13 +309,17 @@ export default function FamilyFormSection(){
|
||||
label="Phone"
|
||||
className='collapsable-form-style'
|
||||
name='spousePhone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spousePhone}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spousePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.spousePhone}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
@ -94,25 +94,51 @@ export default function PatientForm(){
|
||||
zipCode?: 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 = (
|
||||
// fullName?: string|undefined,
|
||||
// homePhone?: string|undefined,
|
||||
// cellPhone?: string|undefined,
|
||||
// email?: string|undefined,
|
||||
// age?: number|undefined|string,
|
||||
// dateOfBirth?: string|undefined,
|
||||
// socialSecurityNumber?: string|undefined,
|
||||
// mailingAddress?: string|undefined,
|
||||
// city?: string|undefined,
|
||||
// state?: string|undefined,
|
||||
// zipCode?: string|undefined,
|
||||
// gender?: string|undefined,
|
||||
// ) =>{
|
||||
// setSection2Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,})
|
||||
// }
|
||||
const handleFormSection2Data = (
|
||||
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,
|
||||
) =>{
|
||||
setSection2Data({
|
||||
maritalStatus,
|
||||
numberOfChildren,
|
||||
occupation,
|
||||
hoursPerWeek,
|
||||
employer,
|
||||
businessPhone,
|
||||
spouseName,
|
||||
spouseEmployer,
|
||||
spouseBusinessPhone,
|
||||
emergencyContact,
|
||||
relationship,
|
||||
spousePhone,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
@ -127,7 +153,7 @@ export default function PatientForm(){
|
||||
setIsChecked(event.target.checked);
|
||||
};
|
||||
|
||||
console.log(section1Data,"wyeytweevfde")
|
||||
console.log(section1Data,"wyeytweevfde",section2Data)
|
||||
|
||||
|
||||
return(
|
||||
@ -162,7 +188,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<FamilyFormSection/>
|
||||
<FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
|
||||
@ -111,11 +111,6 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
// },
|
||||
// });
|
||||
|
||||
|
||||
console.log("sdfdsfsd",patient)
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<Grid container direction="row" className='section1-test-class'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user