feat(enhanced-kanban): implement synchronous reordering for tasks and groups

- Added synchronous state updates for task and group reordering in the EnhancedKanbanBoard component, improving UI responsiveness during drag-and-drop operations.
- Introduced new actions `reorderTasks` and `reorderGroups` in the enhanced-kanban slice for better state management.
- Updated EnhancedKanbanGroup and EnhancedKanbanTaskCard components to utilize the new layout change animations, enhancing the user experience during reordering.
This commit is contained in:
shancds
2025-06-23 14:08:32 +05:30
parent 6508dc6c64
commit b436db183f
4 changed files with 62 additions and 10 deletions

View File

@@ -27,7 +27,9 @@ import {
fetchEnhancedKanbanGroups,
reorderEnhancedKanbanTasks,
reorderEnhancedKanbanGroups,
setDragState
setDragState,
reorderTasks,
reorderGroups,
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
import EnhancedKanbanGroup from './EnhancedKanbanGroup';
import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
@@ -210,12 +212,10 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
const [movedGroup] = reorderedGroups.splice(fromIndex, 1);
reorderedGroups.splice(toIndex, 0, movedGroup);
// Dispatch group reorder action
dispatch(reorderEnhancedKanbanGroups({
fromIndex,
toIndex,
reorderedGroups,
}) as any);
// Synchronous UI update
dispatch(reorderGroups({ fromIndex, toIndex, reorderedGroups }));
// Async backend sync (optional)
dispatch(reorderEnhancedKanbanGroups({ fromIndex, toIndex, reorderedGroups }) as any);
}
return;
}
@@ -274,7 +274,17 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
updatedTargetTasks.splice(targetIndex, 0, movedTask);
}
// Dispatch the reorder action
// Synchronous UI update
dispatch(reorderTasks({
activeGroupId: sourceGroup.id,
overGroupId: targetGroup.id,
fromIndex: sourceIndex,
toIndex: targetIndex,
task: movedTask,
updatedSourceTasks,
updatedTargetTasks,
}));
// Async backend sync (optional)
dispatch(reorderEnhancedKanbanTasks({
activeGroupId: sourceGroup.id,
overGroupId: targetGroup.id,