319 lines
10 KiB
JavaScript
319 lines
10 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
|
|
import MailIcon from '@mui/icons-material/Mail';
|
|
import InboxIcon from '@mui/icons-material/MoveToInbox';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
Divider,
|
|
Drawer,
|
|
FormControlLabel,
|
|
FormGroup,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
TextField,
|
|
} from '@mui/material';
|
|
import Head from 'next/head';
|
|
|
|
import { ChevronLeftOutlined } from '@mui/icons-material';
|
|
import Loading from 'components/Loading';
|
|
import { useFormik } from 'formik';
|
|
import { useRouter } from 'next/dist/client/router';
|
|
import * as yup from 'yup';
|
|
|
|
const validationSchema = yup.object({
|
|
patient_name: yup
|
|
.string('Enter your name')
|
|
.min(2, 'Name should be of minimum 2 characters length')
|
|
.required('Name is required'),
|
|
patient_hkid: yup
|
|
.string('Enter your HKID')
|
|
.matches(/^[A-Z]{1,2}[0-9]{6}\([0-9]\)$/, 'HKID should be in format of XX123456(1-9)')
|
|
.required('HKID is required'),
|
|
patient_age: yup
|
|
.number('Enter your age')
|
|
.min(1, 'Age should be greater than 0')
|
|
.max(90, 'Age should be less than 90')
|
|
.required('Age is required'),
|
|
patient_mobile: yup
|
|
.string('Enter your mobile number')
|
|
.matches(/^[0-9]{8}$/, 'Mobile number should be 8 numbers')
|
|
.required('Mobile number is required'),
|
|
});
|
|
|
|
export default () => {
|
|
const [open, setOpen] = React.useState(false);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [one_symptoms_selected, setOneSymptomsSelected] = React.useState(false);
|
|
const router = useRouter();
|
|
|
|
const toggleDrawer = newOpen => () => {
|
|
setOpen(newOpen);
|
|
};
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
patient_name: '',
|
|
patient_hkid: '',
|
|
patient_age: 0,
|
|
patient_mobile: '',
|
|
bruisesScratchesMinorBurns: false,
|
|
chestPain: false,
|
|
headache: false,
|
|
myMuiCheck: false,
|
|
nauseaAndVomiting: false,
|
|
runnyOrStuffyNose: true,
|
|
soreThroat: false,
|
|
},
|
|
validationSchema,
|
|
onSubmit: values => {
|
|
// alert(JSON.stringify(values, null, 2));
|
|
fetch('/api/patient_queue/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ values }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (data.queue) {
|
|
alert(`registered successfully, will assign you to ${data.queue} queue`);
|
|
} else {
|
|
alert(`registered successfully`);
|
|
}
|
|
localStorage.setItem('queue_type', data.queue);
|
|
localStorage.setItem('queue_id', data.result.id);
|
|
localStorage.setItem('queue_name', data.result.name);
|
|
localStorage.setItem('queue_hkid', data.result.hkid);
|
|
localStorage.setItem('queue_mobile', data.result.mobile);
|
|
localStorage.setItem('queue_description', data.result.description);
|
|
|
|
router.push('/PatientQueueDisplay');
|
|
} else {
|
|
// alert(data.message);
|
|
alert('sorry there are something wrong, please try again');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
alert('server error');
|
|
});
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
setOneSymptomsSelected(
|
|
!(
|
|
formik.values.bruisesScratchesMinorBurns ||
|
|
formik.values.chestPain ||
|
|
formik.values.headache ||
|
|
formik.values.myMuiCheck ||
|
|
formik.values.nauseaAndVomiting ||
|
|
formik.values.runnyOrStuffyNose ||
|
|
formik.values.soreThroat
|
|
),
|
|
);
|
|
}, [formik.values]);
|
|
|
|
const DrawerList = (
|
|
<Box sx={{ width: 250 }} role='presentation' onClick={toggleDrawer(false)}>
|
|
<List>
|
|
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
{['All mail', 'Trash', 'Spam'].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem('queue_id')) {
|
|
router.push('/PatientQueueDisplay');
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>dashboard - non-urgent case</title>
|
|
<meta name='description' content='Generated by create next app' />
|
|
<link rel='icon' href='/favicon.ico' />
|
|
</Head>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '90vh',
|
|
}}
|
|
>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<Box sx={{ marginLeft: '2rem', marginRight: '2rem' }}>
|
|
<Box
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
fontSize: '1.1rem',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
>
|
|
Electronic Diagnosis Registration
|
|
</Box>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='patient_name'
|
|
name='patient_name'
|
|
label='Patient name'
|
|
value={formik.values.patient_name}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.patient_name && Boolean(formik.errors.patient_name)}
|
|
helperText={formik.touched.patient_name && formik.errors.patient_name}
|
|
/>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='patient_hkid'
|
|
name='patient_hkid'
|
|
label='HKID'
|
|
value={formik.values.patient_hkid}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.patient_hkid && Boolean(formik.errors.patient_hkid)}
|
|
helperText={formik.touched.patient_hkid && formik.errors.patient_hkid}
|
|
/>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='patient_age'
|
|
name='patient_age'
|
|
label='Age'
|
|
value={formik.values.patient_age}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.patient_age && Boolean(formik.errors.patient_age)}
|
|
helperText={formik.touched.patient_age && formik.errors.patient_age}
|
|
/>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='patient_mobile'
|
|
name='patient_mobile'
|
|
label='Mobile'
|
|
value={formik.values.patient_mobile}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.patient_mobile && Boolean(formik.errors.patient_mobile)}
|
|
helperText={formik.touched.patient_mobile && formik.errors.patient_mobile}
|
|
/>
|
|
|
|
<Box sx={{ marginTop: '2rem' }}>
|
|
<FormGroup>
|
|
<Box sx={{ marginTop: '1rem', marginBottom: '1rem' }}>Reason for seeking medical advice</Box>
|
|
{formik.dirty && one_symptoms_selected ? (
|
|
<Box sx={{ color: 'red', fontSize: '0.8rem', fontWeight: 'bold' }}>
|
|
Please select at least one symptom
|
|
</Box>
|
|
) : (
|
|
<></>
|
|
)}
|
|
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='Runny or stuffy nose'
|
|
checked={formik.values.runnyOrStuffyNose}
|
|
onChange={() => formik.setFieldValue('runnyOrStuffyNose', !formik.values.runnyOrStuffyNose)}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='sore throat'
|
|
checked={formik.values.soreThroat}
|
|
onChange={() => formik.setFieldValue('soreThroat', !formik.values.soreThroat)}
|
|
/>
|
|
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='nausea and vomiting'
|
|
checked={formik.values.nauseaAndVomiting}
|
|
onChange={() => formik.setFieldValue('nauseaAndVomiting', !formik.values.nauseaAndVomiting)}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='Headache (Semi-urgent)'
|
|
checked={formik.values.headache}
|
|
onChange={() => formik.setFieldValue('headache', !formik.values.headache)}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='chest pain (Semi-urgent)'
|
|
checked={formik.values.chestPain}
|
|
onChange={() => formik.setFieldValue('chestPain', !formik.values.chestPain)}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox />}
|
|
label='Bruises, scratches, minor burns (Semi-urgent)'
|
|
checked={formik.values.bruisesScratchesMinorBurns}
|
|
onChange={() =>
|
|
formik.setFieldValue('bruisesScratchesMinorBurns', !formik.values.bruisesScratchesMinorBurns)
|
|
}
|
|
/>
|
|
</FormGroup>
|
|
</Box>
|
|
<Box sx={{ marginTop: '1rem', display: 'flex', justifyContent: 'space-around' }}>
|
|
<Button
|
|
disabled={formik.isSubmitting}
|
|
onClick={() => router.push('/')}
|
|
variant='outline'
|
|
startIcon={<ChevronLeftOutlined />}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
{/* */}
|
|
<Button
|
|
color='primary'
|
|
variant='contained'
|
|
type='submit'
|
|
disabled={!(formik.isValid && formik.dirty && !formik.isSubmitting)}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</form>
|
|
</Box>
|
|
|
|
<Drawer open={open} onClose={toggleDrawer(false)}>
|
|
{DrawerList}
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|