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

482
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';
@ -17,53 +27,54 @@ interface Patient {
state: string; state: string;
zipCode: string; zipCode: string;
gender: string; gender: string;
} }
type Props = { type Props = {
handleFormSection1Data:( handleFormSection1Data: (
fullName?: string|undefined, fullName?: string | undefined,
homePhone?: string|undefined, homePhone?: string | undefined,
cellPhone?: string|undefined, cellPhone?: string | undefined,
email?: string|undefined, email?: string | undefined,
age?: number|undefined|string, age?: number | undefined | string,
dateOfBirth?: string|undefined, dateOfBirth?: string | undefined,
socialSecurityNumber?: string|undefined, socialSecurityNumber?: string | undefined,
mailingAddress?: string|undefined, mailingAddress?: string | undefined,
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,
patient.homePhone, patient.homePhone,
@ -76,37 +87,45 @@ 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={
disabled={type=='display'} type == 'display' ? patientDataDiplay.fullName : patient.fullName
onChange={(e)=>{ }
setPatient((prevValues:any) => ({ disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
fullName: e.target.value, fullName: e.target.value,
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
fullNameError: true, fullNameError: true,
})); }));
} else { } else {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
fullNameError: false, fullNameError: false,
})); }));
@ -114,56 +133,83 @@ 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={
disabled={type=='display'} type == 'display'
onChange={(e)=>{ ? patientDataDiplay.cellPhone
setPatient((prevValues:any) => ({ : patient.cellPhone
}
disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
cellPhone: e.target.value, cellPhone: e.target.value,
})); }));
}} }}
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,
})); }));
} else { } else {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
cellPhoneError: false, cellPhoneError: false,
})); }));
} }
}} }}
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={
disabled={type=='display'} type == 'display'
onChange={(e)=>{ ? patientDataDiplay.homePhone
setPatient((prevValues:any) => ({ : patient.homePhone
}
disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
homePhone: e.target.value, homePhone: e.target.value,
})); }));
@ -173,99 +219,141 @@ 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'}
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
email: e.target.value, email: e.target.value,
})); }));
}} }}
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,
})); }));
} else { } else {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
emailError: false, emailError: false,
})); }));
} }
}} }}
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'}
onChange={(e)=>{ onChange={(e) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
age: e.target.value, age: e.target.value,
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
ageError: true, ageError: true,
})); }));
} else { } else {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
ageError: false, ageError: false,
})); }));
} }
}} }}
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
<FormControl > item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style'
>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
label="Date of Birth" label='Date of Birth'
value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue} value={
disabled={type=='display'} type == 'display'
? patientDataDiplay.dateOfBirth
: birthDateValue
}
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={
disabled={type=='display'} type == 'display'
onChange={(e)=>{ ? patientDataDiplay.socialSecurityNumber
setPatient((prevValues:any) => ({ : patient.socialSecurityNumber
}
disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
socialSecurityNumber: e.target.value, socialSecurityNumber: e.target.value,
})); }));
@ -276,47 +364,71 @@ 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={
disabled={type=='display'} type == 'display'
onChange={(e)=>{ ? patientDataDiplay.mailingAddress
setPatient((prevValues:any) => ({ : patient.mailingAddress
}
disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
mailingAddress: e.target.value, mailingAddress: e.target.value,
})); }));
}} }}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === "") { if (e.target.value === '') {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
mailingAddressError: true, mailingAddressError: true,
})); }));
} else { } else {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
mailingAddressError: false, mailingAddressError: false,
})); }));
} }
}} }}
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) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
state: e.target.value, state: e.target.value,
})); }));
@ -324,15 +436,23 @@ 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) => {
setPatient((prevValues:any) => ({ setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
city: e.target.value, city: e.target.value,
})); }));
@ -340,15 +460,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
variant="outlined" variant='outlined'
label="Zip Code" label='Zip Code'
name="zipCode" name='zipCode'
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode} value={
disabled={type=='display'} type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
onChange={(e)=>{ }
setPatient((prevValues:any) => ({ disabled={type == 'display'}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
zipCode: e.target.value, zipCode: e.target.value,
})); }));
@ -359,31 +489,47 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style-radioButtons'> <Grid
<FormControl > item
xs={2}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<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
onChange={(e)=>{ }
setPatient((prevValues:any) => ({ name='radio-buttons-group'
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues, ...prevValues,
gender: e.target.value, gender: e.target.value,
})); }));
}} }}
sx={{display:'flex', flexDirection:'row'}} sx={{ display: 'flex', flexDirection: 'row' }}
> >
<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>
</> </>
) );
} }