From 76b51bca4ebafbacff3555a1db2a0dee5c1c7e60 Mon Sep 17 00:00:00 2001 From: Mohammer5 Date: Tue, 19 Mar 2024 09:00:39 +0800 Subject: [PATCH] feat(delete action): add confirmation dialog --- i18n/en.pot | 16 ++-- .../sectionList/SectionListWrapper.tsx | 8 +- .../listActions/DefaultListActions.tsx | 3 + .../sectionList/listActions/DeleteAction.tsx | 90 +++++++++++++++++++ .../listActions/SectionListActions.tsx | 34 +++---- 5 files changed, 125 insertions(+), 26 deletions(-) create mode 100644 src/components/sectionList/listActions/DeleteAction.tsx diff --git a/i18n/en.pot b/i18n/en.pot index d9e6d4ee..66037cb2 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-03-18T01:33:26.193Z\n" -"PO-Revision-Date: 2024-03-18T01:33:26.193Z\n" +"POT-Creation-Date: 2024-03-19T00:47:49.739Z\n" +"PO-Revision-Date: 2024-03-19T00:47:49.739Z\n" msgid "schemas" msgstr "schemas" @@ -249,15 +249,18 @@ msgstr "Search by name, code or ID" msgid "Public access" msgstr "Public access" +msgid "Delete" +msgstr "Delete" + +msgid "Are you sure that you want to delete this data element?" +msgstr "Are you sure that you want to delete this data element?" + msgid "Show details" msgstr "Show details" msgid "Sharing settings" msgstr "Sharing settings" -msgid "Delete" -msgstr "Delete" - msgid "At least one column must be selected" msgstr "At least one column must be selected" @@ -567,6 +570,9 @@ msgstr "Locales" msgid "You do not have access to edit this item." msgstr "You do not have access to edit this item." +msgid "You do not have access to delete this item." +msgstr "You do not have access to delete this item." + msgid "Sum" msgstr "Sum" diff --git a/src/components/sectionList/SectionListWrapper.tsx b/src/components/sectionList/SectionListWrapper.tsx index 192f6cfc..03048d63 100644 --- a/src/components/sectionList/SectionListWrapper.tsx +++ b/src/components/sectionList/SectionListWrapper.tsx @@ -110,12 +110,18 @@ export const SectionListWrapper = ({ (model: BaseListModel) => ( deleteModel(model)} /> ), - [handleDetailsClick, setSharingDialogId, deleteModel] + [ + handleDetailsClick, + setSharingDialogId, + deleteModel, + schema.displayName, + ] ) const isAllSelected = data ? checkAllSelected(data) : false diff --git a/src/components/sectionList/listActions/DefaultListActions.tsx b/src/components/sectionList/listActions/DefaultListActions.tsx index a723f4d2..9c633910 100644 --- a/src/components/sectionList/listActions/DefaultListActions.tsx +++ b/src/components/sectionList/listActions/DefaultListActions.tsx @@ -5,6 +5,7 @@ import { ListActions, ActionEdit, ActionMore } from './SectionListActions' type DefaultListActionProps = { model: BaseListModel + modelType: string onShowDetailsClick: (model: BaseListModel) => void onOpenSharingClick: (id: string) => void onDeleteClick: () => void @@ -12,6 +13,7 @@ type DefaultListActionProps = { export const DefaultListActions = ({ model, + modelType, onShowDetailsClick, onOpenSharingClick, onDeleteClick, @@ -29,6 +31,7 @@ export const DefaultListActions = ({ onShowDetailsClick={() => onShowDetailsClick(model)} onOpenSharingClick={() => onOpenSharingClick(model.id)} onDeleteClick={onDeleteClick} + modelType={modelType} /> ) diff --git a/src/components/sectionList/listActions/DeleteAction.tsx b/src/components/sectionList/listActions/DeleteAction.tsx new file mode 100644 index 00000000..476a08e0 --- /dev/null +++ b/src/components/sectionList/listActions/DeleteAction.tsx @@ -0,0 +1,90 @@ +import i18n from '@dhis2/d2-i18n' +import { + Button, + ButtonStrip, + IconDelete16, + MenuItem, + Modal, + ModalActions, + ModalTitle, +} from '@dhis2/ui' +import React, { useState } from 'react' +import { TOOLTIPS } from '../../../lib' +import { TooltipWrapper } from '../../tooltip' + +export function DeleteAction({ + deletable, + modelType, + onClick, + onCancel, +}: { + deletable: boolean + modelType: string + onClick: () => void + onCancel: () => void +}) { + const [showConfirmationDialog, setShowConfirmationDialog] = useState(false) + + return ( + <> + + } + onClick={() => setShowConfirmationDialog(true)} + /> + + + {showConfirmationDialog && ( + { + setShowConfirmationDialog(false) + onClick() + }} + onCancel={() => { + setShowConfirmationDialog(false) + onCancel() + }} + /> + )} + + ) +} + +function ConfirmationDialog({ + modelType, + onCancel, + onConfirm, +}: { + modelType: string + onCancel: () => void + onConfirm: () => void +}) { + return ( + + + {i18n.t( + 'Are you sure that you want to delete this {{modelType}}?', + { + modelType: modelType, + } + )} + + + + + + + + + + ) +} diff --git a/src/components/sectionList/listActions/SectionListActions.tsx b/src/components/sectionList/listActions/SectionListActions.tsx index 32f4ea0b..3aae42db 100644 --- a/src/components/sectionList/listActions/SectionListActions.tsx +++ b/src/components/sectionList/listActions/SectionListActions.tsx @@ -2,7 +2,6 @@ import i18n from '@dhis2/d2-i18n' import { Button, FlyoutMenu, - IconDelete16, IconEdit16, IconEdit24, IconMore16, @@ -16,6 +15,7 @@ import { useHref, useLinkClickHandler } from 'react-router-dom' import { TOOLTIPS } from '../../../lib' import { LinkButton } from '../../LinkButton' import { TooltipWrapper } from '../../tooltip' +import { DeleteAction } from './DeleteAction' import css from './SectionListActions.module.css' export const ListActions = ({ children }: React.PropsWithChildren) => { @@ -34,6 +34,7 @@ type ActionMoreProps = { modelId: string deletable: boolean editable: boolean + modelType: string onShowDetailsClick: () => void onOpenSharingClick: () => void onDeleteClick: () => void @@ -42,6 +43,7 @@ export const ActionMore = ({ modelId, deletable, editable, + modelType, onOpenSharingClick, onShowDetailsClick, onDeleteClick, @@ -59,7 +61,7 @@ export const ActionMore = ({ secondary onClick={() => setOpen(!open)} icon={} - > + /> {open && ( - - - - } - onClick={() => { - onDeleteClick() - setOpen(false) - }} - target="_blank" - href={href} /> + + setOpen(false)} + onClick={() => { + onDeleteClick() + setOpen(false) + }} + /> )}