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

refactor(KanbanGroup, TaskCard): enhance drag-and-drop indicators and task rendering

Browse Source 
- Added visual drop indicators before and after task cards in the KanbanGroup component to improve user experience during drag-and-drop operations.
- Removed the isDropIndicator prop from TaskCard as the drop indicator logic is now handled within the KanbanGroup, simplifying the TaskCard component.
- Updated drag-and-drop event handling in TaskCard to better manage task positioning during drag operations, enhancing overall functionality.
This commit is contained in:
shancds
2025-07-07 17:20:34 +05:30
parent 8e62594eff
commit fa9e765e37
2 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -517,17 +517,29 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)}
{group.tasks.map((task, idx) => (
<TaskCard
key={task.id}
task={task}
onTaskDragStart={onTaskDragStart}
onTaskDragOver={onTaskDragOver}
onTaskDrop={onTaskDrop}
groupId={group.id}
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
idx={idx}
/>
<React.Fragment key={task.id}>
{/* Drop indicator before this card */}
{hoveredGroupId === group.id && hoveredTaskIdx === idx && (
<div className="drop-preview-indicator" style={{height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '4px 0'}}>
<div className="drop-line" style={{width: '90%', height: 4, background: '#1976d2', borderRadius: 2, boxShadow: '0 0 4px #1976d2'}} />
</div>
)}
<TaskCard
task={task}
onTaskDragStart={onTaskDragStart}
onTaskDragOver={onTaskDragOver}
onTaskDrop={onTaskDrop}
groupId={group.id}
idx={idx}
/>
</React.Fragment>
))}
{/* Drop indicator at the end of the group */}
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
<div className="drop-preview-indicator" style={{height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '4px 0'}}>
<div className="drop-line" style={{width: '90%', height: 4, background: '#1976d2', borderRadius: 2, boxShadow: '0 0 4px #1976d2'}} />
</div>
)}
{/* Create card at bottom */}
{showNewCardBottom && (