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

refactor(EnhancedKanbanBoard): improve drag-and-drop handling and task index management

Browse Source 
- Updated drag-and-drop event handlers in EnhancedKanbanBoard to support null task indices, enhancing flexibility during task interactions.
- Adjusted KanbanGroup component to reflect changes in task index handling, ensuring consistent behavior when dragging tasks over empty drop zones.
- Enhanced the visual structure of the KanbanGroup to improve user experience during task creation and management.
This commit is contained in:
shancds
2025-07-07 12:05:05 +05:30
parent 3206af160a
commit 8dcd0295e5
2 changed files with 324 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -120,15 +120,19 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
setDragType('task'); setDragType('task');
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
}; };
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number) => { const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
if (dragType !== 'task') return; if (dragType !== 'task') return;
e.preventDefault(); e.preventDefault();
if (draggedTaskId) { if (draggedTaskId) {
setHoveredGroupId(groupId); setHoveredGroupId(groupId);
setHoveredTaskIdx(taskIdx);
} }
if(taskIdx === null) {
setHoveredTaskIdx(0);
}else{
setHoveredTaskIdx(taskIdx);
}; };
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number) => { };
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
if (dragType !== 'task') return; if (dragType !== 'task') return;
e.preventDefault(); e.preventDefault();
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return; if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;

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

@@ -32,8 +32,8 @@ interface KanbanGroupProps {
onGroupDragOver: (e: React.DragEvent) => void; onGroupDragOver: (e: React.DragEvent) => void;
onGroupDrop: (e: React.DragEvent, groupId: string) => void; onGroupDrop: (e: React.DragEvent, groupId: string) => void;
onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void; onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void; onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void; onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
hoveredTaskIdx: number | null; hoveredTaskIdx: number | null;
hoveredGroupId: string | null; hoveredGroupId: string | null;
} }
@@ -229,7 +229,27 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
}, [showDropdown]); }, [showDropdown]);
return ( return (
<div className="enhanced-kanban-group"> <div className="enhanced-kanban-group" style={{ position: 'relative' }}
>
{/* Background layer - z-index 0 */}
<div
className="enhanced-kanban-group-background"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: `0.1px solid ${themeMode === 'dark' ? '#404040' : '#e0e0e0'}`,
borderRadius: '8px',
zIndex: 0
}}
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, null); }}
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, null); }}
/>
{/* Content layer - z-index 1 */}
<div style={{ position: 'relative', zIndex: 1 }}>
<div <div
className="enhanced-kanban-group-header" className="enhanced-kanban-group-header"
style={{ style={{
@@ -263,8 +283,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<input <input
ref={inputRef} ref={inputRef}
value={name} value={name}
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${ className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`} }`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
@@ -278,8 +297,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
/> />
) : ( ) : (
<div <div
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${ className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`} }`}
title={isEllipsisActive ? name : undefined} title={isEllipsisActive ? name : undefined}
onMouseDown={e => { onMouseDown={e => {
@@ -408,8 +426,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<button <button
type="button" type="button"
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${ className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
themeMode === 'dark'
? 'border-gray-600 text-gray-300 hover:bg-gray-600' ? 'border-gray-600 text-gray-300 hover:bg-gray-600'
: 'border-gray-300 text-gray-700 hover:bg-gray-50' : 'border-gray-300 text-gray-700 hover:bg-gray-50'
}`} }`}
@@ -443,7 +460,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)} )}
{/* If group is empty, render a drop zone */} {/* If group is empty, render a drop zone */}
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom &&( {group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && (
<div <div
className="empty-drop-zone" className="empty-drop-zone"
style={{ style={{
@@ -545,8 +562,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
</div> </div>
)} )}
</div> </div>
</div>
</div> </div>
); );
}); });