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

refactor(task-list): enhance styling and structure in TaskListV2 and TaskRow components

Browse Source 
- Consolidated import statements for better readability.
- Improved layout and styling consistency by adding border styles to various elements in TaskRow and AddTaskRow components.
- Updated TaskListV2Table to enhance the rendering logic and maintainability.
- Adjusted custom column handling and task estimation display for improved user experience.
This commit is contained in:
chamikaJ
2025-07-09 14:58:54 +05:30
parent 9cc19460bd
commit 399a01904a
5 changed files with 396 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,10 +62,7 @@ import ImprovedTaskFilters from '@/components/task-management/improved-task-filt
import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
import CustomColumnModal from '@/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal';
import AddTaskRow from './components/AddTaskRow';
import {
AddCustomColumnButton,
CustomColumnHeader,
} from './components/CustomColumnComponents';
import { AddCustomColumnButton, CustomColumnHeader } from './components/CustomColumnComponents';
// Hooks and utilities
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -126,7 +123,10 @@ const TaskListV2Section: React.FC = () => {
);
// Custom hooks
const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(allTasks, groups);
const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
allTasks,
groups
);
const bulkActions = useBulkActions();
// Enable real-time updates via socket handlers
@@ -156,7 +156,8 @@ const TaskListV2Section: React.FC = () => {
});
// Add visible custom columns
const visibleCustomColumns = customColumns
const visibleCustomColumns =
customColumns
?.filter(column => column.pinned)
?.map(column => {
// Give selection columns more width for dropdown content
@@ -182,7 +183,8 @@ const TaskListV2Section: React.FC = () => {
previewValue: customColumnObj.preview_value,
firstNumericColumn: customColumnObj.first_numeric_column_key,
secondNumericColumn: customColumnObj.second_numeric_column_key,
selectionsList: customColumnObj.selections_list || customColumnObj.selectionsList || [],
selectionsList:
customColumnObj.selections_list || customColumnObj.selectionsList || [],
labelsList: customColumnObj.labels_list || customColumnObj.labelsList || [],
};
}
@@ -222,15 +224,15 @@ const TaskListV2Section: React.FC = () => {
if (backendColumn) {
return {
...field,
visible: backendColumn.pinned ?? field.visible
visible: backendColumn.pinned ?? field.visible,
};
}
return field;
});
// Only update if there are actual changes
const hasChanges = updatedFields.some((field, index) =>
field.visible !== fields[index].visible
const hasChanges = updatedFields.some(
(field, index) => field.visible !== fields[index].visible
);
if (hasChanges) {
@@ -269,7 +271,8 @@ const TaskListV2Section: React.FC = () => {
);
// Function to update custom column values
const updateTaskCustomColumnValue = useCallback((taskId: string, columnKey: string, value: string) => {
const updateTaskCustomColumnValue = useCallback(
(taskId: string, columnKey: string, value: string) => {
try {
if (!urlProjectId) {
console.error('Project ID is missing');
@@ -309,10 +312,13 @@ const TaskListV2Section: React.FC = () => {
} catch (error) {
console.error('Error updating custom column value:', error);
}
}, [urlProjectId, socket, connected, allTasks, dispatch]);
},
[urlProjectId, socket, connected, allTasks, dispatch]
);
// Custom column settings handler
const handleCustomColumnSettings = useCallback((columnKey: string) => {
const handleCustomColumnSettings = useCallback(
(columnKey: string) => {
if (!columnKey) return;
const columnData = visibleColumns.find(col => col.key === columnKey || col.id === columnKey);
@@ -321,13 +327,17 @@ const TaskListV2Section: React.FC = () => {
// For custom columns, prioritize the uuid field over id field
const columnId = (columnData as any)?.uuid || columnData?.id || columnKey;
dispatch(setCustomColumnModalAttributes({
dispatch(
setCustomColumnModalAttributes({
modalType: 'edit',
columnId: columnId,
columnData: columnData
}));
columnData: columnData,
})
);
dispatch(toggleCustomColumnModalOpen(true));
}, [dispatch, visibleColumns]);
},
[dispatch, visibleColumns]
);
// Add callback for task added
const handleTaskAdded = useCallback(() => {
@@ -358,7 +368,8 @@ const TaskListV2Section: React.FC = () => {
originalIndex: allTasks.indexOf(task),
}));
const itemsWithAddTask = !isCurrentGroupCollapsed ? [
const itemsWithAddTask = !isCurrentGroupCollapsed
? [
...tasksForVirtuoso,
{
id: `add-task-${group.id}`,
@@ -367,8 +378,9 @@ const TaskListV2Section: React.FC = () => {
groupType: currentGrouping || 'status',
groupValue: group.id, // Use the actual database ID from backend
projectId: urlProjectId,
}
] : tasksForVirtuoso;
},
]
: tasksForVirtuoso;
const groupData = {
...group,
@@ -398,8 +410,6 @@ const TaskListV2Section: React.FC = () => {
const isGroupCollapsed = collapsedGroups.has(group.id);
const isGroupEmpty = group.actualCount === 0;
return (
<div className={groupIndex > 0 ? 'mt-2' : ''}>
<TaskGroupHeader
@@ -416,12 +426,22 @@ const TaskListV2Section: React.FC = () => {
{isGroupEmpty && !isGroupCollapsed && (
<div className="relative w-full">
<div className="flex items-center min-w-max px-1 py-3">
{visibleColumns.map((column, index) => (
{visibleColumns.map((column, index) => {
const emptyColumnStyle = {
width: column.width,
flexShrink: 0,
...(column.id === 'labels' && column.width === 'auto'
? { minWidth: '200px', flexGrow: 1 }
: {}),
};
return (
<div
key={`empty-${column.id}`}
style={{ width: column.width, flexShrink: 0 }}
className="border-r border-gray-200 dark:border-gray-700"
style={emptyColumnStyle}
/>
))}
);
})}
</div>
<div className="absolute inset-0 flex items-center justify-center">
<div className="text-sm italic text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-900 px-4 py-1 rounded-md border border-gray-200 dark:border-gray-700">
@@ -440,7 +460,6 @@ const TaskListV2Section: React.FC = () => {
(taskIndex: number) => {
const item = virtuosoItems[taskIndex];
if (!item || !urlProjectId) return null;
if ('isAddTaskRow' in item && item.isAddTaskRow) {
@@ -469,9 +488,16 @@ const TaskListV2Section: React.FC = () => {
);
// Render column headers
const renderColumnHeaders = useCallback(() => (
<div className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700" style={{ width: '100%', minWidth: 'max-content' }}>
<div className="flex items-center px-1 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
const renderColumnHeaders = useCallback(
() => (
<div
className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
style={{ width: '100%', minWidth: 'max-content' }}
>
<div
className="flex items-center px-1 py-3 w-full"
style={{ minWidth: 'max-content', height: '44px' }}
>
{visibleColumns.map((column, index) => {
const columnStyle: ColumnStyle = {
width: column.width,
@@ -489,7 +515,8 @@ const TaskListV2Section: React.FC = () => {
return (
<div
key={column.id}
className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${column.id === 'dragHandle'
className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${
column.id === 'dragHandle'
? 'flex items-center justify-center'
: column.id === 'checkbox'
? 'flex items-center justify-center'
@@ -521,18 +548,26 @@ const TaskListV2Section: React.FC = () => {
);
})}
{/* Add Custom Column Button - positioned at the end and scrolls with content */}
<div className="flex items-center justify-center px-2" style={{ width: '50px', flexShrink: 0 }}>
<div
className="flex items-center justify-center px-2"
style={{ width: '50px', flexShrink: 0 }}
>
<AddCustomColumnButton />
</div>
</div>
</div>
), [visibleColumns, t, handleCustomColumnSettings]);
),
[visibleColumns, t, handleCustomColumnSettings]
);
// Loading and error states
if (loading || loadingColumns) return <Skeleton style={{ marginTop: 8 }} active />;
if (error) return <div>{t('emptyStates.errorPrefix')} {error}</div>;
if (error)
return (
<div>
{t('emptyStates.errorPrefix')} {error}
</div>
);
// Show message when no data
if (groups.length === 0 && !loading) {
@@ -564,7 +599,6 @@ const TaskListV2Section: React.FC = () => {
onDragEnd={handleDragEnd}
>
<div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
{/* Table Container */}
<div
className="border border-gray-200 dark:border-gray-700 rounded-lg"
@@ -572,7 +606,7 @@ const TaskListV2Section: React.FC = () => {
height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
overflow: 'hidden',
}}
>
{/* Task List Content with Sticky Header */}
@@ -582,11 +616,14 @@ const TaskListV2Section: React.FC = () => {
style={{
overflowX: 'auto',
overflowY: 'auto',
minHeight: 0
minHeight: 0,
}}
>
{/* Sticky Column Headers */}
<div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}>
<div
className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800"
style={{ width: '100%', minWidth: 'max-content' }}
>
{renderColumnHeaders()}
</div>
<SortableContext
@@ -604,10 +641,11 @@ const TaskListV2Section: React.FC = () => {
{renderGroup(groupIndex)}
{/* Group Tasks */}
{!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => {
const globalTaskIndex = virtuosoGroups
.slice(0, groupIndex)
.reduce((sum, g) => sum + g.count, 0) + taskIndex;
{!collapsedGroups.has(group.id) &&
group.tasks.map((task, taskIndex) => {
const globalTaskIndex =
virtuosoGroups.slice(0, groupIndex).reduce((sum, g) => sum + g.count, 0) +
taskIndex;
return (
<div key={task.id || `add-task-${group.id}-${taskIndex}`}>
@@ -653,17 +691,27 @@ const TaskListV2Section: React.FC = () => {
totalSelected={selectedTaskIds.length}
projectId={urlProjectId}
onClearSelection={bulkActions.handleClearSelection}
onBulkStatusChange={(statusId) => bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)}
onBulkPriorityChange={(priorityId) => bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)}
onBulkPhaseChange={(phaseId) => bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)}
onBulkStatusChange={statusId =>
bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)
}
onBulkPriorityChange={priorityId =>
bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)
}
onBulkPhaseChange={phaseId =>
bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)
}
onBulkAssignToMe={() => bulkActions.handleBulkAssignToMe(selectedTaskIds)}
onBulkAssignMembers={(memberIds) => bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)}
onBulkAddLabels={(labelIds) => bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)}
onBulkAssignMembers={memberIds =>
bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)
}
onBulkAddLabels={labelIds =>
bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)
}
onBulkArchive={() => bulkActions.handleBulkArchive(selectedTaskIds)}
onBulkDelete={() => bulkActions.handleBulkDelete(selectedTaskIds)}
onBulkDuplicate={() => bulkActions.handleBulkDuplicate(selectedTaskIds)}
onBulkExport={() => bulkActions.handleBulkExport(selectedTaskIds)}
onBulkSetDueDate={(date) => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)}
onBulkSetDueDate={date => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)}
/>
</div>
)}

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

@@ -271,7 +271,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'checkbox':
return (
<div className="flex items-center justify-center" style={baseStyle}>
<div className="flex items-center justify-center dark:border-gray-700" style={baseStyle}>
<Checkbox
checked={isSelected}
onChange={handleCheckboxChange}
@@ -282,7 +282,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'taskKey':
return (
<div className="flex items-center pl-3" style={baseStyle}>
<div className="flex items-center pl-3 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<span className="text-xs font-medium px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 whitespace-nowrap border border-gray-200 dark:border-gray-600">
{task.task_key || 'N/A'}
</span>
@@ -291,7 +291,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'title':
return (
<div className="flex items-center justify-between group" style={baseStyle}>
<div className="flex items-center justify-between group pl-1 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<div className="flex items-center flex-1 min-w-0">
{/* Indentation for subtasks - tighter spacing */}
{isSubtask && <div className="w-4 flex-shrink-0" />}
@@ -417,7 +417,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'description':
return (
<div className="flex items-center px-2" style={baseStyle}>
<div className="flex items-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<div
className="text-sm text-gray-600 dark:text-gray-400 truncate w-full"
style={{
@@ -435,7 +435,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'status':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<TaskStatusDropdown
task={task}
projectId={projectId}
@@ -446,7 +446,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'assignees':
return (
<div className="flex items-center gap-1 px-2" style={baseStyle}>
<div className="flex items-center gap-1 px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<AvatarGroup
members={task.assignee_names || []}
maxCount={3}
@@ -463,7 +463,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'priority':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<TaskPriorityDropdown
task={task}
projectId={projectId}
@@ -474,7 +474,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'dueDate':
return (
<div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
<div className="flex items-center justify-center px-2 relative group border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{activeDatePicker === 'dueDate' ? (
<div className="w-full relative">
<DatePicker
@@ -532,7 +532,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'progress':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{task.progress !== undefined &&
task.progress >= 0 &&
(task.progress === 100 ? (
@@ -555,8 +555,13 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
);
case 'labels':
const labelsColumn = visibleColumns.find(col => col.id === 'labels');
const labelsStyle = {
...baseStyle,
...(labelsColumn?.width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
};
return (
<div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}>
<div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2 border-r border-gray-200 dark:border-gray-700" style={labelsStyle}>
<TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} />
<LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} />
</div>
@@ -564,7 +569,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'phase':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<TaskPhaseDropdown
task={task}
projectId={projectId}
@@ -575,21 +580,42 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'timeTracking':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
</div>
);
case 'estimation':
// Use timeTracking.estimated which is the converted value from backend's total_minutes
const estimationDisplay = (() => {
const estimatedHours = task.timeTracking?.estimated;
if (estimatedHours && estimatedHours > 0) {
// Convert decimal hours to hours and minutes for display
const hours = Math.floor(estimatedHours);
const minutes = Math.round((estimatedHours - hours) * 60);
if (hours > 0 && minutes > 0) {
return `${hours}h ${minutes}m`;
} else if (hours > 0) {
return `${hours}h`;
} else if (minutes > 0) {
return `${minutes}m`;
}
}
return null;
})();
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
{task.timeTracking?.estimated ? (
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{estimationDisplay ? (
<span className="text-sm text-gray-500 dark:text-gray-400">
{task.timeTracking.estimated}h
{estimationDisplay}
</span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">
0
-
</span>
)}
</div>
@@ -597,7 +623,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'startDate':
return (
<div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
<div className="flex items-center justify-center px-2 relative group border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{activeDatePicker === 'startDate' ? (
<div className="w-full relative">
<DatePicker
@@ -655,7 +681,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'completedDate':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{formattedDates.completed ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.completed}
@@ -668,7 +694,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'createdDate':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{formattedDates.created ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.created}
@@ -680,9 +706,8 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
);
case 'lastUpdated':
console.log('formattedDates.updated', formattedDates.updated);
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{formattedDates.updated ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.updated}
@@ -695,7 +720,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'reporter':
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
{task.reporter ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{task.reporter}</span>
) : (
@@ -709,7 +734,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
const column = visibleColumns.find(col => col.id === columnId);
if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
return (
<div className="flex items-center justify-center px-2" style={baseStyle}>
<div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<CustomColumnCell
column={column}
task={task}

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

@@ -93,10 +93,16 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
case 'checkbox':
case 'taskKey':
case 'description':
return <div style={baseStyle} />;
return <div className="border-r border-gray-200 dark:border-gray-700" style={baseStyle} />;
case 'labels':
const labelsStyle = {
...baseStyle,
...(width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
};
return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
case 'title':
return (
<div className="flex items-center h-full" style={baseStyle}>
<div className="flex items-center h-full border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
<div className="flex items-center w-full h-full">
<div className="w-4 mr-1" />
@@ -129,7 +135,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
</div>
);
default:
return <div style={baseStyle} />;
return <div className="border-r border-gray-200 dark:border-gray-700" style={baseStyle} />;
}
}, [isAdding, taskName, handleAddTask, handleCancel, t]);

4
worklenz-frontend/src/features/task-management/task-management.slice.ts
View File

@@ -281,8 +281,8 @@ export const fetchTasksV3 = createAsyncThunk(
dueDate: task.dueDate,
startDate: task.startDate,
timeTracking: {
estimated: convertTimeValue(task.total_time),
logged: convertTimeValue(task.time_spent),
estimated: task.timeTracking?.estimated || 0,
logged: task.timeTracking?.logged || 0,
},
customFields: {},
custom_column_values: task.custom_column_values || {},

23
worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
View File

@@ -670,15 +670,32 @@ export const useTaskSocketHandlers = () => {
const handleEstimationChange = useCallback(
(task: { id: string; parent_task: string | null; estimation: number }) => {
if (!task) return;
(data: { id: string; parent_task: string | null; total_hours: number; total_minutes: number }) => {
if (!data) return;
// Update the old task slice (for backward compatibility)
const taskWithProgress = {
...task,
...data,
manual_progress: false,
} as IProjectTask;
dispatch(updateTaskEstimation({ task: taskWithProgress }));
// Update task-management slice for task-list-v2 components
const currentTask = store.getState().taskManagement.entities[data.id];
if (currentTask) {
const estimatedHours = (data.total_hours || 0) + (data.total_minutes || 0) / 60;
const updatedTask: Task = {
...currentTask,
timeTracking: {
...currentTask.timeTracking,
estimated: estimatedHours,
},
updatedAt: new Date().toISOString(),
updated_at: new Date().toISOString(),
};
dispatch(updateTask(updatedTask));
}
},
[dispatch]
);