diff --git a/worklenz-frontend/public/locales/alb/task-list-table.json b/worklenz-frontend/public/locales/alb/task-list-table.json index a755c6bc..f385c0c6 100644 --- a/worklenz-frontend/public/locales/alb/task-list-table.json +++ b/worklenz-frontend/public/locales/alb/task-list-table.json @@ -36,7 +36,7 @@ "selectText": "Zgjidh", "labelsSelectorInputTip": "Shtyp Enter për të krijuar!", - "addTaskText": "+ Shto Detyrë", + "addTaskText": "Shto Detyrë", "addSubTaskText": "+ Shto Nën-Detyrë", "addTaskInputPlaceholder": "Shkruaj detyrën dhe shtyp Enter", diff --git a/worklenz-frontend/public/locales/de/task-list-table.json b/worklenz-frontend/public/locales/de/task-list-table.json index ff4e5dcc..19b6e8c3 100644 --- a/worklenz-frontend/public/locales/de/task-list-table.json +++ b/worklenz-frontend/public/locales/de/task-list-table.json @@ -36,7 +36,7 @@ "selectText": "Auswählen", "labelsSelectorInputTip": "Enter drücken zum Erstellen!", - "addTaskText": "+ Aufgabe hinzufügen", + "addTaskText": "Aufgabe hinzufügen", "addSubTaskText": "+ Unteraufgabe hinzufügen", "addTaskInputPlaceholder": "Aufgabe eingeben und Enter drücken", diff --git a/worklenz-frontend/public/locales/en/task-drawer/task-drawer-info-tab.json b/worklenz-frontend/public/locales/en/task-drawer/task-drawer-info-tab.json index 8592bd8b..f88ecde9 100644 --- a/worklenz-frontend/public/locales/en/task-drawer/task-drawer-info-tab.json +++ b/worklenz-frontend/public/locales/en/task-drawer/task-drawer-info-tab.json @@ -24,7 +24,7 @@ }, "subTasks": { "title": "Sub Tasks", - "add-sub-task": "+ Add Sub Task", + "add-sub-task": "Add Sub Task", "refresh-sub-tasks": "Refresh Sub Tasks" } } diff --git a/worklenz-frontend/public/locales/en/task-drawer/task-drawer.json b/worklenz-frontend/public/locales/en/task-drawer/task-drawer.json index 06575ee1..ab271810 100644 --- a/worklenz-frontend/public/locales/en/task-drawer/task-drawer.json +++ b/worklenz-frontend/public/locales/en/task-drawer/task-drawer.json @@ -43,7 +43,7 @@ }, "subTasks": { "title": "Sub Tasks", - "addSubTask": "+ Add Sub Task", + "addSubTask": "Add Sub Task", "addSubTaskInputPlaceholder": "Type your task and hit enter", "refreshSubTasks": "Refresh Sub Tasks", "edit": "Edit", diff --git a/worklenz-frontend/public/locales/en/task-list-table.json b/worklenz-frontend/public/locales/en/task-list-table.json index ed503c9f..7881208f 100644 --- a/worklenz-frontend/public/locales/en/task-list-table.json +++ b/worklenz-frontend/public/locales/en/task-list-table.json @@ -36,8 +36,8 @@ "selectText": "Select", "labelsSelectorInputTip": "Hit enter to create!", - "addTaskText": "+ Add Task", - "addSubTaskText": "+ Add Sub Task", + "addTaskText": "Add Task", + "addSubTaskText": "Add Sub Task", "addTaskInputPlaceholder": "Type your task and hit enter", "openButton": "Open", diff --git a/worklenz-frontend/public/locales/es/task-list-table.json b/worklenz-frontend/public/locales/es/task-list-table.json index 1d98c824..21f7e6b2 100644 --- a/worklenz-frontend/public/locales/es/task-list-table.json +++ b/worklenz-frontend/public/locales/es/task-list-table.json @@ -36,8 +36,8 @@ "selectText": "Seleccionar", "labelsSelectorInputTip": "¡Presiona enter para crear!", - "addTaskText": "+ Agregar tarea", - "addSubTaskText": "+ Agregar subtarea", + "addTaskText": "Agregar tarea", + "addSubTaskText": "Agregar subtarea", "addTaskInputPlaceholder": "Escribe tu tarea y presiona enter", "openButton": "Abrir", diff --git a/worklenz-frontend/public/locales/pt/task-list-table.json b/worklenz-frontend/public/locales/pt/task-list-table.json index 3d851b4d..72c7a5db 100644 --- a/worklenz-frontend/public/locales/pt/task-list-table.json +++ b/worklenz-frontend/public/locales/pt/task-list-table.json @@ -36,7 +36,7 @@ "selectText": "Selecionar", "labelsSelectorInputTip": "Pressione enter para criar!", - "addTaskText": "+ Adicionar Tarefa", + "addTaskText": "Adicionar Tarefa", "addSubTaskText": "+ Adicionar Subtarefa", "addTaskInputPlaceholder": "Digite sua tarefa e pressione enter", diff --git a/worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx b/worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx new file mode 100644 index 00000000..66df7e5e --- /dev/null +++ b/worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx @@ -0,0 +1,139 @@ +import React from 'react'; + +interface SubtaskLoadingSkeletonProps { + visibleColumns: Array<{ + id: string; + width: string; + isSticky?: boolean; + }>; +} + +const SubtaskLoadingSkeleton: React.FC = ({ visibleColumns }) => { + const renderColumn = (columnId: string, width: string) => { + const baseStyle = { width }; + + switch (columnId) { + case 'dragHandle': + return
; + case 'checkbox': + return
; + case 'taskKey': + return ( +
+
+
+ ); + case 'title': + return ( +
+ {/* Subtask indentation */} +
+
+
+
+ ); + case 'status': + return ( +
+
+
+ ); + case 'assignees': + return ( +
+
+
+
+ ); + case 'priority': + return ( +
+
+
+ ); + case 'dueDate': + return ( +
+
+
+ ); + case 'progress': + return ( +
+
+
+ ); + case 'labels': + return ( +
+
+
+
+ ); + case 'phase': + return ( +
+
+
+ ); + case 'timeTracking': + return ( +
+
+
+ ); + case 'estimation': + return ( +
+
+
+ ); + case 'startDate': + return ( +
+
+
+ ); + case 'completedDate': + return ( +
+
+
+ ); + case 'createdDate': + return ( +
+
+
+ ); + case 'lastUpdated': + return ( +
+
+
+ ); + case 'reporter': + return ( +
+
+
+ ); + default: + return
; + } + }; + + return ( +
+
+ {visibleColumns.map((column) => ( +
+ {renderColumn(column.id, column.width)} +
+ ))} +
+
+ ); +}; + +export default SubtaskLoadingSkeleton; \ No newline at end of file diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx index 5c0950d9..c9550039 100644 --- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx +++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx @@ -47,7 +47,7 @@ import { selectRange, clearSelection, } from '@/features/task-management/selection.slice'; -import TaskRow from './TaskRow'; +import TaskRowWithSubtasks from './TaskRowWithSubtasks'; import TaskGroupHeader from './TaskGroupHeader'; import { Task, TaskGroup } from '@/types/task-management.types'; import { RootState } from '@/app/store'; @@ -64,7 +64,7 @@ const BASE_COLUMNS = [ { id: 'dragHandle', label: '', width: '32px', isSticky: true, key: 'dragHandle' }, { id: 'checkbox', label: '', width: '40px', isSticky: true, key: 'checkbox' }, { id: 'taskKey', label: 'Key', width: '100px', key: COLUMN_KEYS.KEY }, - { id: 'title', label: 'Title', width: '300px', isSticky: true, key: COLUMN_KEYS.NAME }, + { id: 'title', label: 'Title', width: '470px', 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 }, @@ -91,17 +91,13 @@ type ColumnStyle = { flexShrink?: number; }; -interface TaskListV2Props { - projectId: string; -} - -const TaskListV2: React.FC = ({ projectId }) => { +const TaskListV2: React.FC = () => { const dispatch = useAppDispatch(); const { projectId: urlProjectId } = useParams(); - + // Drag and drop state const [activeId, setActiveId] = useState(null); - + // Configure sensors for drag and drop const sensors = useSensors( useSensor(PointerSensor, { @@ -119,7 +115,7 @@ const TaskListV2: React.FC = ({ projectId }) => { }, }) ); - + // Using Redux state for collapsedGroups instead of local state const collapsedGroups = useAppSelector(selectCollapsedGroups); @@ -159,176 +155,190 @@ const TaskListV2: React.FC = ({ projectId }) => { }, [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 = allTasks.map(t => t.id); // Use allTasks here - 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, allTasks]); + const handleTaskSelect = useCallback( + (taskId: string, event: React.MouseEvent) => { + if (event.ctrlKey || event.metaKey) { + dispatch(toggleTaskSelection(taskId)); + } else if (event.shiftKey && lastSelectedTaskId) { + const taskIds = allTasks.map(t => t.id); // Use allTasks here + 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, allTasks] + ); - const handleGroupCollapse = useCallback((groupId: string) => { - dispatch(toggleGroupCollapsed(groupId)); // Dispatch Redux action to toggle collapsed state - }, [dispatch]); + const handleGroupCollapse = useCallback( + (groupId: string) => { + dispatch(toggleGroupCollapsed(groupId)); // Dispatch Redux action to toggle collapsed state + }, + [dispatch] + ); // Drag and drop handlers const handleDragStart = useCallback((event: DragStartEvent) => { setActiveId(event.active.id as string); }, []); - const handleDragOver = useCallback((event: DragOverEvent) => { - const { active, over } = event; - - if (!over) return; + const handleDragOver = useCallback( + (event: DragOverEvent) => { + const { active, over } = event; - const activeId = active.id; - const overId = over.id; + if (!over) return; - // Find the active task and the item being dragged over - const activeTask = allTasks.find(task => task.id === activeId); - if (!activeTask) return; + const activeId = active.id; + const overId = over.id; - // Check if we're dragging over a task or a group - const overTask = allTasks.find(task => task.id === overId); - const overGroup = groups.find(group => group.id === overId); + // Find the active task and the item being dragged over + const activeTask = allTasks.find(task => task.id === activeId); + if (!activeTask) return; - // Find the groups - const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id)); - let targetGroup = overGroup; + // Check if we're dragging over a task or a group + const overTask = allTasks.find(task => task.id === overId); + const overGroup = groups.find(group => group.id === overId); - if (overTask) { - targetGroup = groups.find(group => group.taskIds.includes(overTask.id)); - } + // Find the groups + const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id)); + let targetGroup = overGroup; - if (!activeGroup || !targetGroup) return; - - // If dragging to a different group, we need to handle cross-group movement - if (activeGroup.id !== targetGroup.id) { - console.log('Cross-group drag detected:', { - activeTask: activeTask.id, - fromGroup: activeGroup.id, - toGroup: targetGroup.id, - }); - } - }, [allTasks, groups]); - - const handleDragEnd = useCallback((event: DragEndEvent) => { - const { active, over } = event; - setActiveId(null); - - if (!over || active.id === over.id) { - return; - } - - const activeId = active.id; - const overId = over.id; - - // Find the active task - const activeTask = allTasks.find(task => task.id === activeId); - if (!activeTask) { - console.error('Active task not found:', activeId); - return; - } - - // Find the groups - const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id)); - if (!activeGroup) { - console.error('Could not find active group for task:', activeId); - return; - } - - // Check if we're dropping on a task or a group - const overTask = allTasks.find(task => task.id === overId); - const overGroup = groups.find(group => group.id === overId); - - let targetGroup = overGroup; - let insertIndex = 0; - - if (overTask) { - // Dropping on a task - targetGroup = groups.find(group => group.taskIds.includes(overTask.id)); - if (targetGroup) { - insertIndex = targetGroup.taskIds.indexOf(overTask.id); + if (overTask) { + targetGroup = groups.find(group => group.taskIds.includes(overTask.id)); } - } else if (overGroup) { - // Dropping on a group (at the end) - targetGroup = overGroup; - insertIndex = targetGroup.taskIds.length; - } - if (!targetGroup) { - console.error('Could not find target group'); - return; - } + if (!activeGroup || !targetGroup) return; - const isCrossGroup = activeGroup.id !== targetGroup.id; - const activeIndex = activeGroup.taskIds.indexOf(activeTask.id); - - console.log('Drag operation:', { - activeId, - overId, - activeTask: activeTask.name || activeTask.title, - activeGroup: activeGroup.id, - targetGroup: targetGroup.id, - activeIndex, - insertIndex, - isCrossGroup, - }); - - if (isCrossGroup) { - // Moving task between groups - console.log('Moving task between groups:', { - task: activeTask.name || activeTask.title, - from: activeGroup.title, - to: targetGroup.title, - newPosition: insertIndex, - }); - - // Move task to the target group - dispatch(moveTaskBetweenGroups({ - taskId: activeId as string, - sourceGroupId: activeGroup.id, - targetGroupId: targetGroup.id, - })); - - // Reorder task within target group at drop position - dispatch(reorderTasksInGroup({ - sourceTaskId: activeId as string, - destinationTaskId: over.id as string, - sourceGroupId: activeGroup.id, - destinationGroupId: targetGroup.id, - })); - } else { - // Reordering within the same group - console.log('Reordering task within same group:', { - task: activeTask.name || activeTask.title, - group: activeGroup.title, - from: activeIndex, - to: insertIndex, - }); - - if (activeIndex !== insertIndex) { - // Reorder task within same group at drop position - dispatch(reorderTasksInGroup({ - sourceTaskId: activeId as string, - destinationTaskId: over.id as string, - sourceGroupId: activeGroup.id, - destinationGroupId: activeGroup.id, - })); + // If dragging to a different group, we need to handle cross-group movement + if (activeGroup.id !== targetGroup.id) { + console.log('Cross-group drag detected:', { + activeTask: activeTask.id, + fromGroup: activeGroup.id, + toGroup: targetGroup.id, + }); } - } + }, + [allTasks, groups] + ); - }, [allTasks, groups]); + const handleDragEnd = useCallback( + (event: DragEndEvent) => { + const { active, over } = event; + setActiveId(null); + + if (!over || active.id === over.id) { + return; + } + + const activeId = active.id; + const overId = over.id; + + // Find the active task + const activeTask = allTasks.find(task => task.id === activeId); + if (!activeTask) { + console.error('Active task not found:', activeId); + return; + } + + // Find the groups + const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id)); + if (!activeGroup) { + console.error('Could not find active group for task:', activeId); + return; + } + + // Check if we're dropping on a task or a group + const overTask = allTasks.find(task => task.id === overId); + const overGroup = groups.find(group => group.id === overId); + + let targetGroup = overGroup; + let insertIndex = 0; + + if (overTask) { + // Dropping on a task + targetGroup = groups.find(group => group.taskIds.includes(overTask.id)); + if (targetGroup) { + insertIndex = targetGroup.taskIds.indexOf(overTask.id); + } + } else if (overGroup) { + // Dropping on a group (at the end) + targetGroup = overGroup; + insertIndex = targetGroup.taskIds.length; + } + + if (!targetGroup) { + console.error('Could not find target group'); + return; + } + + const isCrossGroup = activeGroup.id !== targetGroup.id; + const activeIndex = activeGroup.taskIds.indexOf(activeTask.id); + + console.log('Drag operation:', { + activeId, + overId, + activeTask: activeTask.name || activeTask.title, + activeGroup: activeGroup.id, + targetGroup: targetGroup.id, + activeIndex, + insertIndex, + isCrossGroup, + }); + + if (isCrossGroup) { + // Moving task between groups + console.log('Moving task between groups:', { + task: activeTask.name || activeTask.title, + from: activeGroup.title, + to: targetGroup.title, + newPosition: insertIndex, + }); + + // Move task to the target group + dispatch( + moveTaskBetweenGroups({ + taskId: activeId as string, + sourceGroupId: activeGroup.id, + targetGroupId: targetGroup.id, + }) + ); + + // Reorder task within target group at drop position + dispatch( + reorderTasksInGroup({ + sourceTaskId: activeId as string, + destinationTaskId: over.id as string, + sourceGroupId: activeGroup.id, + destinationGroupId: targetGroup.id, + }) + ); + } else { + // Reordering within the same group + console.log('Reordering task within same group:', { + task: activeTask.name || activeTask.title, + group: activeGroup.title, + from: activeIndex, + to: insertIndex, + }); + + if (activeIndex !== insertIndex) { + // Reorder task within same group at drop position + dispatch( + reorderTasksInGroup({ + sourceTaskId: activeId as string, + destinationTaskId: over.id as string, + sourceGroupId: activeGroup.id, + destinationGroupId: activeGroup.id, + }) + ); + } + } + }, + [allTasks, groups] + ); // Bulk action handlers const handleClearSelection = useCallback(() => { @@ -395,14 +405,14 @@ const TaskListV2: React.FC = ({ projectId }) => { let currentTaskIndex = 0; return groups.map(group => { const isCurrentGroupCollapsed = collapsedGroups.has(group.id); - + // Order tasks according to group.taskIds array to maintain proper order - const visibleTasksInGroup = isCurrentGroupCollapsed - ? [] + const visibleTasksInGroup = isCurrentGroupCollapsed + ? [] : group.taskIds .map(taskId => allTasks.find(task => task.id === taskId)) .filter((task): task is Task => task !== undefined); // Type guard to filter out undefined tasks - + const tasksForVirtuoso = visibleTasksInGroup.map(task => ({ ...task, originalIndex: allTasks.indexOf(task), @@ -428,76 +438,87 @@ const TaskListV2: React.FC = ({ projectId }) => { }, [virtuosoGroups]); // Memoize column headers to prevent unnecessary re-renders - const columnHeaders = useMemo(() => ( -
- {visibleColumns.map((column) => { - const columnStyle: ColumnStyle = { - width: column.width, - flexShrink: 0, // Prevent columns from shrinking - // Add specific styling for labels column with auto width - ...(column.id === 'labels' && column.width === 'auto' ? { - minWidth: '200px', // Ensure minimum width for labels - flexGrow: 1, // Allow it to grow - } : {}), - }; + const columnHeaders = useMemo( + () => ( +
+ {visibleColumns.map(column => { + const columnStyle: ColumnStyle = { + width: column.width, + flexShrink: 0, // Prevent columns from shrinking + // Add specific styling for labels column with auto width + ...(column.id === 'labels' && column.width === 'auto' + ? { + minWidth: '200px', // Ensure minimum width for labels + flexGrow: 1, // Allow it to grow + } + : {}), + }; - return ( -
- {column.id === 'dragHandle' ? ( - - ) : column.id === 'checkbox' ? ( - // Empty for checkbox column header - ) : ( - column.label - )} -
- ); - })} -
- ), [visibleColumns]); + return ( +
+ {column.id === 'dragHandle' ? ( + + ) : column.id === 'checkbox' ? ( + // Empty for checkbox column header + ) : ( + column.label + )} +
+ ); + })} +
+ ), + [visibleColumns] + ); // Render functions - const renderGroup = useCallback((groupIndex: number) => { - const group = virtuosoGroups[groupIndex]; - const isGroupEmpty = group.count === 0; - - return ( -
0 ? 'mt-2' : ''}> - handleGroupCollapse(group.id)} - /> - {/* Empty group drop zone */} - {isGroupEmpty && !collapsedGroups.has(group.id) && ( -
-
Drop tasks here
-
- )} -
- ); - }, [virtuosoGroups, collapsedGroups, handleGroupCollapse]); + const renderGroup = useCallback( + (groupIndex: number) => { + const group = virtuosoGroups[groupIndex]; + const isGroupEmpty = group.count === 0; - const renderTask = useCallback((taskIndex: number) => { - const task = virtuosoItems[taskIndex]; // Get task from the flattened virtuosoItems - if (!task) return null; // Should not happen if logic is correct - return ( - - ); - }, [virtuosoItems, visibleColumns]); + return ( +
0 ? 'mt-2' : ''}> + handleGroupCollapse(group.id)} + /> + {/* Empty group drop zone */} + {isGroupEmpty && !collapsedGroups.has(group.id) && ( +
+
Drop tasks here
+
+ )} +
+ ); + }, + [virtuosoGroups, collapsedGroups, handleGroupCollapse] + ); + + const renderTask = useCallback( + (taskIndex: number) => { + const task = virtuosoItems[taskIndex]; // Get task from the flattened virtuosoItems + if (!task || !urlProjectId) return null; // Should not happen if logic is correct + return ( + + ); + }, + [virtuosoItems, visibleColumns] + ); if (loading) return
Loading...
; if (error) return
Error: {error}
; @@ -527,7 +548,10 @@ const TaskListV2: React.FC = ({ projectId }) => { {/* Task List - Scrollable content */}
task.id).filter((id): id is string => id !== undefined)} + items={virtuosoItems + .filter(task => !task.parent_task_id) + .map(task => task.id) + .filter((id): id is string => id !== undefined)} strategy={verticalListSortingStrategy} > = ({ projectId }) => { groupContent={renderGroup} itemContent={renderTask} components={{ - List: React.forwardRef(({ style, children }, ref) => ( -
+ List: React.forwardRef< + HTMLDivElement, + { style?: React.CSSProperties; children?: React.ReactNode } + >(({ style, children }, ref) => ( +
{children}
)), @@ -561,9 +584,9 @@ const TaskListV2: React.FC = ({ projectId }) => {
- {allTasks.find(task => task.id === activeId)?.name || - allTasks.find(task => task.id === activeId)?.title || - 'Task'} + {allTasks.find(task => task.id === activeId)?.name || + allTasks.find(task => task.id === activeId)?.title || + 'Task'}
{allTasks.find(task => task.id === activeId)?.task_key} @@ -576,11 +599,11 @@ const TaskListV2: React.FC = ({ projectId }) => { {/* Bulk Action Bar */} - {selectedTaskIds.length > 0 && ( + {selectedTaskIds.length > 0 && urlProjectId && ( = ({ projectId }) => { ); }; -export default TaskListV2; \ No newline at end of file +export default TaskListV2; diff --git a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx index a857ad43..4df9d0a3 100644 --- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx +++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx @@ -1,7 +1,7 @@ import React, { memo, useMemo, useCallback, useState } from 'react'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; -import { CheckCircleOutlined, HolderOutlined, CloseOutlined } from '@ant-design/icons'; +import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons'; import { Checkbox, DatePicker } from 'antd'; import { dayjs, taskManagementAntdConfig } from '@/shared/antd-imports'; import { Task } from '@/types/task-management.types'; @@ -15,8 +15,9 @@ import TaskStatusDropdown from '@/components/task-management/task-status-dropdow import TaskPriorityDropdown from '@/components/task-management/task-priority-dropdown'; import { useAppSelector } from '@/hooks/useAppSelector'; import { useAppDispatch } from '@/hooks/useAppDispatch'; -import { selectTaskById } from '@/features/task-management/task-management.slice'; +import { selectTaskById, toggleTaskExpansion, fetchSubTasks } from '@/features/task-management/task-management.slice'; import { selectIsTaskSelected, toggleTaskSelection } from '@/features/task-management/selection.slice'; +import { setSelectedTaskId, setShowTaskDrawer } from '@/features/task-drawer/task-drawer.slice'; import { useSocket } from '@/socket/socketContext'; import { SocketEvents } from '@/shared/socket-events'; import { useTranslation } from 'react-i18next'; @@ -33,6 +34,7 @@ interface TaskRowProps { width: string; isSticky?: boolean; }>; + isSubtask?: boolean; } interface TaskLabelsCellProps { @@ -89,7 +91,7 @@ const formatDate = (dateString: string): string => { } }; -const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumns }) => { +const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumns, isSubtask = false }) => { const dispatch = useAppDispatch(); const task = useAppSelector(state => selectTaskById(state, taskId)); const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId)); @@ -103,13 +105,14 @@ const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumn return null; // Don't render if task is not found in store } - // Drag and drop functionality + // Drag and drop functionality - only enable for parent tasks const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id, data: { type: 'task', task, }, + disabled: isSubtask, // Disable drag and drop for subtasks }); // Memoize style object to prevent unnecessary re-renders @@ -189,6 +192,19 @@ const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumn dispatch(toggleTaskSelection(taskId)); }, [dispatch, taskId]); + // Handle task expansion toggle + const handleToggleExpansion = useCallback((e: React.MouseEvent) => { + e.stopPropagation(); + + // Always try to fetch subtasks when expanding, regardless of count + if (!task.show_sub_tasks && (!task.sub_tasks || task.sub_tasks.length === 0)) { + dispatch(fetchSubTasks({ taskId: task.id, projectId })); + } + + // Toggle expansion state + dispatch(toggleTaskExpansion(task.id)); + }, [dispatch, task.id, task.sub_tasks, task.show_sub_tasks, projectId]); + // Handle date change const handleDateChange = useCallback( (date: dayjs.Dayjs | null, field: 'startDate' | 'dueDate') => { @@ -239,12 +255,11 @@ const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumn case 'dragHandle': return (
- + {!isSubtask && }
); @@ -270,10 +285,63 @@ const TaskRow: React.FC = memo(({ taskId, projectId, visibleColumn case 'title': return ( -
- - {taskDisplayName} - +
+
+ {/* Indentation for subtasks - increased padding */} + {isSubtask &&
} + + {/* Expand/Collapse button - only show for parent tasks */} + {!isSubtask && ( + + )} + + {/* Additional indentation for subtasks after the expand button space */} + {isSubtask &&
} + +
+ + {taskDisplayName} + + + {/* Subtask count indicator */} + {!isSubtask && task.sub_tasks_count && task.sub_tasks_count > 0 && ( +
+ + {task.sub_tasks_count} + + +
+ )} +
+
+ +
); diff --git a/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx b/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx new file mode 100644 index 00000000..b35cdb61 --- /dev/null +++ b/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx @@ -0,0 +1,208 @@ +import React, { memo, useState, useCallback } from 'react'; +import { useAppSelector } from '@/hooks/useAppSelector'; +import { useAppDispatch } from '@/hooks/useAppDispatch'; +import { selectTaskById, createSubtask, selectSubtaskLoading } from '@/features/task-management/task-management.slice'; +import TaskRow from './TaskRow'; +import SubtaskLoadingSkeleton from './SubtaskLoadingSkeleton'; +import { Task } from '@/types/task-management.types'; +import { Input, Button } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +import { useSocket } from '@/socket/socketContext'; +import { SocketEvents } from '@/shared/socket-events'; +import { useTranslation } from 'react-i18next'; + +interface TaskRowWithSubtasksProps { + taskId: string; + projectId: string; + visibleColumns: Array<{ + id: string; + width: string; + isSticky?: boolean; + }>; +} + +interface AddSubtaskRowProps { + parentTaskId: string; + projectId: string; + visibleColumns: Array<{ + id: string; + width: string; + isSticky?: boolean; + }>; + onSubtaskAdded: () => void; +} + +const AddSubtaskRow: React.FC = memo(({ + parentTaskId, + projectId, + visibleColumns, + onSubtaskAdded +}) => { + const [isAdding, setIsAdding] = useState(false); + const [subtaskName, setSubtaskName] = useState(''); + const { socket, connected } = useSocket(); + const { t } = useTranslation('task-list-table'); + const dispatch = useAppDispatch(); + + const handleAddSubtask = useCallback(() => { + if (!subtaskName.trim()) return; + + // Create optimistic subtask immediately for better UX + dispatch(createSubtask({ + parentTaskId, + name: subtaskName.trim(), + projectId + })); + + // Emit socket event for server-side creation + if (connected && socket) { + socket.emit( + SocketEvents.QUICK_TASK.toString(), + JSON.stringify({ + name: subtaskName.trim(), + project_id: projectId, + parent_task_id: parentTaskId, + }) + ); + } + + setSubtaskName(''); + setIsAdding(false); + onSubtaskAdded(); + }, [subtaskName, dispatch, parentTaskId, projectId, connected, socket, onSubtaskAdded]); + + const handleCancel = useCallback(() => { + setSubtaskName(''); + setIsAdding(false); + }, []); + + const renderColumn = useCallback((columnId: string, width: string) => { + const baseStyle = { width }; + + switch (columnId) { + case 'dragHandle': + return
; + case 'checkbox': + return
; + case 'taskKey': + return
; + case 'title': + return ( +
+
+ {/* Match subtask indentation pattern - same as TaskRow for subtasks */} +
+ + {!isAdding ? ( + + ) : ( + setSubtaskName(e.target.value)} + onPressEnter={handleAddSubtask} + onBlur={handleCancel} + placeholder="Type subtask name and press Enter to save" + className="w-full h-full border-none shadow-none bg-transparent" + style={{ + height: '100%', + minHeight: '42px', + padding: '0', + fontSize: '14px' + }} + autoFocus + /> + )} +
+
+ ); + default: + return
; + } + }, [isAdding, subtaskName, handleAddSubtask, handleCancel, t]); + + return ( +
+ {visibleColumns.map((column) => + renderColumn(column.id, column.width) + )} +
+ ); +}); + +AddSubtaskRow.displayName = 'AddSubtaskRow'; + +const TaskRowWithSubtasks: React.FC = memo(({ + taskId, + projectId, + visibleColumns +}) => { + const task = useAppSelector(state => selectTaskById(state, taskId)); + const isLoadingSubtasks = useAppSelector(state => selectSubtaskLoading(state, taskId)); + const dispatch = useAppDispatch(); + + const handleSubtaskAdded = useCallback(() => { + // Refresh subtasks after adding a new one + // The socket event will handle the real-time update + }, []); + + if (!task) { + return null; + } + + return ( + <> + {/* Main task row */} + + + {/* Subtasks and add subtask row when expanded */} + {task.show_sub_tasks && ( + <> + {/* Show loading skeleton while fetching subtasks */} + {isLoadingSubtasks && ( + <> + + + )} + + {/* Render existing subtasks when not loading */} + {!isLoadingSubtasks && task.sub_tasks?.map((subtask: Task) => ( +
+ +
+ ))} + + {/* Add subtask row - only show when not loading */} + {!isLoadingSubtasks && ( +
+ +
+ )} + + )} + + ); +}); + +TaskRowWithSubtasks.displayName = 'TaskRowWithSubtasks'; + +export default TaskRowWithSubtasks; \ No newline at end of file diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts index b35cd836..fc7a7365 100644 --- a/worklenz-frontend/src/features/task-management/task-management.slice.ts +++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts @@ -55,6 +55,7 @@ const initialState: TaskManagementState = { grouping: undefined, selectedPriorities: [], search: '', + loadingSubtasks: {}, }; // Async thunk to fetch tasks from API @@ -703,6 +704,68 @@ const taskManagementSlice = createSlice({ parent.sub_tasks_count = (parent.sub_tasks_count || 0) + 1; } }, + createSubtask: ( + state, + action: PayloadAction<{ parentTaskId: string; name: string; projectId: string }> + ) => { + const { parentTaskId, name, projectId } = action.payload; + const parent = state.entities[parentTaskId]; + if (parent) { + // Create a temporary subtask - the real one will come from the socket + const tempId = `temp-${Date.now()}`; + const tempSubtask: Task = { + id: tempId, + task_key: '', + title: name, + name: name, + description: '', + status: 'todo', + priority: 'low', + phase: 'Development', + progress: 0, + assignees: [], + assignee_names: [], + labels: [], + dueDate: undefined, + due_date: undefined, + startDate: undefined, + timeTracking: { + estimated: 0, + logged: 0, + }, + created_at: new Date().toISOString(), + updated_at: new Date().toISOString(), + order: 0, + parent_task_id: parentTaskId, + is_sub_task: true, + sub_tasks_count: 0, + show_sub_tasks: false, + isTemporary: true, // Mark as temporary + }; + + // Add temporary subtask for immediate UI feedback + if (!parent.sub_tasks) { + parent.sub_tasks = []; + } + parent.sub_tasks.push(tempSubtask); + parent.sub_tasks_count = (parent.sub_tasks_count || 0) + 1; + state.entities[tempId] = tempSubtask; + state.ids.push(tempId); + } + }, + removeTemporarySubtask: ( + state, + action: PayloadAction<{ parentTaskId: string; tempId: string }> + ) => { + const { parentTaskId, tempId } = action.payload; + const parent = state.entities[parentTaskId]; + if (parent && parent.sub_tasks) { + parent.sub_tasks = parent.sub_tasks.filter(subtask => subtask.id !== tempId); + parent.sub_tasks_count = Math.max((parent.sub_tasks_count || 0) - 1, 0); + delete state.entities[tempId]; + state.ids = state.ids.filter(id => id !== tempId); + } + }, updateTaskAssignees: (state, action: PayloadAction<{ taskId: string; assigneeIds: string[]; @@ -719,6 +782,7 @@ const taskManagementSlice = createSlice({ }; } }, + }, extraReducers: builder => { builder @@ -742,20 +806,66 @@ const taskManagementSlice = createSlice({ state.groups = []; }) .addCase(fetchSubTasks.pending, (state, action) => { - // Don't set global loading state for subtasks + // Set loading state for specific task + const { taskId } = action.meta.arg; + state.loadingSubtasks[taskId] = true; 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; + // Clear loading state + state.loadingSubtasks[parentTaskId] = false; + if (parentTask && subtasks) { + // Convert subtasks to the proper format + const convertedSubtasks = subtasks.map(subtask => ({ + id: subtask.id || '', + task_key: subtask.task_key || '', + title: subtask.name || subtask.title || '', + name: subtask.name || subtask.title || '', + description: subtask.description || '', + status: subtask.status || 'todo', + priority: subtask.priority || 'low', + phase: subtask.phase_name || subtask.phase || 'Development', + progress: subtask.complete_ratio || subtask.progress || 0, + assignees: subtask.assignees || [], + assignee_names: subtask.assignee_names || subtask.names || [], + labels: subtask.labels || [], + dueDate: subtask.end_date || subtask.dueDate, + due_date: subtask.end_date || subtask.due_date, + startDate: subtask.start_date || subtask.startDate, + timeTracking: subtask.timeTracking || { + estimated: 0, + logged: 0, + }, + createdAt: subtask.created_at || subtask.createdAt || new Date().toISOString(), + created_at: subtask.created_at || subtask.createdAt || new Date().toISOString(), + updatedAt: subtask.updated_at || subtask.updatedAt || new Date().toISOString(), + updated_at: subtask.updated_at || subtask.updatedAt || new Date().toISOString(), + order: subtask.sort_order || subtask.order || 0, + parent_task_id: parentTaskId, + is_sub_task: true, + sub_tasks_count: 0, + show_sub_tasks: false, + })); + + // Update parent task with subtasks + parentTask.sub_tasks = convertedSubtasks; + parentTask.sub_tasks_count = convertedSubtasks.length; + + // Add subtasks to entities so they can be accessed by ID + convertedSubtasks.forEach(subtask => { + state.entities[subtask.id] = subtask; + if (!state.ids.includes(subtask.id)) { + state.ids.push(subtask.id); + } + }); } }) .addCase(fetchSubTasks.rejected, (state, action) => { - // Set error but don't clear task data + // Clear loading state and set error + const { taskId } = action.meta.arg; + state.loadingSubtasks[taskId] = false; state.error = action.error.message || action.payload || 'Failed to fetch subtasks. Please try again.'; }) .addCase(fetchTasks.pending, (state) => { @@ -801,6 +911,8 @@ export const { toggleTaskExpansion, addSubtaskToParent, updateTaskAssignees, + createSubtask, + removeTemporarySubtask, } = taskManagementSlice.actions; // Export the selectors @@ -814,6 +926,7 @@ 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; +export const selectSubtaskLoading = (state: RootState, taskId: string) => state.taskManagement.loadingSubtasks[taskId] || false; // Memoized selectors export const selectTasksByStatus = (state: RootState, status: string) => diff --git a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts index 8748f51d..30ec508c 100644 --- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts +++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts @@ -200,49 +200,57 @@ export const useTaskSocketHandlers = () => { // Update enhanced kanban slice dispatch(updateEnhancedKanbanTaskStatus(response)); - // For the task management slice, move task between groups without resetting + // For the task management slice, update the task entity and handle group movement const state = store.getState(); const groups = state.taskManagement.groups; const currentTask = state.taskManagement.entities[response.id]; + const currentGrouping = state.taskManagement.grouping; - if (groups && groups.length > 0 && currentTask && response.status_id) { - // Find current group containing the task - const currentGroup = groups.find(group => group.taskIds.includes(response.id)); - - // Find target group based on new status ID - // The status_id from response is the UUID of the new status - const targetGroup = groups.find(group => group.id === response.status_id); - - if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) { - // Determine the new status value based on status category - let newStatusValue: 'todo' | 'doing' | 'done' = 'todo'; - if (response.statusCategory) { - if (response.statusCategory.is_done) { - newStatusValue = 'done'; - } else if (response.statusCategory.is_doing) { - newStatusValue = 'doing'; - } else { - newStatusValue = 'todo'; - } + if (currentTask) { + // Determine the new status value based on status category + let newStatusValue: 'todo' | 'doing' | 'done' = 'todo'; + if (response.statusCategory) { + if (response.statusCategory.is_done) { + newStatusValue = 'done'; + } else if (response.statusCategory.is_doing) { + newStatusValue = 'doing'; + } else { + newStatusValue = 'todo'; } + } - // Use the new action to move task between groups - dispatch( - moveTaskBetweenGroups({ - taskId: response.id, - fromGroupId: currentGroup.id, - toGroupId: targetGroup.id, - taskUpdate: { - status: newStatusValue, - progress: response.complete_ratio || currentTask.progress, - }, - }) - ); - } else if (!currentGroup || !targetGroup) { - // Remove unnecessary refetch that causes data thrashing - // if (projectId) { - // dispatch(fetchTasksV3(projectId)); - // } + // Update the task entity first + dispatch( + updateTask({ + ...currentTask, + status: newStatusValue, + progress: response.complete_ratio || currentTask.progress, + updatedAt: new Date().toISOString(), + }) + ); + + // Handle group movement ONLY if grouping by status + if (groups && groups.length > 0 && currentGrouping === 'status') { + // Find current group containing the task + const currentGroup = groups.find(group => group.taskIds.includes(response.id)); + + // Find target group based on new status value (not UUID) + const targetGroup = groups.find(group => group.groupValue === newStatusValue); + + if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) { + // Use the action to move task between groups + dispatch( + moveTaskBetweenGroups({ + taskId: response.id, + sourceGroupId: currentGroup.id, + targetGroupId: targetGroup.id, + }) + ); + } else { + console.log('🔧 No group movement needed for status change'); + } + } else { + console.log('🔧 Not grouped by status, skipping group movement'); } } }, @@ -310,9 +318,10 @@ export const useTaskSocketHandlers = () => { // Update enhanced kanban slice dispatch(updateEnhancedKanbanTaskPriority(response)); - // For the task management slice, always update the task entity first + // For the task management slice, update the task entity and handle group movement const state = store.getState(); const currentTask = state.taskManagement.entities[response.id]; + const currentGrouping = state.taskManagement.grouping; if (currentTask) { // Get priority list to map priority_id to priority name @@ -327,20 +336,17 @@ export const useTaskSocketHandlers = () => { } } - // Update the task entity + // Update the task entity first dispatch( updateTask({ - id: response.id, - changes: { - priority: newPriorityValue, - updatedAt: new Date().toISOString(), - }, + ...currentTask, + priority: newPriorityValue, + updatedAt: new Date().toISOString(), }) ); // Handle group movement ONLY if grouping by priority const groups = state.taskManagement.groups; - const currentGrouping = state.taskManagement.grouping; if (groups && groups.length > 0 && currentGrouping === 'priority') { // Find current group containing the task @@ -348,18 +354,15 @@ export const useTaskSocketHandlers = () => { // Find target group based on new priority value const targetGroup = groups.find( - group => group.groupValue.toLowerCase() === newPriorityValue.toLowerCase() + group => group.groupValue?.toLowerCase() === newPriorityValue.toLowerCase() ); if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) { dispatch( moveTaskBetweenGroups({ taskId: response.id, - fromGroupId: currentGroup.id, - toGroupId: targetGroup.id, - taskUpdate: { - priority: newPriorityValue, - }, + sourceGroupId: currentGroup.id, + targetGroupId: targetGroup.id, }) ); } else { @@ -619,7 +622,7 @@ export const useTaskSocketHandlers = () => { parent_task_id: data.parent_task_id, is_sub_task: true, }; - dispatch(addSubtaskToParent({ subtask, parentTaskId: data.parent_task_id })); + dispatch(addSubtaskToParent({ parentId: data.parent_task_id, subtask })); // Also update enhanced kanban slice for subtask creation dispatch( diff --git a/worklenz-frontend/src/styles/task-management.css b/worklenz-frontend/src/styles/task-management.css index a4737a71..1cfc2669 100644 --- a/worklenz-frontend/src/styles/task-management.css +++ b/worklenz-frontend/src/styles/task-management.css @@ -310,8 +310,6 @@ } .dark .ant-btn { - background-color: #262626; - border-color: #404040; color: rgba(255, 255, 255, 0.85); } diff --git a/worklenz-frontend/src/types/task-management.types.ts b/worklenz-frontend/src/types/task-management.types.ts index 0c82492f..45f5a91d 100644 --- a/worklenz-frontend/src/types/task-management.types.ts +++ b/worklenz-frontend/src/types/task-management.types.ts @@ -96,6 +96,7 @@ export interface TaskManagementState { grouping: string | undefined; selectedPriorities: string[]; search: string; + loadingSubtasks: Record; // Track loading state for individual tasks } export interface TaskGroupsState {