feat(task-management): enhance task list with new components and improved state management
- Introduced TaskListV2 and TaskGroupHeader components for a more organized task display. - Implemented virtualized rendering using react-virtuoso for efficient task list handling. - Updated Redux state management to include new selectors and improved task grouping logic. - Added task filtering capabilities with TaskListFilters component for better user experience. - Enhanced task selection handling and integrated drag-and-drop functionality for task rows. - Updated package dependencies to include new libraries for icons and forms.
This commit is contained in:
chamikaJ
@@ -1,4 +1,5 @@
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
// Auth & User
|
||||
import authReducer from '@features/auth/authSlice';
|
||||
@@ -76,14 +77,14 @@ import teamMembersReducer from '@features/team-members/team-members.slice';
|
||||
import groupByFilterDropdownReducer from '../features/group-by-filter-dropdown/group-by-filter-dropdown-slice';
|
||||
|
||||
// Task Management System
|
||||
import taskManagementReducer from '@features/task-management/task-management.slice';
|
||||
import groupingReducer from '@features/task-management/grouping.slice';
|
||||
import selectionReducer from '@features/task-management/selection.slice';
|
||||
import taskManagementReducer from '@/features/task-management/task-management.slice';
|
||||
import groupingReducer from '@/features/task-management/grouping.slice';
|
||||
import selectionReducer from '@/features/task-management/selection.slice';
|
||||
import homePageApiService from '@/api/home-page/home-page.api.service';
|
||||
import { projectsApi } from '@/api/projects/projects.v1.api.service';
|
||||
|
||||
import projectViewReducer from '@features/project/project-view-slice';
|
||||
import taskManagementFields from '@features/task-management/taskListFields.slice';
|
||||
import taskManagementFieldsReducer from '@features/task-management/taskListFields.slice';
|
||||
|
||||
export const store = configureStore({
|
||||
middleware: getDefaultMiddleware =>
|
||||
@@ -172,9 +173,13 @@ export const store = configureStore({
|
||||
taskManagement: taskManagementReducer,
|
||||
grouping: groupingReducer,
|
||||
taskManagementSelection: selectionReducer,
|
||||
taskManagementFields,
|
||||
taskManagementFields: taskManagementFieldsReducer,
|
||||
},
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
|
||||
export const useAppDispatch = () => useDispatch<AppDispatch>();
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface TaskGroupHeaderProps {
|
||||
group: {
|
||||
id: string;
|
||||
name: string;
|
||||
count: number;
|
||||
color?: string; // Color for the group indicator
|
||||
};
|
||||
isCollapsed: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, onToggle }) => {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center px-4 py-2 bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-700"
|
||||
onClick={onToggle}
|
||||
>
|
||||
{/* Chevron button */}
|
||||
<button
|
||||
className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle();
|
||||
}}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<ChevronRightIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
|
||||
) : (
|
||||
<ChevronDownIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Group indicator and name */}
|
||||
<div className="ml-2 flex items-center gap-3 flex-1">
|
||||
{/* Color indicator */}
|
||||
<div
|
||||
className="w-3 h-3 rounded-sm"
|
||||
style={{ backgroundColor: group.color || '#94A3B8' }}
|
||||
/>
|
||||
|
||||
{/* Group name and count */}
|
||||
<div className="flex items-center justify-between flex-1">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{group.name}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full">
|
||||
{group.count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskGroupHeader;
|
||||
264
worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
Normal file
264
worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { GroupedVirtuoso } from 'react-virtuoso';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import {
|
||||
selectAllTasksArray,
|
||||
selectGroups,
|
||||
selectGrouping,
|
||||
selectLoading,
|
||||
selectError,
|
||||
selectSelectedPriorities,
|
||||
selectSearch,
|
||||
fetchTasksV3,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
import {
|
||||
selectCurrentGrouping,
|
||||
selectCollapsedGroups,
|
||||
selectIsGroupCollapsed,
|
||||
toggleGroupCollapsed,
|
||||
} from '@/features/task-management/grouping.slice';
|
||||
import {
|
||||
selectSelectedTaskIds,
|
||||
selectLastSelectedTaskId,
|
||||
selectIsTaskSelected,
|
||||
selectTask,
|
||||
deselectTask,
|
||||
toggleTaskSelection,
|
||||
selectRange,
|
||||
clearSelection,
|
||||
} from '@/features/task-management/selection.slice';
|
||||
import TaskRow from './TaskRow';
|
||||
import TaskGroupHeader from './TaskGroupHeader';
|
||||
import { Task, TaskGroup } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
import { TaskListField } from '@/types/task-list-field.types';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import ImprovedTaskFilters from '@/components/task-management/improved-task-filters';
|
||||
import { Bars3Icon } from '@heroicons/react/24/outline';
|
||||
import { COLUMN_KEYS } from '@/features/tasks/tasks.slice';
|
||||
|
||||
// Base column configuration
|
||||
const BASE_COLUMNS = [
|
||||
{ id: 'dragHandle', label: '', width: '32px', isSticky: true, key: 'dragHandle' },
|
||||
{ id: 'taskKey', label: 'Key', width: '100px', isSticky: true, key: COLUMN_KEYS.KEY },
|
||||
{ id: 'title', label: 'Title', width: '300px', isSticky: true, key: COLUMN_KEYS.NAME },
|
||||
{ id: 'status', label: 'Status', width: '120px', key: COLUMN_KEYS.STATUS },
|
||||
{ id: 'assignees', label: 'Assignees', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
|
||||
{ id: 'priority', label: 'Priority', width: '120px', key: COLUMN_KEYS.PRIORITY },
|
||||
{ id: 'dueDate', label: 'Due Date', width: '120px', key: COLUMN_KEYS.DUE_DATE },
|
||||
{ id: 'progress', label: 'Progress', width: '120px', key: COLUMN_KEYS.PROGRESS },
|
||||
{ id: 'labels', label: 'Labels', width: '150px', key: COLUMN_KEYS.LABELS },
|
||||
{ id: 'phase', label: 'Phase', width: '120px', key: COLUMN_KEYS.PHASE },
|
||||
{ id: 'timeTracking', label: 'Time Tracking', width: '120px', key: COLUMN_KEYS.TIME_TRACKING },
|
||||
{ id: 'estimation', label: 'Estimation', width: '120px', key: COLUMN_KEYS.ESTIMATION },
|
||||
{ id: 'startDate', label: 'Start Date', width: '120px', key: COLUMN_KEYS.START_DATE },
|
||||
{ id: 'dueTime', label: 'Due Time', width: '120px', key: COLUMN_KEYS.DUE_TIME },
|
||||
{ id: 'completedDate', label: 'Completed Date', width: '120px', key: COLUMN_KEYS.COMPLETED_DATE },
|
||||
{ id: 'createdDate', label: 'Created Date', width: '120px', key: COLUMN_KEYS.CREATED_DATE },
|
||||
{ id: 'lastUpdated', label: 'Last Updated', width: '120px', key: COLUMN_KEYS.LAST_UPDATED },
|
||||
{ id: 'reporter', label: 'Reporter', width: '120px', key: COLUMN_KEYS.REPORTER },
|
||||
];
|
||||
|
||||
type ColumnStyle = {
|
||||
width: string;
|
||||
position?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
|
||||
left?: number;
|
||||
backgroundColor?: string;
|
||||
zIndex?: number;
|
||||
};
|
||||
|
||||
interface TaskListV2Props {
|
||||
projectId: string;
|
||||
}
|
||||
|
||||
const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectId: urlProjectId } = useParams();
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
|
||||
|
||||
// Selectors
|
||||
const tasks = useAppSelector(selectAllTasksArray);
|
||||
const groups = useAppSelector(selectGroups);
|
||||
const grouping = useAppSelector(selectGrouping);
|
||||
const loading = useAppSelector(selectLoading);
|
||||
const error = useAppSelector(selectError);
|
||||
const selectedPriorities = useAppSelector(selectSelectedPriorities);
|
||||
const searchQuery = useAppSelector(selectSearch);
|
||||
const currentGrouping = useAppSelector(selectCurrentGrouping);
|
||||
const selectedTaskIds = useAppSelector(selectSelectedTaskIds);
|
||||
const lastSelectedTaskId = useAppSelector(selectLastSelectedTaskId);
|
||||
|
||||
const fields = useAppSelector(state => state.taskManagementFields) || [];
|
||||
|
||||
// Filter visible columns based on fields
|
||||
const visibleColumns = useMemo(() => {
|
||||
return BASE_COLUMNS.filter(column => {
|
||||
// Always show drag handle, task key, and title
|
||||
if (column.isSticky) return true;
|
||||
// Check if field is visible
|
||||
const field = fields.find(f => f.key === column.key);
|
||||
return field?.visible ?? false;
|
||||
});
|
||||
}, [fields]);
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
if (urlProjectId) {
|
||||
dispatch(fetchTasksV3(urlProjectId));
|
||||
}
|
||||
}, [dispatch, urlProjectId]);
|
||||
|
||||
// Handlers
|
||||
const handleTaskSelect = useCallback((taskId: string, event: React.MouseEvent) => {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
dispatch(toggleTaskSelection(taskId));
|
||||
} else if (event.shiftKey && lastSelectedTaskId) {
|
||||
const taskIds = tasks.map(t => t.id);
|
||||
const startIdx = taskIds.indexOf(lastSelectedTaskId);
|
||||
const endIdx = taskIds.indexOf(taskId);
|
||||
const rangeIds = taskIds.slice(
|
||||
Math.min(startIdx, endIdx),
|
||||
Math.max(startIdx, endIdx) + 1
|
||||
);
|
||||
dispatch(selectRange(rangeIds));
|
||||
} else {
|
||||
dispatch(clearSelection());
|
||||
dispatch(selectTask(taskId));
|
||||
}
|
||||
}, [dispatch, lastSelectedTaskId, tasks]);
|
||||
|
||||
const handleGroupCollapse = useCallback((groupId: string) => {
|
||||
setCollapsedGroups(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(groupId)) {
|
||||
next.delete(groupId);
|
||||
} else {
|
||||
next.add(groupId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Memoized values
|
||||
const groupCounts = useMemo(() => {
|
||||
return groups.map(group => {
|
||||
const visibleTasks = tasks.filter(task => group.taskIds.includes(task.id));
|
||||
return visibleTasks.length;
|
||||
});
|
||||
}, [groups, tasks]);
|
||||
|
||||
const visibleGroups = useMemo(() => {
|
||||
return groups.filter(group => !collapsedGroups.has(group.id));
|
||||
}, [groups, collapsedGroups]);
|
||||
|
||||
// Render functions
|
||||
const renderGroup = useCallback((groupIndex: number) => {
|
||||
const group = groups[groupIndex];
|
||||
return (
|
||||
<TaskGroupHeader
|
||||
group={{
|
||||
id: group.id,
|
||||
name: group.title,
|
||||
count: groupCounts[groupIndex],
|
||||
color: group.color,
|
||||
}}
|
||||
isCollapsed={collapsedGroups.has(group.id)}
|
||||
onToggle={() => handleGroupCollapse(group.id)}
|
||||
/>
|
||||
);
|
||||
}, [groups, groupCounts, collapsedGroups, handleGroupCollapse]);
|
||||
|
||||
const renderTask = useCallback((taskIndex: number) => {
|
||||
const task = tasks[taskIndex];
|
||||
return (
|
||||
<TaskRow
|
||||
task={task}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
);
|
||||
}, [tasks, visibleColumns]);
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (error) return <div>Error: {error}</div>;
|
||||
|
||||
// Log data for debugging
|
||||
console.log('Rendering with:', {
|
||||
groups,
|
||||
tasks,
|
||||
groupCounts
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-white dark:bg-gray-900">
|
||||
{/* Task Filters */}
|
||||
<div className="flex-none px-4 py-3">
|
||||
<ImprovedTaskFilters position="list" />
|
||||
</div>
|
||||
|
||||
{/* Column Headers */}
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="flex items-center min-w-max px-4 py-2">
|
||||
{visibleColumns.map((column, index) => {
|
||||
const columnStyle: ColumnStyle = {
|
||||
width: column.width,
|
||||
...(column.isSticky ? {
|
||||
position: 'sticky',
|
||||
left: index === 0 ? 0 : index === 1 ? 32 : 132,
|
||||
backgroundColor: 'inherit',
|
||||
zIndex: 2,
|
||||
} : {}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={column.id}
|
||||
className="text-xs font-medium text-gray-500 dark:text-gray-400"
|
||||
style={columnStyle}
|
||||
>
|
||||
{column.id === 'dragHandle' ? (
|
||||
<Bars3Icon className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
column.label
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task List */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<GroupedVirtuoso
|
||||
style={{ height: 'calc(100vh - 200px)' }}
|
||||
groupCounts={groupCounts}
|
||||
groupContent={renderGroup}
|
||||
itemContent={renderTask}
|
||||
components={{
|
||||
Group: ({ children, ...props }) => (
|
||||
<div
|
||||
{...props}
|
||||
className="sticky top-0 z-10 bg-white dark:bg-gray-800"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
List: React.forwardRef(({ style, children }, ref) => (
|
||||
<div
|
||||
ref={ref as any}
|
||||
style={style}
|
||||
className="divide-y divide-gray-200 dark:divide-gray-700"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListV2;
|
||||
261
worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
Normal file
261
worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
import React from 'react';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import Avatar from '@/components/Avatar';
|
||||
import { format } from 'date-fns';
|
||||
import { Bars3Icon } from '@heroicons/react/24/outline';
|
||||
import { ClockIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface TaskRowProps {
|
||||
task: Task;
|
||||
visibleColumns: Array<{
|
||||
id: string;
|
||||
width: string;
|
||||
isSticky?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
const TaskRow: React.FC<TaskRowProps> = ({ task, visibleColumns }) => {
|
||||
const renderColumn = (columnId: string, width: string, isSticky?: boolean, index?: number) => {
|
||||
const baseStyle = {
|
||||
width,
|
||||
...(isSticky ? {
|
||||
position: 'sticky' as const,
|
||||
left: index === 0 ? 0 : index === 1 ? 32 : 132,
|
||||
backgroundColor: 'inherit',
|
||||
zIndex: 1,
|
||||
} : {}),
|
||||
};
|
||||
|
||||
switch (columnId) {
|
||||
case 'dragHandle':
|
||||
return (
|
||||
<div
|
||||
className="cursor-move flex items-center justify-center"
|
||||
style={baseStyle}
|
||||
>
|
||||
<Bars3Icon className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'taskKey':
|
||||
return (
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={baseStyle}
|
||||
>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap">
|
||||
{task.task_key}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'title':
|
||||
return (
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={baseStyle}
|
||||
>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 truncate">
|
||||
{task.title || task.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'status':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: task.statusColor ? `${task.statusColor}20` : 'rgb(229, 231, 235)',
|
||||
color: task.statusColor || 'rgb(31, 41, 55)',
|
||||
}}
|
||||
>
|
||||
{task.status}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'assignees':
|
||||
return (
|
||||
<div className="flex items-center gap-1" style={baseStyle}>
|
||||
{task.assignee_names?.slice(0, 3).map((assignee, index) => (
|
||||
<Avatar
|
||||
key={index}
|
||||
name={assignee.name || ''}
|
||||
size="small"
|
||||
className="ring-2 ring-white dark:ring-gray-900"
|
||||
/>
|
||||
))}
|
||||
{(task.assignee_names?.length || 0) > 3 && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-1">
|
||||
+{task.assignee_names!.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'priority':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: task.priorityColor ? `${task.priorityColor}20` : 'rgb(229, 231, 235)',
|
||||
color: task.priorityColor || 'rgb(31, 41, 55)',
|
||||
}}
|
||||
>
|
||||
{task.priority}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'dueDate':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.dueDate && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{format(new Date(task.dueDate), 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'progress':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'labels':
|
||||
return (
|
||||
<div className="flex items-center gap-1" style={baseStyle}>
|
||||
{task.labels?.slice(0, 2).map((label, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: label.color ? `${label.color}20` : 'rgb(229, 231, 235)',
|
||||
color: label.color || 'rgb(31, 41, 55)',
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
{(task.labels?.length || 0) > 2 && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
+{task.labels!.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'phase':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
|
||||
{task.phase}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'timeTracking':
|
||||
return (
|
||||
<div className="flex items-center gap-1" style={baseStyle}>
|
||||
<ClockIcon className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{task.timeTracking?.logged || 0}h
|
||||
</span>
|
||||
{task.timeTracking?.estimated && (
|
||||
<span className="text-sm text-gray-400 dark:text-gray-500">
|
||||
/{task.timeTracking.estimated}h
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'estimation':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.timeTracking.estimated && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{task.timeTracking.estimated}h
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'startDate':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.startDate && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{format(new Date(task.startDate), 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'completedDate':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.completedAt && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{format(new Date(task.completedAt), 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'createdDate':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.createdAt && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{format(new Date(task.createdAt), 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'lastUpdated':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.updatedAt && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{format(new Date(task.updatedAt), 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'reporter':
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{task.reporter && (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{task.reporter}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center min-w-max px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||
{visibleColumns.map((column, index) => renderColumn(column.id, column.width, column.isSticky, index))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskRow;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
@@ -11,12 +11,15 @@ import {
|
||||
DownOutlined,
|
||||
} from '@/shared/antd-imports';
|
||||
import { TaskGroup as TaskGroupType, Task } from '@/types/task-management.types';
|
||||
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
|
||||
import { taskManagementSelectors, selectAllTasks } from '@/features/task-management/task-management.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import TaskRow from './task-row';
|
||||
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
|
||||
import { TaskListField } from '@/features/task-management/taskListFields.slice';
|
||||
import { Checkbox } from '@/components';
|
||||
import { selectIsGroupCollapsed, toggleGroupCollapsed } from '@/features/task-management/grouping.slice';
|
||||
import { selectIsTaskSelected } from '@/features/task-management/selection.slice';
|
||||
import { Draggable } from 'react-beautiful-dnd';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -58,6 +61,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
|
||||
onSelectTask,
|
||||
onToggleSubtasks,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [isCollapsed, setIsCollapsed] = useState(group.collapsed || false);
|
||||
|
||||
const { setNodeRef, isOver } = useDroppable({
|
||||
@@ -69,7 +73,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
|
||||
});
|
||||
|
||||
// Get all tasks from the store
|
||||
const allTasks = useSelector(taskManagementSelectors.selectAll);
|
||||
const allTasks = useSelector(selectAllTasks);
|
||||
|
||||
// Get theme from Redux store
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
@@ -328,19 +332,29 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="task-group-tasks">
|
||||
{groupTasks.map((task, index) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
fixedColumns={visibleFixedColumns}
|
||||
scrollableColumns={visibleScrollableColumns}
|
||||
/>
|
||||
<Draggable key={task.id} draggableId={task.id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
className={`task-row-wrapper ${snapshot.isDragging ? 'dragging' : ''}`}
|
||||
>
|
||||
<TaskRow
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
fixedColumns={visibleFixedColumns}
|
||||
scrollableColumns={visibleScrollableColumns}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
||||
@@ -17,35 +17,50 @@ import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
|
||||
import { Card, Spin, Empty, Alert } from 'antd';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
taskManagementSelectors,
|
||||
selectAllTasks,
|
||||
selectGroups,
|
||||
selectGrouping,
|
||||
selectLoading,
|
||||
selectError,
|
||||
selectSelectedPriorities,
|
||||
selectSearch,
|
||||
reorderTasks,
|
||||
moveTaskToGroup,
|
||||
moveTaskBetweenGroups,
|
||||
optimisticTaskMove,
|
||||
reorderTasksInGroup,
|
||||
setLoading,
|
||||
fetchTasks,
|
||||
fetchTasksV3,
|
||||
selectTaskGroupsV3,
|
||||
selectCurrentGroupingV3,
|
||||
fetchSubTasks,
|
||||
setError,
|
||||
setSelectedPriorities,
|
||||
setSearch,
|
||||
resetTaskManagement,
|
||||
toggleTaskExpansion,
|
||||
addSubtaskToParent,
|
||||
fetchTasksV3,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
import {
|
||||
selectTaskGroups,
|
||||
selectCurrentGrouping,
|
||||
setCurrentGrouping,
|
||||
selectCollapsedGroups,
|
||||
selectIsGroupCollapsed,
|
||||
toggleGroupCollapsed,
|
||||
expandAllGroups,
|
||||
collapseAllGroups,
|
||||
} from '@/features/task-management/grouping.slice';
|
||||
import {
|
||||
selectSelectedTaskIds,
|
||||
selectLastSelectedTaskId,
|
||||
selectIsTaskSelected,
|
||||
selectTask,
|
||||
deselectTask,
|
||||
toggleTaskSelection,
|
||||
selectRange,
|
||||
clearSelection,
|
||||
} from '@/features/task-management/selection.slice';
|
||||
import {
|
||||
selectTaskIds,
|
||||
selectTasks,
|
||||
deselectAll as deselectAllBulk,
|
||||
} from '@/features/projects/bulkActions/bulkActionSlice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { Task, TaskGroup } from '@/types/task-management.types';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
@@ -157,16 +172,19 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const { socket, connected } = useSocket();
|
||||
|
||||
// Redux selectors using V3 API (pre-processed data, minimal loops)
|
||||
const tasks = useSelector(taskManagementSelectors.selectAll);
|
||||
const tasks = useSelector(selectAllTasks);
|
||||
const groups = useSelector(selectGroups);
|
||||
const grouping = useSelector(selectGrouping);
|
||||
const loading = useSelector(selectLoading);
|
||||
const error = useSelector(selectError);
|
||||
const selectedPriorities = useSelector(selectSelectedPriorities);
|
||||
const searchQuery = useSelector(selectSearch);
|
||||
const taskGroups = useSelector(selectTaskGroupsV3, shallowEqual);
|
||||
const currentGrouping = useSelector(selectCurrentGroupingV3, shallowEqual);
|
||||
// Use bulk action slice for selected tasks instead of selection slice
|
||||
const selectedTaskIds = useSelector(
|
||||
(state: RootState) => state.bulkActionReducer.selectedTaskIdsList
|
||||
);
|
||||
const currentGrouping = useSelector(selectCurrentGrouping);
|
||||
const collapsedGroups = useSelector(selectCollapsedGroups);
|
||||
const selectedTaskIds = useSelector(selectSelectedTaskIds);
|
||||
const lastSelectedTaskId = useSelector(selectLastSelectedTaskId);
|
||||
const selectedTasks = useSelector((state: RootState) => state.bulkActionReducer.selectedTasks);
|
||||
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);
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TaskListFiltersProps {
|
||||
selectedPriorities: string[];
|
||||
onPriorityChange: (priorities: string[]) => void;
|
||||
searchQuery: string;
|
||||
onSearchChange: (query: string) => void;
|
||||
}
|
||||
|
||||
const TaskListFilters: React.FC<TaskListFiltersProps> = ({
|
||||
selectedPriorities,
|
||||
onPriorityChange,
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
}) => {
|
||||
const priorities = ['High', 'Medium', 'Low'];
|
||||
|
||||
return (
|
||||
<div className="task-list-filters">
|
||||
<div className="filter-group">
|
||||
<label>Priority:</label>
|
||||
<div className="priority-filters">
|
||||
{priorities.map(priority => (
|
||||
<label key={priority} className="priority-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedPriorities.includes(priority)}
|
||||
onChange={e => {
|
||||
const newPriorities = e.target.checked
|
||||
? [...selectedPriorities, priority]
|
||||
: selectedPriorities.filter(p => p !== priority);
|
||||
onPriorityChange(newPriorities);
|
||||
}}
|
||||
/>
|
||||
<span>{priority}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="filter-group">
|
||||
<label>Search:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={e => onSearchChange(e.target.value)}
|
||||
placeholder="Search tasks..."
|
||||
className="search-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListFilters;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Task, TaskGroup } from '@/types/task-management.types';
|
||||
import TaskRow from './task-row';
|
||||
|
||||
interface TaskListGroupProps {
|
||||
group: TaskGroup;
|
||||
tasks: Task[];
|
||||
isCollapsed: boolean;
|
||||
onCollapse: () => void;
|
||||
onTaskSelect: (taskId: string, event: React.MouseEvent) => void;
|
||||
selectedTaskIds: string[];
|
||||
projectId: string;
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
}
|
||||
|
||||
const TaskListGroup: React.FC<TaskListGroupProps> = ({
|
||||
group,
|
||||
tasks,
|
||||
isCollapsed,
|
||||
onCollapse,
|
||||
onTaskSelect,
|
||||
selectedTaskIds,
|
||||
projectId,
|
||||
currentGrouping,
|
||||
}) => {
|
||||
const groupStyle = {
|
||||
backgroundColor: group.color ? `${group.color}10` : undefined,
|
||||
borderColor: group.color,
|
||||
};
|
||||
|
||||
const headerStyle = {
|
||||
backgroundColor: group.color ? `${group.color}20` : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="task-list-group" style={groupStyle}>
|
||||
<div className="group-header" style={headerStyle} onClick={onCollapse}>
|
||||
<div className="group-title">
|
||||
<span className={`collapse-icon ${isCollapsed ? 'collapsed' : ''}`}>
|
||||
{isCollapsed ? '►' : '▼'}
|
||||
</span>
|
||||
<h3>{group.title}</h3>
|
||||
<span className="task-count">({tasks.length})</span>
|
||||
</div>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="task-list">
|
||||
{tasks.map((task, index) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({
|
||||
id: task.id,
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={`task-row-wrapper ${isDragging ? 'dragging' : ''}`}
|
||||
>
|
||||
<TaskRow
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
onSelect={(taskId, selected) => onTaskSelect(taskId, {} as React.MouseEvent)}
|
||||
index={index}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListGroup;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TaskListHeaderProps {
|
||||
onExpandAll: () => void;
|
||||
onCollapseAll: () => void;
|
||||
}
|
||||
|
||||
const TaskListHeader: React.FC<TaskListHeaderProps> = ({
|
||||
onExpandAll,
|
||||
onCollapseAll,
|
||||
}) => {
|
||||
return (
|
||||
<div className="task-list-header">
|
||||
<div className="header-actions">
|
||||
<button
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={onExpandAll}
|
||||
>
|
||||
Expand All
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary btn-sm ml-2"
|
||||
onClick={onCollapseAll}
|
||||
>
|
||||
Collapse All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListHeader;
|
||||
@@ -9,6 +9,14 @@ import {
|
||||
taskManagementSelectors,
|
||||
toggleTaskExpansion,
|
||||
fetchSubTasks,
|
||||
selectAllTasks,
|
||||
selectTaskIds,
|
||||
selectGroups,
|
||||
selectGrouping,
|
||||
selectLoading,
|
||||
selectError,
|
||||
selectSelectedPriorities,
|
||||
selectSearch,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
import { toggleGroupCollapsed } from '@/features/task-management/grouping.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit';
|
||||
import { GroupingState, TaskGroup } from '@/types/task-management.types';
|
||||
import { GroupingState, TaskGroup, TaskGrouping } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
import { taskManagementSelectors } from './task-management.slice';
|
||||
import { selectAllTasks } from './task-management.slice';
|
||||
|
||||
interface GroupingState {
|
||||
currentGrouping: TaskGrouping | null;
|
||||
customPhases: string[];
|
||||
groupOrder: {
|
||||
status: string[];
|
||||
priority: string[];
|
||||
phase: string[];
|
||||
};
|
||||
groupStates: Record<string, { collapsed: boolean }>;
|
||||
collapsedGroups: Set<string>;
|
||||
}
|
||||
|
||||
const initialState: GroupingState = {
|
||||
currentGrouping: 'status',
|
||||
currentGrouping: null,
|
||||
customPhases: ['Planning', 'Development', 'Testing', 'Deployment'],
|
||||
groupOrder: {
|
||||
status: ['todo', 'doing', 'done'],
|
||||
@@ -12,13 +24,14 @@ const initialState: GroupingState = {
|
||||
phase: ['Planning', 'Development', 'Testing', 'Deployment'],
|
||||
},
|
||||
groupStates: {},
|
||||
collapsedGroups: new Set(),
|
||||
};
|
||||
|
||||
const groupingSlice = createSlice({
|
||||
name: 'grouping',
|
||||
initialState,
|
||||
reducers: {
|
||||
setCurrentGrouping: (state, action: PayloadAction<'status' | 'priority' | 'phase'>) => {
|
||||
setCurrentGrouping: (state, action: PayloadAction<TaskGrouping | null>) => {
|
||||
state.currentGrouping = action.payload;
|
||||
},
|
||||
|
||||
@@ -48,10 +61,13 @@ const groupingSlice = createSlice({
|
||||
|
||||
toggleGroupCollapsed: (state, action: PayloadAction<string>) => {
|
||||
const groupId = action.payload;
|
||||
if (!state.groupStates[groupId]) {
|
||||
state.groupStates[groupId] = { collapsed: false };
|
||||
const collapsedGroups = new Set(state.collapsedGroups);
|
||||
if (collapsedGroups.has(groupId)) {
|
||||
collapsedGroups.delete(groupId);
|
||||
} else {
|
||||
collapsedGroups.add(groupId);
|
||||
}
|
||||
state.groupStates[groupId].collapsed = !state.groupStates[groupId].collapsed;
|
||||
state.collapsedGroups = collapsedGroups;
|
||||
},
|
||||
|
||||
setGroupCollapsed: (state, action: PayloadAction<{ groupId: string; collapsed: boolean }>) => {
|
||||
@@ -62,16 +78,12 @@ const groupingSlice = createSlice({
|
||||
state.groupStates[groupId].collapsed = collapsed;
|
||||
},
|
||||
|
||||
collapseAllGroups: state => {
|
||||
Object.keys(state.groupStates).forEach(groupId => {
|
||||
state.groupStates[groupId].collapsed = true;
|
||||
});
|
||||
collapseAllGroups: (state, action: PayloadAction<string[]>) => {
|
||||
state.collapsedGroups = new Set(action.payload);
|
||||
},
|
||||
|
||||
expandAllGroups: state => {
|
||||
Object.keys(state.groupStates).forEach(groupId => {
|
||||
state.groupStates[groupId].collapsed = false;
|
||||
});
|
||||
state.collapsedGroups = new Set();
|
||||
},
|
||||
|
||||
resetGrouping: () => initialState,
|
||||
@@ -96,6 +108,9 @@ export const selectCurrentGrouping = (state: RootState) => state.grouping.curren
|
||||
export const selectCustomPhases = (state: RootState) => state.grouping.customPhases;
|
||||
export const selectGroupOrder = (state: RootState) => state.grouping.groupOrder;
|
||||
export const selectGroupStates = (state: RootState) => state.grouping.groupStates;
|
||||
export const selectCollapsedGroups = (state: RootState) => state.grouping.collapsedGroups;
|
||||
export const selectIsGroupCollapsed = (state: RootState, groupId: string) =>
|
||||
state.grouping.collapsedGroups.has(groupId);
|
||||
|
||||
// Complex selectors using createSelector for memoization
|
||||
export const selectCurrentGroupOrder = createSelector(
|
||||
@@ -104,12 +119,7 @@ export const selectCurrentGroupOrder = createSelector(
|
||||
);
|
||||
|
||||
export const selectTaskGroups = createSelector(
|
||||
[
|
||||
taskManagementSelectors.selectAll,
|
||||
selectCurrentGrouping,
|
||||
selectCurrentGroupOrder,
|
||||
selectGroupStates,
|
||||
],
|
||||
[selectAllTasks, selectCurrentGrouping, selectCurrentGroupOrder, selectGroupStates],
|
||||
(tasks, currentGrouping, groupOrder, groupStates) => {
|
||||
const groups: TaskGroup[] = [];
|
||||
|
||||
@@ -154,7 +164,7 @@ export const selectTaskGroups = createSelector(
|
||||
);
|
||||
|
||||
export const selectTasksByCurrentGrouping = createSelector(
|
||||
[taskManagementSelectors.selectAll, selectCurrentGrouping],
|
||||
[selectAllTasks, selectCurrentGrouping],
|
||||
(tasks, currentGrouping) => {
|
||||
const grouped: Record<string, typeof tasks> = {};
|
||||
|
||||
|
||||
@@ -1,121 +1,71 @@
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { SelectionState } from '@/types/task-management.types';
|
||||
import { TaskSelection } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
const initialState: SelectionState = {
|
||||
const initialState: TaskSelection = {
|
||||
selectedTaskIds: [],
|
||||
lastSelectedId: null,
|
||||
lastSelectedTaskId: null,
|
||||
};
|
||||
|
||||
const selectionSlice = createSlice({
|
||||
name: 'selection',
|
||||
name: 'taskManagementSelection',
|
||||
initialState,
|
||||
reducers: {
|
||||
toggleTaskSelection: (state, action: PayloadAction<string>) => {
|
||||
const taskId = action.payload;
|
||||
const index = state.selectedTaskIds.indexOf(taskId);
|
||||
|
||||
if (index === -1) {
|
||||
state.selectedTaskIds.push(taskId);
|
||||
} else {
|
||||
state.selectedTaskIds.splice(index, 1);
|
||||
}
|
||||
|
||||
state.lastSelectedId = taskId;
|
||||
},
|
||||
|
||||
selectTask: (state, action: PayloadAction<string>) => {
|
||||
const taskId = action.payload;
|
||||
if (!state.selectedTaskIds.includes(taskId)) {
|
||||
state.selectedTaskIds.push(taskId);
|
||||
}
|
||||
state.lastSelectedId = taskId;
|
||||
state.lastSelectedTaskId = taskId;
|
||||
},
|
||||
|
||||
deselectTask: (state, action: PayloadAction<string>) => {
|
||||
const taskId = action.payload;
|
||||
state.selectedTaskIds = state.selectedTaskIds.filter(id => id !== taskId);
|
||||
if (state.lastSelectedId === taskId) {
|
||||
state.lastSelectedId = state.selectedTaskIds[state.selectedTaskIds.length - 1] || null;
|
||||
if (state.lastSelectedTaskId === taskId) {
|
||||
state.lastSelectedTaskId = state.selectedTaskIds[state.selectedTaskIds.length - 1] || null;
|
||||
}
|
||||
},
|
||||
|
||||
selectMultipleTasks: (state, action: PayloadAction<string[]>) => {
|
||||
toggleTaskSelection: (state, action: PayloadAction<string>) => {
|
||||
const taskId = action.payload;
|
||||
const index = state.selectedTaskIds.indexOf(taskId);
|
||||
if (index === -1) {
|
||||
state.selectedTaskIds.push(taskId);
|
||||
state.lastSelectedTaskId = taskId;
|
||||
} else {
|
||||
state.selectedTaskIds.splice(index, 1);
|
||||
state.lastSelectedTaskId = state.selectedTaskIds[state.selectedTaskIds.length - 1] || null;
|
||||
}
|
||||
},
|
||||
selectRange: (state, action: PayloadAction<string[]>) => {
|
||||
const taskIds = action.payload;
|
||||
// Add new task IDs that aren't already selected
|
||||
taskIds.forEach(id => {
|
||||
if (!state.selectedTaskIds.includes(id)) {
|
||||
state.selectedTaskIds.push(id);
|
||||
}
|
||||
});
|
||||
state.lastSelectedId = taskIds[taskIds.length - 1] || state.lastSelectedId;
|
||||
const uniqueIds = Array.from(new Set([...state.selectedTaskIds, ...taskIds]));
|
||||
state.selectedTaskIds = uniqueIds;
|
||||
state.lastSelectedTaskId = taskIds[taskIds.length - 1];
|
||||
},
|
||||
|
||||
selectRangeTasks: (
|
||||
state,
|
||||
action: PayloadAction<{ startId: string; endId: string; allTaskIds: string[] }>
|
||||
) => {
|
||||
const { startId, endId, allTaskIds } = action.payload;
|
||||
const startIndex = allTaskIds.indexOf(startId);
|
||||
const endIndex = allTaskIds.indexOf(endId);
|
||||
|
||||
if (startIndex !== -1 && endIndex !== -1) {
|
||||
const [start, end] =
|
||||
startIndex <= endIndex ? [startIndex, endIndex] : [endIndex, startIndex];
|
||||
const rangeIds = allTaskIds.slice(start, end + 1);
|
||||
|
||||
// Add range IDs that aren't already selected
|
||||
rangeIds.forEach(id => {
|
||||
if (!state.selectedTaskIds.includes(id)) {
|
||||
state.selectedTaskIds.push(id);
|
||||
}
|
||||
});
|
||||
|
||||
state.lastSelectedId = endId;
|
||||
}
|
||||
},
|
||||
|
||||
selectAllTasks: (state, action: PayloadAction<string[]>) => {
|
||||
state.selectedTaskIds = action.payload;
|
||||
state.lastSelectedId = action.payload[action.payload.length - 1] || null;
|
||||
},
|
||||
|
||||
clearSelection: state => {
|
||||
state.selectedTaskIds = [];
|
||||
state.lastSelectedId = null;
|
||||
state.lastSelectedTaskId = null;
|
||||
},
|
||||
|
||||
setSelection: (state, action: PayloadAction<string[]>) => {
|
||||
state.selectedTaskIds = action.payload;
|
||||
state.lastSelectedId = action.payload[action.payload.length - 1] || null;
|
||||
resetSelection: state => {
|
||||
state.selectedTaskIds = [];
|
||||
state.lastSelectedTaskId = null;
|
||||
},
|
||||
|
||||
resetSelection: () => initialState,
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
toggleTaskSelection,
|
||||
selectTask,
|
||||
deselectTask,
|
||||
selectMultipleTasks,
|
||||
selectRangeTasks,
|
||||
selectAllTasks,
|
||||
toggleTaskSelection,
|
||||
selectRange,
|
||||
clearSelection,
|
||||
setSelection,
|
||||
resetSelection,
|
||||
} = selectionSlice.actions;
|
||||
|
||||
// Selectors
|
||||
export const selectSelectedTaskIds = (state: RootState) =>
|
||||
state.taskManagementSelection.selectedTaskIds;
|
||||
export const selectLastSelectedId = (state: RootState) =>
|
||||
state.taskManagementSelection.lastSelectedId;
|
||||
export const selectHasSelection = (state: RootState) =>
|
||||
state.taskManagementSelection.selectedTaskIds.length > 0;
|
||||
export const selectSelectionCount = (state: RootState) =>
|
||||
state.taskManagementSelection.selectedTaskIds.length;
|
||||
export const selectIsTaskSelected = (taskId: string) => (state: RootState) =>
|
||||
export const selectSelectedTaskIds = (state: RootState) => state.taskManagementSelection.selectedTaskIds;
|
||||
export const selectLastSelectedTaskId = (state: RootState) => state.taskManagementSelection.lastSelectedTaskId;
|
||||
export const selectIsTaskSelected = (state: RootState, taskId: string) =>
|
||||
state.taskManagementSelection.selectedTaskIds.includes(taskId);
|
||||
|
||||
export default selectionSlice.reducer;
|
||||
|
||||
@@ -3,8 +3,10 @@ import {
|
||||
createEntityAdapter,
|
||||
PayloadAction,
|
||||
createAsyncThunk,
|
||||
EntityState,
|
||||
EntityId,
|
||||
} from '@reduxjs/toolkit';
|
||||
import { Task, TaskManagementState } from '@/types/task-management.types';
|
||||
import { Task, TaskManagementState, TaskGroup, TaskGrouping } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
tasksApiService,
|
||||
@@ -13,6 +15,24 @@ import {
|
||||
} from '@/api/tasks/tasks.api.service';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
// Helper function to safely convert time values
|
||||
const convertTimeValue = (value: any): number => {
|
||||
if (typeof value === 'number') return value;
|
||||
if (typeof value === 'string') {
|
||||
const parsed = parseFloat(value);
|
||||
return isNaN(parsed) ? 0 : parsed;
|
||||
}
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
// Handle time objects like {hours: 2, minutes: 30}
|
||||
if ('hours' in value || 'minutes' in value) {
|
||||
const hours = Number(value.hours || 0);
|
||||
const minutes = Number(value.minutes || 0);
|
||||
return hours + minutes / 60;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
export enum IGroupBy {
|
||||
STATUS = 'status',
|
||||
PRIORITY = 'priority',
|
||||
@@ -21,17 +41,16 @@ export enum IGroupBy {
|
||||
}
|
||||
|
||||
// Entity adapter for normalized state
|
||||
const tasksAdapter = createEntityAdapter<Task>({
|
||||
sortComparer: (a, b) => a.order - b.order,
|
||||
});
|
||||
const tasksAdapter = createEntityAdapter<Task>();
|
||||
|
||||
// Get the initial state from the adapter
|
||||
const initialState: TaskManagementState = {
|
||||
entities: {},
|
||||
ids: [],
|
||||
entities: {},
|
||||
loading: false,
|
||||
error: null,
|
||||
groups: [],
|
||||
grouping: null,
|
||||
grouping: undefined,
|
||||
selectedPriorities: [],
|
||||
search: '',
|
||||
};
|
||||
@@ -47,7 +66,7 @@ export const fetchTasks = createAsyncThunk(
|
||||
const config: ITaskListConfigV2 = {
|
||||
id: projectId,
|
||||
archived: false,
|
||||
group: currentGrouping,
|
||||
group: currentGrouping || '',
|
||||
field: '',
|
||||
order: '',
|
||||
search: '',
|
||||
@@ -167,24 +186,18 @@ export const fetchTasksV3 = createAsyncThunk(
|
||||
|
||||
// Get selected labels from taskReducer
|
||||
const selectedLabels = state.taskReducer.labels
|
||||
? state.taskReducer.labels
|
||||
.filter(l => l.selected)
|
||||
.map(l => l.id)
|
||||
.join(' ')
|
||||
: '';
|
||||
.filter((l: any) => l.selected && l.id)
|
||||
.map((l: any) => l.id)
|
||||
.join(' ');
|
||||
|
||||
// Get selected assignees from taskReducer
|
||||
const selectedAssignees = state.taskReducer.taskAssignees
|
||||
? state.taskReducer.taskAssignees
|
||||
.filter(m => m.selected)
|
||||
.map(m => m.id)
|
||||
.join(' ')
|
||||
: '';
|
||||
.filter((m: any) => m.selected && m.id)
|
||||
.map((m: any) => m.id)
|
||||
.join(' ');
|
||||
|
||||
// Get selected priorities from taskReducer (consistent with other slices)
|
||||
const selectedPriorities = state.taskReducer.priorities
|
||||
? state.taskReducer.priorities.join(' ')
|
||||
: '';
|
||||
// Get selected priorities from taskReducer
|
||||
const selectedPriorities = state.taskReducer.priorities.join(' ');
|
||||
|
||||
// Get search value from taskReducer
|
||||
const searchValue = state.taskReducer.search || '';
|
||||
@@ -192,7 +205,7 @@ export const fetchTasksV3 = createAsyncThunk(
|
||||
const config: ITaskListConfigV2 = {
|
||||
id: projectId,
|
||||
archived: false,
|
||||
group: currentGrouping,
|
||||
group: currentGrouping || '',
|
||||
field: '',
|
||||
order: '',
|
||||
search: searchValue,
|
||||
@@ -206,10 +219,82 @@ export const fetchTasksV3 = createAsyncThunk(
|
||||
|
||||
const response = await tasksApiService.getTaskListV3(config);
|
||||
|
||||
// Minimal processing - tasks are already processed by backend
|
||||
// Log raw response for debugging
|
||||
console.log('Raw API response:', response.body);
|
||||
|
||||
// Ensure tasks are properly normalized
|
||||
const tasks = response.body.allTasks.map((task: any) => {
|
||||
const now = new Date().toISOString();
|
||||
return {
|
||||
id: task.id,
|
||||
title: task.name || '',
|
||||
description: task.description || '',
|
||||
status: task.status || 'todo',
|
||||
priority: task.priority || 'medium',
|
||||
phase: task.phase || 'Development',
|
||||
progress: typeof task.complete_ratio === 'number' ? task.complete_ratio : 0,
|
||||
assignees: task.assignees?.map((a: { team_member_id: string }) => a.team_member_id) || [],
|
||||
assignee_names: task.assignee_names || task.names || [],
|
||||
labels: task.labels?.map((l: { id: string; label_id: string; name: string; color_code: string; end: boolean; names: string[] }) => ({
|
||||
id: l.id || l.label_id,
|
||||
name: l.name,
|
||||
color: l.color_code || '#1890ff',
|
||||
end: l.end,
|
||||
names: l.names,
|
||||
})) || [],
|
||||
due_date: task.end_date || '',
|
||||
timeTracking: {
|
||||
estimated: convertTimeValue(task.total_time),
|
||||
logged: convertTimeValue(task.time_spent),
|
||||
},
|
||||
created_at: task.created_at || now,
|
||||
updated_at: task.updated_at || now,
|
||||
order: typeof task.sort_order === 'number' ? task.sort_order : 0,
|
||||
sub_tasks: task.sub_tasks || [],
|
||||
sub_tasks_count: task.sub_tasks_count || 0,
|
||||
show_sub_tasks: task.show_sub_tasks || false,
|
||||
parent_task_id: task.parent_task_id || '',
|
||||
weight: task.weight || 0,
|
||||
color: task.color || '',
|
||||
statusColor: task.status_color || '',
|
||||
priorityColor: task.priority_color || '',
|
||||
comments_count: task.comments_count || 0,
|
||||
attachments_count: task.attachments_count || 0,
|
||||
has_dependencies: !!task.has_dependencies,
|
||||
schedule_id: task.schedule_id || null,
|
||||
} as Task;
|
||||
});
|
||||
|
||||
// Map groups to match TaskGroup interface
|
||||
const mappedGroups = response.body.groups.map((group: any) => ({
|
||||
id: group.id,
|
||||
title: group.title,
|
||||
taskIds: group.taskIds || [],
|
||||
type: group.groupType as 'status' | 'priority' | 'phase' | 'members',
|
||||
color: group.color,
|
||||
}));
|
||||
|
||||
// Log normalized data for debugging
|
||||
console.log('Normalized data:', {
|
||||
tasks,
|
||||
groups: mappedGroups,
|
||||
grouping: response.body.grouping,
|
||||
totalTasks: response.body.totalTasks,
|
||||
});
|
||||
|
||||
// Verify task IDs match group taskIds
|
||||
const taskIds = new Set(tasks.map(t => t.id));
|
||||
const groupTaskIds = new Set(mappedGroups.flatMap(g => g.taskIds));
|
||||
console.log('Task ID verification:', {
|
||||
taskIds: Array.from(taskIds),
|
||||
groupTaskIds: Array.from(groupTaskIds),
|
||||
allTaskIdsInGroups: Array.from(groupTaskIds).every(id => taskIds.has(id)),
|
||||
allGroupTaskIdsInTasks: Array.from(taskIds).every(id => groupTaskIds.has(id)),
|
||||
});
|
||||
|
||||
return {
|
||||
tasks: response.body.allTasks,
|
||||
groups: response.body.groups,
|
||||
tasks: tasks,
|
||||
groups: mappedGroups,
|
||||
grouping: response.body.grouping,
|
||||
totalTasks: response.body.totalTasks,
|
||||
};
|
||||
@@ -351,288 +436,148 @@ export const updateTaskWithSubtasks = createAsyncThunk(
|
||||
}
|
||||
);
|
||||
|
||||
// Create the slice
|
||||
const taskManagementSlice = createSlice({
|
||||
name: 'taskManagement',
|
||||
initialState: tasksAdapter.getInitialState(initialState),
|
||||
initialState,
|
||||
reducers: {
|
||||
// Basic CRUD operations
|
||||
setTasks: (state, action: PayloadAction<Task[]>) => {
|
||||
tasksAdapter.setAll(state, action.payload);
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
const tasks = action.payload;
|
||||
state.ids = tasks.map(task => task.id);
|
||||
state.entities = tasks.reduce((acc, task) => {
|
||||
acc[task.id] = task;
|
||||
return acc;
|
||||
}, {} as Record<string, Task>);
|
||||
},
|
||||
|
||||
addTask: (state, action: PayloadAction<Task>) => {
|
||||
tasksAdapter.addOne(state, action.payload);
|
||||
const task = action.payload;
|
||||
state.ids.push(task.id);
|
||||
state.entities[task.id] = task;
|
||||
},
|
||||
|
||||
addTaskToGroup: (state, action: PayloadAction<{ task: Task; groupId?: string }>) => {
|
||||
addTaskToGroup: (state, action: PayloadAction<{ task: Task; groupId: string }>) => {
|
||||
const { task, groupId } = action.payload;
|
||||
|
||||
// Add to entity adapter
|
||||
tasksAdapter.addOne(state, task);
|
||||
|
||||
// Add to groups array for V3 API compatibility
|
||||
if (state.groups && state.groups.length > 0) {
|
||||
// Find the target group using the provided UUID
|
||||
const targetGroup = state.groups.find(group => {
|
||||
// If a specific groupId (UUID) is provided, use it directly
|
||||
if (groupId && group.id === groupId) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
if (targetGroup) {
|
||||
// Add task ID to the end of the group's taskIds array (newest last)
|
||||
targetGroup.taskIds.push(task.id);
|
||||
|
||||
// Also add to the tasks array if it exists (for backward compatibility)
|
||||
if ((targetGroup as any).tasks) {
|
||||
(targetGroup as any).tasks.push(task);
|
||||
}
|
||||
}
|
||||
state.ids.push(task.id);
|
||||
state.entities[task.id] = task;
|
||||
const group = state.groups.find(g => g.id === groupId);
|
||||
if (group) {
|
||||
group.taskIds.push(task.id);
|
||||
}
|
||||
},
|
||||
|
||||
updateTask: (state, action: PayloadAction<{ id: string; changes: Partial<Task> }>) => {
|
||||
tasksAdapter.updateOne(state, {
|
||||
id: action.payload.id,
|
||||
changes: {
|
||||
...action.payload.changes,
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
updateTask: (state, action: PayloadAction<Task>) => {
|
||||
const task = action.payload;
|
||||
state.entities[task.id] = task;
|
||||
},
|
||||
deleteTask: (state, action: PayloadAction<string>) => {
|
||||
const taskId = action.payload;
|
||||
delete state.entities[taskId];
|
||||
state.ids = state.ids.filter(id => id !== taskId);
|
||||
state.groups = state.groups.map(group => ({
|
||||
...group,
|
||||
taskIds: group.taskIds.filter(id => id !== taskId),
|
||||
}));
|
||||
},
|
||||
bulkUpdateTasks: (state, action: PayloadAction<Task[]>) => {
|
||||
action.payload.forEach(task => {
|
||||
state.entities[task.id] = task;
|
||||
});
|
||||
},
|
||||
|
||||
deleteTask: (state, action: PayloadAction<string>) => {
|
||||
tasksAdapter.removeOne(state, action.payload);
|
||||
},
|
||||
|
||||
// Bulk operations
|
||||
bulkUpdateTasks: (state, action: PayloadAction<{ ids: string[]; changes: Partial<Task> }>) => {
|
||||
const { ids, changes } = action.payload;
|
||||
const updates = ids.map(id => ({
|
||||
id,
|
||||
changes: {
|
||||
...changes,
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
}));
|
||||
tasksAdapter.updateMany(state, updates);
|
||||
},
|
||||
|
||||
bulkDeleteTasks: (state, action: PayloadAction<string[]>) => {
|
||||
tasksAdapter.removeMany(state, action.payload);
|
||||
},
|
||||
|
||||
// Optimized drag and drop operations
|
||||
reorderTasks: (state, action: PayloadAction<{ taskIds: string[]; newOrder: number[] }>) => {
|
||||
const { taskIds, newOrder } = action.payload;
|
||||
|
||||
// Batch update for better performance
|
||||
const updates = taskIds.map((id, index) => ({
|
||||
id,
|
||||
changes: {
|
||||
order: newOrder[index],
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
const taskIds = action.payload;
|
||||
taskIds.forEach(taskId => {
|
||||
delete state.entities[taskId];
|
||||
});
|
||||
state.ids = state.ids.filter(id => !taskIds.includes(id));
|
||||
state.groups = state.groups.map(group => ({
|
||||
...group,
|
||||
taskIds: group.taskIds.filter(id => !taskIds.includes(id)),
|
||||
}));
|
||||
|
||||
tasksAdapter.updateMany(state, updates);
|
||||
},
|
||||
|
||||
moveTaskToGroup: (
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
taskId: string;
|
||||
groupType: 'status' | 'priority' | 'phase';
|
||||
groupValue: string;
|
||||
}>
|
||||
) => {
|
||||
const { taskId, groupType, groupValue } = action.payload;
|
||||
const changes: Partial<Task> = {
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Update the appropriate field based on group type
|
||||
if (groupType === 'status') {
|
||||
changes.status = groupValue as Task['status'];
|
||||
} else if (groupType === 'priority') {
|
||||
changes.priority = groupValue as Task['priority'];
|
||||
} else if (groupType === 'phase') {
|
||||
changes.phase = groupValue;
|
||||
reorderTasks: (state, action: PayloadAction<{ taskIds: string[]; groupId: string }>) => {
|
||||
const { taskIds, groupId } = action.payload;
|
||||
const group = state.groups.find(g => g.id === groupId);
|
||||
if (group) {
|
||||
group.taskIds = taskIds;
|
||||
}
|
||||
|
||||
tasksAdapter.updateOne(state, { id: taskId, changes });
|
||||
},
|
||||
|
||||
// New action to move task between groups with proper group management
|
||||
moveTaskToGroup: (state, action: PayloadAction<{ taskId: string; groupId: string }>) => {
|
||||
const { taskId, groupId } = action.payload;
|
||||
state.groups = state.groups.map(group => ({
|
||||
...group,
|
||||
taskIds:
|
||||
group.id === groupId
|
||||
? [...group.taskIds, taskId]
|
||||
: group.taskIds.filter(id => id !== taskId),
|
||||
}));
|
||||
},
|
||||
moveTaskBetweenGroups: (
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
taskId: string;
|
||||
fromGroupId: string;
|
||||
toGroupId: string;
|
||||
taskUpdate: Partial<Task>;
|
||||
sourceGroupId: string;
|
||||
targetGroupId: string;
|
||||
}>
|
||||
) => {
|
||||
const { taskId, fromGroupId, toGroupId, taskUpdate } = action.payload;
|
||||
|
||||
// Update the task entity with new values
|
||||
tasksAdapter.updateOne(state, {
|
||||
id: taskId,
|
||||
changes: {
|
||||
...taskUpdate,
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
});
|
||||
|
||||
// Update groups if they exist
|
||||
if (state.groups && state.groups.length > 0) {
|
||||
// Remove task from old group
|
||||
const fromGroup = state.groups.find(group => group.id === fromGroupId);
|
||||
if (fromGroup) {
|
||||
fromGroup.taskIds = fromGroup.taskIds.filter(id => id !== taskId);
|
||||
}
|
||||
|
||||
// Add task to new group
|
||||
const toGroup = state.groups.find(group => group.id === toGroupId);
|
||||
if (toGroup) {
|
||||
// Add to the end of the group (newest last)
|
||||
toGroup.taskIds.push(taskId);
|
||||
}
|
||||
}
|
||||
const { taskId, sourceGroupId, targetGroupId } = action.payload;
|
||||
state.groups = state.groups.map(group => ({
|
||||
...group,
|
||||
taskIds:
|
||||
group.id === targetGroupId
|
||||
? [...group.taskIds, taskId]
|
||||
: group.id === sourceGroupId
|
||||
? group.taskIds.filter(id => id !== taskId)
|
||||
: group.taskIds,
|
||||
}));
|
||||
},
|
||||
|
||||
// Optimistic update for drag operations - reduces perceived lag
|
||||
optimisticTaskMove: (
|
||||
state,
|
||||
action: PayloadAction<{ taskId: string; newGroupId: string; newIndex: number }>
|
||||
) => {
|
||||
const { taskId, newGroupId, newIndex } = action.payload;
|
||||
const task = state.entities[taskId];
|
||||
|
||||
if (task) {
|
||||
// Parse group ID to determine new values
|
||||
const [groupType, ...groupValueParts] = newGroupId.split('-');
|
||||
const groupValue = groupValueParts.join('-');
|
||||
|
||||
const changes: Partial<Task> = {
|
||||
order: newIndex,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Update group-specific field
|
||||
if (groupType === 'status') {
|
||||
changes.status = groupValue as Task['status'];
|
||||
} else if (groupType === 'priority') {
|
||||
changes.priority = groupValue as Task['priority'];
|
||||
} else if (groupType === 'phase') {
|
||||
changes.phase = groupValue;
|
||||
}
|
||||
|
||||
// Update the task entity
|
||||
tasksAdapter.updateOne(state, { id: taskId, changes });
|
||||
|
||||
// Update groups if they exist
|
||||
if (state.groups && state.groups.length > 0) {
|
||||
// Find the target group
|
||||
const targetGroup = state.groups.find(group => group.id === newGroupId);
|
||||
if (targetGroup) {
|
||||
// Remove task from all groups first
|
||||
state.groups.forEach(group => {
|
||||
group.taskIds = group.taskIds.filter(id => id !== taskId);
|
||||
});
|
||||
|
||||
// Add task to target group at the specified index
|
||||
if (newIndex >= targetGroup.taskIds.length) {
|
||||
targetGroup.taskIds.push(taskId);
|
||||
} else {
|
||||
targetGroup.taskIds.splice(newIndex, 0, taskId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Proper reorder action that handles both task entities and group arrays
|
||||
reorderTasksInGroup: (
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
taskId: string;
|
||||
fromGroupId: string;
|
||||
toGroupId: string;
|
||||
fromIndex: number;
|
||||
toIndex: number;
|
||||
groupType: 'status' | 'priority' | 'phase';
|
||||
groupValue: string;
|
||||
sourceGroupId: string;
|
||||
targetGroupId: string;
|
||||
}>
|
||||
) => {
|
||||
const { taskId, fromGroupId, toGroupId, fromIndex, toIndex, groupType, groupValue } =
|
||||
action.payload;
|
||||
|
||||
// Update the task entity
|
||||
const changes: Partial<Task> = {
|
||||
order: toIndex,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Update group-specific field
|
||||
if (groupType === 'status') {
|
||||
changes.status = groupValue as Task['status'];
|
||||
} else if (groupType === 'priority') {
|
||||
changes.priority = groupValue as Task['priority'];
|
||||
} else if (groupType === 'phase') {
|
||||
changes.phase = groupValue;
|
||||
}
|
||||
|
||||
tasksAdapter.updateOne(state, { id: taskId, changes });
|
||||
|
||||
// Update groups if they exist
|
||||
if (state.groups && state.groups.length > 0) {
|
||||
// Remove task from source group
|
||||
const fromGroup = state.groups.find(group => group.id === fromGroupId);
|
||||
if (fromGroup) {
|
||||
fromGroup.taskIds = fromGroup.taskIds.filter(id => id !== taskId);
|
||||
}
|
||||
|
||||
// Add task to target group
|
||||
const toGroup = state.groups.find(group => group.id === toGroupId);
|
||||
if (toGroup) {
|
||||
if (toIndex >= toGroup.taskIds.length) {
|
||||
toGroup.taskIds.push(taskId);
|
||||
} else {
|
||||
toGroup.taskIds.splice(toIndex, 0, taskId);
|
||||
}
|
||||
}
|
||||
const { taskId, sourceGroupId, targetGroupId } = action.payload;
|
||||
state.groups = state.groups.map(group => ({
|
||||
...group,
|
||||
taskIds:
|
||||
group.id === targetGroupId
|
||||
? [...group.taskIds, taskId]
|
||||
: group.id === sourceGroupId
|
||||
? group.taskIds.filter(id => id !== taskId)
|
||||
: group.taskIds,
|
||||
}));
|
||||
},
|
||||
reorderTasksInGroup: (
|
||||
state,
|
||||
action: PayloadAction<{ taskIds: string[]; groupId: string }>
|
||||
) => {
|
||||
const { taskIds, groupId } = action.payload;
|
||||
const group = state.groups.find(g => g.id === groupId);
|
||||
if (group) {
|
||||
group.taskIds = taskIds;
|
||||
}
|
||||
},
|
||||
|
||||
// Loading states
|
||||
setLoading: (state, action: PayloadAction<boolean>) => {
|
||||
state.loading = action.payload;
|
||||
},
|
||||
|
||||
setError: (state, action: PayloadAction<string | null>) => {
|
||||
state.error = action.payload;
|
||||
state.loading = false;
|
||||
},
|
||||
|
||||
// Filter actions
|
||||
setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
|
||||
state.selectedPriorities = action.payload;
|
||||
},
|
||||
|
||||
// Search action
|
||||
setSearch: (state, action: PayloadAction<string>) => {
|
||||
state.search = action.payload;
|
||||
},
|
||||
|
||||
// Reset action
|
||||
resetTaskManagement: state => {
|
||||
return tasksAdapter.getInitialState(initialState);
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
state.groups = [];
|
||||
state.grouping = undefined;
|
||||
state.selectedPriorities = [];
|
||||
state.search = '';
|
||||
state.ids = [];
|
||||
state.entities = {};
|
||||
},
|
||||
toggleTaskExpansion: (state, action: PayloadAction<string>) => {
|
||||
const task = state.entities[action.payload];
|
||||
@@ -640,37 +585,25 @@ const taskManagementSlice = createSlice({
|
||||
task.show_sub_tasks = !task.show_sub_tasks;
|
||||
}
|
||||
},
|
||||
addSubtaskToParent: (state, action: PayloadAction<{ subtask: Task; parentTaskId: string }>) => {
|
||||
const { subtask, parentTaskId } = action.payload;
|
||||
const parentTask = state.entities[parentTaskId];
|
||||
if (parentTask) {
|
||||
if (!parentTask.sub_tasks) {
|
||||
parentTask.sub_tasks = [];
|
||||
addSubtaskToParent: (
|
||||
state,
|
||||
action: PayloadAction<{ parentId: string; subtask: Task }>
|
||||
) => {
|
||||
const { parentId, subtask } = action.payload;
|
||||
const parent = state.entities[parentId];
|
||||
if (parent) {
|
||||
state.ids.push(subtask.id);
|
||||
state.entities[subtask.id] = subtask;
|
||||
if (!parent.sub_tasks) {
|
||||
parent.sub_tasks = [];
|
||||
}
|
||||
parentTask.sub_tasks.push(subtask);
|
||||
parentTask.sub_tasks_count = (parentTask.sub_tasks_count || 0) + 1;
|
||||
// Ensure the parent task is expanded to show the new subtask
|
||||
parentTask.show_sub_tasks = true;
|
||||
// Add the subtask to the main entities as well
|
||||
tasksAdapter.addOne(state, subtask);
|
||||
parent.sub_tasks.push(subtask);
|
||||
parent.sub_tasks_count = (parent.sub_tasks_count || 0) + 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
extraReducers: builder => {
|
||||
builder
|
||||
.addCase(fetchTasks.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchTasks.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
tasksAdapter.setAll(state, action.payload);
|
||||
})
|
||||
.addCase(fetchTasks.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = (action.payload as string) || 'Failed to fetch tasks';
|
||||
})
|
||||
.addCase(fetchTasksV3.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
@@ -678,47 +611,68 @@ const taskManagementSlice = createSlice({
|
||||
.addCase(fetchTasksV3.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
// Tasks are already processed by backend, minimal setup needed
|
||||
tasksAdapter.setAll(state, action.payload.tasks);
|
||||
state.groups = action.payload.groups;
|
||||
state.grouping = action.payload.grouping;
|
||||
|
||||
// Ensure we have tasks before updating state
|
||||
if (action.payload.tasks && action.payload.tasks.length > 0) {
|
||||
// Update tasks
|
||||
const tasks = action.payload.tasks;
|
||||
state.ids = tasks.map(task => task.id);
|
||||
state.entities = tasks.reduce((acc, task) => {
|
||||
acc[task.id] = task;
|
||||
return acc;
|
||||
}, {} as Record<string, Task>);
|
||||
|
||||
// Update groups
|
||||
state.groups = action.payload.groups;
|
||||
state.grouping = action.payload.grouping;
|
||||
|
||||
// Verify task IDs match group taskIds
|
||||
const taskIds = new Set(Object.keys(state.entities));
|
||||
const groupTaskIds = new Set(state.groups.flatMap(g => g.taskIds));
|
||||
|
||||
// Ensure all tasks have IDs and all group taskIds exist
|
||||
const validTaskIds = new Set(Object.keys(state.entities));
|
||||
state.groups = state.groups.map((group: TaskGroup) => ({
|
||||
...group,
|
||||
taskIds: group.taskIds.filter((id: string) => validTaskIds.has(id)),
|
||||
}));
|
||||
} else {
|
||||
// Set empty state but don't show error
|
||||
state.ids = [];
|
||||
state.entities = {};
|
||||
state.groups = [];
|
||||
}
|
||||
})
|
||||
.addCase(fetchTasksV3.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = (action.payload as string) || 'Failed to fetch tasks';
|
||||
// Provide a more descriptive error message
|
||||
state.error = action.error.message || action.payload || 'An error occurred while fetching tasks. Please try again.';
|
||||
// Clear task data on error to prevent stale state
|
||||
state.ids = [];
|
||||
state.entities = {};
|
||||
state.groups = [];
|
||||
})
|
||||
.addCase(fetchSubTasks.pending, (state, action) => {
|
||||
// Don't set global loading state for subtasks
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchSubTasks.fulfilled, (state, action) => {
|
||||
const { parentTaskId, subtasks } = action.payload;
|
||||
const parentTask = state.entities[parentTaskId];
|
||||
if (parentTask) {
|
||||
parentTask.sub_tasks = subtasks;
|
||||
parentTask.sub_tasks_count = subtasks.length;
|
||||
parentTask.show_sub_tasks = true;
|
||||
// Add subtasks to the main entities as well
|
||||
tasksAdapter.addMany(state, subtasks);
|
||||
}
|
||||
})
|
||||
.addCase(refreshTaskProgress.pending, state => {
|
||||
// Don't set loading to true for refresh to avoid UI blocking
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(refreshTaskProgress.fulfilled, state => {
|
||||
state.error = null;
|
||||
// Progress refresh completed successfully
|
||||
})
|
||||
.addCase(refreshTaskProgress.rejected, (state, action) => {
|
||||
state.error = (action.payload as string) || 'Failed to refresh task progress';
|
||||
})
|
||||
.addCase(updateTaskWithSubtasks.fulfilled, (state, action) => {
|
||||
const { taskId, subtasks } = action.payload;
|
||||
const task = state.entities[taskId];
|
||||
if (task) {
|
||||
task.sub_tasks = subtasks;
|
||||
task.show_sub_tasks = true;
|
||||
}
|
||||
.addCase(fetchSubTasks.rejected, (state, action) => {
|
||||
// Set error but don't clear task data
|
||||
state.error = action.error.message || action.payload || 'Failed to fetch subtasks. Please try again.';
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Export the slice reducer and actions
|
||||
export const {
|
||||
setTasks,
|
||||
addTask,
|
||||
@@ -741,25 +695,30 @@ export const {
|
||||
addSubtaskToParent,
|
||||
} = taskManagementSlice.actions;
|
||||
|
||||
export default taskManagementSlice.reducer;
|
||||
// Export the selectors
|
||||
export const selectAllTasks = (state: RootState) => state.taskManagement.entities;
|
||||
export const selectAllTasksArray = (state: RootState) => Object.values(state.taskManagement.entities);
|
||||
export const selectTaskById = (state: RootState, taskId: string) => state.taskManagement.entities[taskId];
|
||||
export const selectTaskIds = (state: RootState) => state.taskManagement.ids;
|
||||
export const selectGroups = (state: RootState) => state.taskManagement.groups;
|
||||
export const selectGrouping = (state: RootState) => state.taskManagement.grouping;
|
||||
export const selectLoading = (state: RootState) => state.taskManagement.loading;
|
||||
export const selectError = (state: RootState) => state.taskManagement.error;
|
||||
export const selectSelectedPriorities = (state: RootState) => state.taskManagement.selectedPriorities;
|
||||
export const selectSearch = (state: RootState) => state.taskManagement.search;
|
||||
|
||||
// Selectors
|
||||
export const taskManagementSelectors = tasksAdapter.getSelectors<RootState>(
|
||||
state => state.taskManagement
|
||||
);
|
||||
|
||||
// Enhanced selectors for better performance
|
||||
// Memoized selectors
|
||||
export const selectTasksByStatus = (state: RootState, status: string) =>
|
||||
taskManagementSelectors.selectAll(state).filter(task => task.status === status);
|
||||
Object.values(state.taskManagement.entities).filter(task => task.status === status);
|
||||
|
||||
export const selectTasksByPriority = (state: RootState, priority: string) =>
|
||||
taskManagementSelectors.selectAll(state).filter(task => task.priority === priority);
|
||||
Object.values(state.taskManagement.entities).filter(task => task.priority === priority);
|
||||
|
||||
export const selectTasksByPhase = (state: RootState, phase: string) =>
|
||||
taskManagementSelectors.selectAll(state).filter(task => task.phase === phase);
|
||||
Object.values(state.taskManagement.entities).filter(task => task.phase === phase);
|
||||
|
||||
export const selectTasksLoading = (state: RootState) => state.taskManagement.loading;
|
||||
export const selectTasksError = (state: RootState) => state.taskManagement.error;
|
||||
// Export the reducer as default
|
||||
export default taskManagementSlice.reducer;
|
||||
|
||||
// V3 API selectors - no processing needed, data is pre-processed by backend
|
||||
export const selectTaskGroupsV3 = (state: RootState) => state.taskManagement.groups;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { InlineSuspenseFallback } from '@/components/suspense-fallback/suspense-
|
||||
// Import core components synchronously to avoid suspense in main tabs
|
||||
import ProjectViewEnhancedTasks from '@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks';
|
||||
import ProjectViewEnhancedBoard from '@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board';
|
||||
import TaskListV2 from '@/components/task-list-v2/TaskListV2';
|
||||
|
||||
// Lazy load less critical components
|
||||
const ProjectViewInsights = React.lazy(
|
||||
@@ -35,7 +36,7 @@ export const tabItems: TabItems[] = [
|
||||
key: 'tasks-list',
|
||||
label: 'Task List',
|
||||
isPinned: true,
|
||||
element: React.createElement(ProjectViewEnhancedTasks),
|
||||
element: React.createElement(TaskListV2),
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
|
||||
@@ -119,7 +119,7 @@ const ProjectView = React.memo(() => {
|
||||
return () => {
|
||||
resetAllProjectData();
|
||||
};
|
||||
}, []); // Empty dependency array - only runs on mount/unmount
|
||||
}, [resetAllProjectData]);
|
||||
|
||||
// Effect for handling route changes (when navigating away from project view)
|
||||
useEffect(() => {
|
||||
@@ -358,10 +358,10 @@ const ProjectView = React.memo(() => {
|
||||
minHeight: '36px',
|
||||
}}
|
||||
tabBarGutter={0}
|
||||
destroyInactiveTabPane={true} // Destroy inactive tabs to save memory
|
||||
destroyInactiveTabPane={true}
|
||||
animated={{
|
||||
inkBar: true,
|
||||
tabPane: false, // Disable content animation for better performance
|
||||
tabPane: false,
|
||||
}}
|
||||
size="small"
|
||||
type="card"
|
||||
|
||||
28
worklenz-frontend/src/types/task-list-field.types.ts
Normal file
28
worklenz-frontend/src/types/task-list-field.types.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
export interface TaskListField {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'text' | 'number' | 'date' | 'select' | 'multiselect' | 'checkbox';
|
||||
isVisible: boolean;
|
||||
order: number;
|
||||
width?: number;
|
||||
options?: {
|
||||
id: string;
|
||||
label: string;
|
||||
value: string;
|
||||
color?: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface TaskListFieldGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
fields: TaskListField[];
|
||||
order: number;
|
||||
}
|
||||
|
||||
export interface TaskListFieldState {
|
||||
fields: TaskListField[];
|
||||
groups: TaskListFieldGroup[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
@@ -1,43 +1,44 @@
|
||||
import { InlineMember } from './teamMembers/inlineMember.types';
|
||||
import { EntityState } from '@reduxjs/toolkit';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
task_key: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'todo' | 'doing' | 'done';
|
||||
priority: 'critical' | 'high' | 'medium' | 'low';
|
||||
phase: string; // Custom phases like 'planning', 'development', 'testing', 'deployment'
|
||||
progress: number; // 0-100
|
||||
assignees: string[];
|
||||
assignee_names?: InlineMember[];
|
||||
labels: Label[];
|
||||
startDate?: string; // Start date for the task
|
||||
dueDate?: string; // Due date for the task
|
||||
completedAt?: string; // When the task was completed
|
||||
reporter?: string; // Who reported/created the task
|
||||
timeTracking: {
|
||||
estimated?: number;
|
||||
logged: number;
|
||||
};
|
||||
customFields: Record<string, any>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
order: number;
|
||||
// Subtask-related properties
|
||||
status: string;
|
||||
priority: string;
|
||||
phase?: string;
|
||||
assignee?: string;
|
||||
due_date?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
sub_tasks?: Task[];
|
||||
sub_tasks_count?: number;
|
||||
show_sub_tasks?: boolean;
|
||||
sub_tasks?: Task[];
|
||||
parent_task_id?: string;
|
||||
progress?: number;
|
||||
weight?: number;
|
||||
color?: string;
|
||||
statusColor?: string;
|
||||
priorityColor?: string;
|
||||
labels?: { id: string; name: string; color: string }[];
|
||||
comments_count?: number;
|
||||
attachments_count?: number;
|
||||
has_dependencies?: boolean;
|
||||
schedule_id?: string | null;
|
||||
order?: number;
|
||||
// Add any other task properties as needed
|
||||
}
|
||||
|
||||
export interface TaskGroup {
|
||||
id: string;
|
||||
title: string;
|
||||
groupType: 'status' | 'priority' | 'phase';
|
||||
groupValue: string; // The actual value for the group (e.g., 'todo', 'high', 'development')
|
||||
collapsed: boolean;
|
||||
taskIds: string[];
|
||||
color?: string; // For visual distinction
|
||||
type?: 'status' | 'priority' | 'phase' | 'members';
|
||||
color?: string;
|
||||
collapsed?: boolean;
|
||||
groupValue?: string;
|
||||
// Add any other group properties as needed
|
||||
}
|
||||
|
||||
export interface GroupingConfig {
|
||||
@@ -73,14 +74,14 @@ export interface Label {
|
||||
|
||||
// Redux State Interfaces
|
||||
export interface TaskManagementState {
|
||||
entities: Record<string, Task>;
|
||||
ids: string[];
|
||||
entities: Record<string, Task>;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
groups: TaskGroup[]; // Pre-processed groups from V3 API
|
||||
grouping: string | null; // Current grouping from V3 API
|
||||
selectedPriorities: string[]; // Selected priority filters
|
||||
search: string; // Search query for filtering tasks
|
||||
groups: TaskGroup[];
|
||||
grouping: string | undefined;
|
||||
selectedPriorities: string[];
|
||||
search: string;
|
||||
}
|
||||
|
||||
export interface TaskGroupsState {
|
||||
@@ -89,15 +90,20 @@ export interface TaskGroupsState {
|
||||
}
|
||||
|
||||
export interface GroupingState {
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
customPhases: string[];
|
||||
groupOrder: Record<string, string[]>;
|
||||
groupStates: Record<string, { collapsed: boolean }>; // Persist group states
|
||||
currentGrouping: TaskGrouping | null;
|
||||
collapsedGroups: Set<string>;
|
||||
}
|
||||
|
||||
export interface SelectionState {
|
||||
export interface TaskGrouping {
|
||||
id: string;
|
||||
name: string;
|
||||
field: string;
|
||||
collapsed?: boolean;
|
||||
}
|
||||
|
||||
export interface TaskSelection {
|
||||
selectedTaskIds: string[];
|
||||
lastSelectedId: string | null;
|
||||
lastSelectedTaskId: string | null;
|
||||
}
|
||||
|
||||
export interface ColumnsState {
|
||||
|
||||
Reference in New Issue
Block a user