125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { LoadingButton } from '@mui/lab';
|
|
import { Button, Container, Modal, Paper } from '@mui/material';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { logger } from '@/lib/default-logger';
|
|
import { toast } from '@/components/core/toaster';
|
|
import { deleteUser } from '@/db/Users/Delete';
|
|
|
|
export default function ConfirmDeleteModal({
|
|
open,
|
|
setOpen,
|
|
idToDelete,
|
|
reloadRows,
|
|
}: {
|
|
open: boolean;
|
|
setOpen: (b: boolean) => void;
|
|
idToDelete: string;
|
|
reloadRows: () => void;
|
|
}): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
// const handleClose = () => setOpen(false);
|
|
function handleClose(): void {
|
|
setOpen(false);
|
|
}
|
|
|
|
const [isDeleteing, setIsDeleteing] = React.useState(false);
|
|
const style = {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
};
|
|
|
|
function handleUserConfirmDelete(): void {
|
|
if (idToDelete) {
|
|
setIsDeleteing(true);
|
|
|
|
// RULES: delete<CollectionName>
|
|
deleteUser(idToDelete)
|
|
.then(() => {
|
|
reloadRows();
|
|
handleClose();
|
|
toast(t('delete.success'));
|
|
})
|
|
.catch((err) => {
|
|
// console.error(err)
|
|
logger.error(err);
|
|
toast(t('delete.error'));
|
|
})
|
|
.finally(() => {
|
|
setIsDeleteing(false);
|
|
});
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
open={open}
|
|
onClose={handleClose}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<Container maxWidth="sm">
|
|
<Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ display: 'flex', p: 3 }}
|
|
>
|
|
<Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
|
|
<NoteIcon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
<Stack spacing={3}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h5">{t('Delete User ?')}</Typography>
|
|
<Typography
|
|
color="text.secondary"
|
|
variant="body2"
|
|
>
|
|
{t('Are you sure you want to delete this user ?')}
|
|
</Typography>
|
|
</Stack>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ justifyContent: 'flex-end' }}
|
|
>
|
|
<Button
|
|
color="secondary"
|
|
onClick={handleClose}
|
|
>
|
|
{t('Cancel')}
|
|
</Button>
|
|
<LoadingButton
|
|
color="error"
|
|
variant="contained"
|
|
onClick={(e) => {
|
|
handleUserConfirmDelete();
|
|
}}
|
|
loading={isDeleteing}
|
|
>
|
|
{t('Delete')}
|
|
</LoadingButton>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Paper>
|
|
</Container>
|
|
</Box>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|