Refactored handle form submission function for first section
This commit is contained in:
vipeeshpavithran
parent
2e403624a8
commit
8419e26a4e
14
src/Components/Interface/Patient.tsx
Normal file
14
src/Components/Interface/Patient.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
export 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;
|
||||
}
|
||||
@ -36,6 +36,7 @@ import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
|
||||
import AlertDialog from '../Helper/AlertDialogBox';
|
||||
import SignatureComponent from '../Helper/SignatureComponent';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Patient } from '../Interface/Patient';
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
@ -91,36 +92,11 @@ export default function PatientForm({ type }: Props) {
|
||||
const [section7Data, setSection7Data] = React.useState<any>({});
|
||||
const [section8Data, setSection8Data] = React.useState<any>({});
|
||||
const [allPatientData, setAllPatientData] = React.useState<any>([]);
|
||||
const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState<boolean>(false)
|
||||
const [patientDetailsButtonFlag, setPatientDetailsButtonFlag] =
|
||||
React.useState<boolean>(false);
|
||||
|
||||
const 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
|
||||
) => {
|
||||
setSection1Data({
|
||||
fullName,
|
||||
homePhone,
|
||||
cellPhone,
|
||||
email,
|
||||
age,
|
||||
dateOfBirth,
|
||||
socialSecurityNumber,
|
||||
mailingAddress,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
gender,
|
||||
});
|
||||
const handleFormSection1Data = (patient: Patient) => {
|
||||
setSection1Data(patient);
|
||||
};
|
||||
|
||||
const handleFormSection2Data = (
|
||||
@ -375,7 +351,7 @@ export default function PatientForm({ type }: Props) {
|
||||
section1Data.mailingAddress !== ''
|
||||
) {
|
||||
TextFile();
|
||||
setPatientDetailsButtonFlag(true)
|
||||
setPatientDetailsButtonFlag(true);
|
||||
setAlertProps({
|
||||
open: true,
|
||||
severity: 'success',
|
||||
@ -659,10 +635,15 @@ export default function PatientForm({ type }: Props) {
|
||||
<Grid container spacing={2} flexDirection={'row'}>
|
||||
{type !== 'display' ? (
|
||||
<>
|
||||
|
||||
<Grid item className='collapsable-form-style'>
|
||||
<FormLabel sx={{marginLeft:'10px'}}> Signature:</FormLabel>
|
||||
<SignatureComponent signature={signature} setSignature={setSignature} />
|
||||
<FormLabel sx={{ marginLeft: '10px' }}>
|
||||
{' '}
|
||||
Signature:
|
||||
</FormLabel>
|
||||
<SignatureComponent
|
||||
signature={signature}
|
||||
setSignature={setSignature}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item>
|
||||
@ -708,37 +689,35 @@ export default function PatientForm({ type }: Props) {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container flexDirection={'row-reverse'}>
|
||||
{patientDetailsButtonFlag && type!=='display'?
|
||||
{patientDetailsButtonFlag && type !== 'display' ? (
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, width: '200px' }}
|
||||
onClick={(e)=>{
|
||||
|
||||
}}
|
||||
onClick={(e) => {}}
|
||||
component={Link}
|
||||
to='/view-details'
|
||||
>
|
||||
View Patient Details
|
||||
</Button>
|
||||
</Grid>:null}
|
||||
</Grid>
|
||||
) : null}
|
||||
|
||||
{type=='display'?
|
||||
{type == 'display' ? (
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, width: '200px' }}
|
||||
onClick={(e)=>{
|
||||
|
||||
}}
|
||||
onClick={(e) => {}}
|
||||
component={Link}
|
||||
to='/'
|
||||
>
|
||||
New Patient Form
|
||||
</Button>
|
||||
</Grid>:null}
|
||||
</Grid>
|
||||
) : null}
|
||||
|
||||
<Grid item>
|
||||
<Button
|
||||
|
||||
@ -13,37 +13,10 @@ import {
|
||||
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;
|
||||
}
|
||||
import { Patient } from '../Interface/Patient';
|
||||
|
||||
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;
|
||||
handleFormSection1Data: (patient: Patient) => void;
|
||||
patientDataDiplay: any;
|
||||
type: string;
|
||||
};
|
||||
@ -54,41 +27,31 @@ export default function PersonalSection({
|
||||
type,
|
||||
}: Props) {
|
||||
const [birthDateValue, setBirthDateValue] = React.useState<any>();
|
||||
const [patient, setPatient] = React.useState<any>({
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
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 [errors, setErrors] = React.useState<any>({
|
||||
fullNameError: false,
|
||||
cellPhoneError: false,
|
||||
emailError: false,
|
||||
ageError: false,
|
||||
mailingAddressFalse: false,
|
||||
});
|
||||
|
||||
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
|
||||
);
|
||||
handleFormSection1Data(patient);
|
||||
}, [patient]);
|
||||
|
||||
return (
|
||||
@ -109,7 +72,9 @@ export default function PersonalSection({
|
||||
name='fullName'
|
||||
placeholder='Please enter your name'
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.fullName
|
||||
: patient.fullName
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
@ -120,20 +85,20 @@ export default function PersonalSection({
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
fullNameError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
fullNameError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
required
|
||||
error={patient.fullNameError}
|
||||
helperText={patient.fullNameError ? 'Please enter your name' : ''}
|
||||
error={errors.fullNameError}
|
||||
helperText={errors.fullNameError ? 'Please enter your name' : ''}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -171,20 +136,20 @@ export default function PersonalSection({
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!/^\d{10}$/.test(e.target.value)) {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhoneError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhoneError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.cellPhoneError}
|
||||
error={errors.cellPhoneError}
|
||||
helperText={
|
||||
patient.cellPhoneError
|
||||
errors.cellPhoneError
|
||||
? 'Please enter a valid 10-digit phone number'
|
||||
: ''
|
||||
}
|
||||
@ -238,7 +203,11 @@ export default function PersonalSection({
|
||||
label='Email'
|
||||
name='email'
|
||||
placeholder='Please enter your email'
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.email
|
||||
: patient.email
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -248,20 +217,20 @@ export default function PersonalSection({
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
emailError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
emailError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.emailError}
|
||||
error={errors.emailError}
|
||||
helperText={
|
||||
patient.emailError ? 'Please enter a valid email address' : ''
|
||||
errors.emailError ? 'Please enter a valid email address' : ''
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
@ -281,7 +250,11 @@ export default function PersonalSection({
|
||||
name='age'
|
||||
type='number'
|
||||
placeholder='Please enter your age'
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.age
|
||||
: patient.age
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -291,19 +264,19 @@ export default function PersonalSection({
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
ageError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
ageError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.ageError}
|
||||
helperText={patient.ageError ? 'Please enter your age' : ''}
|
||||
error={errors.ageError}
|
||||
helperText={errors.ageError ? 'Please enter your age' : ''}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -396,20 +369,20 @@ export default function PersonalSection({
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
setErrors((prevValues: any) => ({
|
||||
...prevValues,
|
||||
mailingAddressError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.mailingAddressError}
|
||||
error={errors.mailingAddressError}
|
||||
helperText={
|
||||
patient.mailingAddressError
|
||||
errors.mailingAddressError
|
||||
? 'Please enter your mailing address'
|
||||
: ''
|
||||
}
|
||||
@ -429,7 +402,11 @@ export default function PersonalSection({
|
||||
variant='outlined'
|
||||
label='State'
|
||||
name='state'
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.state
|
||||
: patient.state
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -453,7 +430,11 @@ export default function PersonalSection({
|
||||
variant='outlined'
|
||||
label='City'
|
||||
name='city'
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.city
|
||||
: patient.city
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -478,7 +459,9 @@ export default function PersonalSection({
|
||||
label='Zip Code'
|
||||
name='zipCode'
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.zipCode
|
||||
: patient.zipCode
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
@ -507,7 +490,9 @@ export default function PersonalSection({
|
||||
<RadioGroup
|
||||
aria-labelledby='demo-radio-buttons-group-label'
|
||||
defaultValue={
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.gender
|
||||
: patient.gender
|
||||
}
|
||||
name='radio-buttons-group'
|
||||
onChange={(e) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user