diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index d814f2f..d85b3a1 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -44,6 +44,7 @@ import { TextFilterParams, } from 'ag-grid-community'; import PaperForm from '../common/paper-form'; +import DeleteUserDialog from './delete-user-dialog'; const defaultColDef: ColDef = { editable: false, @@ -187,6 +188,7 @@ const UsersPage: FunctionComponent = () => { defaultValues: { user: '' }, //need default not undefined value for html input, else react error at runtime }); const [open, setOpen] = useState(false); + const [showDeletionDialog, setShowDeletionDialog] = useState(false); const handleClose = () => { setOpen(false); reset(); @@ -242,7 +244,7 @@ const UsersPage: FunctionComponent = () => { onClick={useCallback(() => setOpen(true), [])} /> setShowDeletionDialog(true)} disabled={deleteUsersDisabled} /> @@ -302,6 +304,13 @@ const UsersPage: FunctionComponent = () => { + + ); diff --git a/src/pages/users/delete-user-dialog.tsx b/src/pages/users/delete-user-dialog.tsx new file mode 100644 index 0000000..5546832 --- /dev/null +++ b/src/pages/users/delete-user-dialog.tsx @@ -0,0 +1,95 @@ +/* + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { FunctionComponent, useCallback } from 'react'; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, +} from '@mui/material'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { UserInfos } from '../../services'; + +export interface DeleteUserDialogProps { + open: boolean; + setOpen: (open: boolean) => void; + usersInfos: UserInfos[]; + deleteUsers: () => void; +} + +const DeleteUserDialog: FunctionComponent = (props) => { + const { open, setOpen, deleteUsers, usersInfos } = props; + const intl = useIntl(); + + const handleClose = useCallback(() => { + setOpen(false); + }, [setOpen]); + + const buildTitle = useCallback( + (users: UserInfos[]) => { + const hasMultipleItems = users.length > 1; + const descriptor = { + id: hasMultipleItems + ? 'users.form.delete.multiple.dialog.title' + : 'users.form.delete.dialog.title', + }; + return intl.formatMessage( + descriptor, + hasMultipleItems ? { itemsCount: users.length } : undefined + ); + }, + [intl] + ); + const onSubmit = useCallback(() => { + deleteUsers(); + setOpen(false); + }, [deleteUsers, setOpen]); + + const buildContent = useCallback( + (users: UserInfos[]) => { + const hasMultipleItems = users.length > 1; + const descriptor = { + id: hasMultipleItems + ? 'users.form.delete.multiple.dialog.message' + : 'users.form.delete.dialog.message', + }; + if (hasMultipleItems) { + return intl.formatMessage(descriptor, { + itemsCount: users.length, + }); + } + return intl.formatMessage(descriptor, { + itemName: users.length === 1 && users[0].sub, + }); + }, + [intl] + ); + + return ( + + {buildTitle(usersInfos)} + + + {buildContent(usersInfos)} + + + + + + + + ); +}; + +export default DeleteUserDialog; diff --git a/src/translations/en.json b/src/translations/en.json index c092079..b141b12 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -43,6 +43,11 @@ "users.form.content": "Please fill in new user data.", "users.form.field.username.label": "User ID", + "users.form.delete.dialog.title": "Delete a user", + "users.form.delete.multiple.dialog.message": "{itemsCount} users will be deleted.", + "users.form.delete.dialog.message": "{itemName} will be deleted.", + "users.form.delete.multiple.dialog.title": "Delete {itemsCount} users", + "profiles.table.toolbar.add": "Add profile", "profiles.table.toolbar.add.label": "Add a profile", "profiles.form.title": "Add a profile", diff --git a/src/translations/fr.json b/src/translations/fr.json index 35d380c..e098c62 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -44,6 +44,11 @@ "users.form.content": "Veuillez renseigner les informations de l'utilisateur.", "users.form.field.username.label": "ID utilisateur", + "users.form.delete.dialog.title": "Supprimer utilisateur", + "users.form.delete.dialog.message": "{itemName} va être supprimé.", + "users.form.delete.multiple.dialog.message": "{itemsCount} utilisateurs vont être supprimés.", + "users.form.delete.multiple.dialog.title": "Supprimer {itemsCount} utilisateurs", + "profiles.table.toolbar.add": "Ajouter profil", "profiles.table.toolbar.add.label": "Ajouter un profil", "profiles.form.title": "Ajouter un profil",