Enhance EnhancedKanbanBoardNativeDnD with task priority updates and socket integration

- Added functionality to handle task priority changes, emitting updates via socket for real-time synchronization.
- Updated the EnhancedKanbanBoardNativeDnD component to include new logic for managing task priorities within the drag-and-drop interface.
- Cleaned up console log statements in the useTaskSocketHandlers hook for improved performance monitoring.
This commit is contained in:
shancds
2025-07-17 12:52:40 +05:30
parent 22d2023e2a
commit 7f71e8952b
4 changed files with 32 additions and 52 deletions

View File

@@ -8,7 +8,7 @@ import ImprovedTaskFilters from '../../task-management/improved-task-filters';
import Card from 'antd/es/card';
import Spin from 'antd/es/spin';
import Empty from 'antd/es/empty';
import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
import { useAppSelector } from '@/hooks/useAppSelector';
import KanbanGroup from './KanbanGroup';
@@ -25,6 +25,7 @@ import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service
import { ITaskListGroup } from '@/types/tasks/taskList.types';
import { fetchPhasesByProjectId, updatePhaseListOrder } from '@/features/projects/singleProject/phase/phases.slice';
import { useTranslation } from 'react-i18next';
import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
const { t } = useTranslation('kanban-board');
@@ -329,6 +330,22 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
})
);
}
if (groupBy === 'priority' && movedTask.id) {
socket?.emit(
SocketEvents.TASK_PRIORITY_CHANGE.toString(),
JSON.stringify({
task_id: movedTask.id,
priority_id: targetGroupId,
team_id: teamId,
})
);
socket?.once(
SocketEvents.TASK_PRIORITY_CHANGE.toString(),
(data: ITaskListPriorityChangeResponse) => {
dispatch(updateEnhancedKanbanTaskPriority(data));
}
);
}
}
setDraggedTaskId(null);

View File

@@ -575,7 +575,6 @@ const enhancedKanbanSlice = createSlice({
action: PayloadAction<ITaskListPriorityChangeResponse>
) => {
const { id, priority_id, color_code, color_code_dark } = action.payload;
// Find the task in any group
const taskInfo = findTaskInAllGroups(state.taskGroups, id);
if (!taskInfo || !priority_id) return;
@@ -603,7 +602,6 @@ const enhancedKanbanSlice = createSlice({
// Update cache
state.taskCache[id] = task;
},
// Enhanced Kanban assignee update (for use in task drawer dropdown)
updateEnhancedKanbanTaskAssignees: (
state,

View File

@@ -285,23 +285,7 @@ export const useTaskSocketHandlers = () => {
);
}
console.log('🔄 Status change group movement debug:', {
taskId: response.id,
newStatusValue,
currentGroupId: currentGroup?.id,
currentGroupValue: currentGroup?.groupValue,
currentGroupTitle: currentGroup?.title,
targetGroupId: targetGroup?.id,
targetGroupValue: targetGroup?.groupValue,
targetGroupTitle: targetGroup?.title,
allGroups: groups.map(g => ({ id: g.id, title: g.title, groupValue: g.groupValue }))
});
if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
console.log('✅ Moving task between groups:', {
from: currentGroup.title,
to: targetGroup.title
});
// Use the action to move task between groups
dispatch(
moveTaskBetweenGroups({
@@ -448,12 +432,6 @@ export const useTaskSocketHandlers = () => {
}
if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
console.log('🔄 Moving task between priority groups:', {
taskId: response.id,
from: currentGroup.title,
to: targetGroup.title,
newPriorityValue
});
dispatch(
moveTaskBetweenGroups({
taskId: response.id,
@@ -603,12 +581,6 @@ export const useTaskSocketHandlers = () => {
}
if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
console.log('🔄 Moving task between phase groups:', {
taskId,
from: currentGroup.title,
to: targetGroup.title,
newPhaseValue
});
dispatch(
moveTaskBetweenGroups({
taskId: taskId,
@@ -925,10 +897,6 @@ export const useTaskSocketHandlers = () => {
// Handler for TASK_ASSIGNEES_CHANGE (fallback event with limited data)
const handleTaskAssigneesChange = useCallback((data: { assigneeIds: string[] }) => {
if (!data || !data.assigneeIds) return;
// This event only provides assignee IDs, so we update what we can
// The full assignee data will come from QUICK_ASSIGNEES_UPDATE
// console.log('🔄 Task assignees change (limited data):', data);
}, []);
// Handler for timer start events
@@ -994,9 +962,6 @@ export const useTaskSocketHandlers = () => {
try {
if (!Array.isArray(data) || data.length === 0) return;
// DEBUG: Log the data received from the backend
console.log('[TASK_SORT_ORDER_CHANGE] Received data:', data);
// Get canonical lists from Redux
const state = store.getState();
const priorityList = state.priorityReducer?.priorities || [];

View File

@@ -86,7 +86,7 @@ export class EnhancedPerformanceMonitor {
this.collectInitialMetrics();
this.startPeriodicCollection();
console.log('🚀 Enhanced performance monitoring started');
// console.log('🚀 Enhanced performance monitoring started');
}
// Stop monitoring and cleanup
@@ -97,7 +97,7 @@ export class EnhancedPerformanceMonitor {
this.cleanupObservers();
this.clearIntervals();
console.log('🛑 Enhanced performance monitoring stopped');
// console.log('🛑 Enhanced performance monitoring stopped');
}
// Setup performance observers
@@ -357,7 +357,7 @@ export class EnhancedPerformanceMonitor {
const recent = this.metrics.slice(-10); // Last 10 metrics
const report = this.analyzeMetrics(recent);
console.log('📊 Performance Report:', report);
// console.log('📊 Performance Report:', report);
// Check for performance issues
this.checkPerformanceIssues(report);