Compare commits
10 Commits
70f97d1e00
...
a1b090cc82
| Author | SHA1 | Date | |
|---|---|---|---|
| a1b090cc82 | |||
|
0293126f77 | ||
|
|
65b559a4fb | ||
|
|
867dac8327 | ||
|
|
9b3444a4f6 | ||
|
|
a025a32a7f | ||
|
|
3a994d4269 | ||
|
|
f1527188ed | ||
|
|
25c213d1f7 | ||
|
|
ab27164ed8 |
@ -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,31 +34,59 @@ 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:{
|
||||
maritalStatus:'',
|
||||
numberOfChildren:'',
|
||||
ages:'',
|
||||
occupation:'',
|
||||
hoursPerWeek:'',
|
||||
employer:'',
|
||||
businessPhone:'',
|
||||
spouseName:'',
|
||||
spouseEmployer:'',
|
||||
spouseBusinessPhone:'',
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
spousePhone:''
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
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:'',
|
||||
occupation:'',
|
||||
hoursPerWeek:'',
|
||||
employer:'',
|
||||
businessPhone:'',
|
||||
spouseName:'',
|
||||
spouseEmployer:'',
|
||||
spouseBusinessPhone:'',
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
spousePhone:''
|
||||
});
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
import dayjs from "dayjs";
|
||||
|
||||
interface FormValues {
|
||||
interface Patient {
|
||||
familyHistory: string;
|
||||
sleep: string;
|
||||
pillow:string;
|
||||
@ -14,9 +14,21 @@ interface FormValues {
|
||||
menstralCycle: any;
|
||||
}
|
||||
|
||||
export default function OtherDetails8(){
|
||||
type Props = {
|
||||
handleFormSection8Data:(
|
||||
familyHistory: string|undefined,
|
||||
sleep: string|undefined,
|
||||
pillow:string|undefined,
|
||||
orthotics:string|undefined,
|
||||
brestExam: any,
|
||||
pregnancy:string|undefined,
|
||||
menstralCycle: any,
|
||||
)=> void
|
||||
}
|
||||
|
||||
const [values, setValues] = React.useState<FormValues>({
|
||||
export default function OtherDetails8({handleFormSection8Data}:Props){
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
familyHistory: '',
|
||||
sleep: '',
|
||||
pillow:'',
|
||||
@ -26,6 +38,18 @@ export default function OtherDetails8(){
|
||||
menstralCycle: dayjs('2022-04-17'),
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection8Data(
|
||||
patient.familyHistory,
|
||||
patient.sleep,
|
||||
patient.pillow,
|
||||
patient.orthotics,
|
||||
patient.brestExam=dayjs(patient.brestExam),
|
||||
patient.pregnancy,
|
||||
patient.menstralCycle=dayjs(patient.menstralCycle)
|
||||
)
|
||||
},[patient])
|
||||
|
||||
const formatDate = (inputDate:any) => {
|
||||
const date = new Date(inputDate);
|
||||
const year = date.getUTCFullYear();
|
||||
@ -35,7 +59,8 @@ export default function OtherDetails8(){
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
console.log("dsfdsfsdf",values)
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -48,7 +73,7 @@ export default function OtherDetails8(){
|
||||
label=""
|
||||
name='explanation'
|
||||
onChange={(event:any) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
familyHistory: event.target.value,
|
||||
}));
|
||||
@ -62,9 +87,9 @@ export default function OtherDetails8(){
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
educationLevel: event.target.value,
|
||||
sleep: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
@ -81,7 +106,7 @@ export default function OtherDetails8(){
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
pillow: event.target.value,
|
||||
}));
|
||||
@ -99,7 +124,7 @@ export default function OtherDetails8(){
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
orthotics: event.target.value,
|
||||
}));
|
||||
@ -116,10 +141,10 @@ export default function OtherDetails8(){
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={values.brestExam}
|
||||
value={patient.brestExam}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event)
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
brestExam: formattedDate,
|
||||
}));
|
||||
@ -140,9 +165,9 @@ export default function OtherDetails8(){
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
orthotics: event.target.value,
|
||||
pregnancy: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
@ -157,10 +182,10 @@ export default function OtherDetails8(){
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={values.menstralCycle}
|
||||
value={patient.menstralCycle}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event)
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
menstralCycle: formattedDate,
|
||||
}));
|
||||
|
||||
@ -2,51 +2,119 @@ 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 path from 'path';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface FormValues {
|
||||
interface Patient {
|
||||
chiefComplaint:string;
|
||||
painWorse: string[];
|
||||
painBetter: string[];
|
||||
painQuality: string[];
|
||||
painWorstTime: string[];
|
||||
currentComplaintIssues: string[];
|
||||
painDuration: string;
|
||||
currentTreatment: string;
|
||||
treatmentResults: string;
|
||||
treatmentGoal: string;
|
||||
selfTreatment:string;
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
chiefComplaint:Yup.array().required('Required'),
|
||||
painQuality: Yup.array().required('Required'),
|
||||
painDuration: Yup.string().required('Required'),
|
||||
currentTreatment: Yup.string().required('Required'),
|
||||
treatmentResults: Yup.string().required('Required'),
|
||||
treatmentGoal: Yup.string().required('Required'),
|
||||
});
|
||||
type Props = {
|
||||
handleFormSection4Data:(
|
||||
chiefComplaint:string|undefined,
|
||||
painWorse: any,
|
||||
painBetter: any,
|
||||
painQuality: any,
|
||||
painWorstTime: any,
|
||||
currentComplaintIssues: any,
|
||||
painDuration: string|undefined,
|
||||
currentTreatment: string|undefined,
|
||||
treatmentGoal: string|undefined,
|
||||
selfTreatment:string|undefined,
|
||||
)=> void
|
||||
}
|
||||
|
||||
export default function PainAnalysisSection4(){
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
chiefComplaint:'',
|
||||
painQuality:[],
|
||||
painDuration:'',
|
||||
currentTreatment:'',
|
||||
treatmentResults:'',
|
||||
treatmentGoal:'',
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
|
||||
} else {
|
||||
formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
|
||||
}
|
||||
};
|
||||
|
||||
export default function PainAnalysisSection4({handleFormSection4Data}:Props){
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
chiefComplaint:'',
|
||||
painWorse:[],
|
||||
painBetter:[],
|
||||
painQuality:[],
|
||||
painWorstTime:[],
|
||||
currentComplaintIssues:[],
|
||||
painDuration:'',
|
||||
currentTreatment:'',
|
||||
treatmentGoal:'',
|
||||
selfTreatment:'',
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection4Data(
|
||||
patient.chiefComplaint,
|
||||
patient.painWorse,
|
||||
patient.painBetter,
|
||||
patient.painQuality,
|
||||
patient.painWorstTime,
|
||||
patient.currentComplaintIssues,
|
||||
patient.painDuration,
|
||||
patient.currentTreatment,
|
||||
patient.treatmentGoal,
|
||||
patient.selfTreatment,
|
||||
)
|
||||
},[patient])
|
||||
|
||||
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorse: checked
|
||||
? [...prevValues.painWorse, name]
|
||||
: prevValues.painWorse.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painBetter: checked
|
||||
? [...prevValues.painBetter, name]
|
||||
: prevValues.painBetter.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painQuality: checked
|
||||
? [...prevValues.painQuality, name]
|
||||
: prevValues.painQuality.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorstTime: checked
|
||||
? [...prevValues.painWorstTime, name]
|
||||
: prevValues.painWorstTime.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
currentComplaintIssues: checked
|
||||
? [...prevValues.currentComplaintIssues, name]
|
||||
: prevValues.currentComplaintIssues.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
return(
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
|
||||
</Grid>
|
||||
@ -56,9 +124,13 @@ export default function PainAnalysisSection4(){
|
||||
variant="outlined"
|
||||
label="How did your Chief complaint start?(ex-fell on ice)"
|
||||
name='chiefComplaint'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.chiefComplaint}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
chiefComplaint: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.chiefComplaint}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -67,29 +139,27 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>What makes your pain worse?</FormLabel>
|
||||
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
|
||||
label="Bending"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
|
||||
label="Standing"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
|
||||
label="Sitting"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
|
||||
label="Walking"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
|
||||
label="Others"
|
||||
/>
|
||||
</FormGroup>
|
||||
{formik.touched.painQuality && formik.errors.painQuality ? (
|
||||
<div>{formik.errors.painQuality}</div>
|
||||
) : null}
|
||||
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
@ -98,23 +168,23 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>What makes your pain better?</FormLabel>
|
||||
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
|
||||
label="laying down"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
|
||||
label="Standing"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
|
||||
label="Sitting"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
|
||||
label="Walking"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
|
||||
label="Others"
|
||||
/>
|
||||
</FormGroup>
|
||||
@ -130,25 +200,22 @@ export default function PainAnalysisSection4(){
|
||||
label="Sharp"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
|
||||
label="Dull/Ache"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
|
||||
label="Throbbing"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
|
||||
label="Tingling/Numbness/Burning"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
|
||||
label="Others"
|
||||
/>
|
||||
</FormGroup>
|
||||
{formik.touched.painQuality && formik.errors.painQuality ? (
|
||||
<div>{formik.errors.painQuality}</div>
|
||||
) : null}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
@ -157,29 +224,26 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>What is the worst time for your pain?</FormLabel>
|
||||
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
|
||||
label="Morning"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
|
||||
label="During day"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
|
||||
label="Evening"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
|
||||
label="Lying in bed"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
|
||||
label="Others"
|
||||
/>
|
||||
</FormGroup>
|
||||
{formik.touched.painQuality && formik.errors.painQuality ? (
|
||||
<div>{formik.errors.painQuality}</div>
|
||||
) : null}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
@ -188,8 +252,13 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.painDuration}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painDuration: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.painDuration}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
|
||||
@ -205,19 +274,19 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>Has your current complaint caused any of the following?</FormLabel>
|
||||
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
|
||||
label="Muscle weakness"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
|
||||
label="Bowel/Bladder problem"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
|
||||
label="Digestion"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
|
||||
label="Cardiac/Respiratory"
|
||||
/>
|
||||
|
||||
@ -230,16 +299,18 @@ export default function PainAnalysisSection4(){
|
||||
<FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.painDuration}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
selfTreatment: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.selfTreatment}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No" />
|
||||
</RadioGroup>
|
||||
{formik.touched.painDuration && formik.errors.painDuration ? (
|
||||
<div>{formik.errors.painDuration}</div>
|
||||
) : null}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
@ -252,14 +323,17 @@ export default function PainAnalysisSection4(){
|
||||
variant="outlined"
|
||||
label="What is your goal from treatment?(ex-play golf without pain)"
|
||||
name='treatmentGoal'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.treatmentGoal}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
treatmentGoal: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={patient.treatmentGoal}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import Table from '../Helper/AddNewTable';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface FormValues {
|
||||
interface Patient {
|
||||
generalHealth: string;
|
||||
presentProblemBefore: string;
|
||||
ifYespresentProblemBefore:string;
|
||||
@ -17,10 +18,27 @@ interface FormValues {
|
||||
supplementsOrDrugs: string;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection5Data:(
|
||||
generalHealth: string|undefined,
|
||||
presentProblemBefore: string|undefined,
|
||||
ifYespresentProblemBefore:string|undefined,
|
||||
ifYestreatmentProvided: string|undefined,
|
||||
ifYesOutcome: string|undefined,
|
||||
strokeBloodclotting: string|undefined,
|
||||
ifYesstrokeBloodclotting: string|undefined,
|
||||
dizzinessFetigue: string|undefined,
|
||||
ifyesdizzinessFetigue: string|undefined,
|
||||
antiColligent: string|undefined,
|
||||
injuriesHospitalization: string|undefined,
|
||||
supplementsOrDrugs: string|undefined,
|
||||
)=> void
|
||||
}
|
||||
|
||||
export default function PastTreatment5(){
|
||||
|
||||
const [values, setValues] = React.useState<FormValues>({
|
||||
export default function PastTreatment5({handleFormSection5Data}:Props){
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
generalHealth: '',
|
||||
presentProblemBefore: '',
|
||||
ifYespresentProblemBefore:'',
|
||||
@ -35,7 +53,23 @@ export default function PastTreatment5(){
|
||||
supplementsOrDrugs:''
|
||||
});
|
||||
|
||||
console.log("dsfdsfdsfg",values)
|
||||
useEffect(()=>{
|
||||
handleFormSection5Data(
|
||||
patient.generalHealth,
|
||||
patient.presentProblemBefore,
|
||||
patient.ifYespresentProblemBefore,
|
||||
patient.ifYestreatmentProvided,
|
||||
patient.ifYesOutcome,
|
||||
patient.strokeBloodclotting,
|
||||
patient.ifYesstrokeBloodclotting,
|
||||
patient.dizzinessFetigue,
|
||||
patient.ifyesdizzinessFetigue,
|
||||
patient.antiColligent,
|
||||
patient.injuriesHospitalization,
|
||||
patient.supplementsOrDrugs,
|
||||
)
|
||||
},[patient])
|
||||
|
||||
return(
|
||||
<>
|
||||
<form>
|
||||
@ -48,7 +82,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
generalHealth: event.target.value,
|
||||
}));
|
||||
@ -70,7 +104,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
presentProblemBefore: event.target.value,
|
||||
}));
|
||||
@ -88,9 +122,9 @@ export default function PastTreatment5(){
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
disabled={values.presentProblemBefore!=='Yes'}
|
||||
disabled={patient.presentProblemBefore!=='Yes'}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYespresentProblemBefore: event.target.value,
|
||||
}));
|
||||
@ -102,9 +136,9 @@ export default function PastTreatment5(){
|
||||
variant="outlined"
|
||||
label="Was treatment provided?If yes, by whom?"
|
||||
name='treatmentGoal'
|
||||
disabled={values.presentProblemBefore!=='Yes'}
|
||||
disabled={patient.presentProblemBefore!=='Yes'}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYestreatmentProvided: event.target.value,
|
||||
}));
|
||||
@ -116,9 +150,9 @@ export default function PastTreatment5(){
|
||||
variant="outlined"
|
||||
label="Outcome?"
|
||||
name='treatmentGoal'
|
||||
disabled={values.presentProblemBefore!=='Yes'}
|
||||
disabled={patient.presentProblemBefore!=='Yes'}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesOutcome: event.target.value,
|
||||
}));
|
||||
@ -134,7 +168,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
strokeBloodclotting: event.target.value,
|
||||
}));
|
||||
@ -151,9 +185,9 @@ export default function PastTreatment5(){
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
disabled={values.strokeBloodclotting!=='Yes'}
|
||||
disabled={patient.strokeBloodclotting!=='Yes'}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesstrokeBloodclotting: event.target.value,
|
||||
}));
|
||||
@ -168,7 +202,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
dizzinessFetigue: event.target.value,
|
||||
}));
|
||||
@ -185,9 +219,9 @@ export default function PastTreatment5(){
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
disabled={values.dizzinessFetigue!=='Yes'}
|
||||
disabled={patient.dizzinessFetigue!=='Yes'}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifyesdizzinessFetigue: event.target.value,
|
||||
}));
|
||||
@ -202,7 +236,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
antiColligent: event.target.value,
|
||||
}));
|
||||
@ -221,7 +255,7 @@ export default function PastTreatment5(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
injuriesHospitalization: event.target.value,
|
||||
}));
|
||||
@ -245,7 +279,7 @@ export default function PastTreatment5(){
|
||||
label=""
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
supplementsOrDrugs: event.target.value,
|
||||
}));
|
||||
|
||||
@ -21,22 +21,6 @@ import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
|
||||
import OtherDetails8 from './OtherDetails8';
|
||||
import PatientImageMarker from '../ImageMarker/PatientImageMarker';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
homePhone: string;
|
||||
cellPhone: string;
|
||||
email: string;
|
||||
age: number;
|
||||
dateOfBirth: string;
|
||||
socialSecurityNumber: string;
|
||||
mailingAddress: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
maritalStatus: string;
|
||||
}
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
))(({ theme }) => ({
|
||||
@ -73,31 +57,292 @@ interface Patient {
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
|
||||
|
||||
export default function PatientForm(){
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
const [isChecked, setIsChecked] = React.useState(false);
|
||||
const [signature,setSignature]=React.useState('');
|
||||
const [section1Data, setSection1Data] = React.useState<any>({});
|
||||
const [section2Data, setSection2Data] = React.useState<any>({});
|
||||
const [section3Data, setSection3Data] = React.useState<any>({});
|
||||
const [section4Data, setSection4Data] = React.useState<any>({});
|
||||
const [section5Data, setSection5Data] = React.useState<any>({});
|
||||
const [section6Data, setSection6Data] = React.useState<any>({});
|
||||
const [section7Data, setSection7Data] = React.useState<any>({});
|
||||
const [section8Data, setSection8Data] = React.useState<any>({});
|
||||
const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState<any>({});
|
||||
const [allPatientData, setAllPatientData] = React.useState<any>([]);
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: 0,
|
||||
dateOfBirth: "",
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "",
|
||||
maritalStatus: "",
|
||||
});
|
||||
const handleFormSection1Data = (
|
||||
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,
|
||||
) =>{
|
||||
setSection1Data({
|
||||
fullName,
|
||||
homePhone,
|
||||
cellPhone,
|
||||
email,
|
||||
age,
|
||||
dateOfBirth,
|
||||
socialSecurityNumber,
|
||||
mailingAddress,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
gender,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
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 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 handleFormSection4Data = (
|
||||
chiefComplaint:string|undefined,
|
||||
painWorse: any,
|
||||
painBetter: any,
|
||||
painQuality: any,
|
||||
painWorstTime: any,
|
||||
currentComplaintIssues: any,
|
||||
painDuration: string|undefined,
|
||||
currentTreatment: string|undefined,
|
||||
treatmentGoal: string|undefined,
|
||||
selfTreatment:string|undefined,
|
||||
) =>{
|
||||
setSection4Data({
|
||||
chiefComplaint,
|
||||
painWorse,
|
||||
painBetter,
|
||||
painQuality,
|
||||
painWorstTime,
|
||||
currentComplaintIssues,
|
||||
painDuration,
|
||||
currentTreatment,
|
||||
treatmentGoal,
|
||||
selfTreatment,
|
||||
})
|
||||
}
|
||||
|
||||
const handleFormSection5Data = (
|
||||
generalHealth: string|undefined,
|
||||
presentProblemBefore: string|undefined,
|
||||
ifYespresentProblemBefore:string|undefined,
|
||||
ifYestreatmentProvided: string|undefined,
|
||||
ifYesOutcome: string|undefined,
|
||||
strokeBloodclotting: string|undefined,
|
||||
ifYesstrokeBloodclotting: string|undefined,
|
||||
dizzinessFetigue: string|undefined,
|
||||
ifyesdizzinessFetigue: string|undefined,
|
||||
antiColligent: string|undefined,
|
||||
injuriesHospitalization: string|undefined,
|
||||
supplementsOrDrugs: string|undefined,
|
||||
) =>{
|
||||
setSection5Data({
|
||||
generalHealth,
|
||||
presentProblemBefore,
|
||||
ifYespresentProblemBefore,
|
||||
ifYestreatmentProvided,
|
||||
ifYesOutcome,
|
||||
strokeBloodclotting,
|
||||
ifYesstrokeBloodclotting,
|
||||
dizzinessFetigue,
|
||||
ifyesdizzinessFetigue,
|
||||
antiColligent,
|
||||
injuriesHospitalization,
|
||||
supplementsOrDrugs,
|
||||
})
|
||||
}
|
||||
|
||||
const handleFormSection6Data = (
|
||||
eyes: string|undefined,
|
||||
IntestinesBowls: string|undefined,
|
||||
jointsBones:string|undefined,
|
||||
allergies: string|undefined,
|
||||
earsNoseMouth: string|undefined,
|
||||
urinary: string|undefined,
|
||||
skin: string|undefined,
|
||||
psychological: string|undefined,
|
||||
heart: string|undefined,
|
||||
muscles: string|undefined,
|
||||
internalOrgans: string|undefined,
|
||||
gynecological: string|undefined,
|
||||
lungsBreathing: string|undefined,
|
||||
nerves: string|undefined,
|
||||
blood: string|undefined,
|
||||
prostate: string|undefined,
|
||||
explanation:string|undefined,
|
||||
) =>{
|
||||
setSection6Data({
|
||||
eyes,
|
||||
IntestinesBowls,
|
||||
jointsBones,
|
||||
allergies,
|
||||
earsNoseMouth,
|
||||
urinary,
|
||||
skin,
|
||||
psychological,
|
||||
heart,
|
||||
muscles,
|
||||
internalOrgans,
|
||||
gynecological,
|
||||
lungsBreathing,
|
||||
nerves,
|
||||
blood,
|
||||
prostate,
|
||||
explanation,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleFormSection7Data = (
|
||||
hobbies: string|undefined,
|
||||
educationLevel: string|undefined,
|
||||
excercise: string|undefined,
|
||||
excerciseExplanation: string|undefined,
|
||||
tobacco: string|undefined,
|
||||
tobaccoExplanation: string|undefined,
|
||||
alcohol: string|undefined,
|
||||
alcoholExplanation: string|undefined,
|
||||
healthyDiet: string|undefined,
|
||||
healthyDietExplanation: string|undefined,
|
||||
sleep: string|undefined,
|
||||
sleepExplanation: string|undefined,
|
||||
workSchool: string|undefined,
|
||||
workSchoolExplanation: string|undefined,
|
||||
familyLife: string|undefined,
|
||||
familyLifeExplanation: string|undefined,
|
||||
drugs: string|undefined,
|
||||
drugsExplanation:string|undefined,
|
||||
) =>{
|
||||
setSection7Data({
|
||||
hobbies,
|
||||
educationLevel,
|
||||
excercise,
|
||||
excerciseExplanation,
|
||||
tobacco,
|
||||
tobaccoExplanation,
|
||||
alcohol,
|
||||
alcoholExplanation,
|
||||
healthyDiet,
|
||||
healthyDietExplanation,
|
||||
sleep,
|
||||
sleepExplanation,
|
||||
workSchool,
|
||||
workSchoolExplanation,
|
||||
familyLife,
|
||||
familyLifeExplanation,
|
||||
drugs,
|
||||
drugsExplanation,
|
||||
})
|
||||
}
|
||||
|
||||
const handleFormSection8Data = (
|
||||
familyHistory: string|undefined,
|
||||
sleep: string|undefined,
|
||||
pillow: string|undefined,
|
||||
orthotics: string|undefined,
|
||||
brestExam: any,
|
||||
pregnancy: string|undefined,
|
||||
menstralCycle: any,
|
||||
) =>{
|
||||
setSection8Data({
|
||||
familyHistory,
|
||||
sleep,
|
||||
pillow,
|
||||
orthotics,
|
||||
brestExam,
|
||||
pregnancy,
|
||||
menstralCycle,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
const newPatientData = {
|
||||
section1: section1Data,
|
||||
section2: section2Data,
|
||||
section3: section3Data,
|
||||
section4: section4Data,
|
||||
section5: section5Data,
|
||||
section6: section6Data,
|
||||
section7: section7Data,
|
||||
section8: section8Data,
|
||||
};
|
||||
|
||||
// Create a copy of the existing data array and push the new patient data
|
||||
const updatedAllPatientData = [...allPatientData, newPatientData];
|
||||
|
||||
// Update the state with the new array
|
||||
setAllPatientData(updatedAllPatientData);
|
||||
|
||||
console.log("UpdatedallPatientData:", updatedAllPatientData);
|
||||
};
|
||||
|
||||
|
||||
const handleExpandChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
|
||||
setExpanded(newExpanded ? panel : false);
|
||||
@ -108,12 +353,13 @@ export default function PatientForm(){
|
||||
};
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<Paper elevation={0} className='app-screen-constants'>
|
||||
<Header/>
|
||||
<Paper elevation={0} sx={{margin:4, minHeight:550}} >
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* <form onSubmit={handleSubmit}> */}
|
||||
<Typography sx={{fontSize:20}} gutterBottom>
|
||||
Confidential Patient Information
|
||||
</Typography>
|
||||
@ -129,7 +375,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<PersonalSection/>
|
||||
<PersonalSection handleFormSection1Data={handleFormSection1Data}/>
|
||||
</AccordionDetails>
|
||||
|
||||
</Accordion>
|
||||
@ -140,7 +386,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<FamilyFormSection/>
|
||||
<FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -150,7 +396,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<MedicalHistory/>
|
||||
<MedicalHistory handleFormSection3Data={handleFormSection3Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -171,7 +417,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<PainAnalysisSection4/>
|
||||
<PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -181,7 +427,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<PastTreatment5/>
|
||||
<PastTreatment5 handleFormSection5Data={handleFormSection5Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -191,7 +437,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<SystemReviewSection6/>
|
||||
<SystemReviewSection6 handleFormSection6Data={handleFormSection6Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -201,7 +447,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<RecreationalHobbiesSection7/>
|
||||
<RecreationalHobbiesSection7 handleFormSection7Data={handleFormSection7Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -211,7 +457,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<OtherDetails8/>
|
||||
<OtherDetails8 handleFormSection8Data={handleFormSection8Data}/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -242,17 +488,18 @@ export default function PatientForm(){
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
// type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{ margin: 5, left: '40%', width: '200px' }}
|
||||
disabled={isChecked==false || signature==''}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
{/* </form> */}
|
||||
|
||||
</Paper>
|
||||
<Footer/>
|
||||
|
||||
@ -4,6 +4,7 @@ import { useFormik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
@ -18,7 +19,6 @@ interface Patient {
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
maritalStatus: string;
|
||||
}
|
||||
|
||||
const validationSchema = yup.object({
|
||||
@ -35,57 +35,81 @@ interface Patient {
|
||||
zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
|
||||
});
|
||||
|
||||
export default function PersonalSection(){
|
||||
type Props = {
|
||||
handleFormSection1Data:(
|
||||
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,
|
||||
)=> void
|
||||
}
|
||||
|
||||
|
||||
export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
|
||||
const [startDateValue, setStartDateValue] = React.useState<any>();
|
||||
const [emailValue, setEmailValue]= React.useState<string>('');
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: 0,
|
||||
dateOfBirth: "",
|
||||
dateOfBirth: startDateValue,
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "male",
|
||||
maritalStatus: "",
|
||||
});
|
||||
|
||||
const formik = useFormik<Patient>({
|
||||
initialValues: {
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: "",
|
||||
dateOfBirth: "",
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "male",
|
||||
maritalStatus: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values) => {
|
||||
// Do something with the patient data
|
||||
console.log(values);
|
||||
},
|
||||
});
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
console.log("dsfsdfsdf",event.target.value)
|
||||
const { name, value } = event.target;
|
||||
setPatient((prevPatient) => ({
|
||||
...prevPatient,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
useEffect(()=>{
|
||||
handleFormSection1Data(
|
||||
patient.fullName,
|
||||
patient.homePhone,
|
||||
patient.cellPhone,
|
||||
patient.email,
|
||||
patient.age,
|
||||
startDateValue,
|
||||
patient.socialSecurityNumber,
|
||||
patient.mailingAddress,
|
||||
patient.city,
|
||||
patient.state,
|
||||
patient.zipCode,
|
||||
patient.gender,
|
||||
)
|
||||
},[patient])
|
||||
|
||||
// const formik = useFormik<Patient>({
|
||||
// initialValues: {
|
||||
// fullName: "",
|
||||
// homePhone: "",
|
||||
// cellPhone: "",
|
||||
// email: "",
|
||||
// age: "",
|
||||
// dateOfBirth: "",
|
||||
// socialSecurityNumber: "",
|
||||
// mailingAddress: "",
|
||||
// city: "",
|
||||
// state: "",
|
||||
// zipCode: "",
|
||||
// gender: "male",
|
||||
// },
|
||||
// validationSchema,
|
||||
// onSubmit: (values) => {
|
||||
// // Do something with the patient data
|
||||
// console.log(values,"sdfdsfsd34");
|
||||
// },
|
||||
// });
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -96,11 +120,16 @@ export default function PersonalSection(){
|
||||
label="Patient's Full Name"
|
||||
name="fullName"
|
||||
placeholder='Please enter your name'
|
||||
value={formik.values.fullName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.fullName && Boolean(formik.errors.fullName)}
|
||||
helperText={formik.touched.fullName && formik.errors.fullName}
|
||||
value={patient.fullName}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
fullName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.fullName && Boolean(formik.errors.fullName)}
|
||||
// helperText={formik.touched.fullName && formik.errors.fullName}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
@ -112,11 +141,16 @@ export default function PersonalSection(){
|
||||
label="Phone Number"
|
||||
name="cellPhone"
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={formik.values.cellPhone}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
|
||||
helperText={formik.touched.cellPhone && formik.errors.cellPhone}
|
||||
value={patient.cellPhone}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
cellPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
|
||||
// helperText={formik.touched.cellPhone && formik.errors.cellPhone}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -126,11 +160,16 @@ export default function PersonalSection(){
|
||||
label="Home Phone Number"
|
||||
name="homePhone"
|
||||
placeholder='Please enter your home phone'
|
||||
value={formik.values.homePhone}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
|
||||
helperText={formik.touched.homePhone && formik.errors.homePhone}
|
||||
value={patient.homePhone}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
homePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
|
||||
// helperText={formik.touched.homePhone && formik.errors.homePhone}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -140,11 +179,14 @@ export default function PersonalSection(){
|
||||
label="Email"
|
||||
name="email"
|
||||
placeholder='Please enter your email'
|
||||
value={emailValue}
|
||||
value={patient.email}
|
||||
onChange={(e)=>{
|
||||
setEmailValue(e.target.value)
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
email: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.email && Boolean(formik.errors.email)}
|
||||
// helperText={formik.touched.email && formik.errors.email}
|
||||
/>
|
||||
@ -157,11 +199,16 @@ export default function PersonalSection(){
|
||||
name="age"
|
||||
type="number"
|
||||
placeholder='Please enter your age'
|
||||
value={formik.values.age}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.age && Boolean(formik.errors.age)}
|
||||
helperText={formik.touched.age && formik.errors.age}
|
||||
value={patient.age}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
age: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.age && Boolean(formik.errors.age)}
|
||||
// helperText={formik.touched.age && formik.errors.age}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
@ -185,11 +232,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Social Security Number"
|
||||
name="socialSecurityNumber"
|
||||
value={formik.values.socialSecurityNumber}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
value={patient.socialSecurityNumber}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
socialSecurityNumber: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -199,11 +251,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Mailing Address"
|
||||
name="mailingAddress"
|
||||
value={formik.values.mailingAddress}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
|
||||
helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
|
||||
value={patient.mailingAddress}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
mailingAddress: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
|
||||
// helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -212,9 +269,14 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="State"
|
||||
name="state"
|
||||
value={formik.values.state}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
value={patient.state}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
state: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.state && Boolean(formik.errors.state)}
|
||||
// helperText={formik.touched.state && formik.errors.state}
|
||||
/>
|
||||
@ -226,11 +288,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="City"
|
||||
name="city"
|
||||
value={formik.values.city}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.city && Boolean(formik.errors.city)}
|
||||
helperText={formik.touched.city && formik.errors.city}
|
||||
value={patient.city}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
city: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.city && Boolean(formik.errors.city)}
|
||||
// helperText={formik.touched.city && formik.errors.city}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -239,11 +306,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Zip Code"
|
||||
name="zipCode"
|
||||
value={formik.values.zipCode}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
value={patient.zipCode}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
zipCode: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -252,9 +324,14 @@ export default function PersonalSection(){
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="male"
|
||||
defaultValue={patient.gender}
|
||||
name="radio-buttons-group"
|
||||
onChange={handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
gender: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
interface FormValues {
|
||||
interface Patient {
|
||||
hobbies: string;
|
||||
educationLevel: string;
|
||||
excercise: string;
|
||||
@ -22,8 +22,31 @@ interface FormValues {
|
||||
drugsExplanation:string;
|
||||
}
|
||||
|
||||
export default function RecreationalHobbiesSection7(){
|
||||
const [values, setValues] = React.useState<FormValues>({
|
||||
type Props = {
|
||||
handleFormSection7Data:(
|
||||
hobbies: string|undefined,
|
||||
educationLevel: string|undefined,
|
||||
excercise: string|undefined,
|
||||
excerciseExplanation: string|undefined,
|
||||
tobacco: string|undefined,
|
||||
tobaccoExplanation: string|undefined,
|
||||
alcohol: string|undefined,
|
||||
alcoholExplanation: string|undefined,
|
||||
healthyDiet: string|undefined,
|
||||
healthyDietExplanation: string|undefined,
|
||||
sleep: string|undefined,
|
||||
sleepExplanation: string|undefined,
|
||||
workSchool: string|undefined,
|
||||
workSchoolExplanation: string|undefined,
|
||||
familyLife: string|undefined,
|
||||
familyLifeExplanation: string|undefined,
|
||||
drugs: string|undefined,
|
||||
drugsExplanation:string|undefined,
|
||||
)=> void
|
||||
}
|
||||
|
||||
export default function RecreationalHobbiesSection7({handleFormSection7Data}:Props){
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
hobbies: '',
|
||||
educationLevel: '',
|
||||
excercise:'',
|
||||
@ -43,6 +66,31 @@ export default function RecreationalHobbiesSection7(){
|
||||
drugs: '',
|
||||
drugsExplanation:''
|
||||
});
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection7Data(
|
||||
patient.hobbies,
|
||||
patient.educationLevel,
|
||||
patient.excercise,
|
||||
patient.excerciseExplanation,
|
||||
patient.tobacco,
|
||||
patient.tobaccoExplanation,
|
||||
patient.alcohol,
|
||||
patient.alcoholExplanation,
|
||||
patient.healthyDiet,
|
||||
patient.healthyDietExplanation,
|
||||
patient.sleep,
|
||||
patient.sleepExplanation,
|
||||
patient.workSchool,
|
||||
patient.workSchoolExplanation,
|
||||
patient.familyLife,
|
||||
patient.familyLifeExplanation,
|
||||
patient.drugs,
|
||||
patient.drugsExplanation
|
||||
)
|
||||
},[patient])
|
||||
|
||||
return(
|
||||
<>
|
||||
|
||||
@ -55,7 +103,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
label=""
|
||||
name='explanation'
|
||||
onChange={(event:any) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
hobbies: event.target.value,
|
||||
}));
|
||||
@ -69,7 +117,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
educationLevel: event.target.value,
|
||||
}));
|
||||
@ -91,7 +139,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
excercise: event.target.value,
|
||||
}));
|
||||
@ -105,12 +153,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.excercise!=='Yes'}
|
||||
disabled={patient.excercise!=='Yes'}
|
||||
variant="outlined"
|
||||
label="Times per week?"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
excerciseExplanation: event.target.value,
|
||||
}));
|
||||
@ -125,7 +173,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
tobacco: event.target.value,
|
||||
}));
|
||||
@ -139,12 +187,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.tobacco!=='Yes'}
|
||||
disabled={patient.tobacco!=='Yes'}
|
||||
variant="outlined"
|
||||
label="Packs/Cans per day(If you have quit, when did you quit?)"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
excerciseExplanation: event.target.value,
|
||||
}));
|
||||
@ -159,7 +207,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
alcohol: event.target.value,
|
||||
}));
|
||||
@ -173,12 +221,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.alcohol!=='Yes'}
|
||||
disabled={patient.alcohol!=='Yes'}
|
||||
variant="outlined"
|
||||
label="How many drinks per week?"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
alcoholExplanation: event.target.value,
|
||||
}));
|
||||
@ -193,7 +241,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
healthyDiet: event.target.value,
|
||||
}));
|
||||
@ -207,12 +255,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.healthyDiet!=='No'}
|
||||
disabled={patient.healthyDiet!=='No'}
|
||||
variant="outlined"
|
||||
label="If no, explain"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
healthyDietExplanation: event.target.value,
|
||||
}));
|
||||
@ -227,7 +275,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
sleep: event.target.value,
|
||||
}));
|
||||
@ -241,12 +289,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.sleep!=='No'}
|
||||
disabled={patient.sleep!=='No'}
|
||||
variant="outlined"
|
||||
label="If no, explain"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
sleepExplanation: event.target.value,
|
||||
}));
|
||||
@ -261,7 +309,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
workSchool: event.target.value,
|
||||
}));
|
||||
@ -275,12 +323,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.workSchool!=='Yes'}
|
||||
disabled={patient.workSchool!=='Yes'}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
workSchool: event.target.value,
|
||||
}));
|
||||
@ -295,7 +343,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
familyLife: event.target.value,
|
||||
}));
|
||||
@ -309,12 +357,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.familyLife!=='Yes'}
|
||||
disabled={patient.familyLife!=='Yes'}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
familyLifeExplanation: event.target.value,
|
||||
}));
|
||||
@ -329,7 +377,7 @@ export default function RecreationalHobbiesSection7(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
drugs: event.target.value,
|
||||
}));
|
||||
@ -343,12 +391,12 @@ export default function RecreationalHobbiesSection7(){
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={values.drugs!=='Yes'}
|
||||
disabled={patient.drugs!=='Yes'}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
drugsExplanation: event.target.value,
|
||||
}));
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
interface FormValues {
|
||||
interface Patient {
|
||||
eyes: string;
|
||||
IntestinesBowls: string;
|
||||
jointsBones:string;
|
||||
@ -21,8 +21,30 @@ interface FormValues {
|
||||
explanation:string;
|
||||
}
|
||||
|
||||
export default function SystemReviewSection6(){
|
||||
const [values, setValues] = React.useState<FormValues>({
|
||||
type Props = {
|
||||
handleFormSection6Data:(
|
||||
eyes: string|undefined,
|
||||
IntestinesBowls: string|undefined,
|
||||
jointsBones:string|undefined,
|
||||
allergies: string|undefined,
|
||||
earsNoseMouth: string|undefined,
|
||||
urinary: string|undefined,
|
||||
skin: string|undefined,
|
||||
psychological: string|undefined,
|
||||
heart: string|undefined,
|
||||
muscles: string|undefined,
|
||||
internalOrgans: string|undefined,
|
||||
gynecological: string|undefined,
|
||||
lungsBreathing: string|undefined,
|
||||
nerves: string|undefined,
|
||||
blood: string|undefined,
|
||||
prostate: string|undefined,
|
||||
explanation:string|undefined,
|
||||
)=> void
|
||||
}
|
||||
|
||||
export default function SystemReviewSection6({handleFormSection6Data}:Props){
|
||||
const [patient, setPatients] = React.useState<Patient>({
|
||||
eyes: '',
|
||||
IntestinesBowls: '',
|
||||
jointsBones:'',
|
||||
@ -41,6 +63,28 @@ export default function SystemReviewSection6(){
|
||||
prostate: '',
|
||||
explanation:'',
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection6Data(
|
||||
patient.eyes,
|
||||
patient.IntestinesBowls,
|
||||
patient.jointsBones,
|
||||
patient.allergies,
|
||||
patient.earsNoseMouth,
|
||||
patient.urinary,
|
||||
patient.skin,
|
||||
patient.psychological,
|
||||
patient.heart,
|
||||
patient.muscles,
|
||||
patient.internalOrgans,
|
||||
patient.gynecological,
|
||||
patient.lungsBreathing,
|
||||
patient.nerves,
|
||||
patient.blood,
|
||||
patient.prostate,
|
||||
patient.explanation,
|
||||
)
|
||||
},[patient])
|
||||
return(
|
||||
<>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
@ -54,7 +98,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
eyes: event.target.value,
|
||||
}));
|
||||
@ -72,9 +116,9 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
presentProblemBefore: event.target.value,
|
||||
IntestinesBowls: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
@ -90,7 +134,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
jointsBones: event.target.value,
|
||||
}));
|
||||
@ -108,7 +152,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
allergies: event.target.value,
|
||||
}));
|
||||
@ -126,7 +170,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
earsNoseMouth: event.target.value,
|
||||
}));
|
||||
@ -144,7 +188,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
urinary: event.target.value,
|
||||
}));
|
||||
@ -162,7 +206,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
skin: event.target.value,
|
||||
}));
|
||||
@ -180,7 +224,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
psychological: event.target.value,
|
||||
}));
|
||||
@ -198,7 +242,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
heart: event.target.value,
|
||||
}));
|
||||
@ -216,7 +260,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
muscles: event.target.value,
|
||||
}));
|
||||
@ -234,7 +278,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
internalOrgans: event.target.value,
|
||||
}));
|
||||
@ -252,7 +296,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
gynecological: event.target.value,
|
||||
}));
|
||||
@ -271,7 +315,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
lungsBreathing: event.target.value,
|
||||
}));
|
||||
@ -289,7 +333,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
nerves: event.target.value,
|
||||
}));
|
||||
@ -307,7 +351,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
blood: event.target.value,
|
||||
}));
|
||||
@ -325,7 +369,7 @@ export default function SystemReviewSection6(){
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
prostate: event.target.value,
|
||||
}));
|
||||
@ -343,8 +387,9 @@ export default function SystemReviewSection6(){
|
||||
variant="outlined"
|
||||
label=""
|
||||
name='explanation'
|
||||
value={patient.explanation}
|
||||
onChange={(event:any) => {
|
||||
setValues((prevValues) => ({
|
||||
setPatients((prevValues) => ({
|
||||
...prevValues,
|
||||
explanation: event.target.value,
|
||||
}));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user