424 lines
16 KiB
TypeScript
424 lines
16 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { RootState } from '@/app/store';
|
|
import '../EnhancedKanbanBoard.css';
|
|
import '../EnhancedKanbanGroup.css';
|
|
import '../EnhancedKanbanTaskCard.css';
|
|
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, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
|
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import KanbanGroup from './KanbanGroup';
|
|
import EnhancedKanbanCreateSection from '../EnhancedKanbanCreateSection';
|
|
import { useSocket } from '@/socket/socketContext';
|
|
import { SocketEvents } from '@/shared/socket-events';
|
|
import { useAuthService } from '@/hooks/useAuth';
|
|
import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
|
|
import alertService from '@/services/alerts/alertService';
|
|
import logger from '@/utils/errorLogger';
|
|
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
|
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
|
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');
|
|
const dispatch = useDispatch();
|
|
const authService = useAuthService();
|
|
const { socket } = useSocket();
|
|
const project = useAppSelector((state: RootState) => state.projectReducer.project);
|
|
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
|
|
const teamId = authService.getCurrentSession()?.team_id;
|
|
const {
|
|
taskGroups,
|
|
loadingGroups,
|
|
error,
|
|
} = useSelector((state: RootState) => state.enhancedKanbanReducer);
|
|
const { phaseList, loadingPhases } = useAppSelector(state => state.phaseReducer);
|
|
const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
|
|
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
|
const [draggedTaskGroupId, setDraggedTaskGroupId] = useState<string | null>(null);
|
|
const [hoveredGroupId, setHoveredGroupId] = useState<string | null>(null);
|
|
const [hoveredTaskIdx, setHoveredTaskIdx] = useState<number | null>(null);
|
|
const [dragType, setDragType] = useState<'group' | 'task' | null>(null);
|
|
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
|
|
|
|
// Set up socket event handlers for real-time updates
|
|
useTaskSocketHandlers();
|
|
|
|
useEffect(() => {
|
|
if (projectId) {
|
|
dispatch(fetchEnhancedKanbanGroups(projectId) as any);
|
|
// Load filter data for enhanced kanban
|
|
dispatch(fetchEnhancedKanbanTaskAssignees(projectId) as any);
|
|
dispatch(fetchEnhancedKanbanLabels(projectId) as any);
|
|
}
|
|
|
|
if (!statusCategories.length) {
|
|
dispatch(fetchStatusesCategories() as any);
|
|
}
|
|
if (groupBy === 'phase' && !phaseList.length) {
|
|
dispatch(fetchPhasesByProjectId(projectId) as any);
|
|
}
|
|
}, [dispatch, projectId]);
|
|
// Reset drag state if taskGroups changes (e.g., real-time update)
|
|
useEffect(() => {
|
|
setDraggedGroupId(null);
|
|
setDraggedTaskId(null);
|
|
setDraggedTaskGroupId(null);
|
|
setHoveredGroupId(null);
|
|
setHoveredTaskIdx(null);
|
|
setDragType(null);
|
|
}, [taskGroups]);
|
|
|
|
// Group drag handlers
|
|
const handleGroupDragStart = (e: React.DragEvent, groupId: string) => {
|
|
setDraggedGroupId(groupId);
|
|
setDragType('group');
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
try {
|
|
e.dataTransfer.setData('text/plain', groupId);
|
|
} catch {}
|
|
};
|
|
const handleGroupDragOver = (e: React.DragEvent) => {
|
|
if (dragType !== 'group') return;
|
|
e.preventDefault();
|
|
};
|
|
const handleGroupDrop = async (e: React.DragEvent, targetGroupId: string) => {
|
|
if (dragType !== 'group') return;
|
|
e.preventDefault();
|
|
if (!draggedGroupId || draggedGroupId === targetGroupId) return;
|
|
// Calculate new order and dispatch
|
|
const fromIdx = taskGroups.findIndex(g => g.id === draggedGroupId);
|
|
const toIdx = taskGroups.findIndex(g => g.id === targetGroupId);
|
|
if (fromIdx === -1 || toIdx === -1) return;
|
|
const reorderedGroups = [...taskGroups];
|
|
const [moved] = reorderedGroups.splice(fromIdx, 1);
|
|
reorderedGroups.splice(toIdx, 0, moved);
|
|
dispatch(reorderGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }));
|
|
dispatch(reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any);
|
|
// 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) {
|
|
// Revert the change if API call fails
|
|
const revertedGroups = [...reorderedGroups];
|
|
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
|
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
|
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
|
alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
|
|
}
|
|
} else if (groupBy === 'phase') {
|
|
const newPhaseList = [...phaseList];
|
|
const [movedItem] = newPhaseList.splice(fromIdx, 1);
|
|
newPhaseList.splice(toIdx, 0, movedItem);
|
|
dispatch(updatePhaseListOrder(newPhaseList));
|
|
const requestBody = {
|
|
from_index: fromIdx,
|
|
to_index: toIdx,
|
|
phases: newPhaseList,
|
|
project_id: projectId,
|
|
};
|
|
const response = await phasesApiService.updatePhaseOrder(projectId, requestBody);
|
|
if (!response.done) {
|
|
alertService.error(t('failedToUpdatePhaseOrder'), t('pleaseTryAgain'));
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// Revert the change if API call fails
|
|
const revertedGroups = [...reorderedGroups];
|
|
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
|
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
|
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
|
alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
|
|
logger.error('Failed to update column order', error);
|
|
}
|
|
|
|
setDraggedGroupId(null);
|
|
setDragType(null);
|
|
};
|
|
|
|
// Utility to recalculate all task orders for all groups
|
|
function getAllTaskUpdates(allGroups: ITaskListGroup[], groupBy: string) {
|
|
const taskUpdates: Array<{
|
|
task_id: string | undefined;
|
|
sort_order: number;
|
|
status_id?: string;
|
|
priority_id?: string;
|
|
phase_id?: string;
|
|
}> = [];
|
|
let currentSortOrder = 0;
|
|
for (const group of allGroups) {
|
|
for (const task of group.tasks) {
|
|
const update: {
|
|
task_id: string | undefined;
|
|
sort_order: number;
|
|
status_id?: string;
|
|
priority_id?: string;
|
|
phase_id?: string;
|
|
} = {
|
|
task_id: task.id,
|
|
sort_order: currentSortOrder,
|
|
};
|
|
if (groupBy === 'status') update.status_id = group.id;
|
|
else if (groupBy === 'priority') update.priority_id = group.id;
|
|
else if (groupBy === 'phase' && group.name !== 'Unmapped') update.phase_id = group.id;
|
|
taskUpdates.push(update);
|
|
currentSortOrder++;
|
|
}
|
|
}
|
|
return taskUpdates;
|
|
}
|
|
|
|
// Task drag handlers
|
|
const handleTaskDragStart = (e: React.DragEvent, taskId: string, groupId: string) => {
|
|
setDraggedTaskId(taskId);
|
|
setDraggedTaskGroupId(groupId);
|
|
setDragType('task');
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
try {
|
|
e.dataTransfer.setData('text/plain', taskId);
|
|
} catch {}
|
|
};
|
|
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
|
|
if (dragType !== 'task') return;
|
|
e.preventDefault();
|
|
if (draggedTaskId) {
|
|
setHoveredGroupId(groupId);
|
|
}
|
|
if (taskIdx === null) {
|
|
setHoveredTaskIdx(0);
|
|
} else {
|
|
setHoveredTaskIdx(taskIdx);
|
|
};
|
|
};
|
|
const handleTaskDrop = async (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
|
|
if (dragType !== 'task') return;
|
|
e.preventDefault();
|
|
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
|
|
|
|
// Calculate new order and dispatch
|
|
const sourceGroup = taskGroups.find(g => g.id === draggedTaskGroupId);
|
|
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
|
if (!sourceGroup || !targetGroup) return;
|
|
|
|
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
|
if (taskIdx === -1) return;
|
|
|
|
const movedTask = sourceGroup.tasks[taskIdx];
|
|
let didStatusChange = false;
|
|
if (groupBy === 'status' && movedTask.id) {
|
|
if (sourceGroup.id !== targetGroup.id) {
|
|
const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
|
|
if (!canContinue) {
|
|
alertService.error(
|
|
t('taskNotCompleted'),
|
|
t('completeTaskDependencies')
|
|
);
|
|
return;
|
|
}
|
|
didStatusChange = true;
|
|
}
|
|
}
|
|
let insertIdx = hoveredTaskIdx;
|
|
|
|
// Handle same group reordering
|
|
let newTaskGroups = [...taskGroups];
|
|
if (sourceGroup.id === targetGroup.id) {
|
|
// Create a single updated array for the same group
|
|
const updatedTasks = [...sourceGroup.tasks];
|
|
updatedTasks.splice(taskIdx, 1); // Remove from original position
|
|
|
|
// Adjust insert index if moving forward in the same array
|
|
if (taskIdx < insertIdx) {
|
|
insertIdx--;
|
|
}
|
|
|
|
if (insertIdx < 0) insertIdx = 0;
|
|
if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
|
|
|
|
updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
|
|
dispatch(reorderTasks({
|
|
activeGroupId: sourceGroup.id,
|
|
overGroupId: targetGroup.id,
|
|
fromIndex: taskIdx,
|
|
toIndex: insertIdx,
|
|
task: movedTask,
|
|
updatedSourceTasks: updatedTasks,
|
|
updatedTargetTasks: updatedTasks,
|
|
}));
|
|
dispatch(reorderEnhancedKanbanTasks({
|
|
activeGroupId: sourceGroup.id,
|
|
overGroupId: targetGroup.id,
|
|
fromIndex: taskIdx,
|
|
toIndex: insertIdx,
|
|
task: movedTask,
|
|
updatedSourceTasks: updatedTasks,
|
|
updatedTargetTasks: updatedTasks,
|
|
}) as any);
|
|
// Update newTaskGroups for socket emit
|
|
newTaskGroups = newTaskGroups.map(g => g.id === sourceGroup.id ? { ...g, tasks: updatedTasks } : g);
|
|
} else {
|
|
// Handle cross-group reordering
|
|
const updatedSourceTasks = [...sourceGroup.tasks];
|
|
updatedSourceTasks.splice(taskIdx, 1);
|
|
|
|
const updatedTargetTasks = [...targetGroup.tasks];
|
|
if (insertIdx < 0) insertIdx = 0;
|
|
if (insertIdx > updatedTargetTasks.length) insertIdx = updatedTargetTasks.length;
|
|
updatedTargetTasks.splice(insertIdx, 0, movedTask);
|
|
|
|
dispatch(reorderTasks({
|
|
activeGroupId: sourceGroup.id,
|
|
overGroupId: targetGroup.id,
|
|
fromIndex: taskIdx,
|
|
toIndex: insertIdx,
|
|
task: movedTask,
|
|
updatedSourceTasks,
|
|
updatedTargetTasks,
|
|
}));
|
|
dispatch(reorderEnhancedKanbanTasks({
|
|
activeGroupId: sourceGroup.id,
|
|
overGroupId: targetGroup.id,
|
|
fromIndex: taskIdx,
|
|
toIndex: insertIdx,
|
|
task: movedTask,
|
|
updatedSourceTasks,
|
|
updatedTargetTasks,
|
|
}) as any);
|
|
// Update newTaskGroups for socket emit
|
|
newTaskGroups = newTaskGroups.map(g => {
|
|
if (g.id === sourceGroup.id) return { ...g, tasks: updatedSourceTasks };
|
|
if (g.id === targetGroup.id) return { ...g, tasks: updatedTargetTasks };
|
|
return g;
|
|
});
|
|
}
|
|
|
|
// Socket emit for full task order
|
|
if (socket && projectId && teamId && movedTask) {
|
|
const taskUpdates = getAllTaskUpdates(newTaskGroups, groupBy);
|
|
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
|
|
project_id: projectId,
|
|
group_by: groupBy || 'status',
|
|
task_updates: taskUpdates,
|
|
from_group: sourceGroup.id,
|
|
to_group: targetGroup.id,
|
|
team_id: teamId,
|
|
from_index: taskIdx,
|
|
to_index: insertIdx,
|
|
to_last_index: insertIdx === (targetGroup.id === sourceGroup.id ? (newTaskGroups.find(g => g.id === targetGroup.id)?.tasks.length || 0) - 1 : targetGroup.tasks.length),
|
|
task: {
|
|
id: movedTask.id,
|
|
project_id: movedTask.project_id || projectId,
|
|
status: movedTask.status || '',
|
|
priority: movedTask.priority || '',
|
|
}
|
|
});
|
|
|
|
// Emit progress update if status changed
|
|
if (didStatusChange) {
|
|
socket.emit(
|
|
SocketEvents.TASK_STATUS_CHANGE.toString(),
|
|
JSON.stringify({
|
|
task_id: movedTask.id,
|
|
status_id: targetGroupId,
|
|
parent_task: movedTask.parent_task_id || null,
|
|
team_id: teamId,
|
|
})
|
|
);
|
|
}
|
|
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);
|
|
setDraggedTaskGroupId(null);
|
|
setHoveredGroupId(null);
|
|
setHoveredTaskIdx(null);
|
|
setDragType(null);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setHoveredGroupId(null);
|
|
setHoveredTaskIdx(null);
|
|
};
|
|
|
|
// Note: Socket event handlers are now managed by useTaskSocketHandlers hook
|
|
// This includes TASK_NAME_CHANGE, QUICK_TASK, and other real-time updates
|
|
|
|
if (error) {
|
|
return (
|
|
<Card>
|
|
<Empty description={`${t('errorLoadingTasks')}: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-4">
|
|
<React.Suspense fallback={<div>{t('loadingFilters')}</div>}>
|
|
<ImprovedTaskFilters position="board" />
|
|
</React.Suspense>
|
|
</div>
|
|
<div className="enhanced-kanban-board">
|
|
{loadingGroups ? (
|
|
<div className="flex flex-row gap-2 h-[600px]">
|
|
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
|
|
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
|
|
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
|
|
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
|
|
</div>
|
|
) : taskGroups.length === 0 ? (
|
|
<Card>
|
|
<Empty description={t('noTasksFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
</Card>
|
|
) : (
|
|
<div className="kanban-groups-container">
|
|
{taskGroups.map(group => (
|
|
<KanbanGroup
|
|
key={group.id}
|
|
group={group}
|
|
onGroupDragStart={handleGroupDragStart}
|
|
onGroupDragOver={handleGroupDragOver}
|
|
onGroupDrop={handleGroupDrop}
|
|
onTaskDragStart={handleTaskDragStart}
|
|
onTaskDragOver={handleTaskDragOver}
|
|
onTaskDrop={handleTaskDrop}
|
|
onDragEnd={handleDragEnd}
|
|
hoveredTaskIdx={hoveredGroupId === group.id ? hoveredTaskIdx : null}
|
|
hoveredGroupId={hoveredGroupId}
|
|
/>
|
|
))}
|
|
<EnhancedKanbanCreateSection />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EnhancedKanbanBoardNativeDnD;
|