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

mobile responsive changes

Browse Source
This commit is contained in:
vipeeshpavithran 2023-09-08 13:48:44 +05:30
parent 66f0b3941e
commit d1e1952298
9 changed files with 2873 additions and 1844 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.css
View File

@ -1,37 +1,34 @@
.app-screen-constants .MuiInputBase-root{ /* .app-screen-constants .MuiInputBase-root{
margin:auto; margin:auto;
max-width:1500; max-width:1500;
height:800 !important; height:800 !important;
} } */
.collapsable-form-style .MuiInputBase-root { /* .collapsable-form-style .MuiInputBase-root {
width: 300px !important; margin:3%;
margin: 5%;
height: 50px height: 50px
} }
.collapsable-form-style-form7 .MuiInputBase-root { .collapsable-form-style-form7 .MuiInputBase-root {
width: 350px !important;
margin: 3%; margin: 3%;
height: 50px height: 50px
} }
.collapsable-form-style-multiline .MuiInputBase-root { .collapsable-form-style-multiline .MuiInputBase-root {
width: 350px !important;
margin: 5%; margin: 5%;
min-height: 100px min-height: 100px
} } */
.collapsable-form-style-multiline label { /* .collapsable-form-style-multiline label {
padding: 15px; padding: 15px;
} } */
.collapsable-form-style label { /* .collapsable-form-style label {
padding: 15px; padding: 15px;
} } */
.collapsable-form-style-form7 label { /* .collapsable-form-style-form7 label {
padding: 13px; padding: 13px;
} } */
.collapsable-form-style-radioButtons{ .collapsable-form-style-radioButtons{
width: 300px !important; width: 300px !important;
@ -41,7 +38,6 @@
} }
.collapsable-form-style-radioButtons-fullwidth{ .collapsable-form-style-radioButtons-fullwidth{
/* width: 300px !important; */
margin: 5%; margin: 5%;
padding-top: 12px; padding-top: 12px;
padding-left: 16px; padding-left: 16px;
@ -58,3 +54,32 @@
.addNew-form-table-style label { .addNew-form-table-style label {
padding: 0px; padding: 0px;
} }
.MuiFormControl-root {
width: 95% !important;
}
.MuiGrid-root .MuiTextField-root {
margin-top: 3%;
margin-bottom: 3%;
}
/* .MuiFormControl-root{
width: 90% !important;
height: 50px !important;
margin-bottom: 1% !important;
}
.MuiTextField-root {
margin-top: 3% !important;
margin-bottom: 5% !important;
}
.collapsable-form-style-multiline label {
padding: 15px;
}
.collapsable-form-style-radioButtons-fullwidth {
margin: 5%;
padding-top: 12px;
padding-left: 16px;
} */

228
src/Components/Helper/AddNewTable.tsx
View File

@ -1,4 +1,17 @@
import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material'; import {
Button,
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
TextField,
Paper,
Grid,
FormLabel,
FormControl,
} from '@mui/material';
import * as React from 'react'; import * as React from 'react';
interface RowData { interface RowData {
@ -13,51 +26,64 @@ interface DataTableProps {
onAddRow: () => void; onAddRow: () => void;
} }
type Props={ type Props = {
handleFormSection5Data:( handleFormSection5Data: (
generalHealth: string|undefined, generalHealth: string | undefined,
presentProblemBefore: string|undefined, presentProblemBefore: string | undefined,
ifYespresentProblemBefore:string|undefined, ifYespresentProblemBefore: string | undefined,
ifYestreatmentProvided: string|undefined, ifYestreatmentProvided: string | undefined,
ifYesOutcome: string|undefined, ifYesOutcome: string | undefined,
strokeBloodclotting: string|undefined, strokeBloodclotting: string | undefined,
ifYesstrokeBloodclotting: string|undefined, ifYesstrokeBloodclotting: string | undefined,
dizzinessFetigue: string|undefined, dizzinessFetigue: string | undefined,
ifyesdizzinessFetigue: string|undefined, ifyesdizzinessFetigue: string | undefined,
antiColligent: string|undefined, antiColligent: string | undefined,
injuriesHospitalization: string|undefined, injuriesHospitalization: string | undefined,
supplementsOrDrugs: string|undefined, supplementsOrDrugs: string | undefined
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
};
}
function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
const [illnessFromData, setIllnessFromData] = React.useState<any>({ const [illnessFromData, setIllnessFromData] = React.useState<any>({
id:0,date:'',illness:'',treatment:'',results:'' id: 0,
}) date: '',
illness: '',
treatment: '',
results: '',
});
const [illnessData, setIllnessData] = React.useState<any[]>([ const [illnessData, setIllnessData] = React.useState<any[]>([
{id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'} {
id: 0,
date: 'ex-12-01-2020',
illness: 'knee pain',
treatment: 'surgery',
results: 'cured',
},
]); ]);
const deleteIllnessData = (idToDelete:number) => { const deleteIllnessData = (idToDelete: number) => {
const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete); const updatedIllnessData = illnessData.filter(
(item) => item.id !== idToDelete
);
setIllnessData(updatedIllnessData); setIllnessData(updatedIllnessData);
}; };
const handleAddRow = () => { const handleAddRow = () => {
if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){ if (
illnessFromData.date != '' &&
const newId = Math.max(...illnessData.map(item => item.id)) + 1; illnessFromData.illness != '' &&
illnessFromData.treatment != '' &&
illnessFromData.results != ''
) {
const newId = Math.max(...illnessData.map((item) => item.id)) + 1;
const newIllnessData = [ const newIllnessData = [
...illnessData, ...illnessData,
{ {
...illnessFromData, ...illnessFromData,
id: newId id: newId,
} },
]; ];
setIllnessData(newIllnessData); setIllnessData(newIllnessData);
setIllnessFromData({ setIllnessFromData({
@ -65,88 +91,136 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
date: '', date: '',
illness: '', illness: '',
treatment: '', treatment: '',
results: '' results: '',
}); });
} }
}; };
return ( return (
<> <>
<FormLabel>If yes, Please enter the details below:</FormLabel><br></br> <FormLabel>If yes, Please enter the details below:</FormLabel>
{type!=="display"? <br></br>
{type !== 'display' ? (
<FormControl> <FormControl>
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}> <Grid container spacing={1.5}>
<Grid item xs={2} className='addNew-form-table-style'> <Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Date" label='Date'
value={illnessFromData.date} value={illnessFromData.date}
onChange={(event) => { onChange={(event) => {
setIllnessFromData((prevValues:any) => ({ setIllnessFromData((prevValues: any) => ({
...prevValues, ...prevValues,
date: event.target.value, date: event.target.value,
})); }));
}} }}
/> />
</Grid> </Grid>
<Grid item xs={3.7} className='addNew-form-table-style'> <Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Injury/Illness/Surgeries" label='Injury/Illness/Surgeries'
value={illnessFromData.illness} value={illnessFromData.illness}
onChange={(event) => { onChange={(event) => {
setIllnessFromData((prevValues:any) => ({ setIllnessFromData((prevValues: any) => ({
...prevValues, ...prevValues,
illness: event.target.value, illness: event.target.value,
})); }));
}} }}
/> />
</Grid> </Grid>
<Grid item xs={3.5} className='addNew-form-table-style'> <Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Treatment" label='Treatment'
value={illnessFromData.treatment} value={illnessFromData.treatment}
onChange={(event) => { onChange={(event) => {
setIllnessFromData((prevValues:any) => ({ setIllnessFromData((prevValues: any) => ({
...prevValues, ...prevValues,
treatment: event.target.value, treatment: event.target.value,
})); }));
}} }}
/> />
</Grid> </Grid>
<Grid item xs={2} className='addNew-form-table-style'> <Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Results" label='Results'
value={illnessFromData.results} value={illnessFromData.results}
onChange={(event) => { onChange={(event) => {
setIllnessFromData((prevValues:any) => ({ setIllnessFromData((prevValues: any) => ({
...prevValues, ...prevValues,
results: event.target.value, results: event.target.value,
})); }));
}} }}
/> />
</Grid> </Grid>
<Grid item xs={0.8} className='addNew-form-table-style'> <Grid
<Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button> item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<Button
sx={{ height: '40px', bgcolor: 'skyblue' }}
onClick={handleAddRow}
>
Add
</Button>
</Grid> </Grid>
</Grid> </Grid>
</FormControl> </FormControl>
:""} ) : (
''
)}
<TableContainer className='illness-table-style'>
<TableContainer sx={{width:800}} className='illness-table-style'> <Table aria-label='simple table'>
<Table aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align='left'>Date</TableCell> <TableCell align='left'>Date</TableCell>
<TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell> <TableCell align='center'>
Injury/Fracture/Illness/Surgeries
</TableCell>
<TableCell align='left'>Treatment</TableCell> <TableCell align='left'>Treatment</TableCell>
<TableCell align='left'>Results</TableCell> <TableCell align='left'>Results</TableCell>
<TableCell align='left'></TableCell> <TableCell align='left'></TableCell>
@ -155,25 +229,23 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
<TableBody> <TableBody>
{illnessData.map((row, index) => ( {illnessData.map((row, index) => (
<TableRow key={index}> <TableRow key={index}>
<TableCell align='left'>{row.date}</TableCell>
<TableCell align='center'>{row.illness}</TableCell>
<TableCell align='left'>{row.treatment}</TableCell>
<TableCell align='left'>{row.results}</TableCell>
<TableCell align='left'> <TableCell align='left'>
{row.date} {type !== 'display' ? (
</TableCell> <Button
<TableCell align='center'> sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
{row.illness} onClick={(e) => {
</TableCell> deleteIllnessData(row.id);
<TableCell align='left'> }}
{row.treatment} >
</TableCell>
<TableCell align='left'>
{row.results}
</TableCell>
<TableCell align='left'>
{type!=="display"?
<Button sx={{height:'30x',width:20, bgcolor:'skyblue'}}
onClick={(e)=>{deleteIllnessData(row.id)}}>
Delete Delete
</Button> </Button>
:""} ) : (
''
)}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@ -182,6 +254,6 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
</TableContainer> </TableContainer>
</> </>
); );
}; }
export default DataTable; export default DataTable;

4
src/Components/ImageMarker/PatientImageMarker.css
View File

@ -69,6 +69,10 @@
gap: 0; gap: 0;
margin-bottom: 2%; margin-bottom: 2%;
} }
.image-marker-div .marker-div {
/* margin-right: 5%; */
margin-top: 3%;
}
} }
@media only screen and (min-width: 1400px) { @media only screen and (min-width: 1400px) {

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

@ -1,26 +1,38 @@
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; import {
import { useFormik } from "formik"; Button,
import * as yup from "yup"; Checkbox,
FormControl,
FormControlLabel,
FormGroup,
FormLabel,
Grid,
Paper,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
interface Patient { interface Patient {
maritalStatus: string | undefined, maritalStatus: string | undefined;
numberOfChildren: string | undefined, numberOfChildren: string | undefined;
occupation: string | undefined, occupation: string | undefined;
hoursPerWeek: number | string | undefined, hoursPerWeek: number | string | undefined;
employer: string | undefined, employer: string | undefined;
businessPhone: string | undefined, businessPhone: string | undefined;
spouseName: string | undefined, spouseName: string | undefined;
spouseEmployer: string | undefined, spouseEmployer: string | undefined;
spouseBusinessPhone: string | undefined, spouseBusinessPhone: string | undefined;
emergencyContact: string | undefined, emergencyContact: string | undefined;
relationship: string | undefined, relationship: string | undefined;
spousePhone: string | undefined, spousePhone: string | undefined;
} }
type Props = { type Props = {
handleFormSection2Data:( handleFormSection2Data: (
maritalStatus: string | undefined, maritalStatus: string | undefined,
numberOfChildren: string | undefined, numberOfChildren: string | undefined,
occupation: string | undefined, occupation: string | undefined,
@ -32,30 +44,33 @@ type Props = {
spouseBusinessPhone: string | undefined, spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined, emergencyContact: string | undefined,
relationship: string | undefined, relationship: string | undefined,
spousePhone: string | undefined, spousePhone: string | undefined
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
} };
export default function FamilyFormSection({
export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){ handleFormSection2Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
maritalStatus:'', maritalStatus: '',
numberOfChildren:'', numberOfChildren: '',
occupation:'', occupation: '',
hoursPerWeek:'', hoursPerWeek: '',
employer:'', employer: '',
businessPhone:'', businessPhone: '',
spouseName:'', spouseName: '',
spouseEmployer:'', spouseEmployer: '',
spouseBusinessPhone:'', spouseBusinessPhone: '',
emergencyContact:'', emergencyContact: '',
relationship:'', relationship: '',
spousePhone:'' spousePhone: '',
}); });
useEffect(()=>{ useEffect(() => {
handleFormSection2Data( handleFormSection2Data(
patient.maritalStatus, patient.maritalStatus,
patient.numberOfChildren, patient.numberOfChildren,
@ -68,110 +83,153 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
patient.spouseBusinessPhone, patient.spouseBusinessPhone,
patient.emergencyContact, patient.emergencyContact,
patient.relationship, patient.relationship,
patient.spousePhone, patient.spousePhone
) );
},[patient]) }, [patient]);
return( return (
<> <>
<Grid container direction="row"> <Grid container direction='row'>
<Grid item xs={8} className='collapsable-form-style-radioButtons'> <Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Marital Status</FormLabel> <FormLabel>Marital Status</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby='demo-radio-buttons-group-label'
name="maritalStatus" name='maritalStatus'
defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
onChange={(e)=>{ ? patientDataDiplay.maritalStatus
setPatient((prevValues:any) => ({ : patient.maritalStatus
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
maritalStatus: e.target.value, maritalStatus: e.target.value,
})); }));
}} }}
> >
<FormControlLabel value="married" control={<Radio />} label="Married" disabled={type=='display'}/> <FormControlLabel
<FormControlLabel value="single" control={<Radio />} label="Single" disabled={type=='display'}/> value='married'
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" disabled={type=='display'}/> control={<Radio />}
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" disabled={type=='display'}/> label='Married'
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" disabled={type=='display'}/> disabled={type == 'display'}
/>
<FormControlLabel
value='single'
control={<Radio />}
label='Single'
disabled={type == 'display'}
/>
<FormControlLabel
value='widowed'
control={<Radio />}
label='Widowed'
disabled={type == 'display'}
/>
<FormControlLabel
value='seperated'
control={<Radio />}
label='Seperated'
disabled={type == 'display'}
/>
<FormControlLabel
value='divorced'
control={<Radio />}
label='Divorced'
disabled={type == 'display'}
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid> <Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant='outlined'
variant="outlined" type='number'
type="number" label='Number of Children/Ages'
label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
numberOfChildren: e.target.value, numberOfChildren: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.numberOfChildren
: patient.numberOfChildren
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
// required // required
variant="outlined" variant='outlined'
label="Occupation" label='Occupation'
className='collapsable-form-style' className='collapsable-form-style'
name='occupation' name='occupation'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
occupation: e.target.value, occupation: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.occupation:patient.occupation} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.occupation
: patient.occupation
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Hours/Week" label='Hours/Week'
type="number" type='number'
className='collapsable-form-style' className='collapsable-form-style'
name='hoursPerWeek' name='hoursPerWeek'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
hoursPerWeek: e.target.value, hoursPerWeek: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.hoursPerWeek
: patient.hoursPerWeek
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid <Grid
xs={12} xs={12}
@ -179,197 +237,245 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Employer" label='Employer'
className='collapsable-form-style' className='collapsable-form-style'
name='employer' name='employer'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
employer: e.target.value, employer: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.employer:patient.employer} value={
disabled={type=='display'} type == 'display' ? patientDataDiplay.employer : patient.employer
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Business Phone" label='Business Phone'
type="number" type='number'
className='collapsable-form-style' className='collapsable-form-style'
name='businessPhone' name='businessPhone'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
businessPhone: e.target.value, businessPhone: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.businessPhone
: patient.businessPhone
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '></Grid> className='collapsable-form-style '
></Grid>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel> <FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style '> sm={12}
className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Spouse's Name" label="Spouse's Name"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseName' name='spouseName'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
spouseName: e.target.value, spouseName: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.spouseName:patient.spouseName} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.spouseName
: patient.spouseName
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Spouse's Employer" label="Spouse's Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseEmployer' name='spouseEmployer'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
spouseEmployer: e.target.value, spouseEmployer: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.spouseEmployer
: patient.spouseEmployer
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Business Phone" label='Business Phone'
type="number" type='number'
className='collapsable-form-style' className='collapsable-form-style'
name='spouseBusinessPhone' name='spouseBusinessPhone'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
spouseBusinessPhone: e.target.value, spouseBusinessPhone: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.spouseBusinessPhone
: patient.spouseBusinessPhone
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel> <FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
</Grid> </Grid>
<Grid
<Grid item item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Emergency Contact" label='Emergency Contact'
className='collapsable-form-style' className='collapsable-form-style'
name='emergencyContact' name='emergencyContact'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
emergencyContact: e.target.value, emergencyContact: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.emergencyContact
: patient.emergencyContact
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
className='collapsable-form-style '> className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Relationship" label='Relationship'
className='collapsable-form-style' className='collapsable-form-style'
name='relationship' name='relationship'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
relationship: e.target.value, relationship: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.relationship:patient.relationship} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.relationship
: patient.relationship
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style '> sm={12}
className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
type="number" type='number'
label="Phone" label='Phone'
className='collapsable-form-style' className='collapsable-form-style'
name='spousePhone' name='spousePhone'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
spousePhone: e.target.value, spousePhone: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.spousePhone
: patient.spousePhone
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
</Grid> </Grid>
</> </>
) );
}; }

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

@ -1,81 +1,102 @@
import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material"; import {
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; Grid,
import React, { useEffect } from "react"; FormLabel,
TextField,
FormControl,
RadioGroup,
FormControlLabel,
Radio,
} from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import React, { useEffect } from 'react';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import dayjs from "dayjs"; import dayjs from 'dayjs';
interface Patient { interface Patient {
familyHistory: string; familyHistory: string;
sleep: string; sleep: string;
pillow:string; pillow: string;
orthotics:string; orthotics: string;
brestExam: any; brestExam: any;
pregnancy:string; pregnancy: string;
menstralCycle: any; menstralCycle: any;
} }
type Props = { type Props = {
handleFormSection8Data:( handleFormSection8Data: (
familyHistory: string|undefined, familyHistory: string | undefined,
sleep: string|undefined, sleep: string | undefined,
pillow:string|undefined, pillow: string | undefined,
orthotics:string|undefined, orthotics: string | undefined,
brestExam: any, brestExam: any,
pregnancy:string|undefined, pregnancy: string | undefined,
menstralCycle: any, menstralCycle: any
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
} };
export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){
export default function OtherDetails8({
handleFormSection8Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
familyHistory: '', familyHistory: '',
sleep: '', sleep: '',
pillow:'', pillow: '',
orthotics:'', orthotics: '',
brestExam: dayjs('2022-04-17'), brestExam: dayjs('2022-04-17'),
pregnancy:'', pregnancy: '',
menstralCycle: dayjs('2022-04-17'), menstralCycle: dayjs('2022-04-17'),
}); });
useEffect(()=>{ useEffect(() => {
handleFormSection8Data( handleFormSection8Data(
patient.familyHistory, patient.familyHistory,
patient.sleep, patient.sleep,
patient.pillow, patient.pillow,
patient.orthotics, patient.orthotics,
patient.brestExam=dayjs(patient.brestExam), (patient.brestExam = dayjs(patient.brestExam)),
patient.pregnancy, patient.pregnancy,
patient.menstralCycle=dayjs(patient.menstralCycle) (patient.menstralCycle = dayjs(patient.menstralCycle))
) );
},[patient]) }, [patient]);
const formatDate = (inputDate:any) => { const formatDate = (inputDate: any) => {
const date = new Date(inputDate); const date = new Date(inputDate);
const year = date.getUTCFullYear(); const year = date.getUTCFullYear();
const month = String(date.getUTCMonth() + 1).padStart(2, '0'); const month = String(date.getUTCMonth() + 1).padStart(2, '0');
const day = String(date.getUTCDate()+1).padStart(2, '0'); const day = String(date.getUTCDate() + 1).padStart(2, '0');
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
return (
return(
<> <>
<Grid container direction="row"> <Grid container direction='row'>
<Grid item xs={12} className='collapsable-form-style-multiline'> <Grid
<FormLabel>Family history and health status:</FormLabel><br></br> item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>Family history and health status:</FormLabel>
<br></br>
<TextField <TextField
multiline multiline
variant="outlined" variant='outlined'
label="" label=''
value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory} value={
disabled={type=='display'} type == 'display'
onChange={(event:any) => { ? patientDataDiplay.familyHistory
: patient.familyHistory
}
disabled={type == 'display'}
onChange={(event: any) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
familyHistory: event.target.value, familyHistory: event.target.value,
@ -88,8 +109,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl> <FormControl>
<FormLabel>How do you sleep?</FormLabel> <FormLabel>How do you sleep?</FormLabel>
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep} defaultValue={
type == 'display' ? patientDataDiplay.sleep : patient.sleep
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -97,9 +120,24 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Back" control={<Radio />} label="Back" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="Side" control={<Radio />} label="Side" /> disabled={type == 'display'}
<FormControlLabel disabled={type=='display'} value="Stomach" control={<Radio />} label="Stomach" /> value='Back'
control={<Radio />}
label='Back'
/>
<FormControlLabel
disabled={type == 'display'}
value='Side'
control={<Radio />}
label='Side'
/>
<FormControlLabel
disabled={type == 'display'}
value='Stomach'
control={<Radio />}
label='Stomach'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
@ -108,8 +146,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl> <FormControl>
<FormLabel>Do you use a pillow?</FormLabel> <FormLabel>Do you use a pillow?</FormLabel>
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow} defaultValue={
type == 'display' ? patientDataDiplay.pillow : patient.pillow
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -117,8 +157,18 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
@ -127,8 +177,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl> <FormControl>
<FormLabel>Do you wear orthotics or arch support?</FormLabel> <FormLabel>Do you wear orthotics or arch support?</FormLabel>
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics} defaultValue={
type == 'display'
? patientDataDiplay.orthotics
: patient.orthotics
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -136,27 +190,52 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br> item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormLabel>Date of last gynecological and brest exam?</FormLabel>
<br></br>
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={type=='display'?patientDataDiplay.brestExam:patient.brestExam} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.brestExam
: patient.brestExam
}
disabled={type == 'display'}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event);
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
brestExam: formattedDate, brestExam: formattedDate,
})); }));
}} }}
renderInput={(params) => <TextField variant="outlined" {...params} />} renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/> />
</LocalizationProvider> </LocalizationProvider>
</FormControl> </FormControl>
@ -170,8 +249,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl> <FormControl>
<FormLabel>Possible pregnancy?</FormLabel> <FormLabel>Possible pregnancy?</FormLabel>
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy} defaultValue={
type == 'display'
? patientDataDiplay.pregnancy
: patient.pregnancy
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -179,34 +262,57 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br> item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormLabel>Date of last menstrual cycle?</FormLabel>
<br></br>
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.menstralCycle
: patient.menstralCycle
}
disabled={type == 'display'}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event);
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
menstralCycle: formattedDate, menstralCycle: formattedDate,
})); }));
}} }}
renderInput={(params) => <TextField variant="outlined" {...params} />} renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/> />
</LocalizationProvider> </LocalizationProvider>
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
</> </>
) );
} }

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

@ -1,12 +1,22 @@
import * as React from 'react'; import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import {
Checkbox,
FormControlLabel,
TextField,
FormGroup,
Grid,
FormControl,
FormLabel,
Radio,
RadioGroup,
} from '@mui/material';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import path from 'path'; import path from 'path';
import { useEffect } from 'react'; import { useEffect } from 'react';
interface Patient { interface Patient {
chiefComplaint:string; chiefComplaint: string;
painWorse: string[]; painWorse: string[];
painBetter: string[]; painBetter: string[];
painQuality: string[]; painQuality: string[];
@ -15,42 +25,45 @@ interface Patient {
painDuration: string; painDuration: string;
currentTreatment: string; currentTreatment: string;
treatmentGoal: string; treatmentGoal: string;
selfTreatment:string; selfTreatment: string;
} }
type Props = { type Props = {
handleFormSection4Data:( handleFormSection4Data: (
chiefComplaint:string|undefined, chiefComplaint: string | undefined,
painWorse: any, painWorse: any,
painBetter: any, painBetter: any,
painQuality: any, painQuality: any,
painWorstTime: any, painWorstTime: any,
currentComplaintIssues: any, currentComplaintIssues: any,
painDuration: string|undefined, painDuration: string | undefined,
currentTreatment: string|undefined, currentTreatment: string | undefined,
treatmentGoal: string|undefined, treatmentGoal: string | undefined,
selfTreatment:string|undefined, selfTreatment: string | undefined
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
} };
export default function PainAnalysisSection4({
export default function PainAnalysisSection4({handleFormSection4Data,patientDataDiplay,type}:Props){ handleFormSection4Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
chiefComplaint:'', chiefComplaint: '',
painWorse:[], painWorse: [],
painBetter:[], painBetter: [],
painQuality:[], painQuality: [],
painWorstTime:[], painWorstTime: [],
currentComplaintIssues:[], currentComplaintIssues: [],
painDuration:'', painDuration: '',
currentTreatment:'', currentTreatment: '',
treatmentGoal:'', treatmentGoal: '',
selfTreatment:'', selfTreatment: '',
}); });
useEffect(()=>{ useEffect(() => {
handleFormSection4Data( handleFormSection4Data(
patient.chiefComplaint, patient.chiefComplaint,
patient.painWorse, patient.painWorse,
@ -61,11 +74,13 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
patient.painDuration, patient.painDuration,
patient.currentTreatment, patient.currentTreatment,
patient.treatmentGoal, patient.treatmentGoal,
patient.selfTreatment, patient.selfTreatment
) );
},[patient]) }, [patient]);
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handlePainWorseChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target; const { name, checked } = event.target;
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -75,7 +90,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
})); }));
}; };
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handlePainBetterChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target; const { name, checked } = event.target;
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -85,7 +102,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
})); }));
}; };
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handlePainQualityChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target; const { name, checked } = event.target;
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -95,7 +114,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
})); }));
}; };
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handlePainWorstTimeChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target; const { name, checked } = event.target;
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -105,7 +126,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
})); }));
}; };
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleCurrentComplaintIssuesTimeChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target; const { name, checked } = event.target;
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -115,254 +138,441 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
})); }));
}; };
return( return (
<> <>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel> <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
</Grid> </Grid>
<Grid container direction="row"> <Grid container direction='row'>
<Grid item xs={4} className='collapsable-form-style-form7'> <Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="How did your Chief complaint start?(ex-fell on ice)" label='How did your Chief complaint start?(ex-fell on ice)'
name='chiefComplaint' name='chiefComplaint'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
chiefComplaint: e.target.value, chiefComplaint: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.chiefComplaint
: patient.chiefComplaint
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>What makes your pain worse?</FormLabel> <FormLabel>What makes your pain worse?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />} control={
label="Bending" <Checkbox onChange={handlePainWorseChange} name='Bending' />
disabled={type=='display'} }
label='Bending'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />} control={
label="Standing" <Checkbox onChange={handlePainWorseChange} name='Standing' />
disabled={type=='display'} }
label='Standing'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />} control={
label="Sitting" <Checkbox onChange={handlePainWorseChange} name='Sitting' />
disabled={type=='display'} }
label='Sitting'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />} control={
label="Walking" <Checkbox onChange={handlePainWorseChange} name='Walking' />
disabled={type=='display'} }
label='Walking'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Others" />} control={
label="Others" <Checkbox onChange={handlePainWorseChange} name='Others' />
disabled={type=='display'} }
label='Others'
disabled={type == 'display'}
/> />
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>What makes your pain better?</FormLabel> <FormLabel>What makes your pain better?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />} control={
label="laying down" <Checkbox
disabled={type=='display'} onChange={handlePainBetterChange}
name='laying down'
/>
}
label='laying down'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />} control={
label="Standing" <Checkbox onChange={handlePainBetterChange} name='Standing' />
disabled={type=='display'} }
label='Standing'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />} control={
label="Sitting" <Checkbox onChange={handlePainBetterChange} name='Sitting' />
disabled={type=='display'} }
label='Sitting'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />} control={
label="Walking" <Checkbox onChange={handlePainBetterChange} name='Walking' />
disabled={type=='display'} }
label='Walking'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Others" />} control={
label="Others" <Checkbox onChange={handlePainBetterChange} name='Others' />
disabled={type=='display'} }
label='Others'
disabled={type == 'display'}
/> />
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>What is the quality of your pain?</FormLabel> <FormLabel>What is the quality of your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />} control={
label="Sharp" <Checkbox onChange={handlePainQualityChange} name='sharp' />
disabled={type=='display'} }
label='Sharp'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />} control={
label="Dull/Ache" <Checkbox
disabled={type=='display'} onChange={handlePainQualityChange}
name='Dull/Ache'
/>
}
label='Dull/Ache'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />} control={
label="Throbbing" <Checkbox
disabled={type=='display'} onChange={handlePainQualityChange}
name='Throbbing'
/>
}
label='Throbbing'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />} control={
label="Tingling/Numbness/Burning" <Checkbox
disabled={type=='display'} onChange={handlePainQualityChange}
name='Tingling/Numbness/Burning'
/>
}
label='Tingling/Numbness/Burning'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Others" />} control={
label="Others" <Checkbox onChange={handlePainQualityChange} name='Others' />
disabled={type=='display'} }
label='Others'
disabled={type == 'display'}
/> />
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>What is the worst time for your pain?</FormLabel> <FormLabel>What is the worst time for your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />} control={
label="Morning" <Checkbox
disabled={type=='display'} onChange={handlePainWorstTimeChange}
name='Morning'
/>
}
label='Morning'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />} control={
label="During day" <Checkbox
disabled={type=='display'} onChange={handlePainWorstTimeChange}
name='During day'
/>
}
label='During day'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />} control={
label="Evening" <Checkbox
disabled={type=='display'} onChange={handlePainWorstTimeChange}
name='Evening'
/>
}
label='Evening'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />} control={
label="Lying in bed" <Checkbox
disabled={type=='display'} onChange={handlePainWorstTimeChange}
name='Lying in bed'
/>
}
label='Lying in bed'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />} control={
label="Others" <Checkbox
disabled={type=='display'} onChange={handlePainWorstTimeChange}
name='Others'
/>
}
label='Others'
disabled={type == 'display'}
/> />
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel> <FormLabel>
How much of the day do you experience your chief complaint?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
painDuration: e.target.value, painDuration: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.painDuration:patient.painDuration} value={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.painDuration
: patient.painDuration
}
sx={{ display: 'flex', flexDirection: 'row' }}
> >
<FormControlLabel disabled={type=='display'} value="0-25%" control={<Radio />} label="0-25%" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="25-50%" control={<Radio />} label="25-50%" /> disabled={type == 'display'}
<FormControlLabel disabled={type=='display'} value="50-75%" control={<Radio />} label="50-75%" /> value='0-25%'
<FormControlLabel disabled={type=='display'} value="75-100%" control={<Radio />} label="75-100%" /> control={<Radio />}
label='0-25%'
/>
<FormControlLabel
disabled={type == 'display'}
value='25-50%'
control={<Radio />}
label='25-50%'
/>
<FormControlLabel
disabled={type == 'display'}
value='50-75%'
control={<Radio />}
label='50-75%'
/>
<FormControlLabel
disabled={type == 'display'}
value='75-100%'
control={<Radio />}
label='75-100%'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Has your current complaint caused any of the following?</FormLabel> <FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> Has your current complaint caused any of the following?
</FormLabel>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />} control={
label="Muscle weakness" <Checkbox
disabled={type=='display'} onChange={handleCurrentComplaintIssuesTimeChange}
name='Muscle weakness'
/>
}
label='Muscle weakness'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />} control={
label="Bowel/Bladder problem" <Checkbox
disabled={type=='display'} onChange={handleCurrentComplaintIssuesTimeChange}
name='Bowel/Bladder problem'
/>
}
label='Bowel/Bladder problem'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />} control={
label="Digestion" <Checkbox
disabled={type=='display'} onChange={handleCurrentComplaintIssuesTimeChange}
name='Digestion'
/>
}
label='Digestion'
disabled={type == 'display'}
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />} control={
label="Cardiac/Respiratory" <Checkbox
disabled={type=='display'} onChange={handleCurrentComplaintIssuesTimeChange}
name='Cardiac/Respiratory'
/>
}
label='Cardiac/Respiratory'
disabled={type == 'display'}
/> />
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel> <FormLabel>
Have you tried any self treatment (ex-ice, heat, excercise) or
taken any medication(over the counter or prescription)?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
selfTreatment: e.target.value, selfTreatment: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.selfTreatment:patient.selfTreatment} value={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.selfTreatment
: patient.selfTreatment
}
sx={{ display: 'flex', flexDirection: 'row' }}
> >
<FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" /> disabled={type == 'display'}
value='yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='no'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}> <Grid
<FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel> item
xs={12}
className='collapsable-form-style'
sx={{ marginTop: 3 }}
>
<FormLabel sx={{ fontWeight: 600 }}>
Expected Treatment Result:
</FormLabel>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style-form7'> <Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="What is your goal from treatment?(ex-play golf without pain)" label='What is your goal from treatment?(ex-play golf without pain)'
name='treatmentGoal' name='treatmentGoal'
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
treatmentGoal: e.target.value, treatmentGoal: e.target.value,
})); }));
}} }}
value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.treatmentGoal
: patient.treatmentGoal
}
disabled={type == 'display'}
/> />
</Grid> </Grid>
</Grid> </Grid>
</> </>
)} );
}

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

@ -1,4 +1,13 @@
import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import {
TextField,
FormControlLabel,
Grid,
Checkbox,
FormControl,
FormLabel,
Radio,
RadioGroup,
} from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import Table from '../Helper/AddNewTable'; import Table from '../Helper/AddNewTable';
import { useEffect } from 'react'; import { useEffect } from 'react';
@ -6,7 +15,7 @@ import { useEffect } from 'react';
interface Patient { interface Patient {
generalHealth: string; generalHealth: string;
presentProblemBefore: string; presentProblemBefore: string;
ifYespresentProblemBefore:string; ifYespresentProblemBefore: string;
ifYestreatmentProvided: string; ifYestreatmentProvided: string;
ifYesOutcome: string; ifYesOutcome: string;
strokeBloodclotting: string; strokeBloodclotting: string;
@ -19,43 +28,45 @@ interface Patient {
} }
type Props = { type Props = {
handleFormSection5Data:( handleFormSection5Data: (
generalHealth: string|undefined, generalHealth: string | undefined,
presentProblemBefore: string|undefined, presentProblemBefore: string | undefined,
ifYespresentProblemBefore:string|undefined, ifYespresentProblemBefore: string | undefined,
ifYestreatmentProvided: string|undefined, ifYestreatmentProvided: string | undefined,
ifYesOutcome: string|undefined, ifYesOutcome: string | undefined,
strokeBloodclotting: string|undefined, strokeBloodclotting: string | undefined,
ifYesstrokeBloodclotting: string|undefined, ifYesstrokeBloodclotting: string | undefined,
dizzinessFetigue: string|undefined, dizzinessFetigue: string | undefined,
ifyesdizzinessFetigue: string|undefined, ifyesdizzinessFetigue: string | undefined,
antiColligent: string|undefined, antiColligent: string | undefined,
injuriesHospitalization: string|undefined, injuriesHospitalization: string | undefined,
supplementsOrDrugs: string|undefined, supplementsOrDrugs: string | undefined
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
} };
export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
export default function PastTreatment5({
handleFormSection5Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
generalHealth: '', generalHealth: '',
presentProblemBefore: '', presentProblemBefore: '',
ifYespresentProblemBefore:'', ifYespresentProblemBefore: '',
ifYestreatmentProvided:'', ifYestreatmentProvided: '',
ifYesOutcome:'', ifYesOutcome: '',
strokeBloodclotting: '', strokeBloodclotting: '',
ifYesstrokeBloodclotting: '', ifYesstrokeBloodclotting: '',
dizzinessFetigue: '', dizzinessFetigue: '',
ifyesdizzinessFetigue:'', ifyesdizzinessFetigue: '',
antiColligent: '', antiColligent: '',
injuriesHospitalization: '', injuriesHospitalization: '',
supplementsOrDrugs:'' supplementsOrDrugs: '',
}); });
useEffect(()=>{ useEffect(() => {
handleFormSection5Data( handleFormSection5Data(
patient.generalHealth, patient.generalHealth,
patient.presentProblemBefore, patient.presentProblemBefore,
@ -68,22 +79,29 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
patient.ifyesdizzinessFetigue, patient.ifyesdizzinessFetigue,
patient.antiColligent, patient.antiColligent,
patient.injuriesHospitalization, patient.injuriesHospitalization,
patient.supplementsOrDrugs, patient.supplementsOrDrugs
) );
},[patient]) }, [patient]);
return( return (
<> <>
<form> <form>
<Grid container direction="row"> <Grid container direction='row'>
<Grid
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Overall your General Healgth is:</FormLabel> <FormLabel>Overall your General Healgth is:</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.generalHealth
: patient.generalHealth
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -91,22 +109,57 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" /> disabled={type == 'display'}
<FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" /> value='Excellent'
<FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" /> control={<Radio />}
<FormControlLabel disabled={type=='display'} value="Poor" control={<Radio />} label="Poor" /> label='Excellent'
/>
<FormControlLabel
disabled={type == 'display'}
value='Very Good'
control={<Radio />}
label='Very Good'
/>
<FormControlLabel
disabled={type == 'display'}
value='Good'
control={<Radio />}
label='Good'
/>
<FormControlLabel
disabled={type == 'display'}
value='Fair'
control={<Radio />}
label='Fair'
/>
<FormControlLabel
disabled={type == 'display'}
value='Poor'
control={<Radio />}
label='Poor'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Have you experienced your present problem before?</FormLabel> <FormLabel>
Have you experienced your present problem before?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.presentProblemBefore
: patient.presentProblemBefore
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -114,24 +167,38 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid
<Grid item item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-form7'> sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="If yes, when?" label='If yes, when?'
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'} disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -140,18 +207,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}} }}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-form7'> sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Was treatment provided?If yes, by whom?" label='Was treatment provided?If yes, by whom?'
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'} disabled={
value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided} patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYestreatmentProvided
: patient.ifYestreatmentProvided
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -160,18 +236,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}} }}
/> />
</Grid> </Grid>
<Grid item <Grid
item
xs={12} xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-form7'> sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Outcome?" label='Outcome?'
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'} disabled={
value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome} patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYesOutcome
: patient.ifYesOutcome
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -181,15 +266,28 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/> />
</Grid> </Grid>
<Grid
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel> <FormLabel>
Have you ever had a stroke or issues with blood clotting?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting} defaultValue={
value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting} type == 'display'
sx={{display:'flex', flexDirection:'row'}} ? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
value={
type == 'display'
? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -197,19 +295,43 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style-form7'> <Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="If yes, when?" label='If yes, when?'
name='treatmentGoal' name='treatmentGoal'
value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting} value={
disabled={patient.strokeBloodclotting!=='Yes'||type=='display'} type == 'display'
? patientDataDiplay.ifYesstrokeBloodclotting
: patient.ifYesstrokeBloodclotting
}
disabled={
patient.strokeBloodclotting !== 'Yes' || type == 'display'
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -219,13 +341,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel> <FormLabel>
Have you recently experienced dizziness, unexplained fatigue,
weight loss or blood loss?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue} defaultValue={
type == 'display'
? patientDataDiplay.dizzinessFetigue
: patient.dizzinessFetigue
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -233,19 +366,41 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style-form7'> <Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="If yes, when?" label='If yes, when?'
name='treatmentGoal' name='treatmentGoal'
disabled={patient.dizzinessFetigue!=='Yes'} disabled={patient.dizzinessFetigue !== 'Yes'}
value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue} value={
type == 'display'
? patientDataDiplay.ifyesdizzinessFetigue
: patient.ifyesdizzinessFetigue
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -255,13 +410,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel> <FormLabel>
Are you currently taking anti-coagulant or blood thinning
medication?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent} defaultValue={
type == 'display'
? patientDataDiplay.antiColligent
: patient.antiColligent
}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -269,19 +435,40 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'> <Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl> <FormControl>
<FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel> <FormLabel>
Have you ever had any major illness, injuries, hospitalization
or surgeries?
</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.injuriesHospitalization
: patient.injuriesHospitalization
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -289,32 +476,53 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} > <Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
<Table <Table
handleFormSection5Data={handleFormSection5Data} handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientDataDiplay} patientDataDiplay={patientDataDiplay}
type={type}/> type={type}
/>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-multiline'> sm={12}
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel> className='collapsable-form-style-multiline'
>
<FormLabel>
Please list current supplements or drugs you may be taking:
</FormLabel>
<TextField <TextField
multiline multiline
variant="outlined" variant='outlined'
label="" label=''
name='treatmentGoal' name='treatmentGoal'
defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs} defaultValue={
disabled={type=='display'} type == 'display'
? patientDataDiplay.supplementsOrDrugs
: patient.supplementsOrDrugs
}
disabled={type == 'display'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
@ -323,9 +531,8 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}} }}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form> </form>
</> </>
) );
} }

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

@ -189,7 +189,6 @@ export default function PersonalSection({
: '' : ''
} }
/> />
</Grid> </Grid>
<Grid <Grid

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

@ -1,10 +1,18 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material"; import {
import React, { useEffect } from "react"; FormControl,
FormControlLabel,
FormLabel,
Grid,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import React, { useEffect } from 'react';
interface Patient { interface Patient {
eyes: string; eyes: string;
IntestinesBowls: string; IntestinesBowls: string;
jointsBones:string; jointsBones: string;
allergies: string; allergies: string;
earsNoseMouth: string; earsNoseMouth: string;
urinary: string; urinary: string;
@ -18,38 +26,42 @@ interface Patient {
nerves: string; nerves: string;
blood: string; blood: string;
prostate: string; prostate: string;
explanation:string; explanation: string;
} }
type Props = { type Props = {
handleFormSection6Data:( handleFormSection6Data: (
eyes: string|undefined, eyes: string | undefined,
IntestinesBowls: string|undefined, IntestinesBowls: string | undefined,
jointsBones:string|undefined, jointsBones: string | undefined,
allergies: string|undefined, allergies: string | undefined,
earsNoseMouth: string|undefined, earsNoseMouth: string | undefined,
urinary: string|undefined, urinary: string | undefined,
skin: string|undefined, skin: string | undefined,
psychological: string|undefined, psychological: string | undefined,
heart: string|undefined, heart: string | undefined,
muscles: string|undefined, muscles: string | undefined,
internalOrgans: string|undefined, internalOrgans: string | undefined,
gynecological: string|undefined, gynecological: string | undefined,
lungsBreathing: string|undefined, lungsBreathing: string | undefined,
nerves: string|undefined, nerves: string | undefined,
blood: string|undefined, blood: string | undefined,
prostate: string|undefined, prostate: string | undefined,
explanation:string|undefined, explanation: string | undefined
)=> void ) => void;
patientDataDiplay:any; patientDataDiplay: any;
type:string; type: string;
} };
export default function SystemReviewSection6({handleFormSection6Data,patientDataDiplay,type}:Props){ export default function SystemReviewSection6({
handleFormSection6Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatients] = React.useState<Patient>({ const [patient, setPatients] = React.useState<Patient>({
eyes: '', eyes: '',
IntestinesBowls: '', IntestinesBowls: '',
jointsBones:'', jointsBones: '',
allergies: '', allergies: '',
earsNoseMouth: '', earsNoseMouth: '',
urinary: '', urinary: '',
@ -63,10 +75,10 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
nerves: '', nerves: '',
blood: '', blood: '',
prostate: '', prostate: '',
explanation:'', explanation: '',
}); });
useEffect(()=>{ useEffect(() => {
handleFormSection6Data( handleFormSection6Data(
patient.eyes, patient.eyes,
patient.IntestinesBowls, patient.IntestinesBowls,
@ -84,26 +96,34 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
patient.nerves, patient.nerves,
patient.blood, patient.blood,
patient.prostate, patient.prostate,
patient.explanation, patient.explanation
) );
},[patient]) }, [patient]);
return( return (
<> <>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel> <FormLabel sx={{ fontWeight: 600 }}>
Please choose body areas or systems where you may have problems:
</FormLabel>
</Grid> </Grid>
<Grid container direction="row"> <Grid container direction='row'>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Eyes</FormLabel> <FormLabel>Eyes</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.eyes:patient.eyes} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.eyes : patient.eyes
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -111,22 +131,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Intestines/Bowls</FormLabel> <FormLabel>Intestines/Bowls</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.IntestinesBowls:patient.IntestinesBowls} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.IntestinesBowls
: patient.IntestinesBowls
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -134,22 +172,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Joints/Bones</FormLabel> <FormLabel>Joints/Bones</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.jointsBones:patient.jointsBones} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.jointsBones
: patient.jointsBones
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -157,22 +213,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Allergies</FormLabel> <FormLabel>Allergies</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.allergies:patient.allergies} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.allergies
: patient.allergies
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -180,22 +254,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Ears, Nose, Mouth, Throat</FormLabel> <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.earsNoseMouth:patient.earsNoseMouth} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.earsNoseMouth
: patient.earsNoseMouth
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -203,22 +295,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Urinary</FormLabel> <FormLabel>Urinary</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.urinary:patient.urinary} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.urinary : patient.urinary
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -226,22 +334,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Skin</FormLabel> <FormLabel>Skin</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.skin:patient.skin} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.skin : patient.skin
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -249,22 +373,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Psychological/Emotional</FormLabel> <FormLabel>Psychological/Emotional</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.psychological:patient.psychological} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.psychological
: patient.psychological
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -272,22 +414,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Heart</FormLabel> <FormLabel>Heart</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.heart:patient.heart} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.heart : patient.heart
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -295,22 +453,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Muscles</FormLabel> <FormLabel>Muscles</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.muscles:patient.muscles} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.muscles : patient.muscles
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -318,22 +492,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Internal Organs</FormLabel> <FormLabel>Internal Organs</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.internalOrgans:patient.internalOrgans} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.internalOrgans
: patient.internalOrgans
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -341,22 +533,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Gynecological menstrual/Brest</FormLabel> <FormLabel>Gynecological menstrual/Brest</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.gynecological:patient.gynecological} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.gynecological
: patient.gynecological
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -364,23 +574,41 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Lungs/Breathing</FormLabel> <FormLabel>Lungs/Breathing</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.lungsBreathing:patient.lungsBreathing} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.lungsBreathing
: patient.lungsBreathing
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -388,22 +616,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Nerves</FormLabel> <FormLabel>Nerves</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.nerves:patient.nerves} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.nerves : patient.nerves
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -411,22 +655,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Blood</FormLabel> <FormLabel>Blood</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.blood:patient.blood} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display' ? patientDataDiplay.blood : patient.blood
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -434,22 +694,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} <Grid
item
xs={12}
xl={3} xl={3}
lg={4} lg={4}
md={6} md={6}
sm={12} className='collapsable-form-style-radioButtons'> sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Prostate/Testicular/Penile</FormLabel> <FormLabel>Prostate/Testicular/Penile</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name='painDuration'
defaultValue={type=='display'?patientDataDiplay.prostate:patient.prostate} defaultValue={
sx={{display:'flex', flexDirection:'row'}} type == 'display'
? patientDataDiplay.prostate
: patient.prostate
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
@ -457,21 +735,44 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
})); }));
}} }}
> >
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> <FormControlLabel
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={6} className='collapsable-form-style-multiline'> <Grid
<FormLabel>Please explain your check marks:</FormLabel><br></br> item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>Please explain your check marks:</FormLabel>
<br></br>
<TextField <TextField
multiline multiline
variant="outlined" variant='outlined'
label="" label=''
name='explanation' name='explanation'
value={type=='display'?patientDataDiplay.explanation:patient.explanation} value={
disabled={type=='display'} type == 'display'
onChange={(event:any) => { ? patientDataDiplay.explanation
: patient.explanation
}
disabled={type == 'display'}
onChange={(event: any) => {
setPatients((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
explanation: event.target.value, explanation: event.target.value,
@ -479,8 +780,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}} }}
/> />
</Grid> </Grid>
</Grid> </Grid>
</> </>
) );
} }