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

57
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;
@ -57,4 +53,33 @@
.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;
} */

274
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>
<FormControl> {type !== 'display' ? (
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}> <FormControl>
<Grid item xs={2} className='addNew-form-table-style'> <Grid container spacing={1.5}>
<TextField <Grid
required item
variant="outlined" xs={12}
label="Date" xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant='outlined'
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
<TextField item
required xs={12}
variant="outlined" xl={3}
label="Injury/Illness/Surgeries" lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant='outlined'
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
<TextField item
required xs={12}
variant="outlined" xl={3}
label="Treatment" lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant='outlined'
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
<TextField item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<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
</Grid> xs={12}
xl={3}
</Grid> lg={3}
</FormControl> md={6}
:""} sm={12}
className='addNew-form-table-style'
>
<TableContainer sx={{width:800}} className='illness-table-style'> <Button
<Table aria-label="simple table"> sx={{ height: '40px', bgcolor: 'skyblue' }}
onClick={handleAddRow}
>
Add
</Button>
</Grid>
</Grid>
</FormControl>
) : (
''
)}
<TableContainer className='illness-table-style'>
<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> Delete
<TableCell align='left'> </Button>
{row.results} ) : (
</TableCell> ''
<TableCell align='left'> )}
{type!=="display"?
<Button sx={{height:'30x',width:20, bgcolor:'skyblue'}}
onClick={(e)=>{deleteIllnessData(row.id)}}>
Delete
</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) {

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

@ -1,10 +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;
numberOfChildren: string | undefined;
occupation: string | undefined;
hoursPerWeek: number | string | undefined;
employer: string | undefined;
businessPhone: string | undefined;
spouseName: string | undefined;
spouseEmployer: string | undefined;
spouseBusinessPhone: string | undefined;
emergencyContact: string | undefined;
relationship: string | undefined;
spousePhone: string | undefined;
}
type Props = {
handleFormSection2Data: (
maritalStatus: string | undefined, maritalStatus: string | undefined,
numberOfChildren: string | undefined, numberOfChildren: string | undefined,
occupation: string | undefined, occupation: string | undefined,
@ -16,360 +44,438 @@ interface Patient {
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;
patientDataDiplay: any;
type Props = { type: string;
handleFormSection2Data:(
maritalStatus: string | undefined,
numberOfChildren: string | undefined,
occupation: string | undefined,
hoursPerWeek: number | string | undefined,
employer: string | undefined,
businessPhone: string | undefined,
spouseName: string | undefined,
spouseEmployer: string | undefined,
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
)=> void
patientDataDiplay:any;
type:string;
}
export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
const [patient, setPatient] = React.useState<Patient>({
maritalStatus:'',
numberOfChildren:'',
occupation:'',
hoursPerWeek:'',
employer:'',
businessPhone:'',
spouseName:'',
spouseEmployer:'',
spouseBusinessPhone:'',
emergencyContact:'',
relationship:'',
spousePhone:''
});
useEffect(()=>{
handleFormSection2Data(
patient.maritalStatus,
patient.numberOfChildren,
patient.occupation,
patient.hoursPerWeek,
patient.employer,
patient.businessPhone,
patient.spouseName,
patient.spouseEmployer,
patient.spouseBusinessPhone,
patient.emergencyContact,
patient.relationship,
patient.spousePhone,
)
},[patient])
return(
<>
<Grid container direction="row">
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Marital Status</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="maritalStatus"
defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus}
sx={{display:'flex', flexDirection:'row'}}
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
maritalStatus: e.target.value,
}));
}}
>
<FormControlLabel value="married" control={<Radio />} label="Married" 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>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
type="number"
label="Number of Children/Ages"
className='collapsable-form-style'
name='numberOfChildren'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
numberOfChildren: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
// required
variant="outlined"
label="Occupation"
className='collapsable-form-style'
name='occupation'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
occupation: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.occupation:patient.occupation}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Hours/Week"
type="number"
className='collapsable-form-style'
name='hoursPerWeek'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
hoursPerWeek: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
disabled={type=='display'}
/>
</Grid>
<Grid
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Employer"
className='collapsable-form-style'
name='employer'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
employer: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.employer:patient.employer}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Business Phone"
type="number"
className='collapsable-form-style'
name='businessPhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
businessPhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Spouse's Name"
className='collapsable-form-style'
name='spouseName'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
spouseName: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Spouse's Employer"
className='collapsable-form-style'
name='spouseEmployer'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
spouseEmployer: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Business Phone"
type="number"
className='collapsable-form-style'
name='spouseBusinessPhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
spouseBusinessPhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone}
disabled={type=='display'}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Emergency Contact"
className='collapsable-form-style'
name='emergencyContact'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
emergencyContact: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
<TextField
variant="outlined"
label="Relationship"
className='collapsable-form-style'
name='relationship'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
relationship: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.relationship:patient.relationship}
disabled={type=='display'}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style '>
<TextField
variant="outlined"
type="number"
label="Phone"
className='collapsable-form-style'
name='spousePhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
spousePhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
disabled={type=='display'}
/>
</Grid>
</Grid>
</>
)
}; };
export default function FamilyFormSection({
handleFormSection2Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({
maritalStatus: '',
numberOfChildren: '',
occupation: '',
hoursPerWeek: '',
employer: '',
businessPhone: '',
spouseName: '',
spouseEmployer: '',
spouseBusinessPhone: '',
emergencyContact: '',
relationship: '',
spousePhone: '',
});
useEffect(() => {
handleFormSection2Data(
patient.maritalStatus,
patient.numberOfChildren,
patient.occupation,
patient.hoursPerWeek,
patient.employer,
patient.businessPhone,
patient.spouseName,
patient.spouseEmployer,
patient.spouseBusinessPhone,
patient.emergencyContact,
patient.relationship,
patient.spousePhone
);
}, [patient]);
return (
<>
<Grid container direction='row'>
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Marital Status</FormLabel>
<RadioGroup
aria-labelledby='demo-radio-buttons-group-label'
name='maritalStatus'
defaultValue={
type == 'display'
? patientDataDiplay.maritalStatus
: patient.maritalStatus
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
maritalStatus: e.target.value,
}));
}}
>
<FormControlLabel
value='married'
control={<Radio />}
label='Married'
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>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
type='number'
label='Number of Children/Ages'
className='collapsable-form-style'
name='numberOfChildren'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
numberOfChildren: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.numberOfChildren
: patient.numberOfChildren
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
// required
variant='outlined'
label='Occupation'
className='collapsable-form-style'
name='occupation'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
occupation: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.occupation
: patient.occupation
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Hours/Week'
type='number'
className='collapsable-form-style'
name='hoursPerWeek'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
hoursPerWeek: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.hoursPerWeek
: patient.hoursPerWeek
}
disabled={type == 'display'}
/>
</Grid>
<Grid
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Employer'
className='collapsable-form-style'
name='employer'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
employer: e.target.value,
}));
}}
value={
type == 'display' ? patientDataDiplay.employer : patient.employer
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Business Phone'
type='number'
className='collapsable-form-style'
name='businessPhone'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
businessPhone: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.businessPhone
: patient.businessPhone
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label="Spouse's Name"
className='collapsable-form-style'
name='spouseName'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseName: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.spouseName
: patient.spouseName
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label="Spouse's Employer"
className='collapsable-form-style'
name='spouseEmployer'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseEmployer: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.spouseEmployer
: patient.spouseEmployer
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Business Phone'
type='number'
className='collapsable-form-style'
name='spouseBusinessPhone'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseBusinessPhone: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.spouseBusinessPhone
: patient.spouseBusinessPhone
}
disabled={type == 'display'}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Emergency Contact'
className='collapsable-form-style'
name='emergencyContact'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
emergencyContact: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.emergencyContact
: patient.emergencyContact
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
label='Relationship'
className='collapsable-form-style'
name='relationship'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
relationship: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.relationship
: patient.relationship
}
disabled={type == 'display'}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField
variant='outlined'
type='number'
label='Phone'
className='collapsable-form-style'
name='spousePhone'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spousePhone: e.target.value,
}));
}}
value={
type == 'display'
? patientDataDiplay.spousePhone
: patient.spousePhone
}
disabled={type == 'display'}
/>
</Grid>
</Grid>
</>
);
}

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

@ -1,212 +1,318 @@
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,
const [patient, setPatient] = React.useState<Patient>({ patientDataDiplay,
familyHistory: '', type,
sleep: '', }: Props) {
pillow:'', const [patient, setPatient] = React.useState<Patient>({
orthotics:'', familyHistory: '',
brestExam: dayjs('2022-04-17'), sleep: '',
pregnancy:'', pillow: '',
menstralCycle: dayjs('2022-04-17'), orthotics: '',
}); brestExam: dayjs('2022-04-17'),
pregnancy: '',
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
<Grid item xs={12} className='collapsable-form-style-multiline'> item
<FormLabel>Family history and health status:</FormLabel><br></br> xs={12}
<TextField xl={3}
multiline lg={4}
variant="outlined" md={6}
label="" sm={12}
value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory} className='collapsable-form-style-multiline'
disabled={type=='display'} >
onChange={(event:any) => { <FormLabel>Family history and health status:</FormLabel>
setPatient((prevValues) => ({ <br></br>
...prevValues, <TextField
familyHistory: event.target.value, multiline
})); variant='outlined'
}} label=''
/> value={
</Grid> type == 'display'
? patientDataDiplay.familyHistory
: patient.familyHistory
}
disabled={type == 'display'}
onChange={(event: any) => {
setPatient((prevValues) => ({
...prevValues,
familyHistory: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={12} className='collapsable-form-style-radioButtons'>
<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={
onChange={(event) => { type == 'display' ? patientDataDiplay.sleep : patient.sleep
setPatient((prevValues) => ({ }
...prevValues, onChange={(event) => {
sleep: event.target.value, setPatient((prevValues) => ({
})); ...prevValues,
}} sleep: event.target.value,
> }));
<FormControlLabel disabled={type=='display'} 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" /> <FormControlLabel
</RadioGroup> disabled={type == 'display'}
</FormControl> value='Back'
</Grid> 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>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={12} className='collapsable-form-style-radioButtons'>
<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={
onChange={(event) => { type == 'display' ? patientDataDiplay.pillow : patient.pillow
setPatient((prevValues) => ({ }
...prevValues, onChange={(event) => {
pillow: event.target.value, setPatient((prevValues) => ({
})); ...prevValues,
}} pillow: event.target.value,
> }));
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> }}
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> >
</RadioGroup> <FormControlLabel
</FormControl> disabled={type == 'display'}
</Grid> value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={12} className='collapsable-form-style-radioButtons'>
<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={
onChange={(event) => { type == 'display'
setPatient((prevValues) => ({ ? patientDataDiplay.orthotics
...prevValues, : patient.orthotics
orthotics: event.target.value, }
})); onChange={(event) => {
}} setPatient((prevValues) => ({
> ...prevValues,
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> orthotics: event.target.value,
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> }));
</RadioGroup> }}
</FormControl> >
</Grid> <FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br> item
<FormControl> xs={12}
<LocalizationProvider dateAdapter={AdapterDayjs}> xl={3}
<DatePicker lg={4}
value={type=='display'?patientDataDiplay.brestExam:patient.brestExam} md={6}
disabled={type=='display'} sm={12}
onChange={(event) => { className='collapsable-form-style-radioButtons'
const formattedDate = formatDate(event) >
setPatient((prevValues) => ({ <FormLabel>Date of last gynecological and brest exam?</FormLabel>
...prevValues, <br></br>
brestExam: formattedDate, <FormControl>
})); <LocalizationProvider dateAdapter={AdapterDayjs}>
}} <DatePicker
renderInput={(params) => <TextField variant="outlined" {...params} />} value={
/> type == 'display'
</LocalizationProvider> ? patientDataDiplay.brestExam
</FormControl> : patient.brestExam
</Grid> }
disabled={type == 'display'}
onChange={(event) => {
const formattedDate = formatDate(event);
setPatient((prevValues) => ({
...prevValues,
brestExam: formattedDate,
}));
}}
renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/>
</LocalizationProvider>
</FormControl>
</Grid>
{/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
<FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel> <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
</Grid> */} </Grid> */}
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={12} className='collapsable-form-style-radioButtons'>
<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={
onChange={(event) => { type == 'display'
setPatient((prevValues) => ({ ? patientDataDiplay.pregnancy
...prevValues, : patient.pregnancy
pregnancy: event.target.value, }
})); onChange={(event) => {
}} setPatient((prevValues) => ({
> ...prevValues,
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" /> pregnancy: event.target.value,
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" /> }));
</RadioGroup> }}
</FormControl> >
</Grid> <FormControlLabel
disabled={type == 'display'}
<Grid item xs={12} className='collapsable-form-style-radioButtons'> value='Yes'
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br> control={<Radio />}
<FormControl> label='Yes'
<LocalizationProvider dateAdapter={AdapterDayjs}> />
<DatePicker <FormControlLabel
value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle} disabled={type == 'display'}
disabled={type=='display'} value='No'
onChange={(event) => { control={<Radio />}
const formattedDate = formatDate(event) label='No'
setPatient((prevValues) => ({ />
...prevValues, </RadioGroup>
menstralCycle: formattedDate, </FormControl>
}));
}}
renderInput={(params) => <TextField variant="outlined" {...params} />}
/>
</LocalizationProvider>
</FormControl>
</Grid>
</Grid> </Grid>
</>
) <Grid
} 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>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={
type == 'display'
? patientDataDiplay.menstralCycle
: patient.menstralCycle
}
disabled={type == 'display'}
onChange={(event) => {
const formattedDate = formatDate(event);
setPatient((prevValues) => ({
...prevValues,
menstralCycle: formattedDate,
}));
}}
renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/>
</LocalizationProvider>
</FormControl>
</Grid>
</Grid>
</>
);
}

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

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

829
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,313 +28,511 @@ 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) {
const [patient, setPatient] = React.useState<Patient>({
generalHealth: '',
presentProblemBefore: '',
ifYespresentProblemBefore: '',
ifYestreatmentProvided: '',
ifYesOutcome: '',
strokeBloodclotting: '',
ifYesstrokeBloodclotting: '',
dizzinessFetigue: '',
ifyesdizzinessFetigue: '',
antiColligent: '',
injuriesHospitalization: '',
supplementsOrDrugs: '',
});
useEffect(() => {
handleFormSection5Data(
patient.generalHealth,
patient.presentProblemBefore,
patient.ifYespresentProblemBefore,
patient.ifYestreatmentProvided,
patient.ifYesOutcome,
patient.strokeBloodclotting,
patient.ifYesstrokeBloodclotting,
patient.dizzinessFetigue,
patient.ifyesdizzinessFetigue,
patient.antiColligent,
patient.injuriesHospitalization,
patient.supplementsOrDrugs
);
}, [patient]);
return (
<>
<form>
<Grid container direction='row'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>Overall your General Healgth is:</FormLabel>
<RadioGroup
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.generalHealth
: patient.generalHealth
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
generalHealth: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Excellent'
control={<Radio />}
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>
</FormControl>
</Grid>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>
Have you experienced your present problem before?
</FormLabel>
<RadioGroup
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.presentProblemBefore
: patient.presentProblemBefore
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
presentProblemBefore: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYespresentProblemBefore: event.target.value,
}));
}}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant='outlined'
label='Was treatment provided?If yes, by whom?'
name='treatmentGoal'
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYestreatmentProvided
: patient.ifYestreatmentProvided
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYestreatmentProvided: event.target.value,
}));
}}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant='outlined'
label='Outcome?'
name='treatmentGoal'
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYesOutcome
: patient.ifYesOutcome
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYesOutcome: event.target.value,
}));
}}
/>
</Grid>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>
Have you ever had a stroke or issues with blood clotting?
</FormLabel>
<RadioGroup
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
value={
type == 'display'
? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
strokeBloodclotting: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
value={
type == 'display'
? patientDataDiplay.ifYesstrokeBloodclotting
: patient.ifYesstrokeBloodclotting
}
disabled={
patient.strokeBloodclotting !== 'Yes' || type == 'display'
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYesstrokeBloodclotting: event.target.value,
}));
}}
/>
</Grid>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>
Have you recently experienced dizziness, unexplained fatigue,
weight loss or blood loss?
</FormLabel>
<RadioGroup
name='painDuration'
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.dizzinessFetigue
: patient.dizzinessFetigue
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
dizzinessFetigue: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
disabled={patient.dizzinessFetigue !== 'Yes'}
value={
type == 'display'
? patientDataDiplay.ifyesdizzinessFetigue
: patient.ifyesdizzinessFetigue
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifyesdizzinessFetigue: event.target.value,
}));
}}
/>
</Grid>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>
Are you currently taking anti-coagulant or blood thinning
medication?
</FormLabel>
<RadioGroup
name='painDuration'
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.antiColligent
: patient.antiColligent
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
antiColligent: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>
Have you ever had any major illness, injuries, hospitalization
or surgeries?
</FormLabel>
<RadioGroup
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.injuriesHospitalization
: patient.injuriesHospitalization
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
injuriesHospitalization: event.target.value,
}));
}}
>
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
<Table
handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientDataDiplay}
type={type}
/>
</Grid>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>
Please list current supplements or drugs you may be taking:
</FormLabel>
<TextField
multiline
variant='outlined'
label=''
name='treatmentGoal'
defaultValue={
type == 'display'
? patientDataDiplay.supplementsOrDrugs
: patient.supplementsOrDrugs
}
disabled={type == 'display'}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
supplementsOrDrugs: event.target.value,
}));
}}
/>
</Grid>
</Grid>
</form>
</>
);
} }
export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
const [patient, setPatient] = React.useState<Patient>({
generalHealth: '',
presentProblemBefore: '',
ifYespresentProblemBefore:'',
ifYestreatmentProvided:'',
ifYesOutcome:'',
strokeBloodclotting: '',
ifYesstrokeBloodclotting: '',
dizzinessFetigue: '',
ifyesdizzinessFetigue:'',
antiColligent: '',
injuriesHospitalization: '',
supplementsOrDrugs:''
});
useEffect(()=>{
handleFormSection5Data(
patient.generalHealth,
patient.presentProblemBefore,
patient.ifYespresentProblemBefore,
patient.ifYestreatmentProvided,
patient.ifYesOutcome,
patient.strokeBloodclotting,
patient.ifYesstrokeBloodclotting,
patient.dizzinessFetigue,
patient.ifyesdizzinessFetigue,
patient.antiColligent,
patient.injuriesHospitalization,
patient.supplementsOrDrugs,
)
},[patient])
return(
<>
<form>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Overall your General Healgth is:</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
generalHealth: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} 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>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you experienced your present problem before?</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
presentProblemBefore: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYespresentProblemBefore: event.target.value,
}));
}}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="Was treatment provided?If yes, by whom?"
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYestreatmentProvided: event.target.value,
}));
}}
/>
</Grid>
<Grid item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="Outcome?"
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYesOutcome: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
strokeBloodclotting: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifYesstrokeBloodclotting: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
dizzinessFetigue: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
disabled={patient.dizzinessFetigue!=='Yes'}
value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
ifyesdizzinessFetigue: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
antiColligent: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
injuriesHospitalization: event.target.value,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
<Table
handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientDataDiplay}
type={type}/>
</Grid>
<Grid item xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-multiline'>
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
<TextField
multiline
variant="outlined"
label=""
name='treatmentGoal'
defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
disabled={type=='display'}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
supplementsOrDrugs: event.target.value,
}));
}}
/>
</Grid>
</Grid>
</form>
</>
)
}

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

@ -147,49 +147,48 @@ export default function PersonalSection({
className='collapsable-form-style' className='collapsable-form-style'
> >
<TextField <TextField
required required
variant='outlined' variant='outlined'
label='Phone Number' label='Phone Number'
name='cellPhone' name='cellPhone'
type='number' type='number'
placeholder='Please enter your cell Phone number' placeholder='Please enter your cell Phone number'
value={ value={
type == 'display' type == 'display'
? patientDataDiplay.cellPhone ? patientDataDiplay.cellPhone
: patient.cellPhone : patient.cellPhone
}
disabled={type == 'display'}
onChange={(e) => {
let value = e.target.value;
if (value[0] === '0') {
value = value.slice(1);
} }
disabled={type == 'display'} setPatient((prevValues: any) => ({
onChange={(e) => { ...prevValues,
let value = e.target.value; cellPhone: value,
if (value[0] === '0') { }));
value = value.slice(1); }}
} onBlur={(e) => {
if (!/^\d{10}$/.test(e.target.value)) {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
cellPhone: value, cellPhoneError: true,
}));
} else {
setPatient((prevValues: any) => ({
...prevValues,
cellPhoneError: false,
})); }));
}}
onBlur={(e) => {
if (!/^\d{10}$/.test(e.target.value)) {
setPatient((prevValues: any) => ({
...prevValues,
cellPhoneError: true,
}));
} else {
setPatient((prevValues: any) => ({
...prevValues,
cellPhoneError: false,
}));
}
}}
error={patient.cellPhoneError}
helperText={
patient.cellPhoneError
? 'Please enter a valid 10-digit phone number'
: ''
} }
/> }}
error={patient.cellPhoneError}
helperText={
patient.cellPhoneError
? 'Please enter a valid 10-digit phone number'
: ''
}
/>
</Grid> </Grid>
<Grid <Grid

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

File diff suppressed because it is too large Load Diff