Files
jamespong14205/task1/project/003_src/client/pages/SemiUrgentCaseEdit/[id].js
2025-02-01 02:02:25 +08:00

247 lines
7.5 KiB
JavaScript

import React, { useEffect } from 'react';
import { Box, Button, 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 router = useRouter();
const { id } = router.query;
const [changing_page, setChangingPage] = React.useState(false);
const [loading, setLoading] = React.useState(true);
const formik = useFormik({
enableReinitialize: true,
initialValues: {
patient_name: '',
patient_hkid: '',
patient_age: 0,
patient_mobile: '',
//
bruisesScratchesMinorBurns: false,
chestPain: false,
headache: false,
myMuiCheck: false,
nauseaAndVomiting: false,
runnyOrStuffyNose: false,
soreThroat: false,
},
validationSchema,
onSubmit: values => {
fetch('/api/patient_queue/update_queue_item', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, queue_type: 'semi-urgent', values }),
})
.then(response => response.json())
.then(data => {
if (data.status) {
alert('saved !');
router.reload();
} else {
// alert(data.message);
alert('sorry there are something wrong, please try again');
}
})
.catch(err => {
console.error(err);
alert('server error');
});
},
});
useEffect(() => {
console.log({ t: `/api/patient_queue/read_queue_item?queue_type=semi-urgent&id=${id}` });
if (id) {
fetch(`/api/patient_queue/read_queue_item?queue_type=semi-urgent&id=${id}`, {
method: 'GET',
})
.then(response => response.json())
.then(data => {
if (data.status) {
console.log(data);
const {
name,
hkid,
mobile,
age,
bruisesScratchesMinorBurns,
chestPain,
headache,
myMuiCheck,
nauseaAndVomiting,
runnyOrStuffyNose,
soreThroat,
} = data.queueItem;
formik.setValues({
patient_name: name,
patient_hkid: hkid,
patient_mobile: mobile,
patient_age: age,
bruisesScratchesMinorBurns,
chestPain,
headache,
myMuiCheck,
nauseaAndVomiting,
runnyOrStuffyNose,
soreThroat,
});
} else {
alert(data.message);
}
setLoading(false);
})
.catch(err => {
console.error(err);
alert('server error');
})
.finally(() => {
setLoading(false);
});
}
}, [id]);
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',
}}
>
Edit Registration
</Box>
<TextField
fullWidth
disabled={changing_page || formik.isSubmitting}
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
disabled={changing_page || formik.isSubmitting}
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
disabled={changing_page || formik.isSubmitting}
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
disabled={changing_page || formik.isSubmitting}
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: '1rem', display: 'flex', justifyContent: 'space-around' }}>
<Button
disabled={changing_page || formik.isSubmitting}
onClick={() => {
setChangingPage(true);
router.push('/SemiUrgentCaseList');
}}
variant='outline'
startIcon={<ChevronLeftOutlined />}
>
Back
</Button>
{/* */}
<Button
color='primary'
variant='contained'
type='submit'
disabled={!(formik.isValid && formik.dirty && !formik.isSubmitting) || changing_page}
>
Save
</Button>
</Box>
</Box>
</form>
</Box>
</>
);
};