refactor(enhanced-kanban): improve task reordering logic in EnhancedKanbanBoardNativeDnD
- Enhanced drag-and-drop functionality to handle both same-group and cross-group task reordering more efficiently. - Simplified the task update process by consolidating logic for updating task arrays. - Ensured proper index adjustments during reordering to maintain task integrity and prevent errors.
This commit is contained in:
@@ -198,26 +198,62 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
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;
|
||||||
|
|
||||||
// Calculate new order and dispatch
|
// Calculate new order and dispatch
|
||||||
const sourceGroup = taskGroups.find(g => g.id === draggedTaskGroupId);
|
const sourceGroup = taskGroups.find(g => g.id === draggedTaskGroupId);
|
||||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||||
if (!sourceGroup || !targetGroup) return;
|
if (!sourceGroup || !targetGroup) return;
|
||||||
|
|
||||||
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
||||||
if (taskIdx === -1) return;
|
if (taskIdx === -1) return;
|
||||||
|
|
||||||
const movedTask = sourceGroup.tasks[taskIdx];
|
const movedTask = sourceGroup.tasks[taskIdx];
|
||||||
// Prepare updated task arrays
|
let insertIdx = hoveredTaskIdx;
|
||||||
const updatedSourceTasks = [...sourceGroup.tasks];
|
|
||||||
updatedSourceTasks.splice(taskIdx, 1);
|
// Handle same group reordering
|
||||||
let insertIdx = targetTaskIdx;
|
if (sourceGroup.id === targetGroup.id) {
|
||||||
if (sourceGroup.id === targetGroup.id && taskIdx < insertIdx) {
|
// Create a single updated array for the same group
|
||||||
|
const updatedTasks = [...sourceGroup.tasks];
|
||||||
|
updatedTasks.splice(taskIdx, 1); // Remove from original position
|
||||||
|
|
||||||
|
// Adjust insert index if moving forward in the same array
|
||||||
|
if (taskIdx < insertIdx) {
|
||||||
insertIdx--;
|
insertIdx--;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (insertIdx < 0) insertIdx = 0;
|
if (insertIdx < 0) insertIdx = 0;
|
||||||
if (insertIdx > targetGroup.tasks.length) insertIdx = targetGroup.tasks.length;
|
if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
|
||||||
const updatedTargetTasks = sourceGroup.id === targetGroup.id
|
|
||||||
? [...updatedSourceTasks]
|
updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
|
||||||
: [...targetGroup.tasks];
|
|
||||||
|
dispatch(reorderTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks: updatedTasks,
|
||||||
|
updatedTargetTasks: updatedTasks,
|
||||||
|
}));
|
||||||
|
dispatch(reorderEnhancedKanbanTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks: updatedTasks,
|
||||||
|
updatedTargetTasks: updatedTasks,
|
||||||
|
}) as any);
|
||||||
|
} else {
|
||||||
|
// Handle cross-group reordering
|
||||||
|
const updatedSourceTasks = [...sourceGroup.tasks];
|
||||||
|
updatedSourceTasks.splice(taskIdx, 1);
|
||||||
|
|
||||||
|
const updatedTargetTasks = [...targetGroup.tasks];
|
||||||
|
if (insertIdx < 0) insertIdx = 0;
|
||||||
|
if (insertIdx > updatedTargetTasks.length) insertIdx = updatedTargetTasks.length;
|
||||||
updatedTargetTasks.splice(insertIdx, 0, movedTask);
|
updatedTargetTasks.splice(insertIdx, 0, movedTask);
|
||||||
|
|
||||||
dispatch(reorderTasks({
|
dispatch(reorderTasks({
|
||||||
activeGroupId: sourceGroup.id,
|
activeGroupId: sourceGroup.id,
|
||||||
overGroupId: targetGroup.id,
|
overGroupId: targetGroup.id,
|
||||||
@@ -236,6 +272,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
updatedSourceTasks,
|
updatedSourceTasks,
|
||||||
updatedTargetTasks,
|
updatedTargetTasks,
|
||||||
}) as any);
|
}) as any);
|
||||||
|
}
|
||||||
|
|
||||||
setDraggedTaskId(null);
|
setDraggedTaskId(null);
|
||||||
setDraggedTaskGroupId(null);
|
setDraggedTaskGroupId(null);
|
||||||
setHoveredGroupId(null);
|
setHoveredGroupId(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user