123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
import { Box, Button } from '@mui/material';
|
|
import { useRouter } from 'next/dist/client/router';
|
|
import { useState } from 'react';
|
|
|
|
const row = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
const labelColumn = {
|
|
fontWeight: 'bold',
|
|
width: '25%',
|
|
};
|
|
|
|
const valueColumn = {
|
|
width: '75%',
|
|
};
|
|
|
|
const cardTitle = {
|
|
fontWeight: 'bold',
|
|
fontSize: '1.2rem',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
export default ({ queue_data, show_edit_delete = true }) => {
|
|
const router = useRouter();
|
|
|
|
const [changing_page, setChangingPage] = useState(false);
|
|
|
|
function handleDeleteItemClick({ queue_type, id }) {
|
|
setChangingPage(true);
|
|
fetch(`/api/patient_queue/delete_queue_item?queue_type=${queue_type}&id=${id}`, {
|
|
method: 'GET',
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'OK') {
|
|
console.log('item deleted');
|
|
alert('item deleted');
|
|
router.reload();
|
|
} else {
|
|
console.error(data.message);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
alert('error during removing queue');
|
|
});
|
|
}
|
|
|
|
function handleEditItemClick({ id }) {
|
|
setChangingPage(true);
|
|
router.push(`/NonUrgentCaseEdit/${id}`);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
margin: '1rem 0',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '90vw',
|
|
border: '1px solid gray',
|
|
borderRadius: '1rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '1rem',
|
|
}}
|
|
>
|
|
<Box sx={cardTitle}>{`non-urgent-case ${queue_data.id}`}</Box>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', padding: '0.15rem 0.15rem' }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: '0.5rem', marginTop: '1rem' }}>
|
|
<Box sx={{ flexGrow: 1, fontSize: '0.8rem' }}>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>Name</Box>
|
|
<Box sx={valueColumn}>{queue_data.name || ''}</Box>
|
|
</Box>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>HKID</Box>
|
|
<Box sx={valueColumn}>{queue_data.hkid || '-'}</Box>
|
|
</Box>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>Mobile</Box>
|
|
<Box sx={valueColumn}>{queue_data.mobile || '-'}</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ display: show_edit_delete ? 'flex' : 'none', flexDirection: 'column', gap: '1rem' }}>
|
|
<Button
|
|
disabled={changing_page}
|
|
size='small'
|
|
variant='contained'
|
|
onClick={() => handleDeleteItemClick({ queue_type: 'non-urgent', id: queue_data.id })}
|
|
>
|
|
delete
|
|
</Button>
|
|
<Button
|
|
disabled={changing_page}
|
|
size='small'
|
|
variant='contained'
|
|
onClick={() => handleEditItemClick({ id: queue_data.id })}
|
|
>
|
|
edit
|
|
</Button>
|
|
|
|
{/* */}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|