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;
groupId: string;
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 background = themeMode === 'dark' ? '#23272f' : '#fff';
const color = themeMode === 'dark' ? '#fff' : '#23272f';
return (
<>
{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
className="enhanced-kanban-task-card"
draggable
onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
onDragOver={e => onTaskDragOver(e, groupId, -1)}
onDrop={e => onTaskDrop(e, groupId, -1)}
onDragOver={e => onTaskDragOver(e, groupId, idx)}
onDrop={e => onTaskDrop(e, groupId, idx)}
style={{ background, color }}
>
<div className="task-content">
@@ -86,8 +87,8 @@ const KanbanGroup: React.FC<{
<span className="task-count">{group.tasks.length}</span>
</div>
<div className="enhanced-kanban-group-tasks"
onDragOver={e => onTaskDragOver(e, group.id, 0)}
onDrop={e => onTaskDrop(e, group.id, 0)}
// onDragOver={e => onTaskDragOver(e, group.id, 0)}
// onDrop={e => onTaskDrop(e, group.id, 0)}
>
{/* Drop indicator at the top of the group */}
{hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
@@ -101,7 +102,8 @@ const KanbanGroup: React.FC<{
onTaskDragOver={onTaskDragOver}
onTaskDrop={onTaskDrop}
groupId={group.id}
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx + 1}
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
idx={idx}
/>
</React.Fragment>
))}