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

Merge branch 'release/v2.0.4' of https://github.com/Worklenz/worklenz into fix/bulk-action-bar

Browse Source
This commit is contained in:
chamikaJ
2025-07-02 09:07:09 +05:30
parent 756c9b892f e4e6d3c74d
commit 7a7856bc36
20 changed files with 2815 additions and 1790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
View File

@@ -49,6 +49,7 @@ import EnhancedKanbanCreateSection from './EnhancedKanbanCreateSection';
import ImprovedTaskFilters from '../task-management/improved-task-filters';
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
// Import the TaskListFilters component
const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
@@ -71,9 +72,13 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
const project = useAppSelector((state: RootState) => state.projectReducer.project);
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
const themeMode = useAppSelector(state => state.themeReducer.mode);
// Load filter data
useFilterDataLoader();
// Set up socket event handlers for real-time updates
useTaskSocketHandlers();
// Local state for drag overlay
const [activeTask, setActiveTask] = useState<any>(null);
@@ -441,18 +446,42 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
<DragOverlay>
{activeTask && (
<EnhancedKanbanTaskCard
task={activeTask}
sectionId={activeTask.status_id || ''}
isDragOverlay={true}
/>
<div
style={{
background: themeMode === 'dark' ? '#23272f' : '#fff',
borderRadius: 8,
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
padding: '12px 20px',
minWidth: 180,
maxWidth: 340,
opacity: 0.95,
fontWeight: 600,
fontSize: 16,
color: themeMode === 'dark' ? '#fff' : '#23272f',
display: 'flex',
alignItems: 'center',
}}
>
{activeTask.name}
</div>
)}
{activeGroup && (
<div className="group-drag-overlay">
<div className="group-header-content">
<h3>{activeGroup.name}</h3>
<span className="task-count">({activeGroup.tasks.length})</span>
</div>
<div
style={{
background: themeMode === 'dark' ? '#23272f' : '#fff',
borderRadius: 8,
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
padding: '16px 24px',
minWidth: 220,
maxWidth: 320,
display: 'flex',
alignItems: 'center',
gap: 12,
opacity: 0.95,
}}
>
<h3 style={{ margin: 0, fontWeight: 600, fontSize: 18 }}>{activeGroup.name}</h3>
<span style={{ fontSize: 15, color: '#888' }}>({activeGroup.tasks.length})</span>
</div>
)}
</DragOverlay>

173
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSubtaskCard.tsx Normal file
View File

@@ -0,0 +1,173 @@
import { Flex, Input, InputRef } from 'antd';
import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { updateEnhancedKanbanTaskProgress } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { themeWiseColor } from '@/utils/themeWiseColor';
import { useAppSelector } from '@/hooks/useAppSelector';
import { getCurrentGroup } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { useAuthService } from '@/hooks/useAuth';
import { ITaskCreateRequest } from '@/types/tasks/task-create-request.types';
import { useParams } from 'react-router-dom';
import { useSocket } from '@/socket/socketContext';
import { SocketEvents } from '@/shared/socket-events';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import logger from '@/utils/errorLogger';
type EnhancedKanbanCreateSubtaskCardProps = {
sectionId: string;
parentTaskId: string;
setShowNewSubtaskCard: (x: boolean) => void;
};
const EnhancedKanbanCreateSubtaskCard = ({
sectionId,
parentTaskId,
setShowNewSubtaskCard,
}: EnhancedKanbanCreateSubtaskCardProps) => {
const { socket, connected } = useSocket();
const dispatch = useAppDispatch();
const [creatingTask, setCreatingTask] = useState<boolean>(false);
const [newSubtaskName, setNewSubtaskName] = useState<string>('');
const [isEnterKeyPressed, setIsEnterKeyPressed] = useState<boolean>(false);
const cardRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<InputRef>(null);
const { t } = useTranslation('kanban-board');
const themeMode = useAppSelector(state => state.themeReducer.mode);
const { projectId } = useParams();
const currentSession = useAuthService().getCurrentSession();
const createRequestBody = (): ITaskCreateRequest | null => {
if (!projectId || !currentSession) return null;
const body: ITaskCreateRequest = {
project_id: projectId,
name: newSubtaskName,
reporter_id: currentSession.id,
team_id: currentSession.team_id,
};
const groupBy = getCurrentGroup();
if (groupBy === 'status') {
body.status_id = sectionId || undefined;
} else if (groupBy === 'priority') {
body.priority_id = sectionId || undefined;
} else if (groupBy === 'phase') {
body.phase_id = sectionId || undefined;
}
if (parentTaskId) {
body.parent_task_id = parentTaskId;
}
return body;
};
const handleAddSubtask = () => {
if (creatingTask || !projectId || !currentSession || newSubtaskName.trim() === '' || !connected)
return;
try {
setCreatingTask(true);
const body = createRequestBody();
if (!body) return;
socket?.emit(SocketEvents.QUICK_TASK.toString(), JSON.stringify(body));
socket?.once(SocketEvents.QUICK_TASK.toString(), (task: IProjectTask) => {
if (!task) return;
setCreatingTask(false);
setNewSubtaskName('');
setTimeout(() => {
inputRef.current?.focus();
}, 0);
if (task.parent_task_id) {
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.parent_task_id);
socket?.once(SocketEvents.GET_TASK_PROGRESS.toString(), (data: {
id: string;
complete_ratio: number;
completed_count: number;
total_tasks_count: number;
parent_task: string;
}) => {
if (!data.parent_task) data.parent_task = task.parent_task_id || '';
dispatch(updateEnhancedKanbanTaskProgress({
id: task.id || '',
complete_ratio: data.complete_ratio,
completed_count: data.completed_count,
total_tasks_count: data.total_tasks_count,
parent_task: data.parent_task,
}));
});
}
});
} catch (error) {
logger.error('Error adding task:', error);
setCreatingTask(false);
}
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
setIsEnterKeyPressed(true);
handleAddSubtask();
}
};
const handleInputBlur = () => {
if (!isEnterKeyPressed && newSubtaskName.length > 0) {
handleAddSubtask();
}
setIsEnterKeyPressed(false);
};
const handleCancelNewCard = (e: React.FocusEvent<HTMLDivElement>) => {
if (cardRef.current && !cardRef.current.contains(e.relatedTarget)) {
setNewSubtaskName('');
setShowNewSubtaskCard(false);
}
};
return (
<Flex
ref={cardRef}
vertical
gap={4}
style={{
width: '100%',
padding: 2,
backgroundColor: themeMode === 'dark' ? '#292929' : '#fafafa',
borderRadius: 6,
cursor: 'pointer',
overflow: 'hidden',
}}
// className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
onBlur={handleCancelNewCard}
>
<Input
ref={inputRef}
value={newSubtaskName}
onClick={e => e.stopPropagation()}
onChange={e => setNewSubtaskName(e.target.value)}
onKeyDown={e => {
e.stopPropagation();
if (e.key === 'Enter') {
setIsEnterKeyPressed(true);
handleAddSubtask();
}
}}
onKeyUp={e => e.stopPropagation()}
onKeyPress={e => e.stopPropagation()}
onBlur={handleInputBlur}
placeholder={t('kanbanBoard.addSubTaskPlaceholder')}
className={`enhanced-kanban-create-subtask-input ${themeMode === 'dark' ? 'dark' : ''}`}
disabled={creatingTask}
autoFocus
/>
</Flex>
);
};
export default EnhancedKanbanCreateSubtaskCard;

52
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx
View File

@@ -342,18 +342,6 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
e.stopPropagation();
}}
>
<Flex
align="center"
justify="center"
style={{
minWidth: 26,
height: 26,
borderRadius: 120,
backgroundColor: themeWiseColor('white', '#1e1e1e', themeMode),
}}
>
{group.tasks.length}
</Flex>
{isLoading && <LoadingOutlined style={{ color: colors.darkGray }} />}
{isEditable ? (
@@ -403,7 +391,7 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
e.stopPropagation();
}}
>
{name}
{name} ({group.tasks.length})
</Typography.Text>
</Tooltip>
)}
@@ -480,28 +468,36 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
<SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
{group.tasks.map((task, index) => (
<React.Fragment key={task.id}>
{/* Show drop indicator before task if this is the target position */}
{shouldShowDropIndicators && overId === task.id && (
<div className="drop-preview-indicator">
<div className="drop-line"></div>
</div>
{/* Drop indicator before the card if this is the drop target */}
{overId === task.id && (
<div
style={{
height: 20,
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
borderRadius: 4,
margin: '4px 0',
transition: 'background 0.2s',
}}
/>
)}
<EnhancedKanbanTaskCard
task={task}
sectionId={group.id}
isActive={task.id === activeTaskId}
isDropTarget={overId === task.id}
/>
{/* Show drop indicator after last task if dropping at the end */}
{shouldShowDropIndicators &&
index === group.tasks.length - 1 &&
overId === group.id && (
<div className="drop-preview-indicator">
<div className="drop-line"></div>
</div>
)}
{/* Drop indicator at the end if dropping at the end of the group */}
{index === group.tasks.length - 1 && overId === group.id && (
<div
style={{
height: 12,
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
borderRadius: 4,
margin: '8px 0',
transition: 'background 0.2s',
}}
/>
)}
</React.Fragment>
))}
</SortableContext>

37
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
View File

@@ -20,7 +20,7 @@ import { ForkOutlined } from '@ant-design/icons';
import { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
import { fetchBoardSubTasks } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { fetchBoardSubTasks, toggleTaskExpansion } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { Divider } from 'antd';
import { List } from 'antd';
import { Skeleton } from 'antd';
@@ -28,6 +28,7 @@ import { PlusOutlined } from '@ant-design/icons';
import BoardSubTaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-sub-task-card';
import BoardCreateSubtaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card';
import { useTranslation } from 'react-i18next';
import EnhancedKanbanCreateSubtaskCard from './EnhancedKanbanCreateSubtaskCard';
interface EnhancedKanbanTaskCardProps {
task: IProjectTask;
@@ -58,7 +59,7 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
const [dueDate, setDueDate] = useState<Dayjs | null>(
task?.end_date ? dayjs(task?.end_date) : null
);
const [isSubTaskShow, setIsSubTaskShow] = useState(false);
const projectId = useAppSelector(state => state.projectReducer.projectId);
const {
attributes,
@@ -115,13 +116,17 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
const handleSubTaskExpand = useCallback(() => {
if (task && task.id && projectId) {
if (task.show_sub_tasks) {
// Check if subtasks are already loaded and we have subtask data
if (task.sub_tasks && task.sub_tasks.length > 0 && task.sub_tasks_count > 0) {
// If subtasks are already loaded, just toggle visibility
setIsSubTaskShow(prev => !prev);
} else {
// If subtasks need to be fetched, show the section first with loading state
setIsSubTaskShow(true);
dispatch(toggleTaskExpansion(task.id));
} else if (task.sub_tasks_count > 0) {
// If we have a subtask count but no loaded subtasks, fetch them
dispatch(toggleTaskExpansion(task.id));
dispatch(fetchBoardSubTasks({ taskId: task.id, projectId }));
} else {
// If no subtasks exist, just toggle visibility (will show empty state)
dispatch(toggleTaskExpansion(task.id));
}
}
}, [task, projectId, dispatch]);
@@ -199,13 +204,13 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
>
<ForkOutlined rotate={90} />
<span>{task.sub_tasks_count}</span>
{isSubTaskShow ? <CaretDownFilled /> : <CaretRightFilled />}
{task.show_sub_tasks ? <CaretDownFilled /> : <CaretRightFilled />}
</Tag>
</Button>
</Flex>
</Flex>
<Flex vertical gap={8}>
{isSubTaskShow && (
{task.show_sub_tasks && (
<Flex vertical>
<Divider style={{ marginBlock: 0 }} />
<List>
@@ -215,13 +220,21 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
</List.Item>
)}
{!task.sub_tasks_loading && task?.sub_tasks &&
task?.sub_tasks.map((subtask: any) => (
{!task.sub_tasks_loading && task?.sub_tasks && task.sub_tasks.length > 0 &&
task.sub_tasks.map((subtask: any) => (
<BoardSubTaskCard key={subtask.id} subtask={subtask} sectionId={sectionId} />
))}
{!task.sub_tasks_loading && (!task?.sub_tasks || task.sub_tasks.length === 0) && task.sub_tasks_count === 0 && (
<List.Item>
<div style={{ padding: '8px 0', color: '#999', fontSize: '12px' }}>
{t('noSubtasks', 'No subtasks')}
</div>
</List.Item>
)}
{showNewSubtaskCard && (
<BoardCreateSubtaskCard
<EnhancedKanbanCreateSubtaskCard
sectionId={sectionId}
parentTaskId={task.id || ''}
setShowNewSubtaskCard={setShowNewSubtaskCard}

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

@@ -26,6 +26,7 @@ import { setTaskAssignee } from '@/features/task-drawer/task-drawer.slice';
import useTabSearchParam from '@/hooks/useTabSearchParam';
import { updateTaskAssignees as updateBoardTaskAssignees } from '@/features/board/board-slice';
import { updateTaskAssignees as updateTasksListTaskAssignees } from '@/features/tasks/tasks.slice';
import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
interface TaskDrawerAssigneeSelectorProps {
task: ITaskViewModel;
}
@@ -88,12 +89,12 @@ const TaskDrawerAssigneeSelector = ({ task }: TaskDrawerAssigneeSelectorProps) =
SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(),
(data: ITaskAssigneesUpdateResponse) => {
dispatch(setTaskAssignee(data));
// if (tab === 'tasks-list') {
// dispatch(updateTasksListTaskAssignees(data));
// }
// if (tab === 'board') {
// dispatch(updateBoardTaskAssignees(data));
// }
if (tab === 'tasks-list') {
dispatch(updateTasksListTaskAssignees(data));
}
if (tab === 'board') {
dispatch(updateEnhancedKanbanTaskAssignees(data));
}
}
);
} catch (error) {

11
worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-due-date/task-drawer-due-date.tsx
View File

@@ -14,6 +14,8 @@ import { ITaskViewModel } from '@/types/tasks/task.types';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { setStartDate, setTaskEndDate } from '@/features/task-drawer/task-drawer.slice';
import { updateEnhancedKanbanTaskStartDate, updateEnhancedKanbanTaskEndDate } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import useTabSearchParam from '@/hooks/useTabSearchParam';
interface TaskDrawerDueDateProps {
task: ITaskViewModel;
t: TFunction;
@@ -24,6 +26,7 @@ const TaskDrawerDueDate = ({ task, t, form }: TaskDrawerDueDateProps) => {
const { socket } = useSocket();
const [isShowStartDate, setIsShowStartDate] = useState(false);
const dispatch = useAppDispatch();
const { tab } = useTabSearchParam();
// Date handling
const startDayjs = task?.start_date ? dayjs(task.start_date) : null;
const dueDayjs = task?.end_date ? dayjs(task.end_date) : null;
@@ -63,6 +66,10 @@ const TaskDrawerDueDate = ({ task, t, form }: TaskDrawerDueDateProps) => {
(data: IProjectTask) => {
dispatch(setStartDate(data));
// Also update enhanced kanban if on board tab
if (tab === 'board') {
dispatch(updateEnhancedKanbanTaskStartDate({ task: data }));
}
}
);
} catch (error) {
@@ -88,6 +95,10 @@ const TaskDrawerDueDate = ({ task, t, form }: TaskDrawerDueDateProps) => {
(data: IProjectTask) => {
dispatch(setTaskEndDate(data));
// Also update enhanced kanban if on board tab
if (tab === 'board') {
dispatch(updateEnhancedKanbanTaskEndDate({ task: data }));
}
}
);
} catch (error) {

9
worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-labels/task-drawer-labels.tsx
View File

@@ -28,6 +28,7 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
import { setTaskLabels } from '@/features/task-drawer/task-drawer.slice';
import { setLabels, updateTaskLabel } from '@/features/tasks/tasks.slice';
import { setBoardLabels, updateBoardTaskLabel } from '@/features/board/board-slice';
import { updateEnhancedKanbanTaskLabels } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { ILabelsChangeResponse } from '@/types/tasks/taskList.types';
import { ITaskLabelFilter } from '@/types/tasks/taskLabel.types';
@@ -65,7 +66,7 @@ const TaskDrawerLabels = ({ task, t }: TaskDrawerLabelsProps) => {
dispatch(updateTaskLabel(data));
}
if (tab === 'board') {
dispatch(updateBoardTaskLabel(data));
dispatch(updateEnhancedKanbanTaskLabels(data));
}
}
);
@@ -90,9 +91,9 @@ const TaskDrawerLabels = ({ task, t }: TaskDrawerLabelsProps) => {
if (tab === 'tasks-list') {
dispatch(updateTaskLabel(data));
}
if (tab === 'board') {
dispatch(updateBoardTaskLabel(data));
}
if (tab === 'board') {
dispatch(updateEnhancedKanbanTaskLabels(data));
}
}
);
};

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

@@ -15,6 +15,7 @@ import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priorit
import { setTaskPriority } from '@/features/task-drawer/task-drawer.slice';
import { updateTaskPriority as updateBoardTaskPriority } from '@/features/board/board-slice';
import { updateTaskPriority as updateTasksListTaskPriority } from '@/features/tasks/tasks.slice';
import { updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
type PriorityDropdownProps = {
task: ITaskViewModel;
@@ -48,7 +49,7 @@ const PriorityDropdown = ({ task }: PriorityDropdownProps) => {
dispatch(updateTasksListTaskPriority(data));
}
if (tab === 'board') {
dispatch(updateBoardTaskPriority(data));
dispatch(updateEnhancedKanbanTaskPriority(data));
}
}
);

32
worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-progress/task-drawer-progress.tsx
View File

@@ -14,6 +14,7 @@ import { setTaskStatus } from '@/features/task-drawer/task-drawer.slice';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { updateBoardTaskStatus } from '@/features/board/board-slice';
import { updateTaskProgress, updateTaskStatus } from '@/features/tasks/tasks.slice';
import { updateEnhancedKanbanTaskStatus, updateEnhancedKanbanTaskProgress } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import useTabSearchParam from '@/hooks/useTabSearchParam';
interface TaskDrawerProgressProps {
@@ -102,14 +103,27 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
);
socket?.once(SocketEvents.GET_TASK_PROGRESS.toString(), (data: any) => {
dispatch(
updateTaskProgress({
taskId: task.id,
progress: data.complete_ratio,
totalTasksCount: data.total_tasks_count,
completedCount: data.completed_count,
})
);
if (tab === 'tasks-list') {
dispatch(
updateTaskProgress({
taskId: task.id,
progress: data.complete_ratio,
totalTasksCount: data.total_tasks_count,
completedCount: data.completed_count,
})
);
}
if (tab === 'board') {
dispatch(
updateEnhancedKanbanTaskProgress({
id: task.id,
complete_ratio: data.complete_ratio,
completed_count: data.completed_count,
total_tasks_count: data.total_tasks_count,
parent_task: task.parent_task_id || null,
})
);
}
});
if (task.id) {
@@ -185,7 +199,7 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
dispatch(updateTaskStatus(data));
}
if (tab === 'board') {
dispatch(updateBoardTaskStatus(data));
dispatch(updateEnhancedKanbanTaskStatus(data));
}
if (data.parent_task)
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), data.parent_task);

7
worklenz-frontend/src/components/task-drawer/shared/info-tab/subtask-table.tsx
View File

@@ -92,6 +92,9 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
if (task.parent_task_id) {
refreshSubTasks();
dispatch(updateSubtask({ sectionId: '', subtask: task, mode: 'add' }));
// Note: Enhanced kanban updates are now handled by the global socket handler
// No need to dispatch here as it will be handled by useTaskSocketHandlers
}
});
} catch (error) {
@@ -109,6 +112,10 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
try {
await tasksApiService.deleteTask(taskId);
dispatch(updateSubtask({ sectionId: '', subtask: { id: taskId, parent_task_id: selectedTaskId || '' }, mode: 'delete' }));
// Note: Enhanced kanban updates are now handled by the global socket handler
// No need to dispatch here as it will be handled by useTaskSocketHandlers
refreshSubTasks();
} catch (error) {
logger.error('Error deleting subtask:', error);

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

@@ -16,6 +16,9 @@ import { SocketEvents } from '@/shared/socket-events';
import useTaskDrawerUrlSync from '@/hooks/useTaskDrawerUrlSync';
import { deleteTask } from '@/features/tasks/tasks.slice';
import { deleteBoardTask, updateTaskName } from '@/features/board/board-slice';
import { updateEnhancedKanbanTaskName } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import useTabSearchParam from '@/hooks/useTabSearchParam';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
type TaskDrawerHeaderProps = {
inputRef: React.RefObject<InputRef | null>;
@@ -26,6 +29,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
const dispatch = useAppDispatch();
const { socket, connected } = useSocket();
const { clearTaskFromUrl } = useTaskDrawerUrlSync();
const { tab } = useTabSearchParam();
const isDeleting = useRef(false);
const [isEditing, setIsEditing] = useState(false);
@@ -84,7 +88,13 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
const handleReceivedTaskNameChange = (data: { id: string; parent_task: string; name: string }) => {
if (data.id === selectedTaskId) {
dispatch(updateTaskName({ task: data }));
const taskData = { ...data, manual_progress: false } as IProjectTask;
dispatch(updateTaskName({ task: taskData }));
// Also update enhanced kanban if on board tab
if (tab === 'board') {
dispatch(updateEnhancedKanbanTaskName({ task: taskData }));
}
}
};
@@ -152,7 +162,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
<TaskDrawerStatusDropdown
statuses={taskFormViewModel?.statuses ?? []}
task={taskFormViewModel?.task ?? {}}
task={taskFormViewModel?.task ?? {} as ITaskViewModel}
teamId={currentSession?.team_id ?? ''}
/>

8
worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
import React, { useMemo, useCallback, useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import {
Button,
@@ -13,17 +13,11 @@ import {
import {
DeleteOutlined,
CloseOutlined,
MoreOutlined,
RetweetOutlined,
UserAddOutlined,
InboxOutlined,
TagsOutlined,
UsergroupAddOutlined,
CheckOutlined,
EditOutlined,
CopyOutlined,
ExportOutlined,
CalendarOutlined,
FlagOutlined,
BulbOutlined
} from '@ant-design/icons';

2
worklenz-frontend/src/components/task-management/task-list-board.tsx
View File

@@ -1284,4 +1284,4 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
);
};
export default TaskListBoard;
export default TaskListBoard;

170
worklenz-frontend/src/components/task-management/virtualized-task-list.tsx
View File

@@ -1,10 +1,12 @@
import React, { useMemo, useCallback, useEffect, useRef } from 'react';
import { FixedSizeList as List } from 'react-window';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Empty } from 'antd';
import { Empty, Button } from 'antd';
import { RightOutlined, DownOutlined } from '@ant-design/icons';
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
import { toggleGroupCollapsed } from '@/features/task-management/grouping.slice';
import { Task } from '@/types/task-management.types';
import TaskRow from './task-row';
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
@@ -35,6 +37,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
width,
tasksById
}) => {
const dispatch = useDispatch();
const { t } = useTranslation('task-management');
// Get theme from Redux store
@@ -43,6 +46,10 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
// Get field visibility from taskListFields slice
const taskListFields = useSelector((state: RootState) => state.taskManagementFields) as TaskListField[];
// Get group collapse state from Redux
const groupStates = useSelector((state: RootState) => state.grouping.groupStates);
const isCollapsed = groupStates[group.id]?.collapsed || false;
// PERFORMANCE OPTIMIZATION: Improved virtualization for better user experience
const VIRTUALIZATION_THRESHOLD = 25; // Increased threshold - virtualize when there are more tasks
const TASK_ROW_HEIGHT = 40;
@@ -52,7 +59,12 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
// PERFORMANCE OPTIMIZATION: Batch rendering to prevent long tasks
const RENDER_BATCH_SIZE = 5; // Render max 5 tasks per frame
const FRAME_BUDGET_MS = 8; // Leave 8ms per frame for other operations
const FRAME_BUDGET_MS = 8;
// Handle collapse/expand toggle
const handleToggleCollapse = useCallback(() => {
dispatch(toggleGroupCollapsed(group.id));
}, [dispatch, group.id]);
// PERFORMANCE OPTIMIZATION: Add early return for empty groups
if (!group || !group.taskIds || group.taskIds.length === 0) {
@@ -84,6 +96,22 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
// No margin - header should overlap the sticky border
}}
>
<Button
type="text"
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
onClick={handleToggleCollapse}
className="task-group-collapse-button"
style={{
color: 'white',
border: 'none',
background: 'transparent',
padding: '4px',
marginRight: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
/>
<span className="task-group-header-text">
{group?.title || 'Empty Group'} (0)
</span>
@@ -92,7 +120,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
</div>
{/* Column Headers */}
<div className="task-group-column-headers" style={{
<div style={{
marginLeft: '4px', // Account for sticky border
height: COLUMN_HEADER_HEIGHT,
background: 'var(--task-bg-secondary, #f5f5f5)',
@@ -141,35 +169,22 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
);
}
// PERFORMANCE OPTIMIZATION: Get tasks for this group using direct lookup (no mapping/filtering)
// Get tasks for this group using memoization for performance
const groupTasks = useMemo(() => {
// PERFORMANCE OPTIMIZATION: Use for loop instead of map for better performance
const tasks: Task[] = [];
for (let i = 0; i < group.taskIds.length; i++) {
const task = tasksById[group.taskIds[i]];
if (task) {
tasks.push(task);
}
}
return tasks;
return group.taskIds
.map((taskId: string) => tasksById[taskId])
.filter((task: Task | undefined): task is Task => task !== undefined);
}, [group.taskIds, tasksById]);
// PERFORMANCE OPTIMIZATION: Only calculate selection state when needed
// Calculate selection state for the group checkbox
const selectionState = useMemo(() => {
if (groupTasks.length === 0) {
return { isAllSelected: false, isIndeterminate: false };
}
// PERFORMANCE OPTIMIZATION: Use for loop instead of filter for better performance
let selectedCount = 0;
for (let i = 0; i < groupTasks.length; i++) {
if (selectedTaskIds.includes(groupTasks[i].id)) {
selectedCount++;
}
}
const isAllSelected = selectedCount === groupTasks.length;
const isIndeterminate = selectedCount > 0 && selectedCount < groupTasks.length;
const selectedTasksInGroup = groupTasks.filter((task: Task) => selectedTaskIds.includes(task.id));
const isAllSelected = selectedTasksInGroup.length === groupTasks.length;
const isIndeterminate = selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < groupTasks.length;
return { isAllSelected, isIndeterminate };
}, [groupTasks, selectedTaskIds]);
@@ -339,6 +354,69 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
};
}, [handleScroll]);
// If group is collapsed, show only header
if (isCollapsed) {
return (
<div className="virtualized-task-list collapsed" style={{ height: HEADER_HEIGHT, position: 'relative' }}>
{/* Sticky Group Color Border */}
<div
className="sticky-group-border"
style={{
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
width: '4px',
backgroundColor: group.color || '#f0f0f0',
zIndex: 15,
pointerEvents: 'none',
}}
/>
{/* Group Header */}
<div className="task-group-header" style={{ height: HEADER_HEIGHT }}>
<div className="task-group-header-row">
<div
className="task-group-header-content"
style={{
backgroundColor: group.color || '#f0f0f0',
// No margin - header should overlap the sticky border
}}
>
<Button
type="text"
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
onClick={handleToggleCollapse}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleToggleCollapse();
}
}}
className="task-group-collapse-button"
aria-label={isCollapsed ? 'Expand group' : 'Collapse group'}
title={isCollapsed ? 'Click to expand group' : 'Click to collapse group'}
style={{
color: 'white',
border: 'none',
background: 'transparent',
padding: '4px',
marginRight: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
/>
<span className="task-group-header-text">
{group.title} ({groupTasks.length})
</span>
</div>
</div>
</div>
</div>
);
}
return (
<div className="virtualized-task-list" style={{ height: groupHeight, position: 'relative' }}>
{/* Sticky Group Color Border */}
@@ -366,6 +444,30 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
// No margin - header should overlap the sticky border
}}
>
<Button
type="text"
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
onClick={handleToggleCollapse}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleToggleCollapse();
}
}}
className="task-group-collapse-button"
aria-label={isCollapsed ? 'Expand group' : 'Collapse group'}
title={isCollapsed ? 'Click to expand group' : 'Click to collapse group'}
style={{
color: 'white',
border: 'none',
background: 'transparent',
padding: '4px',
marginRight: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
/>
<span className="task-group-header-text">
{group.title} ({groupTasks.length})
</span>
@@ -586,6 +688,24 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
font-weight: 600 !important;
margin: 0 !important;
}
/* Collapse button styles */
.task-group-collapse-button {
transition: all 0.2s ease;
border-radius: 4px;
min-width: 24px;
height: 24px;
}
.task-group-collapse-button:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
transform: scale(1.05);
}
.task-group-collapse-button:active {
transform: scale(0.95);
}
.task-group-collapse-button .anticon {
font-size: 12px;
transition: transform 0.2s ease;
}
/* Column headers styles */
.task-table-header-cell {
background: var(--task-bg-secondary, #f5f5f5);