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

refactor(tasks): improve code readability and formatting in tasks-controller-v2

Browse Source 
- Refactored import statements for better organization and clarity.
- Enhanced formatting of methods and conditionals for improved readability.
- Updated task filtering methods to maintain consistent formatting and style.
- Added performance logging for deprecated methods to assist in monitoring usage.
- Cleaned up unnecessary comments and improved inline documentation for better understanding.
This commit is contained in:
chamikaJ
2025-07-22 17:12:06 +05:30
parent 354b9422ed
commit 33aace71c8
5 changed files with 746 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

577
worklenz-backend/src/controllers/tasks-controller-v2.ts
View File

File diff suppressed because it is too large Load Diff

1
worklenz-frontend/src/components/task-list-v2/GroupProgressBar.tsx
View File

@@ -16,6 +16,7 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
groupType
}) => {
const { t } = useTranslation('task-management');
console.log(todoProgress, doingProgress, doneProgress);
// Only show for priority and phase grouping
if (groupType !== 'priority' && groupType !== 'phase') {

165
worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
View File

@@ -1,15 +1,29 @@
import React, { useMemo, useCallback, useState } from 'react';
import { useDroppable } from '@dnd-kit/core';
// @ts-ignore: Heroicons module types
import { ChevronDownIcon, ChevronRightIcon, EllipsisHorizontalIcon, PencilIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
import {
ChevronDownIcon,
ChevronRightIcon,
EllipsisHorizontalIcon,
PencilIcon,
ArrowPathIcon,
} from '@heroicons/react/24/outline';
import { Checkbox, Dropdown, Menu, Input, Modal, Badge, Flex } from 'antd';
import GroupProgressBar from './GroupProgressBar';
import { useTranslation } from 'react-i18next';
import { getContrastColor } from '@/utils/colorUtils';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { selectSelectedTaskIds, selectTask, deselectTask } from '@/features/task-management/selection.slice';
import { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice';
import {
selectSelectedTaskIds,
selectTask,
deselectTask,
} from '@/features/task-management/selection.slice';
import {
selectGroups,
fetchTasksV3,
selectAllTasksArray,
} from '@/features/task-management/task-management.slice';
import { selectCurrentGrouping } from '@/features/task-management/grouping.slice';
import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
@@ -38,7 +52,12 @@ interface TaskGroupHeaderProps {
projectId: string;
}
const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, onToggle, projectId }) => {
const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
group,
isCollapsed,
onToggle,
projectId,
}) => {
const { t } = useTranslation('task-management');
const dispatch = useAppDispatch();
const selectedTaskIds = useAppSelector(selectSelectedTaskIds);
@@ -85,7 +104,8 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// If we're grouping by status, show progress based on task completion
if (currentGrouping === 'status') {
// For status grouping, calculate based on task progress values
const progressStats = tasksInCurrentGroup.reduce((acc, task) => {
const progressStats = tasksInCurrentGroup.reduce(
(acc, task) => {
const progress = task.progress || 0;
if (progress === 0) {
acc.todo += 1;
@@ -95,43 +115,68 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
acc.doing += 1;
}
return acc;
}, { todo: 0, doing: 0, done: 0 });
},
{ todo: 0, doing: 0, done: 0 }
);
const totalTasks = tasksInCurrentGroup.length;
return {
todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0,
doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0,
doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0,
todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
doingProgress:
totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) || 0 : 0,
doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) || 0 : 0,
};
} else {
// For priority/phase grouping, show progress based on status distribution
// Use a simplified approach based on status names and common patterns
const statusCounts = tasksInCurrentGroup.reduce((acc, task) => {
const statusCounts = tasksInCurrentGroup.reduce(
(acc, task) => {
// Find the status by ID first
const statusInfo = statusList.find(s => s.id === task.status);
const statusName = statusInfo?.name?.toLowerCase() || task.status?.toLowerCase() || '';
// Categorize based on common status name patterns
if (statusName.includes('todo') || statusName.includes('to do') || statusName.includes('pending') || statusName.includes('open') || statusName.includes('backlog')) {
if (
statusName.includes('todo') ||
statusName.includes('to do') ||
statusName.includes('pending') ||
statusName.includes('open') ||
statusName.includes('backlog')
) {
acc.todo += 1;
} else if (statusName.includes('doing') || statusName.includes('progress') || statusName.includes('active') || statusName.includes('working') || statusName.includes('development')) {
} else if (
statusName.includes('doing') ||
statusName.includes('progress') ||
statusName.includes('active') ||
statusName.includes('working') ||
statusName.includes('development')
) {
acc.doing += 1;
} else if (statusName.includes('done') || statusName.includes('completed') || statusName.includes('finished') || statusName.includes('closed') || statusName.includes('resolved')) {
} else if (
statusName.includes('done') ||
statusName.includes('completed') ||
statusName.includes('finished') ||
statusName.includes('closed') ||
statusName.includes('resolved')
) {
acc.done += 1;
} else {
// Default unknown statuses to "doing" (in progress)
acc.doing += 1;
}
return acc;
}, { todo: 0, doing: 0, done: 0 });
},
{ todo: 0, doing: 0, done: 0 }
);
const totalTasks = tasksInCurrentGroup.length;
return {
todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) : 0,
doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0,
doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0,
todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
doingProgress:
totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) || 0 : 0,
doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) || 0 : 0,
};
}
}, [currentGroup, allTasks, statusList, currentGrouping]);
@@ -144,13 +189,15 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
const selectedTasksInGroup = tasksInGroup.filter(taskId => selectedTaskIds.includes(taskId));
const allSelected = selectedTasksInGroup.length === tasksInGroup.length;
const partiallySelected = selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
const partiallySelected =
selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
return { isAllSelected: allSelected, isPartiallySelected: partiallySelected };
}, [tasksInGroup, selectedTaskIds]);
// Handle select all checkbox change
const handleSelectAllChange = useCallback((e: any) => {
const handleSelectAllChange = useCallback(
(e: any) => {
e.stopPropagation();
if (isAllSelected) {
@@ -164,7 +211,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
dispatch(selectTask(taskId));
});
}
}, [dispatch, isAllSelected, tasksInGroup]);
},
[dispatch, isAllSelected, tasksInGroup]
);
// Handle inline name editing
const handleNameSave = useCallback(async () => {
@@ -188,7 +237,6 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
await statusApiService.updateNameOfStatus(statusId, body, projectId);
trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Status' });
dispatch(fetchStatuses(projectId));
} else if (currentGrouping === 'phase') {
// Extract phase ID from group ID (format: "phase-{phaseId}")
const phaseId = group.id.replace('phase-', '');
@@ -201,7 +249,6 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// Refresh task list to get updated group names
dispatch(fetchTasksV3(projectId));
} catch (error) {
logger.error('Error renaming group:', error);
setEditingName(group.name);
@@ -209,16 +256,29 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
setIsEditingName(false);
setIsRenaming(false);
}
}, [editingName, group.name, group.id, currentGrouping, projectId, dispatch, trackMixpanelEvent, isRenaming]);
}, [
editingName,
group.name,
group.id,
currentGrouping,
projectId,
dispatch,
trackMixpanelEvent,
isRenaming,
]);
const handleNameClick = useCallback((e: React.MouseEvent) => {
const handleNameClick = useCallback(
(e: React.MouseEvent) => {
e.stopPropagation();
if (!isOwnerOrAdmin) return;
setIsEditingName(true);
setEditingName(group.name);
}, [group.name, isOwnerOrAdmin]);
},
[group.name, isOwnerOrAdmin]
);
const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
const handleNameKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleNameSave();
} else if (e.key === 'Escape') {
@@ -226,7 +286,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
setEditingName(group.name);
}
e.stopPropagation();
}, [group.name, handleNameSave]);
},
[group.name, handleNameSave]
);
const handleNameBlur = useCallback(() => {
handleNameSave();
@@ -239,10 +301,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
setEditingName(group.name);
}, [group.name]);
// Handle category change
const handleCategoryChange = useCallback(async (categoryId: string, e?: React.MouseEvent) => {
const handleCategoryChange = useCallback(
async (categoryId: string, e?: React.MouseEvent) => {
e?.stopPropagation();
if (isChangingCategory) return;
@@ -257,13 +318,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// Refresh status list and tasks
dispatch(fetchStatuses(projectId));
dispatch(fetchTasksV3(projectId));
} catch (error) {
logger.error('Error changing category:', error);
} finally {
setIsChangingCategory(false);
}
}, [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]);
},
[group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]
);
// Create dropdown menu items
const menuItems = useMemo(() => {
@@ -273,7 +335,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
{
key: 'rename',
icon: <PencilIcon className="h-4 w-4" />,
label: currentGrouping === 'status' ? t('renameStatus') : currentGrouping === 'phase' ? t('renamePhase') : t('renameGroup'),
label:
currentGrouping === 'status'
? t('renameStatus')
: currentGrouping === 'phase'
? t('renamePhase')
: t('renameGroup'),
onClick: (e: any) => {
e?.domEvent?.stopPropagation();
handleRenameGroup();
@@ -283,7 +350,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// Only show "Change Category" when grouped by status
if (currentGrouping === 'status') {
const categorySubMenuItems = statusCategories.map((category) => ({
const categorySubMenuItems = statusCategories.map(category => ({
key: `category-${category.id}`,
label: (
<div className="flex items-center gap-2">
@@ -306,7 +373,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
}
return items;
}, [currentGrouping, handleRenameGroup, handleCategoryChange, isOwnerOrAdmin, statusCategories, t]);
}, [
currentGrouping,
handleRenameGroup,
handleCategoryChange,
isOwnerOrAdmin,
statusCategories,
t,
]);
// Make the group header droppable
const { isOver, setNodeRef } = useDroppable({
@@ -332,7 +406,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
zIndex: 25, // Higher than task rows but lower than column headers (z-30)
height: '36px',
minHeight: '36px',
maxHeight: '36px'
maxHeight: '36px',
}}
onClick={onToggle}
>
@@ -342,7 +416,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
<button
className="p-0 rounded-sm hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out"
style={{ backgroundColor: 'transparent', color: headerTextColor }}
onClick={(e) => {
onClick={e => {
e.stopPropagation();
onToggle();
}}
@@ -351,7 +425,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
className="transition-transform duration-300 ease-out"
style={{
transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
transformOrigin: 'center'
transformOrigin: 'center',
}}
>
<ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} />
@@ -365,7 +439,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
checked={isAllSelected}
indeterminate={isPartiallySelected}
onChange={handleSelectAllChange}
onClick={(e) => e.stopPropagation()}
onClick={e => e.stopPropagation()}
style={{
color: headerTextColor,
}}
@@ -379,7 +453,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
{isEditingName ? (
<Input
value={editingName}
onChange={(e) => setEditingName(e.target.value)}
onChange={e => setEditingName(e.target.value)}
onKeyDown={handleNameKeyDown}
onBlur={handleNameBlur}
autoFocus
@@ -390,9 +464,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
minWidth: '100px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: headerTextColor,
border: '1px solid rgba(255, 255, 255, 0.3)'
border: '1px solid rgba(255, 255, 255, 0.3)',
}}
onClick={(e) => e.stopPropagation()}
onClick={e => e.stopPropagation()}
/>
) : (
<span
@@ -423,7 +497,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
<button
className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
style={{ color: headerTextColor }}
onClick={(e) => {
onClick={e => {
e.stopPropagation();
setDropdownVisible(!dropdownVisible);
}}
@@ -433,12 +507,11 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
</Dropdown>
</div>
)}
</div>
{/* Progress Bar - sticky to the right edge during horizontal scroll */}
{(currentGrouping === 'priority' || currentGrouping === 'phase') &&
(groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && (
!(groupProgressValues.todoProgress === 0 && groupProgressValues.doingProgress === 0 && groupProgressValues.doneProgress === 0) && (
<div
className="flex items-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm px-3 py-1.5 ml-auto"
style={{
@@ -446,7 +519,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
right: '16px',
zIndex: 35, // Higher than header
minWidth: '160px',
height: '30px'
height: '30px',
}}
>
<GroupProgressBar

29
worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
View File

@@ -89,14 +89,29 @@ const EmptyGroupDropZone: React.FC<{
className={`relative w-full transition-colors duration-200 ${
isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
}`}
style={{ minHeight: 80 }}
>
<div className="flex items-center min-w-max px-1 py-2">
<div className="flex items-center min-w-max px-1" style={{ height: '40px' }}>
{visibleColumns.map((column, index) => {
const emptyColumnStyle = {
width: column.width,
flexShrink: 0,
};
// Show text in the title column
if (column.id === 'title') {
return (
<div
key={`empty-${column.id}`}
className="flex items-center pl-1"
style={emptyColumnStyle}
>
<span className="text-sm text-gray-500 dark:text-gray-400">
No tasks in this group
</span>
</div>
);
}
return (
<div
key={`empty-${column.id}`}
@@ -106,13 +121,6 @@ const EmptyGroupDropZone: React.FC<{
);
})}
</div>
{/* Left-aligned visually appealing empty state */}
<div className="pl-4 flex items-center">
<EmptyListPlaceholder
textKey="noTasksInGroup"
imageHeight={48}
/>
</div>
{isOver && active && (
<div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
)}
@@ -699,9 +707,6 @@ const TaskListV2Section: React.FC = () => {
startIndex: 0
};
const unmappedVirtuosoGroups = [unmappedGroup];
return (
<DndContext
sensors={sensors}

4
worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx
View File

@@ -125,9 +125,9 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
case 'title':
return (
<div className="flex items-center h-full border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<div className="flex items-center h-full" style={baseStyle}>
<div className="flex items-center w-full h-full">
<div className="w-4 mr-1" />
<div className="w-1 mr-1" />
{!isAdding ? (
<button