This commit is contained in:
ivan-sim
2024-10-15 08:30:27 +07:00
parent 67e4306f10
commit e430c446fd
4 changed files with 143 additions and 98 deletions

View File

@@ -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>

View File

@@ -125,11 +125,11 @@
"txtTinggi" : "Tinggi / Berat",
"txtLabelNew": "Baru",
"txtLabelAccepted": "Diterima Apotek",
"txtLabelReady": "Pesanan Siap Diambil",
"txtLabelReady": "Siap Diambil",
"txtLabelWaitingCourir": "Menunggu Kurir",
"txtLabelPackagePickedUp": "Paket Sudah Diambil",
"txtLabelPackageOnDelivery": "Sedang Diantar ke Alamat Tujuan",
"txtLabelPackageDelivered": "Sudah diterima Pasien",
"txtLabelPackagePickedUp": "Sudah Diambil",
"txtLabelPackageOnDelivery": "Sedang Diantar",
"txtLabelPackageDelivered": "Diterima Pasien",
"txtLabelWaitingForPayment": "Menunggu Pembayaran",
"txtOK": "Ya",
"txtFindingDriver" : "Sedang mencari driver...",

View File

@@ -30,11 +30,18 @@ import MuiDialog from '@/components/MuiDialog';
import DialogMember from '@/sections/dashboard/DialogMember';
import DialogClaimSubmit from '@/sections/dashboard/DialogClaimSubmit';
import { fPostFormat } from '@/utils/formatTime';
import useAuth from '@/hooks/useAuth';
export default function TableList() {
const navigate = useNavigate();
const { localeData }: any = useContext(LanguageContext);
const {user} = useAuth();
const formattedRoleName = user?.role.name;
// List of statuses for 'apotek'
const allowedStatusesForApotek = ['waiting_pharmacy', 'order_prepared'];
const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready', 'waiting_for_courir', 'package_picked_up', 'package_on_delivery', 'failed'];
const [data, setData] = useState([]);
// Download Resep
@@ -288,6 +295,13 @@ export default function TableList() {
label: localeData.txtStatus,
isSort: true,
},
// Conditionally include button_accept if the role is 'admin-apotek'
...(formattedRoleName === 'admin-apotek' ? [{
id: 'button_accept',
align: 'left',
label: localeData.txtConfirmation,
isSort: false,
}] : []),
{
id: 'action',
align: 'right',
@@ -301,6 +315,7 @@ export default function TableList() {
getData();
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
const [openRowId, setOpenRowId] = useState<number | null>(null);
const [dialogIDRow, setDialogIDRow] = useState<number | null>(null);
function getData()
{
(async () => {
@@ -372,6 +387,18 @@ export default function TableList() {
{obj.valid_tanggal ? fDateTime(obj.valid_tanggal) : ''}
</Label>
,
...(formattedRoleName === 'admin-apotek' && obj.button_accept && {
button_accept: (
<Button
variant="contained"
color="primary"
style={{ width: 'auto' }}
onClick={() => setDialogIDRow(obj.id === dialogIDRow ? null : obj.id)}
>
{obj.button_accept}
</Button>
),
}),
action:
<TableMoreMenu actions={
<>
@@ -433,6 +460,8 @@ export default function TableList() {
// filterEndDate={filterEndDate}
openRowId={openRowId} // Pass the currently opened row ID
setOpenRowId={setOpenRowId} // Pass the function to set the opened row ID
dialogIDRow={dialogIDRow}
setDialogIDRow={setDialogIDRow}
reloadData={getData}
/>
</>