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

Compare commits

base: sonika:5add485a0b892a62755422ac771bca0573240b06
Branches Tags
sonika:master
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
...
compare: sonika:84a55d48c895a452a416ff21ecd48b952475a813
Branches Tags
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
sonika:master

11 Commits
5add485a0b ... 84a55d48c8

Author SHA1 Message Date
vipeeshpavithran
84a55d48c8 Merge branch 'develop' into feature/view-patient-data 2023-09-05 14:37:11 +05:30
vipeesh.p
a1b090cc82 Merge pull request 'feature/patientSubmitData' (#2) from feature/patientSubmitData into develop 
Reviewed-on: #2
 2023-09-05 09:04:03 +00:00
sonika
0293126f77 allpatient data 2023-09-05 13:16:32 +05:30
sonika
65b559a4fb section 8 data to main 2023-09-04 23:13:32 +05:30
sonika
867dac8327 section 7 data to main 2023-09-04 22:58:24 +05:30
sonika
9b3444a4f6 section6 to main 2023-09-04 22:35:02 +05:30
sonika
a025a32a7f section5 data to main 2023-09-04 22:23:45 +05:30
sonika
3a994d4269 section4 data to main 2023-09-04 22:11:48 +05:30
sonika
f1527188ed section 3 data to main 2023-09-04 21:32:04 +05:30
sonika
25c213d1f7 section2 data to main 2023-09-04 21:10:31 +05:30
sonika
ab27164ed8 section 1 data to the main page 2023-09-04 20:35:18 +05:30
9 changed files with 1141 additions and 430 deletions
Show Stats Expand all files Collapse all files

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

@ -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>
</>
)
};

192
src/Components/PatientForm/MedicalHistorySection3.tsx
View File

@ -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>
</>
)}

57
src/Components/PatientForm/OtherDetails8.tsx
View File

@ -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
}
export default function OtherDetails8({handleFormSection8Data}:Props){
const [values, setValues] = React.useState<FormValues>({
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,
}));

232
src/Components/PatientForm/PainAnalysisSection4.tsx
View File

@ -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;
}
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
}
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'),
});
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>
</>
)}

76
src/Components/PatientForm/PastTreatment5.tsx
View File

@ -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,
}));

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

@ -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,30 +57,291 @@ 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 [patient, setPatient] = React.useState<Patient>({
fullName: "",
homePhone: "",
cellPhone: "",
email: "",
age: 0,
dateOfBirth: "",
socialSecurityNumber: "",
mailingAddress: "",
city: "",
state: "",
zipCode: "",
gender: "",
maritalStatus: "",
});
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 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 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 = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
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) => {
@ -106,6 +351,7 @@ export default function PatientForm(){
const handleCheckboxChange = (event:any) => {
setIsChecked(event.target.checked);
};
return(
@ -113,7 +359,7 @@ export default function PatientForm(){
<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/>

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

@ -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" />

108
src/Components/PatientForm/RecreationalHobbiesSection7.tsx
View File

@ -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,
}));

89
src/Components/PatientForm/SyestemReviewSection6.tsx
View File

@ -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,
}));