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

Screen responsive changes

Browse Source
This commit is contained in:
vipeeshpavithran 2023-09-07 14:31:45 +05:30
parent 303225458d
commit 81fb560898
1 changed files with 515 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; import {
Button,
FormControl,
FormControlLabel,
FormLabel,
Grid,
Paper,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useEffect } from 'react'; import { useEffect } from 'react';
@ -32,37 +42,38 @@ interface Patient {
city?: string | undefined, city?: string | undefined,
state?: string | undefined, state?: string | undefined,
zipCode?: string | undefined, zipCode?: string | undefined,
gender?: string|undefined, gender?: string | undefined
)=> void ) => void;
patientDataDiplay: any; patientDataDiplay: any;
type: string; type: string;
} };
export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
export default function PersonalSection({
handleFormSection1Data,
patientDataDiplay,
type,
}: Props) {
const [birthDateValue, setBirthDateValue] = React.useState<any>(); const [birthDateValue, setBirthDateValue] = React.useState<any>();
const [patient, setPatient] = React.useState<any>({ const [patient, setPatient] = React.useState<any>({
fullName: "", fullName: '',
fullNameError: false, fullNameError: false,
homePhone: "", homePhone: '',
cellPhone: "", cellPhone: '',
cellPhoneError: false, cellPhoneError: false,
email: "", email: '',
emailError: false, emailError: false,
age: "", age: '',
ageError: false, ageError: false,
dateOfBirth: birthDateValue, dateOfBirth: birthDateValue,
socialSecurityNumber: "", socialSecurityNumber: '',
mailingAddress:"", mailingAddress: '',
mailingAddressFalse: false, mailingAddressFalse: false,
city: "", city: '',
state: "", state: '',
zipCode: "", zipCode: '',
gender: "male", gender: 'male',
}); });
useEffect(() => { useEffect(() => {
handleFormSection1Data( handleFormSection1Data(
patient.fullName, patient.fullName,
@ -76,22 +87,30 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
patient.city, patient.city,
patient.state, patient.state,
patient.zipCode, patient.zipCode,
patient.gender, patient.gender
) );
},[patient]) }, [patient]);
return ( return (
<> <>
<Grid container direction="row" className='section1-test-class'> <Grid container direction='row' className='section1-test-class'>
<Grid item xs={4} className='collapsable-form-style '> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Patient's Full Name" label="Patient's Full Name"
name="fullName" name='fullName'
placeholder='Please enter your name' placeholder='Please enter your name'
value={type=='display'?patientDataDiplay.fullName:patient.fullName} value={
type == 'display' ? patientDataDiplay.fullName : patient.fullName
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -100,7 +119,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
fullNameError: true, fullNameError: true,
@ -114,20 +133,31 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
}} }}
required required
error={patient.fullNameError} error={patient.fullNameError}
helperText={patient.fullNameError ? "Please enter your name" : ""} helperText={patient.fullNameError ? 'Please enter your name' : ''}
/> />
</Grid> </Grid>
<Grid
<Grid item xs={4} className='collapsable-form-style'> item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
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={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone} value={
type == 'display'
? patientDataDiplay.cellPhone
: patient.cellPhone
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -136,7 +166,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (!(/^\d{10}$/.test(e.target.value))) { if (!/^\d{10}$/.test(e.target.value)) {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
cellPhoneError: true, cellPhoneError: true,
@ -149,18 +179,34 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
} }
}} }}
error={patient.cellPhoneError} error={patient.cellPhoneError}
helperText={patient.cellPhoneError? "Please enter a valid 10-digit phone number" : ""} helperText={
patient.cellPhoneError
? 'Please enter a valid 10-digit phone number'
: ''
}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Home Phone Number" label='Home Phone Number'
name="homePhone" name='homePhone'
type='number' type='number'
placeholder='Please enter your home phone' placeholder='Please enter your home phone'
value={type=='display'?patientDataDiplay.homePhone:patient.homePhone} value={
type == 'display'
? patientDataDiplay.homePhone
: patient.homePhone
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -173,12 +219,20 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Email" label='Email'
name="email" name='email'
placeholder='Please enter your email' placeholder='Please enter your email'
value={type == 'display' ? patientDataDiplay.email : patient.email} value={type == 'display' ? patientDataDiplay.email : patient.email}
disabled={type == 'display'} disabled={type == 'display'}
@ -189,7 +243,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) { if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
emailError: true, emailError: true,
@ -202,16 +256,26 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
} }
}} }}
error={patient.emailError} error={patient.emailError}
helperText={patient.emailError? "Please enter a valid email address" : ""} helperText={
patient.emailError ? 'Please enter a valid email address' : ''
}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Age" label='Age'
name="age" name='age'
type="number" type='number'
placeholder='Please enter your age' placeholder='Please enter your age'
value={type == 'display' ? patientDataDiplay.age : patient.age} value={type == 'display' ? patientDataDiplay.age : patient.age}
disabled={type == 'display'} disabled={type == 'display'}
@ -222,7 +286,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
ageError: true, ageError: true,
@ -235,34 +299,58 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
} }
}} }}
error={patient.ageError} error={patient.ageError}
helperText={patient.ageError ? "Please enter your age" : ""} helperText={patient.ageError ? 'Please enter your age' : ''}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
label="Date of Birth" label='Date of Birth'
value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue} value={
type == 'display'
? patientDataDiplay.dateOfBirth
: birthDateValue
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(newValue) => { onChange={(newValue) => {
setBirthDateValue(newValue); setBirthDateValue(newValue);
}} }}
renderInput={(params) => <TextField variant="outlined" {...params} />} renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/> />
</LocalizationProvider> </LocalizationProvider>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Social Security Number" label='Social Security Number'
name="socialSecurityNumber" name='socialSecurityNumber'
value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber} value={
type == 'display'
? patientDataDiplay.socialSecurityNumber
: patient.socialSecurityNumber
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -276,13 +364,25 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
required required
variant="outlined" variant='outlined'
label="Mailing Address" label='Mailing Address'
name="mailingAddress" name='mailingAddress'
value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress} value={
type == 'display'
? patientDataDiplay.mailingAddress
: patient.mailingAddress
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -291,7 +391,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
mailingAddressError: true, mailingAddressError: true,
@ -304,15 +404,27 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
} }
}} }}
error={patient.mailingAddressError} error={patient.mailingAddressError}
helperText={patient.mailingAddressError? "Please enter your mailing address" : ""} helperText={
patient.mailingAddressError
? 'Please enter your mailing address'
: ''
}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="State" label='State'
name="state" name='state'
value={type == 'display' ? patientDataDiplay.state : patient.state} value={type == 'display' ? patientDataDiplay.state : patient.state}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
@ -324,11 +436,19 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="City" label='City'
name="city" name='city'
value={type == 'display' ? patientDataDiplay.city : patient.city} value={type == 'display' ? patientDataDiplay.city : patient.city}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
@ -340,12 +460,22 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<TextField <TextField
variant="outlined" variant='outlined'
label="Zip Code" label='Zip Code'
name="zipCode" name='zipCode'
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode} value={
type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
}
disabled={type == 'display'} disabled={type == 'display'}
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
@ -359,13 +489,23 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style-radioButtons'> <Grid
item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl> <FormControl>
<FormLabel>Gender</FormLabel> <FormLabel>Gender</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby='demo-radio-buttons-group-label'
defaultValue={type=='display'?patientDataDiplay.gender:patient.gender} defaultValue={
name="radio-buttons-group" type == 'display' ? patientDataDiplay.gender : patient.gender
}
name='radio-buttons-group'
onChange={(e) => { onChange={(e) => {
setPatient((prevValues: any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
@ -376,14 +516,20 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
> >
<FormControlLabel <FormControlLabel
disabled={type == 'display'} disabled={type == 'display'}
value="male" control={<Radio />} label="Male" /> value='male'
control={<Radio />}
label='Male'
/>
<FormControlLabel <FormControlLabel
disabled={type == 'display'} disabled={type == 'display'}
value="female" control={<Radio />} label="Female" /> value='female'
control={<Radio />}
label='Female'
/>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
</> </>
) );
} }