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

Merge pull request #267 from Worklenz/feature/show-multiples-levels-of-subtaks-in-task-list

Browse Source 
Feature/show multiples levels of subtaks in task list
This commit is contained in:
Chamika J
2025-07-15 13:31:10 +05:30
committed by GitHub
parent d970cbb626 3d67145af7
commit fca8ace10d
17 changed files with 705 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-phase-selector/task-drawer-phase-selector.tsx
View File

@@ -1,6 +1,5 @@
import { useSocket } from '@/socket/socketContext';
import { ITaskPhase } from '@/types/tasks/taskPhase.types';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import { Select } from 'antd';
import { Form } from 'antd';
@@ -27,12 +26,6 @@ const TaskDrawerPhaseSelector = ({ phases, task }: TaskDrawerPhaseSelectorProps)
phase_id: value,
parent_task: task.parent_task_id || null,
});
// socket?.once(SocketEvents.TASK_PHASE_CHANGE.toString(), () => {
// if(list.getCurrentGroup().value === this.list.GROUP_BY_PHASE_VALUE && this.list.isSubtasksIncluded) {
// this.list.emitRefreshSubtasksIncluded();
// }
// });
};
return (
@@ -41,8 +34,11 @@ const TaskDrawerPhaseSelector = ({ phases, task }: TaskDrawerPhaseSelectorProps)
allowClear
placeholder="Select Phase"
options={phaseMenuItems}
style={{ width: 'fit-content' }}
dropdownStyle={{ width: 'fit-content' }}
styles={{
root: {
width: 'fit-content',
},
}}
onChange={handlePhaseChange}
/>
</Form.Item>

25
worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.css
View File

@@ -7,3 +7,28 @@
outline: 1px solid #d9d9d9;
border-radius: 4px;
}
/* Task name display styles */
.task-name-display {
margin: 0;
padding: 2px 8px;
font-size: 16px;
cursor: pointer;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 20px;
line-height: 1.4;
display: flex;
align-items: center;
}
.task-name-display:hover {
background-color: rgba(0, 0, 0, 0.02);
border-radius: 4px;
}
[data-theme='dark'] .task-name-display:hover {
background-color: rgba(255, 255, 255, 0.05);
}

107
worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Dropdown, Flex, Input, InputRef, MenuProps } from 'antd';
import { Button, Dropdown, Flex, Input, InputRef, MenuProps, Tooltip } from 'antd';
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import { TFunction } from 'i18next';
@@ -21,12 +21,19 @@ import { deleteBoardTask } from '@/features/board/board-slice';
import { deleteTask as deleteKanbanTask, updateEnhancedKanbanSubtask } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import useTabSearchParam from '@/hooks/useTabSearchParam';
import { ITaskViewModel } from '@/types/tasks/task.types';
import TaskHierarchyBreadcrumb from '../task-hierarchy-breadcrumb/task-hierarchy-breadcrumb';
type TaskDrawerHeaderProps = {
inputRef: React.RefObject<InputRef | null>;
t: TFunction;
};
// Utility function to truncate text
const truncateText = (text: string, maxLength: number = 50): string => {
if (!text || text.length <= maxLength) return text;
return `${text.substring(0, maxLength)}...`;
};
const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
const dispatch = useAppDispatch();
const { socket, connected } = useSocket();
@@ -38,6 +45,9 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
const [taskName, setTaskName] = useState<string>(taskFormViewModel?.task?.name ?? '');
const currentSession = useAuthService().getCurrentSession();
// Check if current task is a sub-task
const isSubTask = taskFormViewModel?.task?.is_sub_task || !!taskFormViewModel?.task?.parent_task_id;
useEffect(() => {
setTaskName(taskFormViewModel?.task?.name ?? '');
}, [taskFormViewModel?.task?.name]);
@@ -126,54 +136,57 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
// No need for local socket listeners that could interfere with global handlers
};
const displayTaskName = taskName || t('taskHeader.taskNamePlaceholder');
const truncatedTaskName = truncateText(displayTaskName, 50);
const shouldShowTooltip = displayTaskName.length > 50;
return (
<Flex gap={12} align="center" style={{ marginBlockEnd: 6 }}>
<Flex style={{ position: 'relative', width: '100%' }}>
{isEditing ? (
<Input
ref={inputRef}
size="large"
value={taskName}
onChange={e => onTaskNameChange(e)}
onBlur={handleInputBlur}
placeholder={t('taskHeader.taskNamePlaceholder')}
className="task-name-input"
style={{
width: '100%',
border: 'none',
}}
showCount={true}
maxLength={250}
autoFocus
/>
) : (
<p
onClick={() => setIsEditing(true)}
style={{
margin: 0,
padding: '4px 11px',
fontSize: '16px',
cursor: 'pointer',
wordWrap: 'break-word',
overflowWrap: 'break-word',
width: '100%',
}}
>
{taskName || t('taskHeader.taskNamePlaceholder')}
</p>
)}
<div>
{/* Show breadcrumb for sub-tasks */}
{isSubTask && <TaskHierarchyBreadcrumb t={t} />}
<Flex gap={8} align="center" style={{ marginBlockEnd: 2 }}>
<Flex style={{ position: 'relative', width: '100%', alignItems: 'center' }}>
{isEditing ? (
<Input
ref={inputRef}
size="large"
value={taskName}
onChange={e => onTaskNameChange(e)}
onBlur={handleInputBlur}
placeholder={t('taskHeader.taskNamePlaceholder')}
className="task-name-input"
style={{
width: '100%',
border: 'none',
}}
showCount={true}
maxLength={250}
autoFocus
/>
) : (
<Tooltip title={shouldShowTooltip ? displayTaskName : ''} trigger="hover">
<p
onClick={() => setIsEditing(true)}
className="task-name-display"
>
{truncatedTaskName}
</p>
</Tooltip>
)}
</Flex>
<TaskDrawerStatusDropdown
statuses={taskFormViewModel?.statuses ?? []}
task={taskFormViewModel?.task ?? ({} as ITaskViewModel)}
teamId={currentSession?.team_id ?? ''}
/>
<Dropdown overlayClassName={'delete-task-dropdown'} menu={{ items: deletTaskDropdownItems }}>
<Button type="text" icon={<EllipsisOutlined />} />
</Dropdown>
</Flex>
<TaskDrawerStatusDropdown
statuses={taskFormViewModel?.statuses ?? []}
task={taskFormViewModel?.task ?? ({} as ITaskViewModel)}
teamId={currentSession?.team_id ?? ''}
/>
<Dropdown overlayClassName={'delete-task-dropdown'} menu={{ items: deletTaskDropdownItems }}>
<Button type="text" icon={<EllipsisOutlined />} />
</Dropdown>
</Flex>
</div>
);
};

33
worklenz-frontend/src/components/task-drawer/task-drawer.tsx
View File

@@ -3,7 +3,7 @@ import Drawer from 'antd/es/drawer';
import { InputRef } from 'antd/es/input';
import { useTranslation } from 'react-i18next';
import { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { PlusOutlined, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -13,6 +13,7 @@ import {
setTaskFormViewModel,
setTaskSubscribers,
setTimeLogEditing,
fetchTask,
} from '@/features/task-drawer/task-drawer.slice';
import './task-drawer.css';
@@ -33,6 +34,7 @@ const TaskDrawer = () => {
const { showTaskDrawer, timeLogEditing } = useAppSelector(state => state.taskDrawerReducer);
const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
const { projectId } = useAppSelector(state => state.projectReducer);
const taskNameInputRef = useRef<InputRef>(null);
const isClosingManually = useRef(false);
@@ -54,6 +56,17 @@ const TaskDrawer = () => {
dispatch(setTaskSubscribers([]));
};
const handleBackToParent = () => {
if (taskFormViewModel?.task?.parent_task_id && projectId) {
// Navigate to parent task
dispatch(setSelectedTaskId(taskFormViewModel.task.parent_task_id));
dispatch(fetchTask({
taskId: taskFormViewModel.task.parent_task_id,
projectId
}));
}
};
const handleOnClose = (
e?: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
) => {
@@ -68,10 +81,8 @@ const TaskDrawer = () => {
if (isClickOutsideDrawer || !taskFormViewModel?.task?.is_sub_task) {
resetTaskState();
} else {
dispatch(setSelectedTaskId(null));
dispatch(setTaskFormViewModel({}));
dispatch(setTaskSubscribers([]));
dispatch(setSelectedTaskId(taskFormViewModel?.task?.parent_task_id || null));
// For sub-tasks, navigate to parent instead of closing
handleBackToParent();
}
// Reset the flag after a short delay
setTimeout(() => {
@@ -205,6 +216,17 @@ const TaskDrawer = () => {
};
};
// Check if current task is a sub-task
const isSubTask = taskFormViewModel?.task?.is_sub_task || !!taskFormViewModel?.task?.parent_task_id;
// Custom close icon based on whether it's a sub-task
const getCloseIcon = () => {
if (isSubTask) {
return <ArrowLeftOutlined />;
}
return <CloseOutlined />;
};
const drawerProps = {
open: showTaskDrawer,
onClose: handleOnClose,
@@ -215,6 +237,7 @@ const TaskDrawer = () => {
footer: renderFooter(),
bodyStyle: getBodyStyle(),
footerStyle: getFooterStyle(),
closeIcon: getCloseIcon(),
};
return (

88
worklenz-frontend/src/components/task-drawer/task-hierarchy-breadcrumb/task-hierarchy-breadcrumb.css Normal file
View File

@@ -0,0 +1,88 @@
.task-hierarchy-breadcrumb {
margin-bottom: 4px;
}
.task-hierarchy-breadcrumb .ant-breadcrumb {
font-size: 14px;
line-height: 1;
}
.task-hierarchy-breadcrumb .ant-breadcrumb-link {
color: inherit;
}
.task-hierarchy-breadcrumb .ant-breadcrumb-separator {
color: #8c8c8c;
margin: 0 4px;
}
/* Dark mode styles */
[data-theme='dark'] .task-hierarchy-breadcrumb .ant-breadcrumb-separator {
color: #595959;
}
/* Back button styles */
.task-hierarchy-breadcrumb .ant-btn-link {
padding: 0;
height: auto;
font-size: 14px;
line-height: 1.3;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
.task-hierarchy-breadcrumb .ant-btn-link .anticon {
margin-right: 0; /* Remove default margin */
}
.task-hierarchy-breadcrumb .ant-btn-link:hover {
color: #40a9ff;
}
[data-theme='dark'] .task-hierarchy-breadcrumb .ant-btn-link:hover {
color: #40a9ff;
}
/* Current task name styles */
.task-hierarchy-breadcrumb .current-task-name {
font-size: 14px;
color: #000000d9;
font-weight: 500;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
line-height: 1.3;
}
[data-theme='dark'] .task-hierarchy-breadcrumb .current-task-name {
color: #ffffffd9;
}
/* Breadcrumb item container */
.task-hierarchy-breadcrumb .ant-breadcrumb-item {
max-width: 220px;
overflow: hidden;
display: flex;
align-items: center;
}
/* Ensure breadcrumb items don't break the layout */
.task-hierarchy-breadcrumb .ant-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
}
/* Better alignment for breadcrumb items */
.task-hierarchy-breadcrumb .ant-breadcrumb-item .ant-breadcrumb-link {
display: flex;
align-items: center;
}

189
worklenz-frontend/src/components/task-drawer/task-hierarchy-breadcrumb/task-hierarchy-breadcrumb.tsx Normal file
View File

@@ -0,0 +1,189 @@
import React, { useState, useEffect } from 'react';
import { Breadcrumb, Button, Typography, Tooltip } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { fetchTask, setSelectedTaskId } from '@/features/task-drawer/task-drawer.slice';
import { tasksApiService } from '@/api/tasks/tasks.api.service';
import { TFunction } from 'i18next';
import './task-hierarchy-breadcrumb.css';
interface TaskHierarchyBreadcrumbProps {
t: TFunction;
onBackClick?: () => void;
}
interface TaskHierarchyItem {
id: string;
name: string;
parent_task_id?: string;
}
// Utility function to truncate text
const truncateText = (text: string, maxLength: number = 25): string => {
if (!text || text.length <= maxLength) return text;
return `${text.substring(0, maxLength)}...`;
};
const TaskHierarchyBreadcrumb: React.FC<TaskHierarchyBreadcrumbProps> = ({ t, onBackClick }) => {
const dispatch = useAppDispatch();
const { taskFormViewModel } = useAppSelector(state => state.taskDrawerReducer);
const { projectId } = useAppSelector(state => state.projectReducer);
const themeMode = useAppSelector(state => state.themeReducer.mode);
const [hierarchyPath, setHierarchyPath] = useState<TaskHierarchyItem[]>([]);
const [loading, setLoading] = useState(false);
const task = taskFormViewModel?.task;
const isSubTask = task?.is_sub_task || !!task?.parent_task_id;
// Recursively fetch the complete hierarchy path
const fetchHierarchyPath = async (currentTaskId: string): Promise<TaskHierarchyItem[]> => {
if (!projectId) return [];
const path: TaskHierarchyItem[] = [];
let taskId = currentTaskId;
// Traverse up the hierarchy until we reach the root
while (taskId) {
try {
const response = await tasksApiService.getFormViewModel(taskId, projectId);
if (response.done && response.body.task) {
const taskData = response.body.task;
path.unshift({
id: taskData.id,
name: taskData.name || '',
parent_task_id: taskData.parent_task_id || undefined
});
// Move to parent task
taskId = taskData.parent_task_id || '';
} else {
break;
}
} catch (error) {
console.error('Error fetching task in hierarchy:', error);
break;
}
}
return path;
};
// Fetch the complete hierarchy when component mounts or task changes
useEffect(() => {
const loadHierarchy = async () => {
if (!isSubTask || !task?.parent_task_id || !projectId) {
setHierarchyPath([]);
return;
}
setLoading(true);
try {
const path = await fetchHierarchyPath(task.parent_task_id);
setHierarchyPath(path);
} catch (error) {
console.error('Error loading task hierarchy:', error);
setHierarchyPath([]);
} finally {
setLoading(false);
}
};
loadHierarchy();
}, [task?.parent_task_id, projectId, isSubTask]);
const handleNavigateToTask = (taskId: string) => {
if (projectId) {
if (onBackClick) {
onBackClick();
}
// Navigate to the selected task
dispatch(setSelectedTaskId(taskId));
dispatch(fetchTask({ taskId, projectId }));
}
};
if (!isSubTask || hierarchyPath.length === 0) {
return null;
}
// Create breadcrumb items from the hierarchy path
const breadcrumbItems = [
// Add all parent tasks in the hierarchy
...hierarchyPath.map((hierarchyTask, index) => {
const truncatedName = truncateText(hierarchyTask.name, 25);
const shouldShowTooltip = hierarchyTask.name.length > 25;
return {
title: (
<Tooltip title={shouldShowTooltip ? hierarchyTask.name : ''} trigger="hover">
<Button
type="link"
icon={index === 0 ? <HomeOutlined /> : undefined}
onClick={() => handleNavigateToTask(hierarchyTask.id)}
style={{
padding: 0,
height: 'auto',
color: themeMode === 'dark' ? '#1890ff' : '#1890ff',
fontSize: '14px',
marginRight: '0px',
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
gap: index === 0 ? '6px' : '0px', // Add gap between icon and text for root task
}}
>
{truncatedName}
</Button>
</Tooltip>
),
};
}),
// Add the current task as the last item (non-clickable)
{
title: (() => {
const currentTaskName = task?.name || t('taskHeader.currentTask', 'Current Task');
const truncatedCurrentName = truncateText(currentTaskName, 25);
const shouldShowCurrentTooltip = currentTaskName.length > 25;
return (
<Tooltip title={shouldShowCurrentTooltip ? currentTaskName : ''} trigger="hover">
<Typography.Text
className="current-task-name"
style={{
color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
fontSize: '14px',
fontWeight: 500,
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'inline-block',
}}
>
{truncatedCurrentName}
</Typography.Text>
</Tooltip>
);
})(),
},
];
return (
<div className="task-hierarchy-breadcrumb">
{loading ? (
<Typography.Text style={{ color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9' }}>
{t('taskHeader.loadingHierarchy', 'Loading hierarchy...')}
</Typography.Text>
) : (
<Breadcrumb items={breadcrumbItems} />
)}
</div>
);
};
export default TaskHierarchyBreadcrumb;

5
worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
View File

@@ -24,6 +24,7 @@ interface TaskRowProps {
isSubtask?: boolean;
isFirstInGroup?: boolean;
updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
depth?: number;
}
const TaskRow: React.FC<TaskRowProps> = memo(({
@@ -32,7 +33,8 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
visibleColumns,
isSubtask = false,
isFirstInGroup = false,
updateTaskCustomColumnValue
updateTaskCustomColumnValue,
depth = 0
}) => {
// Get task data and selection state from Redux
const task = useAppSelector(state => selectTaskById(state, taskId));
@@ -107,6 +109,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
handleTaskNameEdit,
attributes,
listeners,
depth,
});
// Memoize style object to prevent unnecessary re-renders

99
worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
View File

@@ -22,6 +22,8 @@ interface TaskRowWithSubtasksProps {
}>;
isFirstInGroup?: boolean;
updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
depth?: number; // Add depth prop to track nesting level
maxDepth?: number; // Add maxDepth prop to limit nesting
}
interface AddSubtaskRowProps {
@@ -32,14 +34,15 @@ interface AddSubtaskRowProps {
width: string;
isSticky?: boolean;
}>;
onSubtaskAdded: () => void; // Simplified - no rowId needed
rowId: string; // Unique identifier for this add subtask row
autoFocus?: boolean; // Whether this row should auto-focus on mount
isActive?: boolean; // Whether this row should show the input/button
onActivate?: () => void; // Simplified - no rowId needed
onSubtaskAdded: () => void;
rowId: string;
autoFocus?: boolean;
isActive?: boolean;
onActivate?: () => void;
depth?: number; // Add depth prop for proper indentation
}
const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
parentTaskId,
projectId,
visibleColumns,
@@ -47,25 +50,20 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
rowId,
autoFocus = false,
isActive = true,
onActivate
onActivate,
depth = 0
}) => {
const [isAdding, setIsAdding] = useState(autoFocus);
const { t } = useTranslation('task-list-table');
const [isAdding, setIsAdding] = useState(false);
const [subtaskName, setSubtaskName] = useState('');
const inputRef = useRef<any>(null);
const { socket, connected } = useSocket();
const { t } = useTranslation('task-list-table');
const dispatch = useAppDispatch();
// Get session data for reporter_id and team_id
const { socket, connected } = useSocket();
const currentSession = useAuthService().getCurrentSession();
// Auto-focus when autoFocus prop is true
useEffect(() => {
if (autoFocus && inputRef.current) {
setIsAdding(true);
setTimeout(() => {
inputRef.current?.focus();
}, 100);
inputRef.current.focus();
}
}, [autoFocus]);
@@ -141,11 +139,15 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
return (
<div className="flex items-center h-full" style={baseStyle}>
<div className="flex items-center w-full h-full">
{/* Match subtask indentation pattern - tighter spacing */}
<div className="w-4" />
{/* Match subtask indentation pattern - reduced spacing for level 1 */}
<div className="w-2" />
{/* Add additional indentation for deeper levels - increased spacing for level 2+ */}
{Array.from({ length: depth }).map((_, i) => (
<div key={i} className="w-6" />
))}
<div className="w-1" />
{isActive ? (
{isActive ? (
!isAdding ? (
<button
onClick={() => {
@@ -188,7 +190,7 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
default:
return <div style={baseStyle} />;
}
}, [isAdding, subtaskName, handleAddSubtask, handleCancel, handleBlur, handleKeyDown, t, isActive, onActivate]);
}, [isAdding, subtaskName, handleAddSubtask, handleCancel, handleBlur, handleKeyDown, t, isActive, onActivate, depth]);
return (
<div className="flex items-center min-w-max px-1 py-0.5 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[36px] border-b border-gray-200 dark:border-gray-700">
@@ -203,12 +205,42 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
AddSubtaskRow.displayName = 'AddSubtaskRow';
// Helper function to get background color based on depth
const getSubtaskBackgroundColor = (depth: number) => {
switch (depth) {
case 1:
return 'bg-gray-50 dark:bg-gray-800/50';
case 2:
return 'bg-blue-50 dark:bg-blue-900/20';
case 3:
return 'bg-green-50 dark:bg-green-900/20';
default:
return 'bg-gray-50 dark:bg-gray-800/50';
}
};
// Helper function to get border color based on depth
const getBorderColor = (depth: number) => {
switch (depth) {
case 1:
return 'border-blue-200 dark:border-blue-700';
case 2:
return 'border-green-200 dark:border-green-700';
case 3:
return 'border-purple-200 dark:border-purple-700';
default:
return 'border-blue-200 dark:border-blue-700';
}
};
const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
taskId,
projectId,
visibleColumns,
isFirstInGroup = false,
updateTaskCustomColumnValue
updateTaskCustomColumnValue,
depth = 0,
maxDepth = 3
}) => {
const task = useAppSelector(state => selectTaskById(state, taskId));
const isLoadingSubtasks = useAppSelector(state => selectSubtaskLoading(state, taskId));
@@ -223,6 +255,9 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
return null;
}
// Don't render subtasks if we've reached the maximum depth
const canHaveSubtasks = depth < maxDepth;
return (
<>
{/* Main task row */}
@@ -232,10 +267,12 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
visibleColumns={visibleColumns}
isFirstInGroup={isFirstInGroup}
updateTaskCustomColumnValue={updateTaskCustomColumnValue}
isSubtask={depth > 0}
depth={depth}
/>
{/* Subtasks and add subtask row when expanded */}
{task.show_sub_tasks && (
{canHaveSubtasks && task.show_sub_tasks && (
<>
{/* Show loading skeleton while fetching subtasks */}
{isLoadingSubtasks && (
@@ -244,22 +281,23 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
</>
)}
{/* Render existing subtasks when not loading */}
{/* Render existing subtasks when not loading - RECURSIVELY */}
{!isLoadingSubtasks && task.sub_tasks?.map((subtask: Task) => (
<div key={subtask.id} className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
<TaskRow
<div key={subtask.id} className={`${getSubtaskBackgroundColor(depth + 1)} border-l-2 ${getBorderColor(depth + 1)}`}>
<TaskRowWithSubtasks
taskId={subtask.id}
projectId={projectId}
visibleColumns={visibleColumns}
isSubtask={true}
updateTaskCustomColumnValue={updateTaskCustomColumnValue}
depth={depth + 1}
maxDepth={maxDepth}
/>
</div>
))}
{/* Add subtask row - only show when not loading */}
{!isLoadingSubtasks && (
<div className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
<div className={`${getSubtaskBackgroundColor(depth + 1)} border-l-2 ${getBorderColor(depth + 1)}`}>
<AddSubtaskRow
parentTaskId={taskId}
projectId={projectId}
@@ -267,8 +305,9 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
onSubtaskAdded={handleSubtaskAdded}
rowId={`add-subtask-${taskId}`}
autoFocus={false}
isActive={true} // Always show the add subtask row
onActivate={undefined} // Not needed anymore
isActive={true}
onActivate={undefined}
depth={depth + 1}
/>
</div>
)}

25
worklenz-frontend/src/components/task-list-v2/components/TitleColumn.tsx
View File

@@ -24,6 +24,7 @@ interface TitleColumnProps {
onEditTaskName: (editing: boolean) => void;
onTaskNameChange: (name: string) => void;
onTaskNameSave: () => void;
depth?: number;
}
export const TitleColumn: React.FC<TitleColumnProps> = memo(({
@@ -36,7 +37,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
taskName,
onEditTaskName,
onTaskNameChange,
onTaskNameSave
onTaskNameSave,
depth = 0
}) => {
const dispatch = useAppDispatch();
const { socket, connected } = useSocket();
@@ -150,11 +152,16 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
/* Normal layout when not editing */
<>
<div className="flex items-center flex-1 min-w-0">
{/* Indentation for subtasks - tighter spacing */}
{isSubtask && <div className="w-4 flex-shrink-0" />}
{/* Indentation for subtasks - reduced spacing for level 1 */}
{isSubtask && <div className="w-2 flex-shrink-0" />}
{/* Expand/Collapse button - only show for parent tasks */}
{!isSubtask && (
{/* Additional indentation for deeper levels - increased spacing for level 2+ */}
{Array.from({ length: depth }).map((_, i) => (
<div key={i} className="w-6 flex-shrink-0" />
))}
{/* Expand/Collapse button - show for any task that can have sub-tasks */}
{depth < 2 && ( // Only show if not at maximum depth (can still have children)
<button
onClick={handleToggleExpansion}
className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out flex-shrink-0 ${
@@ -175,8 +182,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
</button>
)}
{/* Additional indentation for subtasks after the expand button space */}
{isSubtask && <div className="w-2 flex-shrink-0" />}
{/* Additional indentation for subtasks after the expand button space - reduced for level 1 */}
{isSubtask && <div className="w-1 flex-shrink-0" />}
<div className="flex items-center gap-2 flex-1 min-w-0">
{/* Task name with dynamic width */}
@@ -202,8 +209,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
{/* Indicators container - flex-shrink-0 to prevent compression */}
<div className="flex items-center gap-1 flex-shrink-0">
{/* Subtask count indicator - only show if count > 0 */}
{!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
{/* Subtask count indicator - show for any task that can have sub-tasks */}
{depth < 2 && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
<Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-xs">
<span className="text-blue-600 dark:text-blue-400 font-medium">

5
worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
View File

@@ -58,6 +58,9 @@ interface UseTaskRowColumnsProps {
// Drag and drop
attributes: any;
listeners: any;
// Depth for nested subtasks
depth?: number;
}
export const useTaskRowColumns = ({
@@ -84,6 +87,7 @@ export const useTaskRowColumns = ({
handleTaskNameEdit,
attributes,
listeners,
depth = 0,
}: UseTaskRowColumnsProps) => {
const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number) => {
@@ -128,6 +132,7 @@ export const useTaskRowColumns = ({
onEditTaskName={setEditTaskName}
onTaskNameChange={setTaskName}
onTaskNameSave={handleTaskNameSave}
depth={depth}
/>
);