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

refactor(enhanced-kanban): update drag-and-drop functionality in EnhancedKanbanBoardNativeDnD

Browse Source 
- Added `idx` prop to TaskCard for better task index management during drag-and-drop.
- Adjusted drop indicator styling for improved visibility.
- Commented out unused drag-and-drop handlers in KanbanGroup for clarity.
This commit is contained in:
shancds
2025-07-02 18:11:31 +05:30
parent 775a91889f
commit 7dfaacd28e
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,21 +22,22 @@ const TaskCard: React.FC<{
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void; onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
groupId: string; groupId: string;
isDropIndicator: boolean; isDropIndicator: boolean;
}> = ({ task, onTaskDragStart, onTaskDragOver, onTaskDrop, groupId, isDropIndicator }) => { idx: number;
}> = ({ task, onTaskDragStart, onTaskDragOver, onTaskDrop, groupId, isDropIndicator, idx }) => {
const themeMode = useSelector((state: RootState) => state.themeReducer.mode); const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
const background = themeMode === 'dark' ? '#23272f' : '#fff'; const background = themeMode === 'dark' ? '#23272f' : '#fff';
const color = themeMode === 'dark' ? '#fff' : '#23272f'; const color = themeMode === 'dark' ? '#fff' : '#23272f';
return ( return (
<> <>
{isDropIndicator && ( {isDropIndicator && (
<div style={{ height: 32, margin: '8px 0', background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', borderRadius: 6, border: `2px dashed ${themeMode === 'dark' ? '#555' : '#bbb'}` }} /> <div style={{ height: 80, margin: '8px 0', background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', borderRadius: 6, border: `5px` }} />
)} )}
<div <div
className="enhanced-kanban-task-card" className="enhanced-kanban-task-card"
draggable draggable
onDragStart={e => onTaskDragStart(e, task.id!, groupId)} onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
onDragOver={e => onTaskDragOver(e, groupId, -1)} onDragOver={e => onTaskDragOver(e, groupId, idx)}
onDrop={e => onTaskDrop(e, groupId, -1)} onDrop={e => onTaskDrop(e, groupId, idx)}
style={{ background, color }} style={{ background, color }}
> >
<div className="task-content"> <div className="task-content">
@@ -86,8 +87,8 @@ const KanbanGroup: React.FC<{
<span className="task-count">{group.tasks.length}</span> <span className="task-count">{group.tasks.length}</span>
</div> </div>
<div className="enhanced-kanban-group-tasks" <div className="enhanced-kanban-group-tasks"
onDragOver={e => onTaskDragOver(e, group.id, 0)} // onDragOver={e => onTaskDragOver(e, group.id, 0)}
onDrop={e => onTaskDrop(e, group.id, 0)} // onDrop={e => onTaskDrop(e, group.id, 0)}
> >
{/* Drop indicator at the top of the group */} {/* Drop indicator at the top of the group */}
{hoveredGroupId === group.id && hoveredTaskIdx === 0 && ( {hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
@@ -101,7 +102,8 @@ const KanbanGroup: React.FC<{
onTaskDragOver={onTaskDragOver} onTaskDragOver={onTaskDragOver}
onTaskDrop={onTaskDrop} onTaskDrop={onTaskDrop}
groupId={group.id} groupId={group.id}
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx + 1} isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
idx={idx}
/> />
</React.Fragment> </React.Fragment>
))} ))}