Medical history section
This commit is contained in:
sonika
parent
2401d3eea2
commit
f3fa5136ec
@ -16,7 +16,7 @@ interface FormValues {
|
||||
spouseBusinessPhone: string;
|
||||
emergencyContact: string;
|
||||
relationship: string;
|
||||
phone: string;
|
||||
spousePhone: string;
|
||||
}
|
||||
|
||||
const validationSchema = yup.object({
|
||||
@ -32,10 +32,10 @@ const validationSchema = yup.object({
|
||||
// spouseBusinessPhone:yup.string().required("Full name is required"),
|
||||
emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
relationship:yup.string().required("Relationship is required"),
|
||||
phone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
});
|
||||
|
||||
const Form: React.FC = () => {
|
||||
export default function FamilyFormSection(){
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
maritalStatus:'',
|
||||
@ -50,7 +50,7 @@ const Form: React.FC = () => {
|
||||
spouseBusinessPhone:'',
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
phone:''
|
||||
spousePhone:''
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
@ -87,6 +87,7 @@ const Form: React.FC = () => {
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField
|
||||
required
|
||||
variant="filled"
|
||||
label="Number of Children/Ages"
|
||||
className='collapsable-form-style'
|
||||
@ -100,6 +101,7 @@ const Form: React.FC = () => {
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField
|
||||
required
|
||||
variant="filled"
|
||||
label="Occupation"
|
||||
className='collapsable-form-style'
|
||||
@ -207,19 +209,16 @@ const Form: React.FC = () => {
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Phone" type="tel"
|
||||
label="Spouse's Phone" type="tel"
|
||||
className='collapsable-form-style'
|
||||
name='phone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.phone}
|
||||
value={formik.values.spousePhone}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Form;
|
||||
144
src/Components/PatientForm/MedicalHistorySection3.tsx
Normal file
144
src/Components/PatientForm/MedicalHistorySection3.tsx
Normal file
@ -0,0 +1,144 @@
|
||||
import * as React from 'react';
|
||||
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
interface FormValues {
|
||||
physicianname: string;
|
||||
physiciancity: string;
|
||||
physicianstate: string;
|
||||
physicianphone: string;
|
||||
chiropractorName: string;
|
||||
chiropractorState: string;
|
||||
xray: boolean;
|
||||
ctScan: boolean;
|
||||
cdImages: boolean;
|
||||
visitDetails: string;
|
||||
cellPhoneProvider: string;
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
familyphysician: Yup.string().required('Required'),
|
||||
city: Yup.string().required('Required'),
|
||||
state: Yup.string().required('Required'),
|
||||
phone: Yup.string().required('Required'),
|
||||
chiropractorName: Yup.string().required('Required'),
|
||||
xray: Yup.boolean().required('Required'),
|
||||
ctScan: Yup.boolean().required('Required'),
|
||||
cdImages: Yup.boolean().required('Required'),
|
||||
visitDetails: Yup.string().required('Required'),
|
||||
cellPhoneProvider: Yup.string().required('Required'),
|
||||
});
|
||||
|
||||
export default function MedicalHistoryForm(){
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
physicianname: '',
|
||||
physiciancity: '',
|
||||
physicianstate: '',
|
||||
physicianphone: '',
|
||||
chiropractorName: '',
|
||||
chiropractorState: '',
|
||||
xray: false,
|
||||
ctScan: false,
|
||||
cdImages: false,
|
||||
visitDetails: '',
|
||||
cellPhoneProvider: '',
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
return(
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Family physician"
|
||||
name='familyphysician'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianname}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="City"
|
||||
name='city'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physiciancity}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="State"
|
||||
name='state'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianstate}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Phone"
|
||||
type="tel"
|
||||
name='phone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.physicianphone}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'></Grid>
|
||||
|
||||
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
|
||||
<FormControl>
|
||||
<FormLabel>Previous Chiropractic Care</FormLabel>
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="yes"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Chiropractor's Name"
|
||||
name='chiropractorName'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.chiropractorName}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="City/State"
|
||||
name='chiropractorState'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.chiropractorState}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -4,7 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import FormSection1 from './FormSection1';
|
||||
import PersonalSection from './PersonalSection1';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
@ -12,7 +12,9 @@ import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
import FormSection2 from './FormSection2';
|
||||
import FormSection2 from './FamilyFormSection2';
|
||||
import MedicalHistory from './MedicalHistorySection3';
|
||||
import FamilyFormSection from './FamilyFormSection2';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
@ -100,34 +102,47 @@ export default function PatientForm(){
|
||||
<Paper elevation={0} className='app-screen-constants'>
|
||||
<Header/>
|
||||
<Paper elevation={0} sx={{margin:4, minHeight:700}} >
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Confidential Patient Information
|
||||
</Typography>
|
||||
<Grid>
|
||||
<Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography variant="h6">Basic Patient Information (Part 1)</Typography>
|
||||
<Typography variant="h6">Patient's Personal Information</Typography>
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<FormSection1/>
|
||||
<PersonalSection/>
|
||||
</AccordionDetails>
|
||||
</form>
|
||||
|
||||
</Accordion>
|
||||
|
||||
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
|
||||
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
|
||||
<Typography variant="h6">Basic Patient Information (Part 2)</Typography>
|
||||
<Typography variant="h6">Patient's Family Information</Typography>
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<FormSection2/>
|
||||
<FamilyFormSection/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
|
||||
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
|
||||
<Typography variant="h6">Patient's Medical History Information</Typography>
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<MedicalHistory/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Grid >
|
||||
<Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
|
||||
Submit
|
||||
@ -135,6 +150,7 @@ export default function PatientForm(){
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</form>
|
||||
</Paper>
|
||||
<Footer/>
|
||||
</Paper>
|
||||
|
||||
@ -35,7 +35,7 @@ interface Patient {
|
||||
zipCode: yup.string().matches(/^\d{5}$/, "Zip code must be 6 digits").required("Zip code is required")
|
||||
});
|
||||
|
||||
export default function FormSection1(){
|
||||
export default function PersonalSection(){
|
||||
|
||||
const [startDateValue, setStartDateValue] = React.useState<any>();
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
@ -229,7 +229,7 @@ export default function FormSection1(){
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
variant="filled"
|
||||
variant="filled"
|
||||
label="Zip Code"
|
||||
name="zipCode"
|
||||
value={formik.values.zipCode}
|
||||
Loading…
x
Reference in New Issue
Block a user