feat(task-management): implement task reordering and group updates via API
- Added API methods for reordering tasks and updating task groups (status, priority, phase). - Enhanced task management slice with async thunks for handling task reordering and group movements. - Updated task list board to support real-time updates during drag-and-drop operations, emitting socket events for task sort order changes. - Refactored task-related components to utilize shared Ant Design imports for consistency and maintainability. - Removed unused Ant Design imports and optimized drag-and-drop CSS for improved performance.
This commit is contained in:
chamikaJ
@@ -1,237 +0,0 @@
|
||||
/**
|
||||
* Centralized Ant Design imports for Task Management components
|
||||
*
|
||||
* This file provides:
|
||||
* - Tree-shaking optimization by importing only used components
|
||||
* - Type safety with proper TypeScript types
|
||||
* - Performance optimization through selective imports
|
||||
* - Consistent component versions across task management
|
||||
* - Easy maintenance and updates
|
||||
*/
|
||||
|
||||
// Core Components
|
||||
export {
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
Typography,
|
||||
Card,
|
||||
Spin,
|
||||
Empty,
|
||||
Space,
|
||||
Tooltip,
|
||||
Badge,
|
||||
Popconfirm,
|
||||
message,
|
||||
Checkbox,
|
||||
Dropdown,
|
||||
Menu
|
||||
} from 'antd/es';
|
||||
|
||||
// Date & Time Components
|
||||
export {
|
||||
DatePicker,
|
||||
TimePicker
|
||||
} from 'antd/es';
|
||||
|
||||
// Form Components (if needed for task management)
|
||||
export {
|
||||
Form,
|
||||
InputNumber
|
||||
} from 'antd/es';
|
||||
|
||||
// Layout Components
|
||||
export {
|
||||
Row,
|
||||
Col,
|
||||
Divider,
|
||||
Flex
|
||||
} from 'antd/es';
|
||||
|
||||
// Icon Components (commonly used in task management)
|
||||
export {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
MoreOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
UserOutlined,
|
||||
TeamOutlined,
|
||||
TagOutlined,
|
||||
FlagOutlined,
|
||||
BarsOutlined,
|
||||
TableOutlined,
|
||||
AppstoreOutlined,
|
||||
FilterOutlined,
|
||||
SortAscendingOutlined,
|
||||
SortDescendingOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
SettingOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
CopyOutlined,
|
||||
ExportOutlined,
|
||||
ImportOutlined,
|
||||
DownOutlined,
|
||||
RightOutlined,
|
||||
LeftOutlined,
|
||||
UpOutlined,
|
||||
DragOutlined,
|
||||
HolderOutlined,
|
||||
MessageOutlined,
|
||||
PaperClipOutlined,
|
||||
GroupOutlined,
|
||||
InboxOutlined,
|
||||
TagsOutlined,
|
||||
UsergroupAddOutlined,
|
||||
UserAddOutlined,
|
||||
RetweetOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// TypeScript Types
|
||||
export type {
|
||||
ButtonProps,
|
||||
InputProps,
|
||||
InputRef,
|
||||
SelectProps,
|
||||
TypographyProps,
|
||||
CardProps,
|
||||
SpinProps,
|
||||
EmptyProps,
|
||||
SpaceProps,
|
||||
TooltipProps,
|
||||
BadgeProps,
|
||||
PopconfirmProps,
|
||||
CheckboxProps,
|
||||
CheckboxChangeEvent,
|
||||
DropdownProps,
|
||||
MenuProps,
|
||||
DatePickerProps,
|
||||
TimePickerProps,
|
||||
FormProps,
|
||||
FormInstance,
|
||||
InputNumberProps,
|
||||
RowProps,
|
||||
ColProps,
|
||||
DividerProps,
|
||||
FlexProps
|
||||
} from 'antd/es';
|
||||
|
||||
// Dayjs (used with DatePicker)
|
||||
export { default as dayjs } from 'dayjs';
|
||||
export type { Dayjs } from 'dayjs';
|
||||
|
||||
// Re-export commonly used Ant Design utilities
|
||||
export {
|
||||
ConfigProvider,
|
||||
theme
|
||||
} from 'antd';
|
||||
|
||||
// Custom hooks for task management (if any Ant Design specific hooks are needed)
|
||||
export const useAntdBreakpoint = () => {
|
||||
// You can add custom breakpoint logic here if needed
|
||||
return {
|
||||
xs: window.innerWidth < 576,
|
||||
sm: window.innerWidth >= 576 && window.innerWidth < 768,
|
||||
md: window.innerWidth >= 768 && window.innerWidth < 992,
|
||||
lg: window.innerWidth >= 992 && window.innerWidth < 1200,
|
||||
xl: window.innerWidth >= 1200 && window.innerWidth < 1600,
|
||||
xxl: window.innerWidth >= 1600,
|
||||
};
|
||||
};
|
||||
|
||||
// Import message separately to avoid circular dependency
|
||||
import { message as antdMessage } from 'antd';
|
||||
|
||||
// Performance optimized message utility
|
||||
export const taskMessage = {
|
||||
success: (content: string) => antdMessage.success(content),
|
||||
error: (content: string) => antdMessage.error(content),
|
||||
warning: (content: string) => antdMessage.warning(content),
|
||||
info: (content: string) => antdMessage.info(content),
|
||||
loading: (content: string) => antdMessage.loading(content),
|
||||
};
|
||||
|
||||
// Commonly used Ant Design configurations for task management
|
||||
export const taskManagementAntdConfig = {
|
||||
// DatePicker default props for consistency
|
||||
datePickerDefaults: {
|
||||
format: 'MMM DD, YYYY',
|
||||
placeholder: 'Set Date',
|
||||
suffixIcon: null,
|
||||
size: 'small' as const,
|
||||
},
|
||||
|
||||
// Button default props for task actions
|
||||
taskButtonDefaults: {
|
||||
size: 'small' as const,
|
||||
type: 'text' as const,
|
||||
},
|
||||
|
||||
// Input default props for task editing
|
||||
taskInputDefaults: {
|
||||
size: 'small' as const,
|
||||
variant: 'borderless' as const,
|
||||
},
|
||||
|
||||
// Select default props for dropdowns
|
||||
taskSelectDefaults: {
|
||||
size: 'small' as const,
|
||||
variant: 'borderless' as const,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label' as const,
|
||||
},
|
||||
|
||||
// Tooltip default props
|
||||
tooltipDefaults: {
|
||||
placement: 'top' as const,
|
||||
mouseEnterDelay: 0.5,
|
||||
mouseLeaveDelay: 0.1,
|
||||
},
|
||||
|
||||
// Dropdown default props
|
||||
dropdownDefaults: {
|
||||
trigger: ['click'] as const,
|
||||
placement: 'bottomLeft' as const,
|
||||
},
|
||||
};
|
||||
|
||||
// Theme tokens specifically for task management
|
||||
export const taskManagementTheme = {
|
||||
light: {
|
||||
colorBgContainer: '#ffffff',
|
||||
colorBorder: '#e5e7eb',
|
||||
colorText: '#374151',
|
||||
colorTextSecondary: '#6b7280',
|
||||
colorPrimary: '#3b82f6',
|
||||
colorSuccess: '#10b981',
|
||||
colorWarning: '#f59e0b',
|
||||
colorError: '#ef4444',
|
||||
colorBgHover: '#f9fafb',
|
||||
colorBgSelected: '#eff6ff',
|
||||
},
|
||||
dark: {
|
||||
colorBgContainer: '#1f2937',
|
||||
colorBorder: '#374151',
|
||||
colorText: '#f9fafb',
|
||||
colorTextSecondary: '#d1d5db',
|
||||
colorPrimary: '#60a5fa',
|
||||
colorSuccess: '#34d399',
|
||||
colorWarning: '#fbbf24',
|
||||
colorError: '#f87171',
|
||||
colorBgHover: '#374151',
|
||||
colorBgSelected: '#1e40af',
|
||||
},
|
||||
};
|
||||
|
||||
// Export default configuration object
|
||||
export default {
|
||||
config: taskManagementAntdConfig,
|
||||
theme: taskManagementTheme,
|
||||
message: taskMessage,
|
||||
useBreakpoint: useAntdBreakpoint,
|
||||
};
|
||||
@@ -1,149 +1,40 @@
|
||||
/* DRAG AND DROP PERFORMANCE OPTIMIZATIONS */
|
||||
/* MINIMAL DRAG AND DROP CSS - SHOW ONLY TASK NAME */
|
||||
|
||||
/* Force GPU acceleration for all drag operations */
|
||||
[data-dnd-draggable],
|
||||
[data-dnd-drag-handle],
|
||||
[data-dnd-overlay] {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* Optimize drag handle for instant response */
|
||||
/* Basic drag handle styling */
|
||||
.drag-handle-optimized {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.drag-handle-optimized:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.drag-handle-optimized:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Disable all transitions during drag for instant response */
|
||||
[data-dnd-dragging="true"] *,
|
||||
[data-dnd-dragging="true"] {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
/* Optimize drag overlay for smooth movement */
|
||||
/* Simple drag overlay - just show task name */
|
||||
[data-dnd-overlay] {
|
||||
background: white;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
pointer-events: none;
|
||||
position: fixed !important;
|
||||
z-index: 9999;
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Reduce layout thrashing during drag */
|
||||
.task-row-dragging {
|
||||
contain: layout style paint;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
/* Dark mode support for drag overlay */
|
||||
.dark [data-dnd-overlay],
|
||||
[data-theme="dark"] [data-dnd-overlay] {
|
||||
background: #1f1f1f;
|
||||
border-color: #404040;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Optimize virtualized lists during drag */
|
||||
.react-window-list {
|
||||
contain: layout style;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.react-window-list-item {
|
||||
contain: layout style;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Disable hover effects during drag */
|
||||
[data-dnd-dragging="true"] .task-row:hover {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
/* Optimize cursor changes */
|
||||
.task-row {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.task-row[data-dnd-dragging="true"] {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Performance optimizations for large lists */
|
||||
.virtualized-task-container {
|
||||
contain: layout style paint;
|
||||
will-change: scroll-position;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* Reduce repaints during scroll */
|
||||
.task-groups-container {
|
||||
contain: layout style;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
/* Optimize sortable context */
|
||||
[data-dnd-sortable-context] {
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* Disable animations during drag operations */
|
||||
[data-dnd-context] [data-dnd-dragging="true"] * {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
/* Optimize drop indicators */
|
||||
.drop-indicator {
|
||||
contain: layout style;
|
||||
will-change: opacity;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
/* Performance optimizations for touch devices */
|
||||
@media (pointer: coarse) {
|
||||
.drag-handle-optimized {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode optimizations */
|
||||
.dark [data-dnd-dragging="true"],
|
||||
[data-theme="dark"] [data-dnd-dragging="true"] {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Reduce memory usage during drag */
|
||||
[data-dnd-dragging="true"] img,
|
||||
[data-dnd-dragging="true"] svg {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* Optimize for high DPI displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
[data-dnd-overlay] {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Disable text selection during drag */
|
||||
[data-dnd-dragging="true"] {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Optimize for reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-dnd-overlay],
|
||||
[data-dnd-dragging="true"] {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
/* Hide drag handle during drag */
|
||||
[data-dnd-dragging="true"] .drag-handle-optimized {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
EyeOutlined,
|
||||
InboxOutlined,
|
||||
CheckOutlined,
|
||||
} from './antd-imports';
|
||||
} from '@/shared/antd-imports';
|
||||
import { RootState } from '@/app/store';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
PlusOutlined,
|
||||
RightOutlined,
|
||||
DownOutlined
|
||||
} from './antd-imports';
|
||||
} from '@/shared/antd-imports';
|
||||
import { TaskGroup as TaskGroupType, Task } from '@/types/task-management.types';
|
||||
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
reorderTasks,
|
||||
moveTaskToGroup,
|
||||
optimisticTaskMove,
|
||||
reorderTasksInGroup,
|
||||
setLoading,
|
||||
fetchTasks,
|
||||
fetchTasksV3,
|
||||
@@ -39,6 +40,8 @@ import {
|
||||
} from '@/features/task-management/selection.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
import TaskRow from './task-row';
|
||||
// import BulkActionBar from './bulk-action-bar';
|
||||
import OptimizedBulkActionBar from './optimized-bulk-action-bar';
|
||||
@@ -136,7 +139,6 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const renderCountRef = useRef(0);
|
||||
const [shouldThrottle, setShouldThrottle] = useState(false);
|
||||
|
||||
|
||||
// Refs for performance optimization
|
||||
const dragOverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
@@ -144,6 +146,9 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
// Enable real-time socket updates for task changes
|
||||
useTaskSocketHandlers();
|
||||
|
||||
// Socket connection for drag and drop
|
||||
const { socket, connected } = useSocket();
|
||||
|
||||
// Redux selectors using V3 API (pre-processed data, minimal loops)
|
||||
const tasks = useSelector(taskManagementSelectors.selectAll);
|
||||
const taskGroups = useSelector(selectTaskGroupsV3, shallowEqual);
|
||||
@@ -151,7 +156,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const selectedTaskIds = useSelector(selectSelectedTaskIds);
|
||||
const loading = useSelector((state: RootState) => state.taskManagement.loading, shallowEqual);
|
||||
const error = useSelector((state: RootState) => state.taskManagement.error);
|
||||
|
||||
|
||||
// Bulk action selectors
|
||||
const statusList = useSelector((state: RootState) => state.taskStatusReducer.status);
|
||||
const priorityList = useSelector((state: RootState) => state.priorityReducer.priorities);
|
||||
@@ -234,8 +239,12 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
// Add isDragging state
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleDragStart = useCallback(
|
||||
(event: DragStartEvent) => {
|
||||
setIsDragging(true);
|
||||
const { active } = event;
|
||||
const taskId = active.id as string;
|
||||
|
||||
@@ -244,13 +253,12 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
let activeGroupId: string | null = null;
|
||||
|
||||
if (activeTask) {
|
||||
// Determine group ID based on current grouping
|
||||
if (currentGrouping === 'status') {
|
||||
activeGroupId = `status-${activeTask.status}`;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
activeGroupId = `priority-${activeTask.priority}`;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
activeGroupId = `phase-${activeTask.phase}`;
|
||||
// Find which group contains this task by looking through all groups
|
||||
for (const group of taskGroups) {
|
||||
if (group.taskIds.includes(taskId)) {
|
||||
activeGroupId = group.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,7 +267,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
activeGroupId,
|
||||
});
|
||||
},
|
||||
[tasks, currentGrouping]
|
||||
[tasks, currentGrouping, taskGroups]
|
||||
);
|
||||
|
||||
// Throttled drag over handler for smoother performance
|
||||
@@ -270,15 +278,14 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
if (!over || !dragState.activeTask) return;
|
||||
|
||||
const activeTaskId = active.id as string;
|
||||
const overContainer = over.id as string;
|
||||
const overId = over.id as string;
|
||||
|
||||
// PERFORMANCE OPTIMIZATION: Immediate response for instant UX
|
||||
// Only update if we're hovering over a different container
|
||||
const targetTask = tasks.find(t => t.id === overContainer);
|
||||
let targetGroupId = overContainer;
|
||||
// Check if we're hovering over a task or a group container
|
||||
const targetTask = tasks.find(t => t.id === overId);
|
||||
let targetGroupId = overId;
|
||||
|
||||
if (targetTask) {
|
||||
// PERFORMANCE OPTIMIZATION: Use switch instead of multiple if statements
|
||||
// We're hovering over a task, determine its group
|
||||
switch (currentGrouping) {
|
||||
case 'status':
|
||||
targetGroupId = `status-${targetTask.status}`;
|
||||
@@ -291,29 +298,13 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (targetGroupId !== dragState.activeGroupId) {
|
||||
// PERFORMANCE OPTIMIZATION: Use findIndex for better performance
|
||||
const targetGroupIndex = taskGroups.findIndex(g => g.id === targetGroupId);
|
||||
if (targetGroupIndex !== -1) {
|
||||
const targetGroup = taskGroups[targetGroupIndex];
|
||||
dispatch(
|
||||
optimisticTaskMove({
|
||||
taskId: activeTaskId,
|
||||
newGroupId: targetGroupId,
|
||||
newIndex: targetGroup.taskIds.length,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}, 16), // 60fps throttling for smooth performance
|
||||
[dragState, tasks, taskGroups, currentGrouping, dispatch]
|
||||
[dragState, tasks, taskGroups, currentGrouping]
|
||||
);
|
||||
|
||||
const handleDragEnd = useCallback(
|
||||
(event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
setIsDragging(false);
|
||||
// Clear any pending drag over timeouts
|
||||
if (dragOverTimeoutRef.current) {
|
||||
clearTimeout(dragOverTimeoutRef.current);
|
||||
@@ -327,36 +318,27 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
activeGroupId: null,
|
||||
});
|
||||
|
||||
if (!over || !currentDragState.activeTask || !currentDragState.activeGroupId) {
|
||||
if (!event.over || !currentDragState.activeTask || !currentDragState.activeGroupId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { active, over } = event;
|
||||
const activeTaskId = active.id as string;
|
||||
const overContainer = over.id as string;
|
||||
const overId = over.id as string;
|
||||
|
||||
// Parse the group ID to get group type and value - optimized
|
||||
const parseGroupId = (groupId: string) => {
|
||||
const [groupType, ...groupValueParts] = groupId.split('-');
|
||||
return {
|
||||
groupType: groupType as 'status' | 'priority' | 'phase',
|
||||
groupValue: groupValueParts.join('-'),
|
||||
};
|
||||
};
|
||||
|
||||
// Determine target group
|
||||
let targetGroupId = overContainer;
|
||||
// Determine target group and position
|
||||
let targetGroupId = overId;
|
||||
let targetIndex = -1;
|
||||
|
||||
// Check if dropping on a task or a group
|
||||
const targetTask = tasks.find(t => t.id === overContainer);
|
||||
const targetTask = tasks.find(t => t.id === overId);
|
||||
if (targetTask) {
|
||||
// Dropping on a task, determine its group
|
||||
if (currentGrouping === 'status') {
|
||||
targetGroupId = `status-${targetTask.status}`;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
targetGroupId = `priority-${targetTask.priority}`;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
targetGroupId = `phase-${targetTask.phase}`;
|
||||
// Dropping on a task, find which group contains this task
|
||||
for (const group of taskGroups) {
|
||||
if (group.taskIds.includes(targetTask.id)) {
|
||||
targetGroupId = group.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Find the index of the target task within its group
|
||||
@@ -364,23 +346,15 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
if (targetGroup) {
|
||||
targetIndex = targetGroup.taskIds.indexOf(targetTask.id);
|
||||
}
|
||||
} else {
|
||||
// Dropping on a group container, add to the end
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
if (targetGroup) {
|
||||
targetIndex = targetGroup.taskIds.length;
|
||||
}
|
||||
}
|
||||
|
||||
const sourceGroupInfo = parseGroupId(currentDragState.activeGroupId);
|
||||
const targetGroupInfo = parseGroupId(targetGroupId);
|
||||
|
||||
// If moving between different groups, update the task's group property
|
||||
if (currentDragState.activeGroupId !== targetGroupId) {
|
||||
dispatch(
|
||||
moveTaskToGroup({
|
||||
taskId: activeTaskId,
|
||||
groupType: targetGroupInfo.groupType,
|
||||
groupValue: targetGroupInfo.groupValue,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Handle reordering within the same group or between groups
|
||||
// Find source and target groups
|
||||
const sourceGroup = taskGroups.find(g => g.id === currentDragState.activeGroupId);
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
|
||||
@@ -390,27 +364,41 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
|
||||
// Only reorder if actually moving to a different position
|
||||
if (sourceGroup.id !== targetGroup.id || sourceIndex !== finalTargetIndex) {
|
||||
// Calculate new order values - simplified
|
||||
const allTasksInTargetGroup = targetGroup.taskIds.map(
|
||||
(id: string) => tasks.find((t: any) => t.id === id)!
|
||||
);
|
||||
const newOrder = allTasksInTargetGroup.map((task, index) => {
|
||||
if (index < finalTargetIndex) return task.order;
|
||||
if (index === finalTargetIndex) return currentDragState.activeTask!.order;
|
||||
return task.order + 1;
|
||||
});
|
||||
|
||||
// Dispatch reorder action
|
||||
// Use the new reorderTasksInGroup action that properly handles group arrays
|
||||
dispatch(
|
||||
reorderTasks({
|
||||
taskIds: [activeTaskId, ...allTasksInTargetGroup.map((t: any) => t.id)],
|
||||
newOrder: [currentDragState.activeTask!.order, ...newOrder],
|
||||
reorderTasksInGroup({
|
||||
taskId: activeTaskId,
|
||||
fromGroupId: currentDragState.activeGroupId,
|
||||
toGroupId: targetGroupId,
|
||||
fromIndex: sourceIndex,
|
||||
toIndex: finalTargetIndex,
|
||||
groupType: targetGroup.groupType,
|
||||
groupValue: targetGroup.groupValue,
|
||||
})
|
||||
);
|
||||
|
||||
// Emit socket event to backend
|
||||
if (connected && socket && currentDragState.activeTask) {
|
||||
const currentSession = JSON.parse(localStorage.getItem('session') || '{}');
|
||||
|
||||
const socketData = {
|
||||
from_index: sourceIndex,
|
||||
to_index: finalTargetIndex,
|
||||
to_last_index: finalTargetIndex >= targetGroup.taskIds.length,
|
||||
from_group: currentDragState.activeGroupId,
|
||||
to_group: targetGroupId,
|
||||
group_by: currentGrouping,
|
||||
project_id: projectId,
|
||||
task: currentDragState.activeTask,
|
||||
team_id: currentSession.team_id,
|
||||
};
|
||||
|
||||
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[dragState, tasks, taskGroups, currentGrouping, dispatch]
|
||||
[dragState, tasks, taskGroups, currentGrouping, dispatch, connected, socket, projectId]
|
||||
);
|
||||
|
||||
const handleSelectTask = useCallback(
|
||||
@@ -651,17 +639,14 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
// Additional handlers for new actions
|
||||
const handleBulkDuplicate = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk duplicate not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkExport = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk export not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkSetDueDate = useCallback(async (date: string) => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk set due date not yet implemented in API:', date, selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
// Cleanup effect
|
||||
@@ -689,24 +674,19 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
autoScroll={false}
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Task Filters */}
|
||||
<div className="mb-4">
|
||||
<ImprovedTaskFilters position="list" />
|
||||
</div>
|
||||
|
||||
{/* Performance Analysis - Only show in development */}
|
||||
{/* {process.env.NODE_ENV === 'development' && (
|
||||
<PerformanceAnalysis projectId={projectId} />
|
||||
)} */}
|
||||
|
||||
{/* Fixed Height Task Groups Container - Asana Style */}
|
||||
<div className="task-groups-container-fixed">
|
||||
<div className="task-groups-scrollable">
|
||||
<div className={`task-groups-scrollable${isDragging ? ' lock-scroll' : ''}`}>
|
||||
{loading ? (
|
||||
<div className="loading-container">
|
||||
<div className="flex justify-center items-center py-8">
|
||||
@@ -775,14 +755,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
|
||||
<DragOverlay
|
||||
adjustScale={false}
|
||||
dropAnimation={{
|
||||
duration: 200,
|
||||
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
|
||||
}}
|
||||
style={{
|
||||
cursor: 'grabbing',
|
||||
zIndex: 9999,
|
||||
}}
|
||||
dropAnimation={null}
|
||||
>
|
||||
{dragOverlayContent}
|
||||
</DragOverlay>
|
||||
@@ -1277,6 +1250,10 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
.react-window-list-item {
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.task-groups-scrollable.lock-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { dayjs } from './antd-imports';
|
||||
import { dayjs } from '@/shared/antd-imports';
|
||||
|
||||
// Performance constants
|
||||
export const PERFORMANCE_CONSTANTS = {
|
||||
|
||||
@@ -15,8 +15,15 @@ import {
|
||||
UserOutlined,
|
||||
type InputRef,
|
||||
Tooltip
|
||||
} from './antd-imports';
|
||||
import { DownOutlined, RightOutlined, ExpandAltOutlined, CheckCircleOutlined, MinusCircleOutlined, EyeOutlined, RetweetOutlined } from '@ant-design/icons';
|
||||
} from '@/shared/antd-imports';
|
||||
import {
|
||||
RightOutlined,
|
||||
ExpandAltOutlined,
|
||||
CheckCircleOutlined,
|
||||
MinusCircleOutlined,
|
||||
EyeOutlined,
|
||||
RetweetOutlined,
|
||||
} from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
@@ -68,22 +75,25 @@ const STATUS_COLORS = {
|
||||
} as const;
|
||||
|
||||
// Memoized sub-components for maximum performance
|
||||
const DragHandle = React.memo<{ isDarkMode: boolean; attributes: any; listeners: any }>(({ isDarkMode, attributes, listeners }) => (
|
||||
<div
|
||||
className="drag-handle-optimized flex items-center justify-center w-6 h-6 opacity-60 hover:opacity-100"
|
||||
style={{
|
||||
transition: 'opacity 0.1s ease', // Faster transition
|
||||
}}
|
||||
data-dnd-drag-handle="true"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<HolderOutlined
|
||||
className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
|
||||
style={{ pointerEvents: 'none' }} // Prevent icon from interfering
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
const DragHandle = React.memo<{ isDarkMode: boolean; attributes: any; listeners: any }>(({ isDarkMode, attributes, listeners }) => {
|
||||
return (
|
||||
<div
|
||||
className="drag-handle-optimized flex items-center justify-center w-6 h-6 opacity-60 hover:opacity-100"
|
||||
style={{
|
||||
transition: 'opacity 0.1s ease', // Faster transition
|
||||
cursor: 'grab',
|
||||
}}
|
||||
data-dnd-drag-handle="true"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<HolderOutlined
|
||||
className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
|
||||
style={{ pointerEvents: 'none' }} // Prevent icon from interfering
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const TaskKey = React.memo<{ taskKey: string; isDarkMode: boolean }>(({ taskKey, isDarkMode }) => (
|
||||
<span
|
||||
@@ -508,12 +518,8 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
|
||||
return {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition: isDragging ? 'opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)' : 'none',
|
||||
opacity: isDragging ? 0.3 : 1,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
zIndex: isDragging ? 1000 : 'auto',
|
||||
// PERFORMANCE OPTIMIZATION: Force GPU acceleration
|
||||
willChange: 'transform, opacity',
|
||||
filter: isDragging ? 'blur(0.5px)' : 'none',
|
||||
};
|
||||
}, [transform, isDragging]);
|
||||
|
||||
@@ -1223,58 +1229,27 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
// Compute theme class
|
||||
const themeClass = isDarkMode ? 'dark' : '';
|
||||
|
||||
if (isDragging) {
|
||||
console.log('TaskRow isDragging:', task.id);
|
||||
}
|
||||
|
||||
// DRAG OVERLAY: Render simplified version when dragging
|
||||
if (isDragOverlay) {
|
||||
return (
|
||||
<div
|
||||
className={`drag-overlay-simplified ${themeClass}`}
|
||||
className="drag-overlay-simplified"
|
||||
style={{
|
||||
padding: '10px 16px',
|
||||
backgroundColor: isDarkMode ? 'rgba(42, 42, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)',
|
||||
border: `1px solid ${isDarkMode ? 'rgba(74, 158, 255, 0.8)' : 'rgba(24, 144, 255, 0.8)'}`,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDarkMode
|
||||
? '0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(74, 158, 255, 0.2)'
|
||||
: '0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(24, 144, 255, 0.15)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
maxWidth: '320px',
|
||||
minWidth: '200px',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: isDarkMode ? '#1f1f1f' : 'white',
|
||||
border: `1px solid ${isDarkMode ? '#404040' : '#d9d9d9'}`,
|
||||
borderRadius: '4px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||||
color: isDarkMode ? 'white' : 'black',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
transform: 'scale(1.02)',
|
||||
transition: 'none',
|
||||
willChange: 'transform',
|
||||
maxWidth: '300px',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`drag-handle-icon ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
opacity: 0.8,
|
||||
transform: 'translateZ(0)',
|
||||
}}
|
||||
>
|
||||
<HolderOutlined />
|
||||
</div>
|
||||
<span
|
||||
className={`task-title-drag ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
|
||||
title={task.title}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.01em',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{task.title}
|
||||
</span>
|
||||
</div>
|
||||
{task.title}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useMemo, useCallback, useEffect, useRef } from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { FixedSizeList as List, FixedSizeList } from 'react-window';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -205,7 +205,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
|
||||
return group.taskIds
|
||||
.map((taskId: string) => tasksById[taskId])
|
||||
.filter((task: Task | undefined): task is Task => task !== undefined);
|
||||
}, [group.taskIds, tasksById]);
|
||||
}, [group.taskIds, tasksById, group.id]);
|
||||
|
||||
// Calculate selection state for the group checkbox
|
||||
const selectionState = useMemo(() => {
|
||||
@@ -329,7 +329,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
|
||||
}, [groupTasks.length]);
|
||||
|
||||
// Build displayRows array
|
||||
const displayRows = [];
|
||||
const displayRows: Array<{ type: 'task'; task: Task } | { type: 'add-subtask'; parentTask: Task }> = [];
|
||||
for (let i = 0; i < groupTasks.length; i++) {
|
||||
const task = groupTasks[i];
|
||||
displayRows.push({ type: 'task', task });
|
||||
@@ -340,6 +340,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
|
||||
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const headerScrollRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<FixedSizeList>(null);
|
||||
|
||||
// PERFORMANCE OPTIMIZATION: Throttled scroll handler
|
||||
const handleScroll = useCallback(() => {
|
||||
@@ -551,14 +552,17 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
|
||||
contain: 'layout style', // CSS containment for better performance
|
||||
}}
|
||||
>
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<SortableContext
|
||||
items={group.taskIds}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{shouldVirtualize ? (
|
||||
<List
|
||||
height={availableTaskRowsHeight}
|
||||
itemCount={displayRows.length}
|
||||
itemSize={TASK_ROW_HEIGHT}
|
||||
width={totalTableWidth}
|
||||
ref={scrollContainerRef}
|
||||
ref={listRef}
|
||||
overscanCount={overscanCount}
|
||||
>
|
||||
{({ index, style }) => {
|
||||
|
||||
Reference in New Issue
Block a user