{
+ setContextMenuVisible(false);
+ }, []);
+
+ // Handle click outside for task name editing
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+ handleTaskNameSave();
+ }
+ };
+
+ if (editTaskName) {
+ document.addEventListener('mousedown', handleClickOutside);
+ inputRef.current?.focus();
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [editTaskName, handleTaskNameSave]);
+
+ return (
+
+ {editTaskName ? (
+ /* Full cell input when editing */
+
+ onTaskNameChange(e.target.value)}
+ autoFocus
+ onPressEnter={handleTaskNameSave}
+ onBlur={handleTaskNameSave}
+ className="text-sm"
+ style={{
+ width: '100%',
+ height: '38px',
+ margin: '0',
+ padding: '8px 12px',
+ border: '1px solid #1677ff',
+ backgroundColor: 'rgba(22, 119, 255, 0.02)',
+ borderRadius: '3px',
+ fontSize: '14px',
+ lineHeight: '22px',
+ boxSizing: 'border-box',
+ outline: 'none',
+ boxShadow: '0 0 0 2px rgba(22, 119, 255, 0.1)',
+ }}
+ />
+
+ ) : (
+ /* Normal layout when not editing */
+ <>
+
+ {/* Indentation for subtasks - reduced spacing for level 1 */}
+ {isSubtask &&
}
+
+ {/* Additional indentation for deeper levels - increased spacing for level 2+ */}
+ {Array.from({ length: depth }).map((_, i) => (
+
+ ))}
+
+ {/* Expand/Collapse button - show for any task that can have sub-tasks */}
+ {depth < 2 && ( // Only show if not at maximum depth (can still have children)
+
+ )}
+
+ {/* Additional indentation for subtasks after the expand button space - reduced for level 1 */}
+ {isSubtask &&
}
+
+
+ {/* Task name with dynamic width */}
+
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ onEditTaskName(true);
+ }}
+ onContextMenu={handleContextMenu}
+ title={taskDisplayName}
+ >
+ {taskDisplayName}
+
-
- )}
-
- {/* Additional indentation for subtasks after the expand button space - reduced for level 1 */}
- {isSubtask &&
}
-
-
- {/* Task name with dynamic width */}
-
- {
- e.stopPropagation();
- e.preventDefault();
- onEditTaskName(true);
- }}
- onContextMenu={handleContextMenu}
- title={taskDisplayName}
- >
- {taskDisplayName}
-
-
-
- {/* Indicators container - flex-shrink-0 to prevent compression */}
-
- {/* Subtask count indicator - show for any task that can have sub-tasks */}
- {depth < 2 && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
-
-
-
- {task.sub_tasks_count}
-
-
-
-
- )}
- {/* Task indicators - compact layout */}
- {task.comments_count != null && task.comments_count !== 0 && (
-
-
-
- )}
+ {/* Indicators container - flex-shrink-0 to prevent compression */}
+
+ {/* Subtask count indicator - show for any task that can have sub-tasks */}
+ {depth < 2 && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
+
+
+
+ {task.sub_tasks_count}
+
+
+
+
+ )}
- {task.has_subscribers && (
-
-
-
- )}
+ {/* Task indicators - compact layout */}
+ {task.comments_count != null && task.comments_count !== 0 && (
+
+
+
+ )}
- {task.attachments_count != null && task.attachments_count !== 0 && (
-
-
-
- )}
+ {task.has_subscribers && (
+
+
+
+ )}
- {task.has_dependencies && (
-
-
-
- )}
+ {task.attachments_count != null && task.attachments_count !== 0 && (
+
+
+
+ )}
- {task.schedule_id && (
-
-
-
- )}
+ {task.has_dependencies && (
+
+
+
+ )}
+
+ {task.schedule_id && (
+
+
+
+ )}
+
-
-
-
-
- )}
-
- {/* Context Menu */}
- {contextMenuVisible && createPortal(
-
,
- document.body
- )}
-
- );
-});
-TitleColumn.displayName = 'TitleColumn';
\ No newline at end of file
+
+
+ )}
+
+ {/* Context Menu */}
+ {contextMenuVisible &&
+ createPortal(
+
,
+ document.body
+ )}
+
+ );
+ }
+);
+
+TitleColumn.displayName = 'TitleColumn';
diff --git a/worklenz-frontend/src/components/task-list-v2/constants/columns.ts b/worklenz-frontend/src/components/task-list-v2/constants/columns.ts
index e7b34373..8fad8525 100644
--- a/worklenz-frontend/src/components/task-list-v2/constants/columns.ts
+++ b/worklenz-frontend/src/components/task-list-v2/constants/columns.ts
@@ -15,7 +15,14 @@ export type ColumnStyle = {
export const BASE_COLUMNS = [
{ id: 'dragHandle', label: '', width: '20px', isSticky: true, key: 'dragHandle' },
{ id: 'checkbox', label: '', width: '28px', isSticky: true, key: 'checkbox' },
- { id: 'taskKey', label: 'keyColumn', width: '100px', key: COLUMN_KEYS.KEY, minWidth: '100px', maxWidth: '150px' },
+ {
+ id: 'taskKey',
+ label: 'keyColumn',
+ width: '100px',
+ key: COLUMN_KEYS.KEY,
+ minWidth: '100px',
+ maxWidth: '150px',
+ },
{ id: 'title', label: 'taskColumn', width: '470px', isSticky: true, key: COLUMN_KEYS.NAME },
{ id: 'description', label: 'descriptionColumn', width: '260px', key: COLUMN_KEYS.DESCRIPTION },
{ id: 'progress', label: 'progressColumn', width: '120px', key: COLUMN_KEYS.PROGRESS },
@@ -24,13 +31,23 @@ export const BASE_COLUMNS = [
{ id: 'labels', label: 'labelsColumn', width: '250px', key: COLUMN_KEYS.LABELS },
{ id: 'phase', label: 'phaseColumn', width: '120px', key: COLUMN_KEYS.PHASE },
{ id: 'priority', label: 'priorityColumn', width: '120px', key: COLUMN_KEYS.PRIORITY },
- { id: 'timeTracking', label: 'timeTrackingColumn', width: '120px', key: COLUMN_KEYS.TIME_TRACKING },
+ {
+ id: 'timeTracking',
+ label: 'timeTrackingColumn',
+ width: '120px',
+ key: COLUMN_KEYS.TIME_TRACKING,
+ },
{ id: 'estimation', label: 'estimationColumn', width: '120px', key: COLUMN_KEYS.ESTIMATION },
{ id: 'startDate', label: 'startDateColumn', width: '140px', key: COLUMN_KEYS.START_DATE },
{ id: 'dueDate', label: 'dueDateColumn', width: '140px', key: COLUMN_KEYS.DUE_DATE },
{ id: 'dueTime', label: 'dueTimeColumn', width: '120px', key: COLUMN_KEYS.DUE_TIME },
- { id: 'completedDate', label: 'completedDateColumn', width: '140px', key: COLUMN_KEYS.COMPLETED_DATE },
+ {
+ id: 'completedDate',
+ label: 'completedDateColumn',
+ width: '140px',
+ key: COLUMN_KEYS.COMPLETED_DATE,
+ },
{ id: 'createdDate', label: 'createdDateColumn', width: '140px', key: COLUMN_KEYS.CREATED_DATE },
{ id: 'lastUpdated', label: 'lastUpdatedColumn', width: '140px', key: COLUMN_KEYS.LAST_UPDATED },
{ id: 'reporter', label: 'reporterColumn', width: '120px', key: COLUMN_KEYS.REPORTER },
-];
\ No newline at end of file
+];
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useBulkActions.ts b/worklenz-frontend/src/components/task-list-v2/hooks/useBulkActions.ts
index fa3377ea..7a7a98cb 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useBulkActions.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useBulkActions.ts
@@ -67,128 +67,141 @@ export const useBulkActions = () => {
dispatch(clearSelection());
}, [dispatch]);
- const handleBulkStatusChange = useCallback(async (statusId: string, selectedTaskIds: string[]) => {
- if (!statusId || !projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('status', true);
+ const handleBulkStatusChange = useCallback(
+ async (statusId: string, selectedTaskIds: string[]) => {
+ if (!statusId || !projectId || !selectedTaskIds.length) return;
- // Check task dependencies before proceeding
- for (const taskId of selectedTaskIds) {
- const canContinue = await checkTaskDependencyStatus(taskId, statusId);
- if (!canContinue) {
- if (selectedTaskIds.length > 1) {
- alertService.warning(
- 'Incomplete Dependencies!',
- 'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
- );
- } else {
- alertService.error(
- 'Task is not completed',
- 'Please complete the task dependencies before proceeding'
- );
+ try {
+ updateLoadingState('status', true);
+
+ // Check task dependencies before proceeding
+ for (const taskId of selectedTaskIds) {
+ const canContinue = await checkTaskDependencyStatus(taskId, statusId);
+ if (!canContinue) {
+ if (selectedTaskIds.length > 1) {
+ alertService.warning(
+ 'Incomplete Dependencies!',
+ 'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
+ );
+ } else {
+ alertService.error(
+ 'Task is not completed',
+ 'Please complete the task dependencies before proceeding'
+ );
+ }
+ return;
}
- return;
}
+
+ const body: IBulkTasksStatusChangeRequest = {
+ tasks: selectedTaskIds,
+ status_id: statusId,
+ };
+
+ const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_change_status);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error changing status:', error);
+ } finally {
+ updateLoadingState('status', false);
}
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
- const body: IBulkTasksStatusChangeRequest = {
- tasks: selectedTaskIds,
- status_id: statusId,
- };
+ const handleBulkPriorityChange = useCallback(
+ async (priorityId: string, selectedTaskIds: string[]) => {
+ if (!priorityId || !projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_change_status);
- dispatch(clearSelection());
- refetchTasks();
+ try {
+ updateLoadingState('priority', true);
+
+ const body: IBulkTasksPriorityChangeRequest = {
+ tasks: selectedTaskIds,
+ priority_id: priorityId,
+ };
+
+ const res = await taskListBulkActionsApiService.changePriority(body, projectId);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error changing priority:', error);
+ } finally {
+ updateLoadingState('priority', false);
}
- } catch (error) {
- logger.error('Error changing status:', error);
- } finally {
- updateLoadingState('status', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
- const handleBulkPriorityChange = useCallback(async (priorityId: string, selectedTaskIds: string[]) => {
- if (!priorityId || !projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('priority', true);
-
- const body: IBulkTasksPriorityChangeRequest = {
- tasks: selectedTaskIds,
- priority_id: priorityId,
- };
+ const handleBulkPhaseChange = useCallback(
+ async (phaseId: string, selectedTaskIds: string[]) => {
+ if (!phaseId || !projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.changePriority(body, projectId);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
- dispatch(clearSelection());
- refetchTasks();
+ try {
+ updateLoadingState('phase', true);
+
+ const body: IBulkTasksPhaseChangeRequest = {
+ tasks: selectedTaskIds,
+ phase_id: phaseId,
+ };
+
+ const res = await taskListBulkActionsApiService.changePhase(body, projectId);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error changing phase:', error);
+ } finally {
+ updateLoadingState('phase', false);
}
- } catch (error) {
- logger.error('Error changing priority:', error);
- } finally {
- updateLoadingState('priority', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
- const handleBulkPhaseChange = useCallback(async (phaseId: string, selectedTaskIds: string[]) => {
- if (!phaseId || !projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('phase', true);
-
- const body: IBulkTasksPhaseChangeRequest = {
- tasks: selectedTaskIds,
- phase_id: phaseId,
- };
+ const handleBulkAssignToMe = useCallback(
+ async (selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.changePhase(body, projectId);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
- dispatch(clearSelection());
- refetchTasks();
+ try {
+ updateLoadingState('assignToMe', true);
+
+ const body = {
+ tasks: selectedTaskIds,
+ project_id: projectId,
+ };
+
+ const res = await taskListBulkActionsApiService.assignToMe(body);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error assigning to me:', error);
+ } finally {
+ updateLoadingState('assignToMe', false);
}
- } catch (error) {
- logger.error('Error changing phase:', error);
- } finally {
- updateLoadingState('phase', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
- const handleBulkAssignToMe = useCallback(async (selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('assignToMe', true);
-
- const body = {
- tasks: selectedTaskIds,
- project_id: projectId,
- };
+ const handleBulkAssignMembers = useCallback(
+ async (memberIds: string[], selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.assignToMe(body);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
- dispatch(clearSelection());
- refetchTasks();
- }
- } catch (error) {
- logger.error('Error assigning to me:', error);
- } finally {
- updateLoadingState('assignToMe', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ try {
+ updateLoadingState('assignMembers', true);
- const handleBulkAssignMembers = useCallback(async (memberIds: string[], selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('assignMembers', true);
-
- // Convert memberIds to member objects - this would need to be handled by the component
+ // Convert memberIds to member objects - this would need to be handled by the component
// For now, we'll just pass the IDs and let the API handle it
const body = {
tasks: selectedTaskIds,
@@ -201,142 +214,162 @@ export const useBulkActions = () => {
})) as ITaskAssignee[],
};
- const res = await taskListBulkActionsApiService.assignTasks(body);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
+ const res = await taskListBulkActionsApiService.assignTasks(body);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error assigning tasks:', error);
+ } finally {
+ updateLoadingState('assignMembers', false);
+ }
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
+
+ const handleBulkAddLabels = useCallback(
+ async (labelIds: string[], selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
+
+ try {
+ updateLoadingState('labels', true);
+
+ // Convert labelIds to label objects - this would need to be handled by the component
+ // For now, we'll just pass the IDs and let the API handle it
+ const body: IBulkTasksLabelsRequest = {
+ tasks: selectedTaskIds,
+ labels: labelIds.map(id => ({ id, name: '', color: '' })) as ITaskLabel[],
+ text: null,
+ };
+
+ const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
+ dispatch(clearSelection());
+ dispatch(fetchLabels()); // Refetch labels in case new ones were created
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error updating labels:', error);
+ } finally {
+ updateLoadingState('labels', false);
+ }
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
+
+ const handleBulkArchive = useCallback(
+ async (selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
+
+ try {
+ updateLoadingState('archive', true);
+
+ const body = {
+ tasks: selectedTaskIds,
+ project_id: projectId,
+ };
+
+ const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_archive);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error archiving tasks:', error);
+ } finally {
+ updateLoadingState('archive', false);
+ }
+ },
+ [projectId, archived, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
+
+ const handleBulkDelete = useCallback(
+ async (selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
+
+ try {
+ updateLoadingState('delete', true);
+
+ const body = {
+ tasks: selectedTaskIds,
+ project_id: projectId,
+ };
+
+ const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
+ if (res.done) {
+ trackMixpanelEvent(evt_project_task_list_bulk_delete);
+ dispatch(clearSelection());
+ refetchTasks();
+ }
+ } catch (error) {
+ logger.error('Error deleting tasks:', error);
+ } finally {
+ updateLoadingState('delete', false);
+ }
+ },
+ [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]
+ );
+
+ const handleBulkDuplicate = useCallback(
+ async (selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
+
+ try {
+ updateLoadingState('duplicate', true);
+ // TODO: Implement bulk duplicate API call when available
+ console.log('Bulk duplicate:', selectedTaskIds);
+ // For now, just clear selection and refetch
dispatch(clearSelection());
refetchTasks();
+ } catch (error) {
+ logger.error('Error duplicating tasks:', error);
+ } finally {
+ updateLoadingState('duplicate', false);
}
- } catch (error) {
- logger.error('Error assigning tasks:', error);
- } finally {
- updateLoadingState('assignMembers', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, dispatch, refetchTasks, updateLoadingState]
+ );
- const handleBulkAddLabels = useCallback(async (labelIds: string[], selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('labels', true);
-
- // Convert labelIds to label objects - this would need to be handled by the component
- // For now, we'll just pass the IDs and let the API handle it
- const body: IBulkTasksLabelsRequest = {
- tasks: selectedTaskIds,
- labels: labelIds.map(id => ({ id, name: '', color: '' })) as ITaskLabel[],
- text: null,
- };
+ const handleBulkExport = useCallback(
+ async (selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
- dispatch(clearSelection());
- dispatch(fetchLabels()); // Refetch labels in case new ones were created
- refetchTasks();
+ try {
+ updateLoadingState('export', true);
+ // TODO: Implement bulk export API call when available
+ console.log('Bulk export:', selectedTaskIds);
+ } catch (error) {
+ logger.error('Error exporting tasks:', error);
+ } finally {
+ updateLoadingState('export', false);
}
- } catch (error) {
- logger.error('Error updating labels:', error);
- } finally {
- updateLoadingState('labels', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, updateLoadingState]
+ );
- const handleBulkArchive = useCallback(async (selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('archive', true);
-
- const body = {
- tasks: selectedTaskIds,
- project_id: projectId,
- };
+ const handleBulkSetDueDate = useCallback(
+ async (date: string, selectedTaskIds: string[]) => {
+ if (!projectId || !selectedTaskIds.length) return;
- const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_archive);
+ try {
+ updateLoadingState('dueDate', true);
+ // TODO: Implement bulk set due date API call when available
+ console.log('Bulk set due date:', date, selectedTaskIds);
+ // For now, just clear selection and refetch
dispatch(clearSelection());
refetchTasks();
+ } catch (error) {
+ logger.error('Error setting due date:', error);
+ } finally {
+ updateLoadingState('dueDate', false);
}
- } catch (error) {
- logger.error('Error archiving tasks:', error);
- } finally {
- updateLoadingState('archive', false);
- }
- }, [projectId, archived, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
-
- const handleBulkDelete = useCallback(async (selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('delete', true);
-
- const body = {
- tasks: selectedTaskIds,
- project_id: projectId,
- };
-
- const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
- if (res.done) {
- trackMixpanelEvent(evt_project_task_list_bulk_delete);
- dispatch(clearSelection());
- refetchTasks();
- }
- } catch (error) {
- logger.error('Error deleting tasks:', error);
- } finally {
- updateLoadingState('delete', false);
- }
- }, [projectId, trackMixpanelEvent, dispatch, refetchTasks, updateLoadingState]);
-
- const handleBulkDuplicate = useCallback(async (selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('duplicate', true);
- // TODO: Implement bulk duplicate API call when available
- console.log('Bulk duplicate:', selectedTaskIds);
- // For now, just clear selection and refetch
- dispatch(clearSelection());
- refetchTasks();
- } catch (error) {
- logger.error('Error duplicating tasks:', error);
- } finally {
- updateLoadingState('duplicate', false);
- }
- }, [projectId, dispatch, refetchTasks, updateLoadingState]);
-
- const handleBulkExport = useCallback(async (selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('export', true);
- // TODO: Implement bulk export API call when available
- console.log('Bulk export:', selectedTaskIds);
- } catch (error) {
- logger.error('Error exporting tasks:', error);
- } finally {
- updateLoadingState('export', false);
- }
- }, [projectId, updateLoadingState]);
-
- const handleBulkSetDueDate = useCallback(async (date: string, selectedTaskIds: string[]) => {
- if (!projectId || !selectedTaskIds.length) return;
-
- try {
- updateLoadingState('dueDate', true);
- // TODO: Implement bulk set due date API call when available
- console.log('Bulk set due date:', date, selectedTaskIds);
- // For now, just clear selection and refetch
- dispatch(clearSelection());
- refetchTasks();
- } catch (error) {
- logger.error('Error setting due date:', error);
- } finally {
- updateLoadingState('dueDate', false);
- }
- }, [projectId, dispatch, refetchTasks, updateLoadingState]);
+ },
+ [projectId, dispatch, refetchTasks, updateLoadingState]
+ );
return {
handleClearSelection,
@@ -353,4 +386,4 @@ export const useBulkActions = () => {
handleBulkSetDueDate,
loadingStates,
};
-};
\ No newline at end of file
+};
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts b/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
index 4a5b8848..89f24ed0 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
@@ -39,17 +39,17 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
// Use new bulk update approach - recalculate ALL task orders to prevent duplicates
const taskUpdates: any[] = [];
-
+
// Create a copy of all groups and perform the move operation
const updatedGroups = groups.map(group => ({
...group,
- taskIds: [...group.taskIds]
+ taskIds: [...group.taskIds],
}));
-
+
// Find the source and target groups in our copy
const sourceGroupCopy = updatedGroups.find(g => g.id === sourceGroup.id)!;
const targetGroupCopy = updatedGroups.find(g => g.id === targetGroup.id)!;
-
+
if (sourceGroup.id === targetGroup.id) {
// Same group - reorder within the group
const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
@@ -62,20 +62,20 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
// Remove from source group
const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
sourceGroupCopy.taskIds.splice(sourceIndex, 1);
-
+
// Add to target group
targetGroupCopy.taskIds.splice(insertIndex, 0, taskId);
}
-
+
// Now assign sequential sort orders to ALL tasks across ALL groups
let currentSortOrder = 0;
updatedGroups.forEach(group => {
group.taskIds.forEach(id => {
const update: any = {
task_id: id,
- sort_order: currentSortOrder
+ sort_order: currentSortOrder,
};
-
+
// Add group-specific fields for the moved task if it changed groups
if (id === taskId && sourceGroup.id !== targetGroup.id) {
if (currentGrouping === 'status') {
@@ -86,7 +86,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
update.phase_id = targetGroup.id;
}
}
-
+
taskUpdates.push(update);
currentSortOrder++;
});
@@ -120,18 +120,24 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
});
} else if (currentGrouping === 'priority') {
// Emit priority change event
- socket.emit(SocketEvents.TASK_PRIORITY_CHANGE.toString(), JSON.stringify({
- task_id: taskId,
- priority_id: targetGroup.id,
- team_id: teamId,
- }));
+ socket.emit(
+ SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+ JSON.stringify({
+ task_id: taskId,
+ priority_id: targetGroup.id,
+ team_id: teamId,
+ })
+ );
} else if (currentGrouping === 'status') {
// Emit status change event
- socket.emit(SocketEvents.TASK_STATUS_CHANGE.toString(), JSON.stringify({
- task_id: taskId,
- status_id: targetGroup.id,
- team_id: teamId,
- }));
+ socket.emit(
+ SocketEvents.TASK_STATUS_CHANGE.toString(),
+ JSON.stringify({
+ task_id: taskId,
+ status_id: targetGroup.id,
+ team_id: teamId,
+ })
+ );
}
}
},
@@ -208,7 +214,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
// Check if we're dropping on a task, group, or empty group
const overTask = allTasks.find(task => task.id === overId);
const overGroup = groups.find(group => group.id === overId);
-
+
// Check if dropping on empty group drop zone
const isEmptyGroupDrop = typeof overId === 'string' && overId.startsWith('empty-group-');
const emptyGroupId = isEmptyGroupDrop ? overId.replace('empty-group-', '') : null;
@@ -290,4 +296,4 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
handleDragOver,
handleDragEnd,
};
-};
\ No newline at end of file
+};
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowActions.ts b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowActions.ts
index a5a816b6..aaaee9b9 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowActions.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowActions.ts
@@ -24,14 +24,21 @@ export const useTaskRowActions = ({
const { socket, connected } = useSocket();
// Handle checkbox change
- const handleCheckboxChange = useCallback((e: any) => {
- e.stopPropagation(); // Prevent row click when clicking checkbox
- dispatch(toggleTaskSelection(taskId));
- }, [dispatch, taskId]);
+ const handleCheckboxChange = useCallback(
+ (e: any) => {
+ e.stopPropagation(); // Prevent row click when clicking checkbox
+ dispatch(toggleTaskSelection(taskId));
+ },
+ [dispatch, taskId]
+ );
// Handle task name save
const handleTaskNameSave = useCallback(() => {
- if (taskName?.trim() !== '' && connected && taskName.trim() !== (task.title || task.name || '').trim()) {
+ if (
+ taskName?.trim() !== '' &&
+ connected &&
+ taskName.trim() !== (task.title || task.name || '').trim()
+ ) {
socket?.emit(
SocketEvents.TASK_NAME_CHANGE.toString(),
JSON.stringify({
@@ -42,7 +49,16 @@ export const useTaskRowActions = ({
);
}
setEditTaskName(false);
- }, [taskName, connected, socket, task.id, task.parent_task_id, task.title, task.name, setEditTaskName]);
+ }, [
+ taskName,
+ connected,
+ socket,
+ task.id,
+ task.parent_task_id,
+ task.title,
+ task.name,
+ setEditTaskName,
+ ]);
// Handle task name edit start
const handleTaskNameEdit = useCallback(() => {
@@ -60,4 +76,4 @@ export const useTaskRowActions = ({
handleTaskNameEdit,
handleTaskNameChange,
};
-};
\ No newline at end of file
+};
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
index 6359deb3..8d51f303 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
@@ -36,7 +36,7 @@ interface UseTaskRowColumnsProps {
isCustom?: boolean;
}>;
updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
-
+
// From useTaskRowState
taskDisplayName: string;
convertedTask: any;
@@ -49,16 +49,16 @@ interface UseTaskRowColumnsProps {
taskName: string;
setEditTaskName: (editing: boolean) => void;
setTaskName: (name: string) => void;
-
+
// From useTaskRowActions
handleCheckboxChange: (e: any) => void;
handleTaskNameSave: () => void;
handleTaskNameEdit: () => void;
-
+
// Drag and drop
attributes: any;
listeners: any;
-
+
// Depth for nested subtasks
depth?: number;
}
@@ -89,237 +89,185 @@ export const useTaskRowColumns = ({
listeners,
depth = 0,
}: UseTaskRowColumnsProps) => {
-
- const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number) => {
- switch (columnId) {
- case 'dragHandle':
- return (
-
- );
-
- case 'checkbox':
- return (
-
- );
-
- case 'taskKey':
- return (
-
- );
-
- case 'title':
- return (
-
- );
-
- case 'description':
- return (
-
- );
-
- case 'status':
- return (
-
- );
-
- case 'assignees':
- return (
-
- );
-
- case 'priority':
- return (
-
- );
-
- case 'dueDate':
- return (
-
- );
-
- case 'startDate':
- return (
-
- );
-
- case 'progress':
- return (
-
- );
-
- case 'labels':
- return (
-
- );
-
- case 'phase':
- return (
-
- );
-
- case 'timeTracking':
- return (
-
- );
-
- case 'estimation':
- return (
-
- );
-
- case 'completedDate':
- return (
-
- );
-
- case 'createdDate':
- return (
-
- );
-
- case 'lastUpdated':
- return (
-
- );
-
- case 'reporter':
- return (
-
- );
-
- default:
- // Handle custom columns
- const column = visibleColumns.find(col => col.id === columnId);
- if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
+ const renderColumn = useCallback(
+ (columnId: string, width: string, isSticky?: boolean, index?: number) => {
+ switch (columnId) {
+ case 'dragHandle':
return (
-
);
- }
- return null;
- }
- }, [
- task,
- projectId,
- isSubtask,
- isSelected,
- isDarkMode,
- visibleColumns,
- updateTaskCustomColumnValue,
- taskDisplayName,
- convertedTask,
- formattedDates,
- dateValues,
- labelsAdapter,
- activeDatePicker,
- setActiveDatePicker,
- editTaskName,
- taskName,
- setEditTaskName,
- setTaskName,
- handleCheckboxChange,
- handleTaskNameSave,
- handleTaskNameEdit,
- attributes,
- listeners,
- ]);
+
+ case 'checkbox':
+ return (
+
+ );
+
+ case 'taskKey':
+ return
;
+
+ case 'title':
+ return (
+
+ );
+
+ case 'description':
+ return
;
+
+ case 'status':
+ return (
+
+ );
+
+ case 'assignees':
+ return (
+
+ );
+
+ case 'priority':
+ return (
+
+ );
+
+ case 'dueDate':
+ return (
+
+ );
+
+ case 'startDate':
+ return (
+
+ );
+
+ case 'progress':
+ return
;
+
+ case 'labels':
+ return (
+
+ );
+
+ case 'phase':
+ return (
+
+ );
+
+ case 'timeTracking':
+ return (
+
+ );
+
+ case 'estimation':
+ return
;
+
+ case 'completedDate':
+ return
;
+
+ case 'createdDate':
+ return
;
+
+ case 'lastUpdated':
+ return
;
+
+ case 'reporter':
+ return
;
+
+ default:
+ // Handle custom columns
+ const column = visibleColumns.find(col => col.id === columnId);
+ if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
+ return (
+
+ );
+ }
+ return null;
+ }
+ },
+ [
+ task,
+ projectId,
+ isSubtask,
+ isSelected,
+ isDarkMode,
+ visibleColumns,
+ updateTaskCustomColumnValue,
+ taskDisplayName,
+ convertedTask,
+ formattedDates,
+ dateValues,
+ labelsAdapter,
+ activeDatePicker,
+ setActiveDatePicker,
+ editTaskName,
+ taskName,
+ setEditTaskName,
+ setTaskName,
+ handleCheckboxChange,
+ handleTaskNameSave,
+ handleTaskNameEdit,
+ attributes,
+ listeners,
+ ]
+ );
return { renderColumn };
-};
\ No newline at end of file
+};
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowState.ts b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowState.ts
index 2919caa3..c8905e4e 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowState.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowState.ts
@@ -7,7 +7,7 @@ import { getTaskDisplayName, formatDate } from '../components/TaskRowColumns';
export const useTaskRowState = (task: Task) => {
// State for tracking which date picker is open
const [activeDatePicker, setActiveDatePicker] = useState
(null);
-
+
// State for editing task name
const [editTaskName, setEditTaskName] = useState(false);
const [taskName, setTaskName] = useState(task.title || task.name || '');
@@ -18,64 +18,96 @@ export const useTaskRowState = (task: Task) => {
}, [task.title, task.name]);
// Memoize task display name
- const taskDisplayName = useMemo(() => getTaskDisplayName(task), [task.title, task.name, task.task_key]);
+ const taskDisplayName = useMemo(
+ () => getTaskDisplayName(task),
+ [task.title, task.name, task.task_key]
+ );
// Memoize converted task for AssigneeSelector to prevent recreation
- const convertedTask = useMemo(() => ({
- id: task.id,
- name: taskDisplayName,
- task_key: task.task_key || taskDisplayName,
- assignees:
- task.assignee_names?.map((assignee: InlineMember, index: number) => ({
- team_member_id: assignee.team_member_id || `assignee-${index}`,
- id: assignee.team_member_id || `assignee-${index}`,
- project_member_id: assignee.team_member_id || `assignee-${index}`,
- name: assignee.name || '',
- })) || [],
- parent_task_id: task.parent_task_id,
- status_id: undefined,
- project_id: undefined,
- manual_progress: undefined,
- }), [task.id, taskDisplayName, task.task_key, task.assignee_names, task.parent_task_id]);
+ const convertedTask = useMemo(
+ () => ({
+ id: task.id,
+ name: taskDisplayName,
+ task_key: task.task_key || taskDisplayName,
+ assignees:
+ task.assignee_names?.map((assignee: InlineMember, index: number) => ({
+ team_member_id: assignee.team_member_id || `assignee-${index}`,
+ id: assignee.team_member_id || `assignee-${index}`,
+ project_member_id: assignee.team_member_id || `assignee-${index}`,
+ name: assignee.name || '',
+ })) || [],
+ parent_task_id: task.parent_task_id,
+ status_id: undefined,
+ project_id: undefined,
+ manual_progress: undefined,
+ }),
+ [task.id, taskDisplayName, task.task_key, task.assignee_names, task.parent_task_id]
+ );
// Memoize formatted dates
- const formattedDates = useMemo(() => ({
- due: (() => {
- const dateValue = task.dueDate || task.due_date;
- return dateValue ? formatDate(dateValue) : null;
- })(),
- start: task.startDate ? formatDate(task.startDate) : null,
- completed: task.completedAt ? formatDate(task.completedAt) : null,
- created: (task.createdAt || task.created_at) ? formatDate(task.createdAt || task.created_at) : null,
- updated: task.updatedAt ? formatDate(task.updatedAt) : null,
- }), [task.dueDate, task.due_date, task.startDate, task.completedAt, task.createdAt, task.created_at, task.updatedAt]);
+ const formattedDates = useMemo(
+ () => ({
+ due: (() => {
+ const dateValue = task.dueDate || task.due_date;
+ return dateValue ? formatDate(dateValue) : null;
+ })(),
+ start: task.startDate ? formatDate(task.startDate) : null,
+ completed: task.completedAt ? formatDate(task.completedAt) : null,
+ created:
+ task.createdAt || task.created_at ? formatDate(task.createdAt || task.created_at) : null,
+ updated: task.updatedAt ? formatDate(task.updatedAt) : null,
+ }),
+ [
+ task.dueDate,
+ task.due_date,
+ task.startDate,
+ task.completedAt,
+ task.createdAt,
+ task.created_at,
+ task.updatedAt,
+ ]
+ );
// Memoize date values for DatePicker
const dateValues = useMemo(
() => ({
start: task.startDate ? dayjs(task.startDate) : undefined,
- due: (task.dueDate || task.due_date) ? dayjs(task.dueDate || task.due_date) : undefined,
+ due: task.dueDate || task.due_date ? dayjs(task.dueDate || task.due_date) : undefined,
}),
[task.startDate, task.dueDate, task.due_date]
);
// Create labels adapter for LabelsSelector
- const labelsAdapter = useMemo(() => ({
- id: task.id,
- name: task.title || task.name,
- parent_task_id: task.parent_task_id,
- manual_progress: false,
- all_labels: task.all_labels?.map(label => ({
- id: label.id,
- name: label.name,
- color_code: label.color_code,
- })) || [],
- labels: task.labels?.map(label => ({
- id: label.id,
- name: label.name,
- color_code: label.color,
- })) || [],
- }), [task.id, task.title, task.name, task.parent_task_id, task.all_labels, task.labels, task.all_labels?.length, task.labels?.length]);
+ const labelsAdapter = useMemo(
+ () => ({
+ id: task.id,
+ name: task.title || task.name,
+ parent_task_id: task.parent_task_id,
+ manual_progress: false,
+ all_labels:
+ task.all_labels?.map(label => ({
+ id: label.id,
+ name: label.name,
+ color_code: label.color_code,
+ })) || [],
+ labels:
+ task.labels?.map(label => ({
+ id: label.id,
+ name: label.name,
+ color_code: label.color,
+ })) || [],
+ }),
+ [
+ task.id,
+ task.title,
+ task.name,
+ task.parent_task_id,
+ task.all_labels,
+ task.labels,
+ task.all_labels?.length,
+ task.labels?.length,
+ ]
+ );
return {
// State
@@ -85,7 +117,7 @@ export const useTaskRowState = (task: Task) => {
setEditTaskName,
taskName,
setTaskName,
-
+
// Computed values
taskDisplayName,
convertedTask,
@@ -93,4 +125,4 @@ export const useTaskRowState = (task: Task) => {
dateValues,
labelsAdapter,
};
-};
\ No newline at end of file
+};
diff --git a/worklenz-frontend/src/components/task-list-v2/types/TaskRowTypes.ts b/worklenz-frontend/src/components/task-list-v2/types/TaskRowTypes.ts
index b9149229..146be116 100644
--- a/worklenz-frontend/src/components/task-list-v2/types/TaskRowTypes.ts
+++ b/worklenz-frontend/src/components/task-list-v2/types/TaskRowTypes.ts
@@ -113,7 +113,7 @@ export interface ColumnRendererProps {
listeners: any;
}
-export type ColumnId =
+export type ColumnId =
| 'dragHandle'
| 'checkbox'
| 'taskKey'
@@ -242,4 +242,4 @@ export interface CustomColumnProps extends BaseColumnProps {
export interface TaskLabelsCellProps {
labels: Task['labels'];
isDarkMode: boolean;
-}
\ No newline at end of file
+}
diff --git a/worklenz-frontend/src/components/task-management/CreateTaskModal.css b/worklenz-frontend/src/components/task-management/CreateTaskModal.css
index 481e986c..535fac40 100644
--- a/worklenz-frontend/src/components/task-management/CreateTaskModal.css
+++ b/worklenz-frontend/src/components/task-management/CreateTaskModal.css
@@ -106,7 +106,9 @@
/* Sortable item styling */
.sortable-status-item {
- transition: transform 0.2s ease, opacity 0.2s ease;
+ transition:
+ transform 0.2s ease,
+ opacity 0.2s ease;
}
.sortable-status-item.is-dragging {
@@ -144,11 +146,11 @@
width: 95% !important;
margin: 10px;
}
-
+
.dark-modal .ant-modal-body {
padding: 16px;
}
-
+
.status-item {
padding: 12px;
}
@@ -173,7 +175,9 @@
.status-item-enter-active {
opacity: 1;
transform: translateY(0);
- transition: opacity 0.3s ease, transform 0.3s ease;
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
}
.status-item-exit {
@@ -184,5 +188,7 @@
.status-item-exit-active {
opacity: 0;
transform: translateY(-10px);
- transition: opacity 0.3s ease, transform 0.3s ease;
-}
\ No newline at end of file
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
+}
diff --git a/worklenz-frontend/src/components/task-management/CreateTaskModal.tsx b/worklenz-frontend/src/components/task-management/CreateTaskModal.tsx
index 54d3ad16..55cfa9f3 100644
--- a/worklenz-frontend/src/components/task-management/CreateTaskModal.tsx
+++ b/worklenz-frontend/src/components/task-management/CreateTaskModal.tsx
@@ -1,5 +1,17 @@
import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Modal, Form, Input, Button, Tabs, Space, Divider, Typography, Flex, DatePicker, Select } from '@/shared/antd-imports';
+import {
+ Modal,
+ Form,
+ Input,
+ Button,
+ Tabs,
+ Space,
+ Divider,
+ Typography,
+ Flex,
+ DatePicker,
+ Select,
+} from '@/shared/antd-imports';
import { PlusOutlined, DragOutlined } from '@/shared/antd-imports';
import { useTranslation } from 'react-i18next';
import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
@@ -11,7 +23,11 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
import TaskDetailsForm from '@/components/task-drawer/shared/info-tab/task-details-form';
import AssigneeSelector from '@/components/AssigneeSelector';
import LabelsSelector from '@/components/LabelsSelector';
-import { createStatus, fetchStatuses, fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
+import {
+ createStatus,
+ fetchStatuses,
+ fetchStatusesCategories,
+} from '@/features/taskAttributes/taskStatusSlice';
import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
import { ITaskStatusUpdateModel } from '@/types/tasks/task-status-update-model.types';
import { Modal as AntModal } from '@/shared/antd-imports';
@@ -49,14 +65,9 @@ const SortableStatusItem: React.FC = ({
const [editName, setEditName] = useState(status.name || '');
const inputRef = useRef(null);
- const {
- attributes,
- listeners,
- setNodeRef,
- transform,
- transition,
- isDragging,
- } = useSortable({ id });
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+ id,
+ });
const style = {
transform: CSS.Transform.toString(transform),
@@ -76,13 +87,16 @@ const SortableStatusItem: React.FC = ({
setIsEditing(false);
}, [status.name]);
- const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
- handleSave();
- } else if (e.key === 'Escape') {
- handleCancel();
- }
- }, [handleSave, handleCancel]);
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ handleSave();
+ } else if (e.key === 'Escape') {
+ handleCancel();
+ }
+ },
+ [handleSave, handleCancel]
+ );
useEffect(() => {
if (isEditing && inputRef.current) {
@@ -127,7 +141,7 @@ const SortableStatusItem: React.FC = ({
setEditName(e.target.value)}
+ onChange={e => setEditName(e.target.value)}
onBlur={handleSave}
onKeyDown={handleKeyDown}
size="small"
@@ -151,7 +165,9 @@ const SortableStatusItem: React.FC = ({
type="text"
size="small"
onClick={() => setIsEditing(true)}
- className={isDarkMode ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-600'}
+ className={
+ isDarkMode ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-600'
+ }
>
Rename
@@ -176,7 +192,7 @@ const StatusManagement: React.FC<{
}> = ({ projectId, isDarkMode }) => {
const { t } = useTranslation('task-list-filters');
const dispatch = useAppDispatch();
-
+
const { status: statuses } = useAppSelector(state => state.taskStatusReducer);
const [localStatuses, setLocalStatuses] = useState(statuses);
const [newStatusName, setNewStatusName] = useState('');
@@ -201,9 +217,9 @@ const StatusManagement: React.FC<{
return;
}
- setLocalStatuses((items) => {
- const oldIndex = items.findIndex((item) => item.id === active.id);
- const newIndex = items.findIndex((item) => item.id === over.id);
+ setLocalStatuses(items => {
+ const oldIndex = items.findIndex(item => item.id === active.id);
+ const newIndex = items.findIndex(item => item.id === over.id);
if (oldIndex === -1 || newIndex === -1) return items;
@@ -228,7 +244,7 @@ const StatusManagement: React.FC<{
try {
const statusCategories = await dispatch(fetchStatusesCategories()).unwrap();
const defaultCategory = statusCategories[0]?.id;
-
+
if (!defaultCategory) {
console.error('No status categories found');
return;
@@ -250,35 +266,41 @@ const StatusManagement: React.FC<{
}
}, [newStatusName, projectId, dispatch]);
- const handleRenameStatus = useCallback(async (id: string, name: string) => {
- try {
- const body: ITaskStatusUpdateModel = {
- name: name.trim(),
- project_id: projectId,
- };
-
- await statusApiService.updateNameOfStatus(id, body, projectId);
- dispatch(fetchStatuses(projectId));
- } catch (error) {
- console.error('Error renaming status:', error);
- }
- }, [projectId, dispatch]);
+ const handleRenameStatus = useCallback(
+ async (id: string, name: string) => {
+ try {
+ const body: ITaskStatusUpdateModel = {
+ name: name.trim(),
+ project_id: projectId,
+ };
- const handleDeleteStatus = useCallback(async (id: string) => {
- AntModal.confirm({
- title: 'Delete Status',
- content: 'Are you sure you want to delete this status? This action cannot be undone.',
- onOk: async () => {
- try {
- const replacingStatusId = localStatuses.find(s => s.id !== id)?.id || '';
- await statusApiService.deleteStatus(id, projectId, replacingStatusId);
- dispatch(fetchStatuses(projectId));
- } catch (error) {
- console.error('Error deleting status:', error);
- }
- },
- });
- }, [localStatuses, projectId, dispatch]);
+ await statusApiService.updateNameOfStatus(id, body, projectId);
+ dispatch(fetchStatuses(projectId));
+ } catch (error) {
+ console.error('Error renaming status:', error);
+ }
+ },
+ [projectId, dispatch]
+ );
+
+ const handleDeleteStatus = useCallback(
+ async (id: string) => {
+ AntModal.confirm({
+ title: 'Delete Status',
+ content: 'Are you sure you want to delete this status? This action cannot be undone.',
+ onOk: async () => {
+ try {
+ const replacingStatusId = localStatuses.find(s => s.id !== id)?.id || '';
+ await statusApiService.deleteStatus(id, projectId, replacingStatusId);
+ dispatch(fetchStatuses(projectId));
+ } catch (error) {
+ console.error('Error deleting status:', error);
+ }
+ },
+ });
+ },
+ [localStatuses, projectId, dispatch]
+ );
return (
@@ -296,7 +318,7 @@ const StatusManagement: React.FC<{
setNewStatusName(e.target.value)}
+ onChange={e => setNewStatusName(e.target.value)}
onPressEnter={handleCreateStatus}
className="flex-1"
/>
@@ -319,16 +341,18 @@ const StatusManagement: React.FC<{
strategy={verticalListSortingStrategy}
>
- {localStatuses.filter(status => status.id).map((status) => (
-
- ))}
+ {localStatuses
+ .filter(status => status.id)
+ .map(status => (
+
+ ))}
@@ -342,29 +366,25 @@ const StatusManagement: React.FC<{
);
};
-const CreateTaskModal: React.FC
= ({
- open,
- onClose,
- projectId,
-}) => {
+const CreateTaskModal: React.FC = ({ open, onClose, projectId }) => {
const { t } = useTranslation('task-drawer/task-drawer');
const [form] = Form.useForm();
const [activeTab, setActiveTab] = useState('task-info');
const dispatch = useAppDispatch();
-
+
// Redux state
const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
const currentProjectId = useAppSelector(state => state.projectReducer.projectId);
const user = useAppSelector(state => state.auth?.user);
-
+
const finalProjectId = projectId || currentProjectId;
const handleSubmit = useCallback(async () => {
try {
const values = await form.validateFields();
-
+
const { socket } = useSocket();
-
+
if (!socket || !user || !finalProjectId) {
console.error('Missing socket, user, or project ID');
return;
@@ -383,15 +403,14 @@ const CreateTaskModal: React.FC = ({
// Create task via socket
socket.emit(SocketEvents.QUICK_TASK.toString(), taskData);
-
+
// Refresh task list
dispatch(fetchTasksV3(finalProjectId));
-
+
// Reset form and close modal
form.resetFields();
setActiveTab('task-info');
onClose();
-
} catch (error) {
console.error('Form validation failed:', error);
}
@@ -423,9 +442,7 @@ const CreateTaskModal: React.FC = ({
-
+
@@ -465,65 +482,49 @@ const CreateTaskModal: React.FC = ({
/>
-
-
-
+
+
+
- {/* Status Selection */}
-
-
-
+ {/* Status Selection */}
+
+
+
- {/* Priority Selection */}
-
-
-
+ {/* Priority Selection */}
+
+
+
- {/* Assignees */}
-
-
-
+ {/* Assignees */}
+
+
+
- {/* Due Date */}
-
-
-
-
+ {/* Due Date */}
+
+
+
-
+
) : (
@@ -550,4 +548,4 @@ const CreateTaskModal: React.FC
= ({
);
};
-export default CreateTaskModal;
\ No newline at end of file
+export default CreateTaskModal;
diff --git a/worklenz-frontend/src/components/task-management/ManagePhaseModal.css b/worklenz-frontend/src/components/task-management/ManagePhaseModal.css
index 4d75b424..2a9a7313 100644
--- a/worklenz-frontend/src/components/task-management/ManagePhaseModal.css
+++ b/worklenz-frontend/src/components/task-management/ManagePhaseModal.css
@@ -276,7 +276,9 @@
/* Sortable item styling */
.sortable-phase-item {
- transition: transform 0.2s ease, opacity 0.2s ease;
+ transition:
+ transform 0.2s ease,
+ opacity 0.2s ease;
}
.sortable-phase-item.is-dragging {
@@ -311,15 +313,15 @@
width: 95% !important;
margin: 10px;
}
-
+
.dark-modal .ant-modal-body {
padding: 16px;
}
-
+
.phase-item {
padding: 12px;
}
-
+
.phase-color-picker {
width: 24px;
height: 24px;
@@ -354,7 +356,9 @@
.phase-item-enter-active {
opacity: 1;
transform: translateY(0);
- transition: opacity 0.3s ease, transform 0.3s ease;
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
}
.phase-item-exit {
@@ -365,7 +369,9 @@
.phase-item-exit-active {
opacity: 0;
transform: translateY(-10px);
- transition: opacity 0.3s ease, transform 0.3s ease;
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
}
/* Loading state styling */
@@ -380,4 +386,4 @@
/* Divider styling for dark mode */
.dark-modal .ant-divider-horizontal {
border-color: #303030;
-}
\ No newline at end of file
+}
diff --git a/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx b/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
index c4896ec5..8c1a214f 100644
--- a/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
+++ b/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
@@ -1,5 +1,16 @@
import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Modal, Form, Input, Button, Space, Divider, Typography, Flex, ColorPicker, Tooltip } from '@/shared/antd-imports';
+import {
+ Modal,
+ Form,
+ Input,
+ Button,
+ Space,
+ Divider,
+ Typography,
+ Flex,
+ ColorPicker,
+ Tooltip,
+} from '@/shared/antd-imports';
import { PlusOutlined, HolderOutlined, EditOutlined, DeleteOutlined } from '@/shared/antd-imports';
import { useTranslation } from 'react-i18next';
import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
@@ -58,14 +69,9 @@ const SortablePhaseItem: React.FC = ({
const [isHovered, setIsHovered] = useState(false);
const inputRef = useRef(null);
- const {
- attributes,
- listeners,
- setNodeRef,
- transform,
- transition,
- isDragging,
- } = useSortable({ id });
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+ id,
+ });
const style = {
transform: CSS.Transform.toString(transform),
@@ -85,13 +91,16 @@ const SortablePhaseItem: React.FC = ({
setIsEditing(false);
}, [phase.name]);
- const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
- handleSave();
- } else if (e.key === 'Escape') {
- handleCancel();
- }
- }, [handleSave, handleCancel]);
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ handleSave();
+ } else if (e.key === 'Escape') {
+ handleCancel();
+ }
+ },
+ [handleSave, handleCancel]
+ );
const handleClick = useCallback(() => {
setIsEditing(true);
@@ -132,8 +141,8 @@ const SortablePhaseItem: React.FC = ({
{...attributes}
{...listeners}
className={`flex-shrink-0 cursor-grab active:cursor-grabbing p-1 rounded transition-all duration-200 ${
- isDarkMode
- ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-600'
+ isDarkMode
+ ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-600'
: 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'
}`}
>
@@ -144,12 +153,12 @@ const SortablePhaseItem: React.FC = ({
setColor(value.toHexString())}
+ onChange={value => setColor(value.toHexString())}
onChangeComplete={handleColorChangeComplete}
size="small"
className="phase-color-picker"
/>
-
{/* Hover Actions */}
-
+