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