refactor(task-list): simplify drag-and-drop functionality and enhance task rendering

- Removed droppable functionality from TaskGroupHeader and replaced it with a more streamlined approach in TaskListV2Table.
- Introduced DropSpacer component to improve visual feedback during task dragging.
- Updated task rendering logic in TaskRow to enhance user experience with clearer drop indicators.
- Refactored useDragAndDrop hook to manage drop positions more effectively, ensuring tasks can only be reordered within the same group.
- Improved socket event handling for task sorting to ensure accurate updates during drag-and-drop operations.
This commit is contained in:
chamikaJ
2025-07-30 15:08:28 +05:30
parent 5cce3bc613
commit 81e1872c1f
5 changed files with 186 additions and 296 deletions

View File

@@ -680,8 +680,23 @@ const taskManagementSlice = createSlice({
const group = state.groups.find(g => g.id === sourceGroupId);
if (group) {
const newTasks = Array.from(group.taskIds);
const [removed] = newTasks.splice(newTasks.indexOf(sourceTaskId), 1);
newTasks.splice(newTasks.indexOf(destinationTaskId), 0, removed);
const sourceIndex = newTasks.indexOf(sourceTaskId);
const destinationIndex = newTasks.indexOf(destinationTaskId);
// Remove the task from its current position
const [removed] = newTasks.splice(sourceIndex, 1);
// Calculate the insertion index
let insertIndex = destinationIndex;
if (sourceIndex < destinationIndex) {
// When dragging down, we need to insert after the destination
insertIndex = destinationIndex;
} else {
// When dragging up, we insert before the destination
insertIndex = destinationIndex;
}
newTasks.splice(insertIndex, 0, removed);
group.taskIds = newTasks;
// Update order for affected tasks using the appropriate sort field