Update
This commit is contained in:
ivan-sim
@@ -94,6 +94,8 @@ export default function Table<T>({
|
||||
selected,
|
||||
openRowId, // Receive the currently opened row ID
|
||||
setOpenRowId, // Receive the function to set the opened row ID
|
||||
dialogIDRow,
|
||||
setDialogIDRow,
|
||||
reloadData,
|
||||
}: TableListProps<T>) {
|
||||
/* ------------------------------- handle sort ------------------------------ */
|
||||
@@ -249,7 +251,8 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
|
||||
|
||||
|
||||
const [openDialogStatus, setOpenDialogStatus] = useState(false);
|
||||
const [dialogIDRow, setDialogIDRow] = useState<number | null>(null);
|
||||
// const [dialogIDRow, setDialogIDRow] = useState<number | null>(null);
|
||||
console.log(dialogIDRow);
|
||||
const [dialogIDRowDriver, setDialogIDRowDriver] = useState<number | null>(null);
|
||||
const [txtStatusDriver, setTxtStatusDriver] = useState('');
|
||||
const [txtIDDriver, setTxtIDDriver] = useState('');
|
||||
@@ -565,11 +568,87 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
{/* Dialog Update Status */}
|
||||
<Dialog open={dialogIDRow === row.id} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">{localeData.txtConfirmation}</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={() => setDialogIDRow(row.id === dialogIDRow ? null : row.id)}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='body1'>{localeData.txtDialogConfirmation}</Typography>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '50%'}}>{localeData.txtNomorResep}</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '50%'}}>{row.no_resep}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '50%'}}>{localeData.txtTanggalTerbitResep}</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '50%'}}>{row.tanggal}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleClickKonfirmasi(row)} disabled={isDisabled}>{localeData.txtOK}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
{/* Modal for fullscreen display */}
|
||||
<Modal open={dialogIDRowDriver === row.id} onClose={() => handleClose(row)}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)', // semi-transparent background
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<CircularProgress color="inherit" />
|
||||
<Typography variant="h6" sx={{ mt: 2 }}>
|
||||
{localeData.txtFindingDriver}
|
||||
</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="h4">Info!</Typography>
|
||||
<Typography variant="h6" sx={{ mt: 2 }}>
|
||||
{txtIDDriver ? (
|
||||
`${localeData.txtDriverFound} ${txtIDDriver} status ${txtStatusDriver}.`
|
||||
) : (
|
||||
// You can add an alternative UI or message here, or leave it empty
|
||||
`Failed to get driver, please check the message info.`
|
||||
)}
|
||||
|
||||
|
||||
</Typography>
|
||||
<Button
|
||||
sx={{ mt: 4, backgroundColor: '#19BBBB' }}
|
||||
variant="contained"
|
||||
onClick={() => handleClose(row)}
|
||||
>
|
||||
{localeData.txtOK}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Modal>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow
|
||||
sx={{ cursor: 'pointer' }} // Use pointer cursor always, or conditionally based on your preference
|
||||
>
|
||||
<TableCell colSpan={6}>
|
||||
<TableCell colSpan={7}>
|
||||
<Collapse in={openRowId === row.id} timeout="auto" unmountOnExit>
|
||||
<Card sx={{padding:2}}>
|
||||
{/* Icon inside a Box for spacing and alignment */}
|
||||
@@ -724,12 +803,17 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2"><strong>{row.pengiriman}</strong></Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">{localeData.txtTotal} :</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2"><strong>{row.total_kirim}</strong></Typography>
|
||||
</Grid>
|
||||
{formattedRoleName === 'cs-lms' ? (
|
||||
<>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">{localeData.txtTotal} :</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2"><strong>{row.total_kirim}</strong></Typography>
|
||||
</Grid>
|
||||
</>
|
||||
):''}
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@@ -842,7 +926,7 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
|
||||
{localeData.txtButtonClose}
|
||||
</Button>
|
||||
{/* Accept Button on the Right */}
|
||||
{row.button_accept && formattedRoleName === 'admin-apotek' && allowedStatusesForApotek.includes(row.sStatus) ? (
|
||||
{/* {row.button_accept && formattedRoleName === 'admin-apotek' && allowedStatusesForApotek.includes(row.sStatus) ? (
|
||||
<Button variant="contained" color="primary" onClick={() => setDialogIDRow(row.id === dialogIDRow ? null : row.id)}>
|
||||
{row.button_accept}
|
||||
</Button>
|
||||
@@ -851,87 +935,13 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
|
||||
<Button variant="contained" color="primary" onClick={() => setDialogIDRow(row.id === dialogIDRow ? null : row.id)}>
|
||||
{row.button_accept}
|
||||
</Button>
|
||||
) : ''}
|
||||
) : ''} */}
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{/* Dialog Update Status */}
|
||||
<Dialog open={dialogIDRow === row.id} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">{localeData.txtConfirmation}</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={() => setDialogIDRow(row.id === dialogIDRow ? null : row.id)}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='body1'>{localeData.txtDialogConfirmation}</Typography>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '50%'}}>{localeData.txtNomorResep}</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '50%'}}>{row.no_resep}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '50%'}}>{localeData.txtTanggalTerbitResep}</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '50%'}}>{row.tanggal}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleClickKonfirmasi(row)} disabled={isDisabled}>{localeData.txtOK}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
{/* Modal for fullscreen display */}
|
||||
<Modal open={dialogIDRowDriver === row.id} onClose={() => handleClose(row)}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)', // semi-transparent background
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<CircularProgress color="inherit" />
|
||||
<Typography variant="h6" sx={{ mt: 2 }}>
|
||||
{localeData.txtFindingDriver}
|
||||
</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="h4">Info!</Typography>
|
||||
<Typography variant="h6" sx={{ mt: 2 }}>
|
||||
{txtIDDriver ? (
|
||||
`${localeData.txtDriverFound} ${txtIDDriver} status ${txtStatusDriver}.`
|
||||
) : (
|
||||
// You can add an alternative UI or message here, or leave it empty
|
||||
`Failed to get driver, please check the message info.`
|
||||
)}
|
||||
{/* Dialog Update Status confirmation */}
|
||||
|
||||
|
||||
</Typography>
|
||||
<Button
|
||||
sx={{ mt: 4, backgroundColor: '#19BBBB' }}
|
||||
variant="contained"
|
||||
onClick={() => handleClose(row)}
|
||||
>
|
||||
{localeData.txtOK}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Modal>
|
||||
</Card>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user