section 3 data to main
This commit is contained in:
sonika
parent
25c213d1f7
commit
f1527188ed
@ -2,19 +2,20 @@ import * as React from 'react';
|
||||
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface FormValues {
|
||||
physicianname: string;
|
||||
physiciancity: string;
|
||||
physicianstate: string;
|
||||
physicianphone: string;
|
||||
chiropractorName: string;
|
||||
chiropractorState: string;
|
||||
xray: boolean;
|
||||
ctScan: boolean;
|
||||
cdImages: boolean;
|
||||
visitDetails: string;
|
||||
cellPhoneProvider: string;
|
||||
interface Patient {
|
||||
physicianname: string |undefined;
|
||||
physiciancity: string |undefined;
|
||||
physicianstate: string |undefined;
|
||||
physicianphone: string |undefined;
|
||||
chiropractorName: string |undefined;
|
||||
chiropractorState: string |undefined;
|
||||
xray: string|undefined;
|
||||
haveChiropractor: string|undefined;
|
||||
reference: string|undefined;
|
||||
visitDetails: string |undefined;
|
||||
cellPhoneProvider: string |undefined;
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
@ -24,35 +25,61 @@ const validationSchema = Yup.object({
|
||||
phone: Yup.string().required('Required'),
|
||||
chiropractorName: Yup.string().required('Required'),
|
||||
xray: Yup.boolean().required('Required'),
|
||||
ctScan: Yup.boolean().required('Required'),
|
||||
cdImages: Yup.boolean().required('Required'),
|
||||
haveChiropractor: Yup.boolean().required('Required'),
|
||||
reference: Yup.boolean().required('Required'),
|
||||
visitDetails: Yup.string().required('Required'),
|
||||
cellPhoneProvider: Yup.string().required('Required'),
|
||||
});
|
||||
|
||||
export default function MedicalHistoryForm(){
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
physicianname: '',
|
||||
physiciancity: '',
|
||||
physicianstate: '',
|
||||
physicianphone: '',
|
||||
chiropractorName: '',
|
||||
chiropractorState: '',
|
||||
xray: false,
|
||||
ctScan: false,
|
||||
cdImages: false,
|
||||
visitDetails: '',
|
||||
cellPhoneProvider: '',
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
type Props = {
|
||||
handleFormSection3Data:(
|
||||
physicianname?: string |undefined,
|
||||
physiciancity?: string |undefined,
|
||||
physicianstate?: string |undefined,
|
||||
physicianphone?: string |undefined,
|
||||
chiropractorName?: string |undefined,
|
||||
chiropractorState?: string |undefined,
|
||||
xray?: string|undefined,
|
||||
haveChiropractor?: string|undefined,
|
||||
reference?: string|undefined,
|
||||
visitDetails?: string |undefined,
|
||||
cellPhoneProvider?: string |undefined,
|
||||
)=> void
|
||||
}
|
||||
|
||||
export default function MedicalHistoryForm({handleFormSection3Data}:Props){
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
physicianname: '',
|
||||
physiciancity: '',
|
||||
physicianstate: '',
|
||||
physicianphone: '',
|
||||
chiropractorName: '',
|
||||
chiropractorState: '',
|
||||
xray: '',
|
||||
haveChiropractor: '',
|
||||
reference: '',
|
||||
visitDetails: '',
|
||||
cellPhoneProvider: '',
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection3Data(
|
||||
patient.physicianname,
|
||||
patient.physiciancity,
|
||||
patient.physicianstate,
|
||||
patient.physicianphone,
|
||||
patient.chiropractorName,
|
||||
patient.chiropractorState,
|
||||
patient.xray,
|
||||
patient.haveChiropractor,
|
||||
patient.reference,
|
||||
patient.visitDetails,
|
||||
patient.cellPhoneProvider,
|
||||
)
|
||||
},[patient])
|
||||
return(
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
|
||||
</Grid>
|
||||
@ -63,9 +90,14 @@ export default function MedicalHistoryForm(){
|
||||
variant="outlined"
|
||||
label="Family physician"
|
||||
name='physicianname'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianname}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
physicianname: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.physicianname}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
@ -73,9 +105,14 @@ export default function MedicalHistoryForm(){
|
||||
variant="outlined"
|
||||
label="City"
|
||||
name='physiciancity'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physiciancity}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
physiciancity: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.physiciancity}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
@ -83,9 +120,14 @@ export default function MedicalHistoryForm(){
|
||||
variant="outlined"
|
||||
label="State"
|
||||
name='physicianstate'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianstate}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
physicianstate: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.physicianstate}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
@ -94,9 +136,14 @@ export default function MedicalHistoryForm(){
|
||||
label="Phone"
|
||||
type="number"
|
||||
name='physicianphone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianphone}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
physicianphone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.physicianphone}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -115,7 +162,12 @@ export default function MedicalHistoryForm(){
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
// defaultValue="yes"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
haveChiropractor: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
@ -129,9 +181,14 @@ export default function MedicalHistoryForm(){
|
||||
variant="outlined"
|
||||
label="Chiropractor's Name"
|
||||
name='chiropractorName'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.chiropractorName}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
chiropractorName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.chiropractorName}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -140,9 +197,14 @@ export default function MedicalHistoryForm(){
|
||||
variant="outlined"
|
||||
label="City/State"
|
||||
name='chiropractorState'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.chiropractorState}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
chiropractorState: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.chiropractorState}
|
||||
// onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
@ -155,7 +217,12 @@ export default function MedicalHistoryForm(){
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
// defaultValue="yes"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
xray: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
@ -172,7 +239,12 @@ export default function MedicalHistoryForm(){
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
// defaultValue="physician"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
reference: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="friend" control={<Radio />} label="Friend" />
|
||||
@ -193,7 +265,12 @@ export default function MedicalHistoryForm(){
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
// defaultValue="email"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
cellPhoneProvider: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="email" control={<Radio />} label="Email" />
|
||||
@ -201,7 +278,6 @@ export default function MedicalHistoryForm(){
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -79,6 +79,7 @@ export default function PatientForm(){
|
||||
const [signature,setSignature]=React.useState('');
|
||||
const [section1Data, setSection1Data] = React.useState<any>({});
|
||||
const [section2Data, setSection2Data] = React.useState<any>({});
|
||||
const [section3Data, setSection3Data] = React.useState<any>({});
|
||||
|
||||
const handleFormSection1Data = (
|
||||
fullName?: string|undefined,
|
||||
@ -140,6 +141,34 @@ export default function PatientForm(){
|
||||
})
|
||||
}
|
||||
|
||||
const handleFormSection3Data = (
|
||||
physicianname: string |undefined,
|
||||
physiciancity: string |undefined,
|
||||
physicianstate: string |undefined,
|
||||
physicianphone: string |undefined,
|
||||
chiropractorName: string |undefined,
|
||||
chiropractorState: string |undefined,
|
||||
xray: string|undefined,
|
||||
haveChiropractor: string|undefined,
|
||||
reference: string|undefined,
|
||||
visitDetails: string |undefined,
|
||||
cellPhoneProvider: string |undefined,
|
||||
) =>{
|
||||
setSection3Data({
|
||||
physicianname,
|
||||
physiciancity,
|
||||
physicianstate,
|
||||
physicianphone,
|
||||
chiropractorName,
|
||||
chiropractorState,
|
||||
xray,
|
||||
haveChiropractor,
|
||||
reference,
|
||||
visitDetails,
|
||||
cellPhoneProvider,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
@ -153,7 +182,7 @@ export default function PatientForm(){
|
||||
setIsChecked(event.target.checked);
|
||||
};
|
||||
|
||||
console.log(section1Data,"wyeytweevfde",section2Data)
|
||||
console.log(section3Data,"wyeytweevfde",section2Data)
|
||||
|
||||
|
||||
return(
|
||||
@ -198,7 +227,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<MedicalHistory/>
|
||||
<MedicalHistory handleFormSection3Data={handleFormSection3Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user