feat(EnhancedKanbanBoard): add task dependency check during drag-and-drop
- Implemented a check for task dependencies when moving tasks between groups in the EnhancedKanbanBoard component. - Integrated alert notifications to inform users if a task cannot be moved due to incomplete dependencies, enhancing user experience and task management integrity.
This commit is contained in:
@@ -20,6 +20,7 @@ import { statusApiService } from '@/api/taskAttributes/status/status.api.service
|
|||||||
import alertService from '@/services/alerts/alertService';
|
import alertService from '@/services/alerts/alertService';
|
||||||
import logger from '@/utils/errorLogger';
|
import logger from '@/utils/errorLogger';
|
||||||
import Skeleton from 'antd/es/skeleton/Skeleton';
|
import Skeleton from 'antd/es/skeleton/Skeleton';
|
||||||
|
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
||||||
|
|
||||||
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@@ -132,7 +133,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
setHoveredTaskIdx(taskIdx);
|
setHoveredTaskIdx(taskIdx);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
|
const handleTaskDrop = async (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
|
||||||
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;
|
||||||
@@ -142,10 +143,23 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
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];
|
||||||
|
if (groupBy === 'status' && movedTask.id) {
|
||||||
|
if (sourceGroup.id !== targetGroup.id) {
|
||||||
|
const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
|
||||||
|
if (!canContinue) {
|
||||||
|
alertService.error(
|
||||||
|
'Task is not completed',
|
||||||
|
'Please complete the task dependencies before proceeding'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
let insertIdx = hoveredTaskIdx;
|
let insertIdx = hoveredTaskIdx;
|
||||||
|
|
||||||
// Handle same group reordering
|
// Handle same group reordering
|
||||||
@@ -239,6 +253,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
task: movedTask,
|
task: movedTask,
|
||||||
team_id: teamId,
|
team_id: teamId,
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setDraggedTaskId(null);
|
setDraggedTaskId(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user