feature/view-patient-data #6
@ -1,389 +1,535 @@
|
||||
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';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
homePhone: string;
|
||||
cellPhone: string;
|
||||
email: string;
|
||||
age: number | string;
|
||||
dateOfBirth: string;
|
||||
socialSecurityNumber: string;
|
||||
mailingAddress: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
}
|
||||
fullName: string;
|
||||
homePhone: string;
|
||||
cellPhone: string;
|
||||
email: string;
|
||||
age: number | string;
|
||||
dateOfBirth: string;
|
||||
socialSecurityNumber: string;
|
||||
mailingAddress: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection1Data:(
|
||||
fullName?: string|undefined,
|
||||
homePhone?: string|undefined,
|
||||
cellPhone?: string|undefined,
|
||||
email?: string|undefined,
|
||||
age?: number|undefined|string,
|
||||
dateOfBirth?: string|undefined,
|
||||
socialSecurityNumber?: string|undefined,
|
||||
mailingAddress?: string|undefined,
|
||||
city?: string|undefined,
|
||||
state?: string|undefined,
|
||||
zipCode?: string|undefined,
|
||||
gender?: string|undefined,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection1Data: (
|
||||
fullName?: string | undefined,
|
||||
homePhone?: string | undefined,
|
||||
cellPhone?: string | undefined,
|
||||
email?: string | undefined,
|
||||
age?: number | undefined | string,
|
||||
dateOfBirth?: string | undefined,
|
||||
socialSecurityNumber?: string | undefined,
|
||||
mailingAddress?: string | undefined,
|
||||
city?: string | undefined,
|
||||
state?: string | undefined,
|
||||
zipCode?: string | undefined,
|
||||
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: '',
|
||||
fullNameError: false,
|
||||
homePhone: '',
|
||||
cellPhone: '',
|
||||
cellPhoneError: false,
|
||||
email: '',
|
||||
emailError: false,
|
||||
age: '',
|
||||
ageError: false,
|
||||
dateOfBirth: birthDateValue,
|
||||
socialSecurityNumber: '',
|
||||
mailingAddress: '',
|
||||
mailingAddressFalse: false,
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
gender: 'male',
|
||||
});
|
||||
|
||||
const [birthDateValue, setBirthDateValue] = React.useState<any>();
|
||||
const [patient, setPatient] = React.useState<any>({
|
||||
fullName: "",
|
||||
fullNameError:false,
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
cellPhoneError: false,
|
||||
email: "",
|
||||
emailError: false,
|
||||
age: "",
|
||||
ageError: false,
|
||||
dateOfBirth: birthDateValue,
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
mailingAddressFalse:false,
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "male",
|
||||
});
|
||||
useEffect(() => {
|
||||
handleFormSection1Data(
|
||||
patient.fullName,
|
||||
patient.homePhone,
|
||||
patient.cellPhone,
|
||||
patient.email,
|
||||
patient.age,
|
||||
birthDateValue,
|
||||
patient.socialSecurityNumber,
|
||||
patient.mailingAddress,
|
||||
patient.city,
|
||||
patient.state,
|
||||
patient.zipCode,
|
||||
patient.gender
|
||||
);
|
||||
}, [patient]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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'
|
||||
label="Patient's Full Name"
|
||||
name='fullName'
|
||||
placeholder='Please enter your name'
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay.fullName : patient.fullName
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
fullName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
fullNameError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
fullNameError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
required
|
||||
error={patient.fullNameError}
|
||||
helperText={patient.fullNameError ? 'Please enter your name' : ''}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection1Data(
|
||||
patient.fullName,
|
||||
patient.homePhone,
|
||||
patient.cellPhone,
|
||||
patient.email,
|
||||
patient.age,
|
||||
birthDateValue,
|
||||
patient.socialSecurityNumber,
|
||||
patient.mailingAddress,
|
||||
patient.city,
|
||||
patient.state,
|
||||
patient.zipCode,
|
||||
patient.gender,
|
||||
)
|
||||
},[patient])
|
||||
<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'
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.cellPhone
|
||||
: patient.cellPhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
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'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<Grid container direction="row" className='section1-test-class'>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Patient's Full Name"
|
||||
name="fullName"
|
||||
placeholder='Please enter your name'
|
||||
value={type=='display'?patientDataDiplay.fullName:patient.fullName}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
fullName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === "") {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
fullNameError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
fullNameError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
required
|
||||
error={patient.fullNameError}
|
||||
helperText={patient.fullNameError ? "Please enter your name" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
<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'
|
||||
type='number'
|
||||
placeholder='Please enter your home phone'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.homePhone
|
||||
: patient.homePhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
homePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// error={!(/^\d{10}$/.test(patient.homePhone))}
|
||||
// helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Phone Number"
|
||||
name="cellPhone"
|
||||
type="number"
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
cellPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
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" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant='outlined'
|
||||
label='Email'
|
||||
name='email'
|
||||
placeholder='Please enter your email'
|
||||
value={type == 'display' ? patientDataDiplay.email : patient.email}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
email: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
emailError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
emailError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.emailError}
|
||||
helperText={
|
||||
patient.emailError ? 'Please enter a valid email address' : ''
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<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'
|
||||
placeholder='Please enter your age'
|
||||
value={type == 'display' ? patientDataDiplay.age : patient.age}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
age: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
ageError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
ageError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.ageError}
|
||||
helperText={patient.ageError ? 'Please enter your age' : ''}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Home Phone Number"
|
||||
name="homePhone"
|
||||
type='number'
|
||||
placeholder='Please enter your home phone'
|
||||
value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
homePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// error={!(/^\d{10}$/.test(patient.homePhone))}
|
||||
// helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
<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
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(newValue) => {
|
||||
setBirthDateValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField variant='outlined' {...params} />
|
||||
)}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Email"
|
||||
name="email"
|
||||
placeholder='Please enter your email'
|
||||
value={type=='display'?patientDataDiplay.email:patient.email}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
email: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
emailError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
emailError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.emailError}
|
||||
helperText={patient.emailError? "Please enter a valid email address" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Age"
|
||||
name="age"
|
||||
type="number"
|
||||
placeholder='Please enter your age'
|
||||
value={type=='display'?patientDataDiplay.age:patient.age}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
age: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === "") {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
ageError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
ageError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.ageError}
|
||||
helperText={patient.ageError ? "Please enter your age" : ""}
|
||||
|
||||
/>
|
||||
</Grid>
|
||||
<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
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
socialSecurityNumber: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<FormControl >
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
label="Date of Birth"
|
||||
value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
|
||||
disabled={type=='display'}
|
||||
onChange={(newValue) => {
|
||||
setBirthDateValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
|
||||
</Grid>
|
||||
<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
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
mailingAddress: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.mailingAddressError}
|
||||
helperText={
|
||||
patient.mailingAddressError
|
||||
? 'Please enter your mailing address'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Social Security Number"
|
||||
name="socialSecurityNumber"
|
||||
value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
socialSecurityNumber: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='State'
|
||||
name='state'
|
||||
value={type == 'display' ? patientDataDiplay.state : patient.state}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
state: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Mailing Address"
|
||||
name="mailingAddress"
|
||||
value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
mailingAddress: e.target.value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === "") {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.mailingAddressError}
|
||||
helperText={patient.mailingAddressError? "Please enter your mailing address" : ""}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="State"
|
||||
name="state"
|
||||
value={type=='display'?patientDataDiplay.state:patient.state}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
state: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='City'
|
||||
name='city'
|
||||
value={type == 'display' ? patientDataDiplay.city : patient.city}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
city: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="City"
|
||||
name="city"
|
||||
value={type=='display'?patientDataDiplay.city:patient.city}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
city: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Zip Code"
|
||||
name="zipCode"
|
||||
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
zipCode: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
/>
|
||||
</Grid>
|
||||
<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
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
zipCode: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} 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"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
gender: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type=='display'}
|
||||
value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel
|
||||
disabled={type=='display'}
|
||||
value="female" control={<Radio />} label="Female" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<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'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
gender: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='male'
|
||||
control={<Radio />}
|
||||
label='Male'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='female'
|
||||
control={<Radio />}
|
||||
label='Female'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user