Add delete status confirmation modal with localization support
- Implemented a confirmation modal for deleting statuses in the Kanban board. - Integrated localized messages for delete status prompts in multiple languages, enhancing user experience. - Removed the previous portal-based confirmation approach in favor of Ant Design's Modal component for better consistency and usability.
This commit is contained in:
shancds
@@ -15,6 +15,9 @@
|
||||
"deleteTaskConfirm": "Fshi",
|
||||
"deleteTaskCancel": "Anulo",
|
||||
|
||||
"deleteStatusTitle": "Fshi Statusin",
|
||||
"deleteStatusContent": "Jeni i sigurt që doni të fshini këtë status? Kjo veprim nuk mund të zhbëhet.",
|
||||
|
||||
"dueDate": "Data e përfundimit",
|
||||
"cancel": "Anulo",
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
"deleteTaskConfirm": "Löschen",
|
||||
"deleteTaskCancel": "Abbrechen",
|
||||
|
||||
"deleteStatusTitle": "Status löschen",
|
||||
"deleteStatusContent": "Sind Sie sicher, dass Sie diesen Status löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
|
||||
|
||||
"dueDate": "Fälligkeitsdatum",
|
||||
"cancel": "Abbrechen",
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
"deleteTaskConfirm": "Delete",
|
||||
"deleteTaskCancel": "Cancel",
|
||||
|
||||
"deleteStatusTitle": "Delete Status",
|
||||
"deleteStatusContent": "Are you sure you want to delete this status? This action cannot be undone.",
|
||||
|
||||
"dueDate": "Due date",
|
||||
"cancel": "Cancel",
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
"deleteTaskConfirm": "Eliminar",
|
||||
"deleteTaskCancel": "Cancelar",
|
||||
|
||||
"deleteStatusTitle": "Eliminar estado",
|
||||
"deleteStatusContent": "¿Estás seguro de que deseas eliminar este estado? Esta acción no se puede deshacer.",
|
||||
|
||||
"dueDate": "Fecha de vencimiento",
|
||||
"cancel": "Cancelar",
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
"deleteTaskConfirm": "Excluir",
|
||||
"deleteTaskCancel": "Cancelar",
|
||||
|
||||
"deleteStatusTitle": "Excluir Status",
|
||||
"deleteStatusContent": "Tem certeza de que deseja excluir este status? Esta ação não pode ser desfeita.",
|
||||
|
||||
"dueDate": "Data de vencimento",
|
||||
"cancel": "Cancelar",
|
||||
|
||||
|
||||
@@ -19,5 +19,7 @@
|
||||
"deleteTaskTitle": "删除任务",
|
||||
"deleteTaskContent": "您确定要删除此任务吗？此操作无法撤销。",
|
||||
"deleteTaskConfirm": "删除",
|
||||
"deleteTaskCancel": "取消"
|
||||
"deleteTaskCancel": "取消",
|
||||
"deleteStatusTitle": "删除状态",
|
||||
"deleteStatusContent": "您确定要删除此状态吗？此操作无法撤销。"
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
IGroupBy,
|
||||
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
// Simple Portal component
|
||||
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
@@ -218,7 +219,30 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
setShowDeleteConfirm(true);
|
||||
if (groupBy === IGroupBy.STATUS) {
|
||||
Modal.confirm({
|
||||
title: t('deleteStatusTitle'),
|
||||
content: t('deleteStatusContent'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
await handleDeleteSection();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
Modal.confirm({
|
||||
title: t('deleteConfirmationTitle'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
await handleDeleteSection();
|
||||
},
|
||||
});
|
||||
}
|
||||
setShowDropdown(false);
|
||||
};
|
||||
|
||||
@@ -419,56 +443,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
|
||||
</div>
|
||||
|
||||
{/* Simple Delete Confirmation */}
|
||||
{showDeleteConfirm && (
|
||||
<Portal>
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-[99999]"
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
|
||||
{t('deleteConfirmationTitle')}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
|
||||
? 'border-gray-600 text-gray-300 hover:bg-gray-600'
|
||||
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
>
|
||||
{t('deleteConfirmationCancel')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
|
||||
onClick={() => {
|
||||
handleDeleteSection();
|
||||
setShowDeleteConfirm(false);
|
||||
}}
|
||||
>
|
||||
{t('deleteConfirmationOk')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
)}
|
||||
{/* Portal-based confirmation removed, now handled by Modal.confirm */}
|
||||
<div className="enhanced-kanban-group-tasks">
|
||||
{/* Create card at top */}
|
||||
{showNewCardTop && (
|
||||
|
||||
Reference in New Issue
Block a user