325 lines
12 KiB
TypeScript
325 lines
12 KiB
TypeScript
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 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;
|
|
}
|
|
|
|
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
|
|
patientDataDiplay:any;
|
|
type:string;
|
|
}
|
|
|
|
export default function MedicalHistoryForm({handleFormSection3Data,patientDataDiplay,type}: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])
|
|
|
|
console.log("patientDataDiplay",patientDataDiplay)
|
|
return(
|
|
<>
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
|
|
</Grid>
|
|
|
|
<Grid container direction="row">
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Family physician"
|
|
name='physicianname'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
physicianname: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.physicianname:patient.physicianname}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="City"
|
|
name='physiciancity'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
physiciancity: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.physiciancity:patient.physiciancity}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="State"
|
|
name='physicianstate'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
physicianstate: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.physicianstate:patient.physicianstate}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Phone"
|
|
type="number"
|
|
name='physicianphone'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
physicianphone: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.physicianphone:patient.physicianphone}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12} className='collapsable-form-style'></Grid>
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12} className='collapsable-form-style'></Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
|
|
</Grid>
|
|
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Previous Chiropractic Care:</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue={type=='display'?patientDataDiplay.haveChiropractor:patient.haveChiropractor}
|
|
name="radio-buttons-group"
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
haveChiropractor: e.target.value,
|
|
}));
|
|
}}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Chiropractor's Name"
|
|
name='chiropractorName'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
chiropractorName: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.chiropractorName:patient.chiropractorName}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item
|
|
xs={12}
|
|
xl={3}
|
|
lg={4}
|
|
md={6}
|
|
sm={12}
|
|
className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="City/State"
|
|
name='chiropractorState'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
chiropractorState: e.target.value,
|
|
}));
|
|
}}
|
|
value={type=='display'?patientDataDiplay.chiropractorState:patient.chiropractorState}
|
|
disabled={type=='display'}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
|
|
<RadioGroup
|
|
// value={patient.gender}
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue={type=='display'?patientDataDiplay.xray:patient.xray}
|
|
name="radio-buttons-group"
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
xray: e.target.value,
|
|
}));
|
|
}}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>Who can we thank for referring you to our office:</FormLabel>
|
|
<RadioGroup
|
|
// value={patient.gender}
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue={type=='display'?patientDataDiplay.reference:patient.reference}
|
|
name="radio-buttons-group"
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
reference: e.target.value,
|
|
}));
|
|
}}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
|
|
<FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
|
|
<FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
|
|
<FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
|
|
<FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
|
|
<FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
|
|
<RadioGroup
|
|
// value={patient.gender}
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue={type=='display'?patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
|
|
name="radio-buttons-group"
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
cellPhoneProvider: e.target.value,
|
|
}));
|
|
}}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
|
|
<FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
</>
|
|
)}
|
|
|