+ {visibleColumns.map((column) => {
+ const columnStyle: ColumnStyle = {
+ width: column.width,
+ };
+
+ return (
+
+ {column.id === 'dragHandle' ? (
+
+ ) : (
+ column.label
+ )}
+
+ );
+ })}
+
Loading...
;
+ if (error) return = memo(({ task, visibleColumns }) => {
+ // Drag and drop functionality
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+ id: task.id,
+ data: {
+ type: 'task',
+ task,
+ },
+ });
+
+ // Memoize style object to prevent unnecessary re-renders
+ const style = useMemo(() => ({
+ transform: CSS.Transform.toString(transform),
+ transition,
+ opacity: isDragging ? 0.5 : 1,
+ }), [transform, transition, isDragging]);
+
+ // Get dark mode from Redux state
+ const themeMode = useAppSelector(state => state.themeReducer.mode);
+ const isDarkMode = themeMode === 'dark';
+
+ // Memoize task display name
+ 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]);
+
+ // Memoize formatted dates
+ const formattedDueDate = useMemo(() =>
+ task.dueDate ? formatDate(task.dueDate) : null,
+ [task.dueDate]
+ );
+
+ const formattedStartDate = useMemo(() =>
+ task.startDate ? formatDate(task.startDate) : null,
+ [task.startDate]
+ );
+
+ const formattedCompletedDate = useMemo(() =>
+ task.completedAt ? formatDate(task.completedAt) : null,
+ [task.completedAt]
+ );
+
+ const formattedCreatedDate = useMemo(() =>
+ task.created_at ? formatDate(task.created_at) : null,
+ [task.created_at]
+ );
+
+ const formattedUpdatedDate = useMemo(() =>
+ task.updatedAt ? formatDate(task.updatedAt) : null,
+ [task.updatedAt]
+ );
+
+ // Memoize status style
+ const statusStyle = useMemo(() => ({
+ backgroundColor: task.statusColor ? `${task.statusColor}20` : 'rgb(229, 231, 235)',
+ color: task.statusColor || 'rgb(31, 41, 55)',
+ }), [task.statusColor]);
+
+ // Memoize priority style
+ const priorityStyle = useMemo(() => ({
+ backgroundColor: task.priorityColor ? `${task.priorityColor}20` : 'rgb(229, 231, 235)',
+ color: task.priorityColor || 'rgb(31, 41, 55)',
+ }), [task.priorityColor]);
+
+ // Memoize labels display
+ const labelsDisplay = useMemo(() => {
+ if (!task.labels || task.labels.length === 0) return null;
+
+ const visibleLabels = task.labels.slice(0, 2);
+ const remainingCount = task.labels.length - 2;
+
+ return {
+ visibleLabels,
+ remainingCount: remainingCount > 0 ? remainingCount : null,
+ };
+ }, [task.labels]);
+
+ const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number) => {
+ const baseStyle = { width };
+
+ switch (columnId) {
+ case 'dragHandle':
+ return (
+
+
+
+ );
+
+ case 'taskKey':
+ return (
+
+
+ {task.task_key || 'N/A'}
+
+
+ );
+
+ case 'title':
+ return (
+
+
+ {taskDisplayName}
+
+
+ );
+
+ case 'status':
+ return (
+
+
+ {task.status}
+
+
+ );
+
+ case 'assignees':
+ return (
+
+ );
+
+ case 'priority':
+ return (
+
+
+ {task.priority}
+
+
+ );
+
+ case 'dueDate':
+ return (
+
+ {formattedDueDate && (
+
+ {formattedDueDate}
+
+ )}
+
+ );
+
+ case 'progress':
+ return (
+
+ {task.progress !== undefined &&
+ task.progress >= 0 &&
+ (task.progress === 100 ? (
+
+
+
+ ) : (
+
+ ))}
+
+ {labelsDisplay?.visibleLabels.map((label, index) => (
+
+ {label.name}
+
+ ))}
+ {labelsDisplay?.remainingCount && (
+
+ +{labelsDisplay.remainingCount}
+
+ )}
+
+ );
+
+ case 'phase':
+ return (
+
+
+ {task.phase}
+
+
+ );
+
+ case 'timeTracking':
+ return (
+
+
+
+ {task.timeTracking?.logged || 0}h
+
+ {task.timeTracking?.estimated && (
+
+ /{task.timeTracking.estimated}h
+
+ )}
+
+ );
+
+ case 'estimation':
+ return (
+
+ {task.timeTracking?.estimated && (
+
+ {task.timeTracking.estimated}h
+
+ )}
+
+ );
+
+ case 'startDate':
+ return (
+
+ {formattedStartDate && (
+
+ {formattedStartDate}
+
+ )}
+
+ );
+
+ case 'completedDate':
+ return (
+
+ {formattedCompletedDate && (
+
+ {formattedCompletedDate}
+
+ )}
+
+ );
+
+ case 'createdDate':
+ return (
+
+ {formattedCreatedDate && (
+
+ {formattedCreatedDate}
+
+ )}
+
+ );
+
+ case 'lastUpdated':
+ return (
+
+ {formattedUpdatedDate && (
+
+ {formattedUpdatedDate}
+
+ )}
+
+ );
+
+ case 'reporter':
+ return (
+
+ {task.reporter && (
+ {task.reporter}
+ )}
+
+ );
+
+ default:
+ return null;
+ }
+ }, [
+ attributes,
+ listeners,
+ task.task_key,
+ task.status,
+ task.priority,
+ task.phase,
+ task.reporter,
+ task.assignee_names,
+ task.timeTracking,
+ task.progress,
+ task.sub_tasks,
+ taskDisplayName,
+ statusStyle,
+ priorityStyle,
+ formattedDueDate,
+ formattedStartDate,
+ formattedCompletedDate,
+ formattedCreatedDate,
+ formattedUpdatedDate,
+ labelsDisplay,
+ isDarkMode,
+ convertedTask,
+ ]);
+
+ return (
+
+ {visibleColumns.map((column, index) =>
+ renderColumn(column.id, column.width, column.isSticky, index)
+ )}
+
+ );
+});
+
+TaskRow.displayName = 'TaskRow';
+
+export default TaskRow;
diff --git a/worklenz-frontend/src/components/task-management/drag-drop-optimized.css b/worklenz-frontend/src/components/task-management/drag-drop-optimized.css
index 6f21e39c..e69de29b 100644
--- a/worklenz-frontend/src/components/task-management/drag-drop-optimized.css
+++ b/worklenz-frontend/src/components/task-management/drag-drop-optimized.css
@@ -1,40 +0,0 @@
-/* MINIMAL DRAG AND DROP CSS - SHOW ONLY TASK NAME */
-
-/* Basic drag handle styling */
-.drag-handle-optimized {
- cursor: grab;
- opacity: 0.6;
- transition: opacity 0.2s ease;
-}
-
-.drag-handle-optimized:hover {
- opacity: 1;
-}
-
-.drag-handle-optimized:active {
- cursor: grabbing;
-}
-
-/* Simple drag overlay - just show task name */
-[data-dnd-overlay] {
- background: white;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- padding: 8px 12px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
- pointer-events: none;
- z-index: 9999;
-}
-
-/* Dark mode support for drag overlay */
-.dark [data-dnd-overlay],
-[data-theme="dark"] [data-dnd-overlay] {
- background: #1f1f1f;
- border-color: #404040;
- color: white;
-}
-
-/* Hide drag handle during drag */
-[data-dnd-dragging="true"] .drag-handle-optimized {
- opacity: 0;
-}
diff --git a/worklenz-frontend/src/components/task-management/task-group.tsx b/worklenz-frontend/src/components/task-management/task-group.tsx
index a79c0b3f..07d0b679 100644
--- a/worklenz-frontend/src/components/task-management/task-group.tsx
+++ b/worklenz-frontend/src/components/task-management/task-group.tsx
@@ -1,7 +1,7 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
import {
Button,
Typography,
@@ -11,12 +11,15 @@ import {
DownOutlined,
} from '@/shared/antd-imports';
import { TaskGroup as TaskGroupType, Task } from '@/types/task-management.types';
-import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
+import { taskManagementSelectors, selectAllTasks } from '@/features/task-management/task-management.slice';
import { RootState } from '@/app/store';
import TaskRow from './task-row';
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
import { TaskListField } from '@/features/task-management/taskListFields.slice';
import { Checkbox } from '@/components';
+import { selectIsGroupCollapsed, toggleGroupCollapsed } from '@/features/task-management/grouping.slice';
+import { selectIsTaskSelected } from '@/features/task-management/selection.slice';
+import { Draggable } from 'react-beautiful-dnd';
const { Text } = Typography;
@@ -58,6 +61,7 @@ const TaskGroup: React.FC = React.memo(
onSelectTask,
onToggleSubtasks,
}) => {
+ const dispatch = useDispatch();
const [isCollapsed, setIsCollapsed] = useState(group.collapsed || false);
const { setNodeRef, isOver } = useDroppable({
@@ -69,7 +73,7 @@ const TaskGroup: React.FC = React.memo(
});
// Get all tasks from the store
- const allTasks = useSelector(taskManagementSelectors.selectAll);
+ const allTasks = useSelector(selectAllTasks);
// Get theme from Redux store
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
@@ -328,19 +332,29 @@ const TaskGroup: React.FC = React.memo(
{groupTasks.map((task, index) => (
-
+
+ {(provided, snapshot) => (
+
+
+
+ )}
+
))}
+
+
+
+ {priorities.map(priority => (
+
+ ))}
+
+
+
+
+ onSearchChange(e.target.value)}
+ placeholder="Search tasks..."
+ className="search-input"
+ />
+
+
+
+
+
+ {isCollapsed ? 'â–º' : 'â–¼'}
+
+
{group.title}
+ ({tasks.length})
+
+
+ {!isCollapsed && (
+
+ {tasks.map((task, index) => {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({
+ id: task.id,
+ });
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ };
+
+ return (
+
+ onTaskSelect(taskId, {} as React.MouseEvent)}
+ index={index}
+ />
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
+ |
+
+ Drop task here
+
+ |
+
+ )}
+ {!isDraggingCurrent && renderTaskRow(updatedTask)}
{updatedTask.show_sub_tasks && (
<>
{updatedTask?.sub_tasks?.map(subtask =>
@@ -1910,6 +1924,15 @@ const TaskListTable: React.FC = ({ taskList, tableId, active
)}
+ {placeholderIndex === displayTasks.length && (
+
+ |
+
+ Drop task here
+
+ |
+
+ )}
diff --git a/worklenz-frontend/src/types/task-list-field.types.ts b/worklenz-frontend/src/types/task-list-field.types.ts
new file mode 100644
index 00000000..35c5b24c
--- /dev/null
+++ b/worklenz-frontend/src/types/task-list-field.types.ts
@@ -0,0 +1,28 @@
+export interface TaskListField {
+ id: string;
+ name: string;
+ type: 'text' | 'number' | 'date' | 'select' | 'multiselect' | 'checkbox';
+ isVisible: boolean;
+ order: number;
+ width?: number;
+ options?: {
+ id: string;
+ label: string;
+ value: string;
+ color?: string;
+ }[];
+}
+
+export interface TaskListFieldGroup {
+ id: string;
+ name: string;
+ fields: TaskListField[];
+ order: number;
+}
+
+export interface TaskListFieldState {
+ fields: TaskListField[];
+ groups: TaskListFieldGroup[];
+ loading: boolean;
+ error: string | null;
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/types/task-management.types.ts b/worklenz-frontend/src/types/task-management.types.ts
index 064855a8..708ebf20 100644
--- a/worklenz-frontend/src/types/task-management.types.ts
+++ b/worklenz-frontend/src/types/task-management.types.ts
@@ -1,43 +1,57 @@
import { InlineMember } from './teamMembers/inlineMember.types';
+import { EntityState } from '@reduxjs/toolkit';
export interface Task {
id: string;
- task_key: string;
- title: string;
+ title?: string; // Make title optional since it can be empty from database
+ name?: string; // Alternative name field
+ task_key?: string; // Task key field
description?: string;
- status: 'todo' | 'doing' | 'done';
- priority: 'critical' | 'high' | 'medium' | 'low';
- phase: string; // Custom phases like 'planning', 'development', 'testing', 'deployment'
- progress: number; // 0-100
- assignees: string[];
- assignee_names?: InlineMember[];
- labels: Label[];
- startDate?: string; // Start date for the task
- dueDate?: string; // Due date for the task
- completedAt?: string; // When the task was completed
- reporter?: string; // Who reported/created the task
- timeTracking: {
- estimated?: number;
- logged: number;
- };
- customFields: Record;
- createdAt: string;
- updatedAt: string;
- order: number;
- // Subtask-related properties
+ status: string;
+ priority: string;
+ phase?: string;
+ assignee?: string;
+ assignee_names?: InlineMember[]; // Array of assigned members
+ names?: InlineMember[]; // Alternative names field
+ due_date?: string;
+ dueDate?: string; // Alternative due date field
+ startDate?: string; // Start date field
+ completedAt?: string; // Completion date
+ updatedAt?: string; // Update timestamp
+ created_at: string;
+ updated_at: string;
+ sub_tasks?: Task[];
sub_tasks_count?: number;
show_sub_tasks?: boolean;
- sub_tasks?: Task[];
+ parent_task_id?: string;
+ progress?: number;
+ weight?: number;
+ color?: string;
+ statusColor?: string;
+ priorityColor?: string;
+ labels?: { id: string; name: string; color: string }[];
+ comments_count?: number;
+ attachments_count?: number;
+ has_dependencies?: boolean;
+ schedule_id?: string | null;
+ order?: number;
+ reporter?: string; // Reporter field
+ timeTracking?: { // Time tracking information
+ logged?: number;
+ estimated?: number;
+ };
+ // Add any other task properties as needed
}
export interface TaskGroup {
id: string;
title: string;
- groupType: 'status' | 'priority' | 'phase';
- groupValue: string; // The actual value for the group (e.g., 'todo', 'high', 'development')
- collapsed: boolean;
taskIds: string[];
- color?: string; // For visual distinction
+ type?: 'status' | 'priority' | 'phase' | 'members';
+ color?: string;
+ collapsed?: boolean;
+ groupValue?: string;
+ // Add any other group properties as needed
}
export interface GroupingConfig {
@@ -73,14 +87,14 @@ export interface Label {
// Redux State Interfaces
export interface TaskManagementState {
- entities: Record;
ids: string[];
+ entities: Record;
loading: boolean;
error: string | null;
- groups: TaskGroup[]; // Pre-processed groups from V3 API
- grouping: string | null; // Current grouping from V3 API
- selectedPriorities: string[]; // Selected priority filters
- search: string; // Search query for filtering tasks
+ groups: TaskGroup[];
+ grouping: string | undefined;
+ selectedPriorities: string[];
+ search: string;
}
export interface TaskGroupsState {
@@ -89,15 +103,20 @@ export interface TaskGroupsState {
}
export interface GroupingState {
- currentGrouping: 'status' | 'priority' | 'phase';
- customPhases: string[];
- groupOrder: Record;
- groupStates: Record; // Persist group states
+ currentGrouping: TaskGrouping | null;
+ collapsedGroups: Set;
}
-export interface SelectionState {
+export interface TaskGrouping {
+ id: string;
+ name: string;
+ field: string;
+ collapsed?: boolean;
+}
+
+export interface TaskSelection {
selectedTaskIds: string[];
- lastSelectedId: string | null;
+ lastSelectedTaskId: string | null;
}
export interface ColumnsState {
diff --git a/worklenz-frontend/src/utils/colorUtils.ts b/worklenz-frontend/src/utils/colorUtils.ts
index b905e9dd..1d7e9c0c 100644
--- a/worklenz-frontend/src/utils/colorUtils.ts
+++ b/worklenz-frontend/src/utils/colorUtils.ts
@@ -1,3 +1,20 @@
export const tagBackground = (color: string): string => {
return `${color}1A`; // 1A is 10% opacity in hex
};
+
+export const getContrastColor = (hexcolor: string): string => {
+ // If a color is not a valid hex, default to a sensible contrast
+ if (!/^#([A-Fa-f0-9]{3}){1,2}$/.test(hexcolor)) {
+ return '#000000'; // Default to black for invalid colors
+ }
+
+ const r = parseInt(hexcolor.slice(1, 3), 16);
+ const g = parseInt(hexcolor.slice(3, 5), 16);
+ const b = parseInt(hexcolor.slice(5, 7), 16);
+
+ // Perceptual luminance calculation (from WCAG 2.0)
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+ // Use a threshold to decide between black and white text
+ return luminance > 0.5 ? '#000000' : '#FFFFFF';
+};