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

635
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 groupType
}) => { }) => {
const { t } = useTranslation('task-management'); const { t } = useTranslation('task-management');
console.log(todoProgress, doingProgress, doneProgress);
// Only show for priority and phase grouping // Only show for priority and phase grouping
if (groupType !== 'priority' && groupType !== 'phase') { if (groupType !== 'priority' && groupType !== 'phase') {

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

@@ -1,15 +1,29 @@
import React, { useMemo, useCallback, useState } from 'react'; import React, { useMemo, useCallback, useState } from 'react';
import { useDroppable } from '@dnd-kit/core'; import { useDroppable } from '@dnd-kit/core';
// @ts-ignore: Heroicons module types // @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 { Checkbox, Dropdown, Menu, Input, Modal, Badge, Flex } from 'antd';
import GroupProgressBar from './GroupProgressBar'; import GroupProgressBar from './GroupProgressBar';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getContrastColor } from '@/utils/colorUtils'; import { getContrastColor } from '@/utils/colorUtils';
import { useAppSelector } from '@/hooks/useAppSelector'; import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch'; import { useAppDispatch } from '@/hooks/useAppDispatch';
import { selectSelectedTaskIds, selectTask, deselectTask } from '@/features/task-management/selection.slice'; import {
import { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice'; 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 { selectCurrentGrouping } from '@/features/task-management/grouping.slice';
import { statusApiService } from '@/api/taskAttributes/status/status.api.service'; import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service'; import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
@@ -38,7 +52,12 @@ interface TaskGroupHeaderProps {
projectId: string; 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 { t } = useTranslation('task-management');
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selectedTaskIds = useAppSelector(selectSelectedTaskIds); const selectedTaskIds = useAppSelector(selectSelectedTaskIds);
@@ -48,14 +67,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
const { statusCategories, status: statusList } = useAppSelector(state => state.taskStatusReducer); const { statusCategories, status: statusList } = useAppSelector(state => state.taskStatusReducer);
const { trackMixpanelEvent } = useMixpanelTracking(); const { trackMixpanelEvent } = useMixpanelTracking();
const { isOwnerOrAdmin } = useAuthService(); const { isOwnerOrAdmin } = useAuthService();
const [dropdownVisible, setDropdownVisible] = useState(false); const [dropdownVisible, setDropdownVisible] = useState(false);
const [isRenaming, setIsRenaming] = useState(false); const [isRenaming, setIsRenaming] = useState(false);
const [isChangingCategory, setIsChangingCategory] = useState(false); const [isChangingCategory, setIsChangingCategory] = useState(false);
const [isEditingName, setIsEditingName] = useState(false); const [isEditingName, setIsEditingName] = useState(false);
const [editingName, setEditingName] = useState(group.name); const [editingName, setEditingName] = useState(group.name);
const headerBackgroundColor = group.color || '#F0F0F0'; // Default light gray if no color const headerBackgroundColor = group.color || '#F0F0F0'; // Default light gray if no color
const headerTextColor = getContrastColor(headerBackgroundColor); const headerTextColor = getContrastColor(headerBackgroundColor);
@@ -85,53 +104,79 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// If we're grouping by status, show progress based on task completion // If we're grouping by status, show progress based on task completion
if (currentGrouping === 'status') { if (currentGrouping === 'status') {
// For status grouping, calculate based on task progress values // For status grouping, calculate based on task progress values
const progressStats = tasksInCurrentGroup.reduce((acc, task) => { const progressStats = tasksInCurrentGroup.reduce(
const progress = task.progress || 0; (acc, task) => {
if (progress === 0) { const progress = task.progress || 0;
acc.todo += 1; if (progress === 0) {
} else if (progress === 100) { acc.todo += 1;
acc.done += 1; } else if (progress === 100) {
} else { acc.done += 1;
acc.doing += 1; } else {
} acc.doing += 1;
return acc; }
}, { todo: 0, doing: 0, done: 0 }); return acc;
},
{ todo: 0, doing: 0, done: 0 }
);
const totalTasks = tasksInCurrentGroup.length; const totalTasks = tasksInCurrentGroup.length;
return { return {
todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0, todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0, doingProgress:
doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0, totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) || 0 : 0,
doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) || 0 : 0,
}; };
} else { } else {
// For priority/phase grouping, show progress based on status distribution // For priority/phase grouping, show progress based on status distribution
// Use a simplified approach based on status names and common patterns // Use a simplified approach based on status names and common patterns
const statusCounts = tasksInCurrentGroup.reduce((acc, task) => { const statusCounts = tasksInCurrentGroup.reduce(
// Find the status by ID first (acc, task) => {
const statusInfo = statusList.find(s => s.id === task.status); // Find the status by ID first
const statusName = statusInfo?.name?.toLowerCase() || task.status?.toLowerCase() || ''; 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')) { // Categorize based on common status name patterns
acc.todo += 1; if (
} else if (statusName.includes('doing') || statusName.includes('progress') || statusName.includes('active') || statusName.includes('working') || statusName.includes('development')) { statusName.includes('todo') ||
acc.doing += 1; statusName.includes('to do') ||
} else if (statusName.includes('done') || statusName.includes('completed') || statusName.includes('finished') || statusName.includes('closed') || statusName.includes('resolved')) { statusName.includes('pending') ||
acc.done += 1; statusName.includes('open') ||
} else { statusName.includes('backlog')
// Default unknown statuses to "doing" (in progress) ) {
acc.doing += 1; acc.todo += 1;
} } else if (
return acc; statusName.includes('doing') ||
}, { todo: 0, doing: 0, done: 0 }); 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')
) {
acc.done += 1;
} else {
// Default unknown statuses to "doing" (in progress)
acc.doing += 1;
}
return acc;
},
{ todo: 0, doing: 0, done: 0 }
);
const totalTasks = tasksInCurrentGroup.length; const totalTasks = tasksInCurrentGroup.length;
return { return {
todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) : 0, todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0, doingProgress:
doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0, 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]); }, [currentGroup, allTasks, statusList, currentGrouping]);
@@ -141,30 +186,34 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
if (tasksInGroup.length === 0) { if (tasksInGroup.length === 0) {
return { isAllSelected: false, isPartiallySelected: false }; return { isAllSelected: false, isPartiallySelected: false };
} }
const selectedTasksInGroup = tasksInGroup.filter(taskId => selectedTaskIds.includes(taskId)); const selectedTasksInGroup = tasksInGroup.filter(taskId => selectedTaskIds.includes(taskId));
const allSelected = selectedTasksInGroup.length === tasksInGroup.length; 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 }; return { isAllSelected: allSelected, isPartiallySelected: partiallySelected };
}, [tasksInGroup, selectedTaskIds]); }, [tasksInGroup, selectedTaskIds]);
// Handle select all checkbox change // Handle select all checkbox change
const handleSelectAllChange = useCallback((e: any) => { const handleSelectAllChange = useCallback(
e.stopPropagation(); (e: any) => {
e.stopPropagation();
if (isAllSelected) {
// Deselect all tasks in this group if (isAllSelected) {
tasksInGroup.forEach(taskId => { // Deselect all tasks in this group
dispatch(deselectTask(taskId)); tasksInGroup.forEach(taskId => {
}); dispatch(deselectTask(taskId));
} else { });
// Select all tasks in this group } else {
tasksInGroup.forEach(taskId => { // Select all tasks in this group
dispatch(selectTask(taskId)); tasksInGroup.forEach(taskId => {
}); dispatch(selectTask(taskId));
} });
}, [dispatch, isAllSelected, tasksInGroup]); }
},
[dispatch, isAllSelected, tasksInGroup]
);
// Handle inline name editing // Handle inline name editing
const handleNameSave = useCallback(async () => { const handleNameSave = useCallback(async () => {
@@ -184,24 +233,22 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
name: editingName.trim(), name: editingName.trim(),
project_id: projectId, project_id: projectId,
}; };
await statusApiService.updateNameOfStatus(statusId, body, projectId); await statusApiService.updateNameOfStatus(statusId, body, projectId);
trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Status' }); trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Status' });
dispatch(fetchStatuses(projectId)); dispatch(fetchStatuses(projectId));
} else if (currentGrouping === 'phase') { } else if (currentGrouping === 'phase') {
// Extract phase ID from group ID (format: "phase-{phaseId}") // Extract phase ID from group ID (format: "phase-{phaseId}")
const phaseId = group.id.replace('phase-', ''); const phaseId = group.id.replace('phase-', '');
const body = { id: phaseId, name: editingName.trim() }; const body = { id: phaseId, name: editingName.trim() };
await phasesApiService.updateNameOfPhase(phaseId, body as ITaskPhase, projectId); await phasesApiService.updateNameOfPhase(phaseId, body as ITaskPhase, projectId);
trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' }); trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' });
dispatch(fetchPhasesByProjectId(projectId)); dispatch(fetchPhasesByProjectId(projectId));
} }
// Refresh task list to get updated group names // Refresh task list to get updated group names
dispatch(fetchTasksV3(projectId)); dispatch(fetchTasksV3(projectId));
} catch (error) { } catch (error) {
logger.error('Error renaming group:', error); logger.error('Error renaming group:', error);
setEditingName(group.name); setEditingName(group.name);
@@ -209,24 +256,39 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
setIsEditingName(false); setIsEditingName(false);
setIsRenaming(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.stopPropagation(); (e: React.MouseEvent) => {
if (!isOwnerOrAdmin) return; e.stopPropagation();
setIsEditingName(true); if (!isOwnerOrAdmin) return;
setEditingName(group.name); setIsEditingName(true);
}, [group.name, isOwnerOrAdmin]);
const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleNameSave();
} else if (e.key === 'Escape') {
setIsEditingName(false);
setEditingName(group.name); setEditingName(group.name);
} },
e.stopPropagation(); [group.name, isOwnerOrAdmin]
}, [group.name, handleNameSave]); );
const handleNameKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleNameSave();
} else if (e.key === 'Escape') {
setIsEditingName(false);
setEditingName(group.name);
}
e.stopPropagation();
},
[group.name, handleNameSave]
);
const handleNameBlur = useCallback(() => { const handleNameBlur = useCallback(() => {
handleNameSave(); handleNameSave();
@@ -239,31 +301,31 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
setEditingName(group.name); setEditingName(group.name);
}, [group.name]); }, [group.name]);
// Handle category change // Handle category change
const handleCategoryChange = useCallback(async (categoryId: string, e?: React.MouseEvent) => { const handleCategoryChange = useCallback(
e?.stopPropagation(); async (categoryId: string, e?: React.MouseEvent) => {
if (isChangingCategory) return; e?.stopPropagation();
if (isChangingCategory) return;
setIsChangingCategory(true); setIsChangingCategory(true);
try { try {
// Extract status ID from group ID (format: "status-{statusId}") // Extract status ID from group ID (format: "status-{statusId}")
const statusId = group.id.replace('status-', ''); const statusId = group.id.replace('status-', '');
await statusApiService.updateStatusCategory(statusId, categoryId, projectId); await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' }); trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
// Refresh status list and tasks // Refresh status list and tasks
dispatch(fetchStatuses(projectId)); dispatch(fetchStatuses(projectId));
dispatch(fetchTasksV3(projectId)); dispatch(fetchTasksV3(projectId));
} catch (error) {
} catch (error) { logger.error('Error changing category:', error);
logger.error('Error changing category:', error); } finally {
} finally { setIsChangingCategory(false);
setIsChangingCategory(false); }
} },
}, [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]); [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]
);
// Create dropdown menu items // Create dropdown menu items
const menuItems = useMemo(() => { const menuItems = useMemo(() => {
@@ -273,7 +335,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
{ {
key: 'rename', key: 'rename',
icon: <PencilIcon className="h-4 w-4" />, 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) => { onClick: (e: any) => {
e?.domEvent?.stopPropagation(); e?.domEvent?.stopPropagation();
handleRenameGroup(); handleRenameGroup();
@@ -283,7 +350,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
// Only show "Change Category" when grouped by status // Only show "Change Category" when grouped by status
if (currentGrouping === 'status') { if (currentGrouping === 'status') {
const categorySubMenuItems = statusCategories.map((category) => ({ const categorySubMenuItems = statusCategories.map(category => ({
key: `category-${category.id}`, key: `category-${category.id}`,
label: ( label: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -297,16 +364,23 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
}, },
})); }));
items.push({ items.push({
key: 'changeCategory', key: 'changeCategory',
icon: <ArrowPathIcon className="h-4 w-4" />, icon: <ArrowPathIcon className="h-4 w-4" />,
label: t('changeCategory'), label: t('changeCategory'),
children: categorySubMenuItems, children: categorySubMenuItems,
} as any); } as any);
} }
return items; return items;
}, [currentGrouping, handleRenameGroup, handleCategoryChange, isOwnerOrAdmin, statusCategories, t]); }, [
currentGrouping,
handleRenameGroup,
handleCategoryChange,
isOwnerOrAdmin,
statusCategories,
t,
]);
// Make the group header droppable // Make the group header droppable
const { isOver, setNodeRef } = useDroppable({ const { isOver, setNodeRef } = useDroppable({
@@ -317,7 +391,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
}, },
}); });
return ( return (
<div className="relative flex items-center"> <div className="relative flex items-center">
<div <div
ref={setNodeRef} ref={setNodeRef}
@@ -332,26 +406,26 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
zIndex: 25, // Higher than task rows but lower than column headers (z-30) zIndex: 25, // Higher than task rows but lower than column headers (z-30)
height: '36px', height: '36px',
minHeight: '36px', minHeight: '36px',
maxHeight: '36px' maxHeight: '36px',
}} }}
onClick={onToggle} onClick={onToggle}
> >
{/* Drag Handle Space - ultra minimal width */} {/* Drag Handle Space - ultra minimal width */}
<div style={{ width: '20px' }} className="flex items-center justify-center"> <div style={{ width: '20px' }} className="flex items-center justify-center">
{/* Chevron button */} {/* Chevron button */}
<button <button
className="p-0 rounded-sm hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out" className="p-0 rounded-sm hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out"
style={{ backgroundColor: 'transparent', color: headerTextColor }} style={{ backgroundColor: 'transparent', color: headerTextColor }}
onClick={(e) => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
onToggle(); onToggle();
}} }}
> >
<div <div
className="transition-transform duration-300 ease-out" className="transition-transform duration-300 ease-out"
style={{ style={{
transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)', transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
transformOrigin: 'center' transformOrigin: 'center',
}} }}
> >
<ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} /> <ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} />
@@ -365,100 +439,99 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
checked={isAllSelected} checked={isAllSelected}
indeterminate={isPartiallySelected} indeterminate={isPartiallySelected}
onChange={handleSelectAllChange} onChange={handleSelectAllChange}
onClick={(e) => e.stopPropagation()} onClick={e => e.stopPropagation()}
style={{ style={{
color: headerTextColor, color: headerTextColor,
}} }}
/> />
</div> </div>
{/* Group indicator and name - no gap at all */} {/* Group indicator and name - no gap at all */}
<div className="flex items-center flex-1 ml-1"> <div className="flex items-center flex-1 ml-1">
{/* Group name and count */} {/* Group name and count */}
<div className="flex items-center"> <div className="flex items-center">
{isEditingName ? ( {isEditingName ? (
<Input <Input
value={editingName} value={editingName}
onChange={(e) => setEditingName(e.target.value)} onChange={e => setEditingName(e.target.value)}
onKeyDown={handleNameKeyDown} onKeyDown={handleNameKeyDown}
onBlur={handleNameBlur} onBlur={handleNameBlur}
autoFocus autoFocus
size="small" size="small"
className="text-sm font-semibold" className="text-sm font-semibold"
style={{ style={{
width: 'auto', width: 'auto',
minWidth: '100px', minWidth: '100px',
backgroundColor: 'rgba(255, 255, 255, 0.1)', backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: headerTextColor, 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 <span
className="text-sm font-semibold pr-2 cursor-pointer hover:underline" className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
style={{ color: headerTextColor }} style={{ color: headerTextColor }}
onClick={handleNameClick} onClick={handleNameClick}
> >
{group.name} {group.name}
</span>
)}
<span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
({group.count})
</span> </span>
)} </div>
<span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
({group.count})
</span>
</div> </div>
{/* Three-dot menu - only show for status and phase grouping */}
{menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
<div className="flex items-center ml-2">
<Dropdown
menu={{ items: menuItems }}
trigger={['click']}
open={dropdownVisible}
onOpenChange={setDropdownVisible}
placement="bottomRight"
overlayStyle={{ zIndex: 1000 }}
>
<button
className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
style={{ color: headerTextColor }}
onClick={e => {
e.stopPropagation();
setDropdownVisible(!dropdownVisible);
}}
>
<EllipsisHorizontalIcon className="h-4 w-4" />
</button>
</Dropdown>
</div>
)}
</div> </div>
{/* Three-dot menu - only show for status and phase grouping */}
{menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
<div className="flex items-center ml-2">
<Dropdown
menu={{ items: menuItems }}
trigger={['click']}
open={dropdownVisible}
onOpenChange={setDropdownVisible}
placement="bottomRight"
overlayStyle={{ zIndex: 1000 }}
>
<button
className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
style={{ color: headerTextColor }}
onClick={(e) => {
e.stopPropagation();
setDropdownVisible(!dropdownVisible);
}}
>
<EllipsisHorizontalIcon className="h-4 w-4" />
</button>
</Dropdown>
</div>
)}
</div>
{/* Progress Bar - sticky to the right edge during horizontal scroll */} {/* Progress Bar - sticky to the right edge during horizontal scroll */}
{(currentGrouping === 'priority' || currentGrouping === 'phase') && {(currentGrouping === 'priority' || currentGrouping === 'phase') &&
(groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && ( !(groupProgressValues.todoProgress === 0 && groupProgressValues.doingProgress === 0 && groupProgressValues.doneProgress === 0) && (
<div <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" 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={{ style={{
position: 'sticky', position: 'sticky',
right: '16px', right: '16px',
zIndex: 35, // Higher than header zIndex: 35, // Higher than header
minWidth: '160px', minWidth: '160px',
height: '30px' height: '30px',
}} }}
> >
<GroupProgressBar <GroupProgressBar
todoProgress={groupProgressValues.todoProgress} todoProgress={groupProgressValues.todoProgress}
doingProgress={groupProgressValues.doingProgress} doingProgress={groupProgressValues.doingProgress}
doneProgress={groupProgressValues.doneProgress} doneProgress={groupProgressValues.doneProgress}
groupType={group.groupType || currentGrouping || ''} groupType={group.groupType || currentGrouping || ''}
/> />
</div> </div>
)} )}
</div> </div>
); );
}; };
export default TaskGroupHeader; export default TaskGroupHeader;

33
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 ${ className={`relative w-full transition-colors duration-200 ${
isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : '' 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) => { {visibleColumns.map((column, index) => {
const emptyColumnStyle = { const emptyColumnStyle = {
width: column.width, width: column.width,
flexShrink: 0, 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 ( return (
<div <div
key={`empty-${column.id}`} key={`empty-${column.id}`}
@@ -106,13 +121,6 @@ const EmptyGroupDropZone: React.FC<{
); );
})} })}
</div> </div>
{/* Left-aligned visually appealing empty state */}
<div className="pl-4 flex items-center">
<EmptyListPlaceholder
textKey="noTasksInGroup"
imageHeight={48}
/>
</div>
{isOver && active && ( {isOver && active && (
<div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" /> <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
)} )}
@@ -178,7 +186,7 @@ const TaskListV2Section: React.FC = () => {
const { socket, connected } = useSocket(); const { socket, connected } = useSocket();
const themeMode = useAppSelector(state => state.themeReducer.mode); const themeMode = useAppSelector(state => state.themeReducer.mode);
const isDarkMode = themeMode === 'dark'; const isDarkMode = themeMode === 'dark';
// Redux state selectors // Redux state selectors
const allTasks = useAppSelector(selectAllTasksArray); const allTasks = useAppSelector(selectAllTasksArray);
const groups = useAppSelector(selectGroups); const groups = useAppSelector(selectGroups);
@@ -698,10 +706,7 @@ const TaskListV2Section: React.FC = () => {
count: 1, // For the add task row count: 1, // For the add task row
startIndex: 0 startIndex: 0
}; };
const unmappedVirtuosoGroups = [unmappedGroup];
return ( return (
<DndContext <DndContext
sensors={sensors} 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} />; return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
case 'title': case 'title':
return ( 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="flex items-center w-full h-full">
<div className="w-4 mr-1" /> <div className="w-1 mr-1" />
{!isAdding ? ( {!isAdding ? (
<button <button