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 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 CustomColumnModal from '@/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal';
import AddTaskRow from './components/AddTaskRow'; import AddTaskRow from './components/AddTaskRow';
import { import { AddCustomColumnButton, CustomColumnHeader } from './components/CustomColumnComponents';
AddCustomColumnButton,
CustomColumnHeader,
} from './components/CustomColumnComponents';
// Hooks and utilities // Hooks and utilities
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers'; import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -126,7 +123,10 @@ const TaskListV2Section: React.FC = () => {
); );
// Custom hooks // Custom hooks
const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(allTasks, groups); const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
allTasks,
groups
);
const bulkActions = useBulkActions(); const bulkActions = useBulkActions();
// Enable real-time updates via socket handlers // Enable real-time updates via socket handlers
@@ -156,7 +156,8 @@ const TaskListV2Section: React.FC = () => {
}); });
// Add visible custom columns // Add visible custom columns
const visibleCustomColumns = customColumns const visibleCustomColumns =
customColumns
?.filter(column => column.pinned) ?.filter(column => column.pinned)
?.map(column => { ?.map(column => {
// Give selection columns more width for dropdown content // Give selection columns more width for dropdown content
@@ -182,7 +183,8 @@ const TaskListV2Section: React.FC = () => {
previewValue: customColumnObj.preview_value, previewValue: customColumnObj.preview_value,
firstNumericColumn: customColumnObj.first_numeric_column_key, firstNumericColumn: customColumnObj.first_numeric_column_key,
secondNumericColumn: customColumnObj.second_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 || [], labelsList: customColumnObj.labels_list || customColumnObj.labelsList || [],
}; };
} }
@@ -222,15 +224,15 @@ const TaskListV2Section: React.FC = () => {
if (backendColumn) { if (backendColumn) {
return { return {
...field, ...field,
visible: backendColumn.pinned ?? field.visible visible: backendColumn.pinned ?? field.visible,
}; };
} }
return field; return field;
}); });
// Only update if there are actual changes // Only update if there are actual changes
const hasChanges = updatedFields.some((field, index) => const hasChanges = updatedFields.some(
field.visible !== fields[index].visible (field, index) => field.visible !== fields[index].visible
); );
if (hasChanges) { if (hasChanges) {
@@ -269,7 +271,8 @@ const TaskListV2Section: React.FC = () => {
); );
// Function to update custom column values // 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 { try {
if (!urlProjectId) { if (!urlProjectId) {
console.error('Project ID is missing'); console.error('Project ID is missing');
@@ -309,10 +312,13 @@ const TaskListV2Section: React.FC = () => {
} catch (error) { } catch (error) {
console.error('Error updating custom column value:', error); console.error('Error updating custom column value:', error);
} }
}, [urlProjectId, socket, connected, allTasks, dispatch]); },
[urlProjectId, socket, connected, allTasks, dispatch]
);
// Custom column settings handler // Custom column settings handler
const handleCustomColumnSettings = useCallback((columnKey: string) => { const handleCustomColumnSettings = useCallback(
(columnKey: string) => {
if (!columnKey) return; if (!columnKey) return;
const columnData = visibleColumns.find(col => col.key === columnKey || col.id === columnKey); 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 // For custom columns, prioritize the uuid field over id field
const columnId = (columnData as any)?.uuid || columnData?.id || columnKey; const columnId = (columnData as any)?.uuid || columnData?.id || columnKey;
dispatch(setCustomColumnModalAttributes({ dispatch(
setCustomColumnModalAttributes({
modalType: 'edit', modalType: 'edit',
columnId: columnId, columnId: columnId,
columnData: columnData columnData: columnData,
})); })
);
dispatch(toggleCustomColumnModalOpen(true)); dispatch(toggleCustomColumnModalOpen(true));
}, [dispatch, visibleColumns]); },
[dispatch, visibleColumns]
);
// Add callback for task added // Add callback for task added
const handleTaskAdded = useCallback(() => { const handleTaskAdded = useCallback(() => {
@@ -358,7 +368,8 @@ const TaskListV2Section: React.FC = () => {
originalIndex: allTasks.indexOf(task), originalIndex: allTasks.indexOf(task),
})); }));
const itemsWithAddTask = !isCurrentGroupCollapsed ? [ const itemsWithAddTask = !isCurrentGroupCollapsed
? [
...tasksForVirtuoso, ...tasksForVirtuoso,
{ {
id: `add-task-${group.id}`, id: `add-task-${group.id}`,
@@ -367,8 +378,9 @@ const TaskListV2Section: React.FC = () => {
groupType: currentGrouping || 'status', groupType: currentGrouping || 'status',
groupValue: group.id, // Use the actual database ID from backend groupValue: group.id, // Use the actual database ID from backend
projectId: urlProjectId, projectId: urlProjectId,
} },
] : tasksForVirtuoso; ]
: tasksForVirtuoso;
const groupData = { const groupData = {
...group, ...group,
@@ -398,8 +410,6 @@ const TaskListV2Section: React.FC = () => {
const isGroupCollapsed = collapsedGroups.has(group.id); const isGroupCollapsed = collapsedGroups.has(group.id);
const isGroupEmpty = group.actualCount === 0; const isGroupEmpty = group.actualCount === 0;
return ( return (
<div className={groupIndex > 0 ? 'mt-2' : ''}> <div className={groupIndex > 0 ? 'mt-2' : ''}>
<TaskGroupHeader <TaskGroupHeader
@@ -416,12 +426,22 @@ const TaskListV2Section: React.FC = () => {
{isGroupEmpty && !isGroupCollapsed && ( {isGroupEmpty && !isGroupCollapsed && (
<div className="relative w-full"> <div className="relative w-full">
<div className="flex items-center min-w-max px-1 py-3"> <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 <div
key={`empty-${column.id}`} key={`empty-${column.id}`}
style={{ width: column.width, flexShrink: 0 }} className="border-r border-gray-200 dark:border-gray-700"
style={emptyColumnStyle}
/> />
))} );
})}
</div> </div>
<div className="absolute inset-0 flex items-center justify-center"> <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"> <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) => { (taskIndex: number) => {
const item = virtuosoItems[taskIndex]; const item = virtuosoItems[taskIndex];
if (!item || !urlProjectId) return null; if (!item || !urlProjectId) return null;
if ('isAddTaskRow' in item && item.isAddTaskRow) { if ('isAddTaskRow' in item && item.isAddTaskRow) {
@@ -469,9 +488,16 @@ const TaskListV2Section: React.FC = () => {
); );
// Render column headers // Render column headers
const renderColumnHeaders = useCallback(() => ( 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' }}> <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) => { {visibleColumns.map((column, index) => {
const columnStyle: ColumnStyle = { const columnStyle: ColumnStyle = {
width: column.width, width: column.width,
@@ -489,7 +515,8 @@ const TaskListV2Section: React.FC = () => {
return ( return (
<div <div
key={column.id} 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' ? 'flex items-center justify-center'
: column.id === 'checkbox' : column.id === 'checkbox'
? 'flex items-center justify-center' ? '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 */} {/* 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 /> <AddCustomColumnButton />
</div> </div>
</div> </div>
</div> </div>
), [visibleColumns, t, handleCustomColumnSettings]); ),
[visibleColumns, t, handleCustomColumnSettings]
);
// Loading and error states // Loading and error states
if (loading || loadingColumns) return <Skeleton style={{ marginTop: 8 }} active />; 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 // Show message when no data
if (groups.length === 0 && !loading) { if (groups.length === 0 && !loading) {
@@ -564,7 +599,6 @@ const TaskListV2Section: React.FC = () => {
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
> >
<div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden"> <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
{/* Table Container */} {/* Table Container */}
<div <div
className="border border-gray-200 dark:border-gray-700 rounded-lg" 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 height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
overflow: 'hidden' overflow: 'hidden',
}} }}
> >
{/* Task List Content with Sticky Header */} {/* Task List Content with Sticky Header */}
@@ -582,11 +616,14 @@ const TaskListV2Section: React.FC = () => {
style={{ style={{
overflowX: 'auto', overflowX: 'auto',
overflowY: 'auto', overflowY: 'auto',
minHeight: 0 minHeight: 0,
}} }}
> >
{/* Sticky Column Headers */} {/* 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()} {renderColumnHeaders()}
</div> </div>
<SortableContext <SortableContext
@@ -604,10 +641,11 @@ const TaskListV2Section: React.FC = () => {
{renderGroup(groupIndex)} {renderGroup(groupIndex)}
{/* Group Tasks */} {/* Group Tasks */}
{!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => { {!collapsedGroups.has(group.id) &&
const globalTaskIndex = virtuosoGroups group.tasks.map((task, taskIndex) => {
.slice(0, groupIndex) const globalTaskIndex =
.reduce((sum, g) => sum + g.count, 0) + taskIndex; virtuosoGroups.slice(0, groupIndex).reduce((sum, g) => sum + g.count, 0) +
taskIndex;
return ( return (
<div key={task.id || `add-task-${group.id}-${taskIndex}`}> <div key={task.id || `add-task-${group.id}-${taskIndex}`}>
@@ -653,17 +691,27 @@ const TaskListV2Section: React.FC = () => {
totalSelected={selectedTaskIds.length} totalSelected={selectedTaskIds.length}
projectId={urlProjectId} projectId={urlProjectId}
onClearSelection={bulkActions.handleClearSelection} onClearSelection={bulkActions.handleClearSelection}
onBulkStatusChange={(statusId) => bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)} onBulkStatusChange={statusId =>
onBulkPriorityChange={(priorityId) => bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)} bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)
onBulkPhaseChange={(phaseId) => bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)} }
onBulkPriorityChange={priorityId =>
bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)
}
onBulkPhaseChange={phaseId =>
bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)
}
onBulkAssignToMe={() => bulkActions.handleBulkAssignToMe(selectedTaskIds)} onBulkAssignToMe={() => bulkActions.handleBulkAssignToMe(selectedTaskIds)}
onBulkAssignMembers={(memberIds) => bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)} onBulkAssignMembers={memberIds =>
onBulkAddLabels={(labelIds) => bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)} bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)
}
onBulkAddLabels={labelIds =>
bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)
}
onBulkArchive={() => bulkActions.handleBulkArchive(selectedTaskIds)} onBulkArchive={() => bulkActions.handleBulkArchive(selectedTaskIds)}
onBulkDelete={() => bulkActions.handleBulkDelete(selectedTaskIds)} onBulkDelete={() => bulkActions.handleBulkDelete(selectedTaskIds)}
onBulkDuplicate={() => bulkActions.handleBulkDuplicate(selectedTaskIds)} onBulkDuplicate={() => bulkActions.handleBulkDuplicate(selectedTaskIds)}
onBulkExport={() => bulkActions.handleBulkExport(selectedTaskIds)} onBulkExport={() => bulkActions.handleBulkExport(selectedTaskIds)}
onBulkSetDueDate={(date) => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)} onBulkSetDueDate={date => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)}
/> />
</div> </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': case 'checkbox':
return ( return (
<div className="flex items-center justify-center" style={baseStyle}> <div className="flex items-center justify-center dark:border-gray-700" style={baseStyle}>
<Checkbox <Checkbox
checked={isSelected} checked={isSelected}
onChange={handleCheckboxChange} onChange={handleCheckboxChange}
@@ -282,7 +282,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'taskKey': case 'taskKey':
return ( 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"> <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'} {task.task_key || 'N/A'}
</span> </span>
@@ -291,7 +291,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'title': case 'title':
return ( 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"> <div className="flex items-center flex-1 min-w-0">
{/* Indentation for subtasks - tighter spacing */} {/* Indentation for subtasks - tighter spacing */}
{isSubtask && <div className="w-4 flex-shrink-0" />} {isSubtask && <div className="w-4 flex-shrink-0" />}
@@ -417,7 +417,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'description': case 'description':
return ( 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 <div
className="text-sm text-gray-600 dark:text-gray-400 truncate w-full" className="text-sm text-gray-600 dark:text-gray-400 truncate w-full"
style={{ style={{
@@ -435,7 +435,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'status': case 'status':
return ( 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 <TaskStatusDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -446,7 +446,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'assignees': case 'assignees':
return ( 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 <AvatarGroup
members={task.assignee_names || []} members={task.assignee_names || []}
maxCount={3} maxCount={3}
@@ -463,7 +463,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'priority': case 'priority':
return ( 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 <TaskPriorityDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -474,7 +474,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'dueDate': case 'dueDate':
return ( 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' ? ( {activeDatePicker === 'dueDate' ? (
<div className="w-full relative"> <div className="w-full relative">
<DatePicker <DatePicker
@@ -532,7 +532,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'progress': case 'progress':
return ( 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 !== undefined &&
task.progress >= 0 && task.progress >= 0 &&
(task.progress === 100 ? ( (task.progress === 100 ? (
@@ -555,8 +555,13 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
); );
case 'labels': case 'labels':
const labelsColumn = visibleColumns.find(col => col.id === 'labels');
const labelsStyle = {
...baseStyle,
...(labelsColumn?.width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
};
return ( 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} /> <TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} />
<LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} /> <LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} />
</div> </div>
@@ -564,7 +569,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'phase': case 'phase':
return ( 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 <TaskPhaseDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -575,21 +580,42 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'timeTracking': case 'timeTracking':
return ( 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} /> <TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
</div> </div>
); );
case 'estimation': 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 ( 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.timeTracking?.estimated ? ( {estimationDisplay ? (
<span className="text-sm text-gray-500 dark:text-gray-400"> <span className="text-sm text-gray-500 dark:text-gray-400">
{task.timeTracking.estimated}h {estimationDisplay}
</span> </span>
) : ( ) : (
<span className="text-sm text-gray-400 dark:text-gray-500"> <span className="text-sm text-gray-400 dark:text-gray-500">
0 -
</span> </span>
)} )}
</div> </div>
@@ -597,7 +623,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'startDate': case 'startDate':
return ( 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' ? ( {activeDatePicker === 'startDate' ? (
<div className="w-full relative"> <div className="w-full relative">
<DatePicker <DatePicker
@@ -655,7 +681,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'completedDate': case 'completedDate':
return ( 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 ? ( {formattedDates.completed ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap"> <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.completed} {formattedDates.completed}
@@ -668,7 +694,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'createdDate': case 'createdDate':
return ( 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 ? ( {formattedDates.created ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap"> <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.created} {formattedDates.created}
@@ -680,9 +706,8 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
); );
case 'lastUpdated': case 'lastUpdated':
console.log('formattedDates.updated', formattedDates.updated);
return ( 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 ? ( {formattedDates.updated ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap"> <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formattedDates.updated} {formattedDates.updated}
@@ -695,7 +720,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'reporter': case 'reporter':
return ( 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 ? ( {task.reporter ? (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{task.reporter}</span> <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); const column = visibleColumns.find(col => col.id === columnId);
if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) { if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
return ( 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 <CustomColumnCell
column={column} column={column}
task={task} 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 'checkbox':
case 'taskKey': case 'taskKey':
case 'description': 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': case 'title':
return ( 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="flex items-center w-full h-full">
<div className="w-4 mr-1" /> <div className="w-4 mr-1" />
@@ -129,7 +135,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
</div> </div>
); );
default: default:
return <div style={baseStyle} />; return <div className="border-r border-gray-200 dark:border-gray-700" style={baseStyle} />;
} }
}, [isAdding, taskName, handleAddTask, handleCancel, t]); }, [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, dueDate: task.dueDate,
startDate: task.startDate, startDate: task.startDate,
timeTracking: { timeTracking: {
estimated: convertTimeValue(task.total_time), estimated: task.timeTracking?.estimated || 0,
logged: convertTimeValue(task.time_spent), logged: task.timeTracking?.logged || 0,
}, },
customFields: {}, customFields: {},
custom_column_values: task.custom_column_values || {}, 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( const handleEstimationChange = useCallback(
(task: { id: string; parent_task: string | null; estimation: number }) => { (data: { id: string; parent_task: string | null; total_hours: number; total_minutes: number }) => {
if (!task) return; if (!data) return;
// Update the old task slice (for backward compatibility)
const taskWithProgress = { const taskWithProgress = {
...task, ...data,
manual_progress: false, manual_progress: false,
} as IProjectTask; } as IProjectTask;
dispatch(updateTaskEstimation({ task: taskWithProgress })); 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] [dispatch]
); );