bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(enhanced-kanban): implement API call for column order updates during group reordering

Browse Source 
- Added functionality to prevent reordering of groups when grouped by phases.
- Implemented API call to update the status order after reordering groups, with error handling to revert changes if the API call fails.
- Enhanced user feedback with alert notifications for failed updates, improving overall user experience during drag-and-drop operations.
This commit is contained in:
shancds
2025-06-24 09:55:17 +05:30
parent 17bcf8c41f
commit ad76563543
1 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
View File

@@ -39,6 +39,10 @@ import { useSocket } from '@/socket/socketContext';
import { useAppSelector } from '@/hooks/useAppSelector';
import { SocketEvents } from '@/shared/socket-events';
import logger from '@/utils/errorLogger';
import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
import { ITaskStatusCreateRequest } from '@/types/tasks/task-status-create-request';
import alertService from '@/services/alerts/alertService';
import { IGroupBy } from '@/features/enhanced-kanban/enhanced-kanban.slice';
// Import the TaskListFilters component
const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
@@ -211,6 +215,11 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
// Handle group (column) reordering
if (activeData?.type === 'group') {
// Don't allow reordering if groupBy is phases
if (groupBy === IGroupBy.PHASE) {
return;
}
const fromIndex = taskGroups.findIndex(g => g.id === activeId);
const toIndex = taskGroups.findIndex(g => g.id === overId);
@@ -220,19 +229,35 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
const [movedGroup] = reorderedGroups.splice(fromIndex, 1);
reorderedGroups.splice(toIndex, 0, movedGroup);
// Synchronous UI update
// Synchronous UI update for immediate feedback
dispatch(reorderGroups({ fromIndex, toIndex, reorderedGroups }));
dispatch(reorderEnhancedKanbanGroups({ fromIndex, toIndex, reorderedGroups }) as any);
// Prepare column order for API/socket
// Prepare column order for API
const columnOrder = reorderedGroups.map(group => group.id);
// Call API to update status order
try {
// If you have a dedicated socket event for column order, emit it here
// Otherwise, call the backend API as fallback (like project-view-board.tsx)
// Example (pseudo):
// socket?.emit(SocketEvents.COLUMN_SORT_ORDER_CHANGE, { project_id: projectId, status_order: columnOrder, team_id: teamId });
// If not, call the API (not shown here for brevity)
const requestBody: ITaskStatusCreateRequest = {
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(toIndex, 1);
revertedGroups.splice(fromIndex, 0, movedBackGroup);
dispatch(reorderGroups({ fromIndex: toIndex, toIndex: fromIndex, reorderedGroups: revertedGroups }));
alertService.error('Failed to update column order', 'Please try again');
}
} catch (error) {
// Revert the change if API call fails
const revertedGroups = [...reorderedGroups];
const [movedBackGroup] = revertedGroups.splice(toIndex, 1);
revertedGroups.splice(fromIndex, 0, movedBackGroup);
dispatch(reorderGroups({ fromIndex: toIndex, toIndex: fromIndex, reorderedGroups: revertedGroups }));
alertService.error('Failed to update column order', 'Please try again');
logger.error('Failed to update column order', error);
}
}