From 7f71e8952b6aed40d0b78e2e000b466e73c9e499 Mon Sep 17 00:00:00 2001 From: shancds Date: Thu, 17 Jul 2025 12:52:40 +0530 Subject: [PATCH] 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. --- .../EnhancedKanbanBoardNativeDnD.tsx | 41 +++++++++++++------ .../enhanced-kanban/enhanced-kanban.slice.ts | 2 - .../src/hooks/useTaskSocketHandlers.ts | 35 ---------------- .../utils/enhanced-performance-monitoring.ts | 6 +-- 4 files changed, 32 insertions(+), 52 deletions(-) diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx index 52703297..6f8bfe4c 100644 --- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx +++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx @@ -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'); @@ -62,7 +63,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project if (!statusCategories.length) { dispatch(fetchStatusesCategories() as any); } - if ( groupBy === 'phase' && !phaseList.length) { + if (groupBy === 'phase' && !phaseList.length) { dispatch(fetchPhasesByProjectId(projectId) as any); } }, [dispatch, projectId]); @@ -102,10 +103,10 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project // API call for group order try { if (groupBy === 'status') { - const columnOrder = reorderedGroups.map(group => group.id); - const requestBody = { status_order: columnOrder }; - const response = await statusApiService.updateStatusOrder(requestBody, projectId); - if (!response.done) { + const columnOrder = reorderedGroups.map(group => group.id); + const requestBody = { status_order: columnOrder }; + const response = await statusApiService.updateStatusOrder(requestBody, projectId); + if (!response.done) { // Revert the change if API call fails const revertedGroups = [...reorderedGroups]; const [movedBackGroup] = revertedGroups.splice(toIdx, 1); @@ -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); @@ -363,12 +380,12 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
{loadingGroups ? ( -
-
-
-
-
-
+
+
+
+
+
+
) : taskGroups.length === 0 ? ( diff --git a/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts b/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts index 3ccac5d2..9bbf5694 100644 --- a/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts +++ b/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts @@ -575,7 +575,6 @@ const enhancedKanbanSlice = createSlice({ action: PayloadAction ) => { 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, diff --git a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts index 2cb419a9..598b7040 100644 --- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts +++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts @@ -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 || []; diff --git a/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts b/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts index 9e50424e..c30d189f 100644 --- a/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts +++ b/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts @@ -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);