bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(kanban): implement portal for delete confirmation modal

Browse Source 
- Introduced a Portal component to render the delete confirmation modal outside the main DOM hierarchy, improving UI responsiveness.
- Updated the delete confirmation modal to utilize the Portal for better overlay management and user experience.
- Enhanced styling and interaction handling for the modal, ensuring it aligns with the application's theme and accessibility standards.
This commit is contained in:
shancds
2025-07-11 10:37:53 +05:30
parent 635b5ce8e1
commit 87675cc73c
1 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
View File

@@ -24,7 +24,13 @@ import {
fetchEnhancedKanbanGroups, fetchEnhancedKanbanGroups,
IGroupBy, IGroupBy,
} from '@/features/enhanced-kanban/enhanced-kanban.slice'; } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { createPortal } from 'react-dom';
// Simple Portal component
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const portalRoot = document.getElementById('portal-root') || document.body;
return createPortal(children, portalRoot);
};
interface KanbanGroupProps { interface KanbanGroupProps {
group: ITaskListGroup; group: ITaskListGroup;
@@ -414,46 +420,54 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
{/* Simple Delete Confirmation */} {/* Simple Delete Confirmation */}
{showDeleteConfirm && ( {showDeleteConfirm && (
<div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50"> <Portal>
<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"> <div
<div className="p-4"> className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-[99999]"
<div className="flex items-center gap-3 mb-3"> onClick={() => setShowDeleteConfirm(false)}
<div className="flex-shrink-0"> >
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <div
<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" /> 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"
</svg> 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>
<div> <div className="flex justify-end gap-2">
<h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}> <button
{t('deleteConfirmationTitle')} type="button"
</h3> 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>
<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> </div>
</div> </Portal>
)} )}
<div className="enhanced-kanban-group-tasks"> <div className="enhanced-kanban-group-tasks">
{/* Create card at top */} {/* Create card at top */}