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

feat(task-management): enhance task grouping and localization support

Browse Source 
- Implemented unmapped task grouping for better organization of tasks without valid phases.
- Updated task distribution logic to handle unmapped tasks and added a corresponding group in the response.
- Enhanced localization by adding translations for "noTasksInGroup" in multiple languages.
- Improved task list components to support custom columns and better task management features.
- Refactored task management slice to include loading states for columns and custom columns.
This commit is contained in:
chamikaJ
2025-07-04 20:41:03 +05:30
parent 9e29031703
commit f30fde553d
23 changed files with 1560 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
worklenz-frontend/src/components/project-task-filters/create-status-button/create-status-button.tsx
View File

@@ -5,9 +5,11 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
import { toggleDrawer } from '../../../features/projects/status/StatusSlice';
import { colors } from '@/styles/colors';
import { useTranslation } from 'react-i18next';
import { useAppSelector } from '@/hooks/useAppSelector';
const CreateStatusButton = () => {
const { t } = useTranslation('task-list-filters');
const themeMode = useAppSelector(state => state.themeReducer.mode);
const dispatch = useAppDispatch();
@@ -19,9 +21,7 @@ const CreateStatusButton = () => {
onClick={() => dispatch(toggleDrawer())}
icon={
<SettingOutlined
style={{
color: colors.skyBlue,
}}
style={{ color: themeMode === 'dark' ? colors.white : colors.midBlue }}
/>
}
/>

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

@@ -79,7 +79,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
return (
<div
ref={setNodeRef}
className={`inline-flex w-max items-center px-4 py-2 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 rounded-t-md ${
className={`inline-flex w-max items-center px-4 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 rounded-t-md ${
isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
}`}
style={{
@@ -87,7 +87,10 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
color: headerTextColor,
position: 'sticky',
top: 0,
zIndex: 20 // Higher than sticky columns (zIndex: 1) and column headers (zIndex: 2)
zIndex: 25, // Higher than task rows but lower than column headers (z-30)
height: '36px',
minHeight: '36px',
maxHeight: '36px'
}}
onClick={onToggle}
>
@@ -95,18 +98,22 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
<div style={{ width: '32px' }} className="flex items-center justify-center">
{/* Chevron button */}
<button
className="p-1 rounded-md hover:bg-opacity-20 transition-colors"
style={{ backgroundColor: headerBackgroundColor, color: headerTextColor, borderColor: headerTextColor, border: '1px solid' }}
className="p-1 rounded-md hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out"
style={{ backgroundColor: 'transparent', color: headerTextColor }}
onClick={(e) => {
e.stopPropagation();
onToggle();
}}
>
{isCollapsed ? (
<ChevronRightIcon className="h-4 w-4" style={{ color: headerTextColor }} />
) : (
<ChevronDownIcon className="h-4 w-4" style={{ color: headerTextColor }} />
)}
<div
className="transition-transform duration-300 ease-out"
style={{
transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
transformOrigin: 'center'
}}
>
<ChevronRightIcon className="h-3.5 w-3.5" style={{ color: headerTextColor }} />
</div>
</button>
</div>
@@ -124,12 +131,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
</div>
{/* Group indicator and name */}
<div className="ml-2 flex items-center gap-3 flex-1">
<div className="ml-1 flex items-center gap-2 flex-1">
{/* Color indicator (removed as full header is colored) */}
{/* Group name and count */}
<div className="flex items-center flex-1">
<span className="text-sm font-medium">
<span className="text-sm font-semibold">
{group.name} ({group.count})
</span>
</div>

855
worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,7 +1,7 @@
import React, { memo, useMemo, useCallback, useState } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined, ArrowsAltOutlined } from '@ant-design/icons';
import { Checkbox, DatePicker } from 'antd';
import { dayjs, taskManagementAntdConfig } from '@/shared/antd-imports';
import { Task } from '@/types/task-management.types';
@@ -35,6 +35,7 @@ interface TaskRowProps {
isSticky?: boolean;
}>;
isSubtask?: boolean;
updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
}
interface TaskLabelsCellProps {
@@ -91,7 +92,7 @@ const formatDate = (dateString: string): string => {
}
};
const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumns, isSubtask = false }) => {
const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumns, isSubtask = false, updateTaskCustomColumnValue }) => {
const dispatch = useAppDispatch();
const task = useAppSelector(state => selectTaskById(state, taskId));
const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId));
@@ -277,7 +278,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'taskKey':
return (
<div className="flex items-center" style={baseStyle}>
<span className="text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap">
<span className="text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap badge badge-primary">
{task.task_key || 'N/A'}
</span>
</div>
@@ -294,21 +295,21 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
{!isSubtask && (
<button
onClick={handleToggleExpansion}
className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-2 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors ${
className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-2 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out ${
task.sub_tasks_count && task.sub_tasks_count > 0
? 'opacity-100'
: 'opacity-0 group-hover:opacity-100'
}`}
>
{task.sub_tasks_count && task.sub_tasks_count > 0 ? (
task.show_sub_tasks ? (
<DownOutlined className="text-gray-600 dark:text-gray-400" />
) : (
<RightOutlined className="text-gray-600 dark:text-gray-400" />
)
) : (
<div
className="transition-transform duration-300 ease-out"
style={{
transform: task.show_sub_tasks ? 'rotate(90deg)' : 'rotate(0deg)',
transformOrigin: 'center'
}}
>
<RightOutlined className="text-gray-600 dark:text-gray-400" />
)}
</div>
</button>
)}
@@ -333,13 +334,14 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
</div>
<button
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 ml-2 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-none bg-transparent cursor-pointer"
className="opacity-0 group-hover:opacity-100 transition-all duration-200 ml-2 mr-2 px-3 py-1.5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 cursor-pointer rounded-md shadow-sm hover:shadow-md flex items-center gap-1"
onClick={(e) => {
e.stopPropagation();
dispatch(setSelectedTaskId(task.id));
dispatch(setShowTaskDrawer(true));
}}
>
<ArrowsAltOutlined />
{t('openButton')}
</button>
</div>
@@ -642,9 +644,11 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
isDragging ? 'shadow-lg border border-blue-300' : ''
}`}
>
{visibleColumns.map((column, index) =>
renderColumn(column.id, column.width, column.isSticky, index)
)}
{visibleColumns.map((column, index) => (
<React.Fragment key={column.id}>
{renderColumn(column.id, column.width, column.isSticky, index)}
</React.Fragment>
))}
</div>
);
});

6
worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
View File

@@ -19,6 +19,7 @@ interface TaskRowWithSubtasksProps {
width: string;
isSticky?: boolean;
}>;
updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
}
interface AddSubtaskRowProps {
@@ -140,7 +141,8 @@ AddSubtaskRow.displayName = 'AddSubtaskRow';
const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
taskId,
projectId,
visibleColumns
visibleColumns,
updateTaskCustomColumnValue
}) => {
const task = useAppSelector(state => selectTaskById(state, taskId));
const isLoadingSubtasks = useAppSelector(state => selectSubtaskLoading(state, taskId));
@@ -162,6 +164,7 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
taskId={taskId}
projectId={projectId}
visibleColumns={visibleColumns}
updateTaskCustomColumnValue={updateTaskCustomColumnValue}
/>
{/* Subtasks and add subtask row when expanded */}
@@ -182,6 +185,7 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
projectId={projectId}
visibleColumns={visibleColumns}
isSubtask={true}
updateTaskCustomColumnValue={updateTaskCustomColumnValue}
/>
</div>
))}

22
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -443,11 +443,11 @@ const FilterDropdown: React.FC<{
${
selectedCount > 0
? isDarkMode
? 'bg-blue-600 text-white border-blue-500'
? 'bg-gray-600 text-white border-gray-500'
: 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={isOpen}
@@ -456,7 +456,7 @@ const FilterDropdown: React.FC<{
<IconComponent className="w-3.5 h-3.5" />
<span>{section.label}</span>
{selectedCount > 0 && (
<span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-blue-500 rounded-full">
<span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-gray-500 rounded-full">
{selectedCount}
</span>
)}
@@ -518,7 +518,7 @@ const FilterDropdown: React.FC<{
${
isSelected
? isDarkMode
? 'bg-blue-600 text-white'
? 'bg-gray-600 text-white'
: 'bg-blue-50 text-blue-800 font-semibold'
: `${themeClasses.optionText} ${themeClasses.optionHover}`
}
@@ -530,7 +530,7 @@ const FilterDropdown: React.FC<{
flex items-center justify-center w-3.5 h-3.5 border rounded
${
isSelected
? 'bg-blue-500 border-blue-500 text-white'
? 'bg-gray-600 border-gray-800 text-white'
: 'border-gray-300 dark:border-gray-600'
}
`}
@@ -730,7 +730,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
${
visibleCount > 0
? isDarkMode
? 'bg-blue-600 text-white border-blue-500'
? 'bg-gray-600 text-white border-gray-500'
: 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
@@ -743,7 +743,9 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
<EyeOutlined className="w-3.5 h-3.5" />
<span>Fields</span>
{visibleCount > 0 && (
<span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-blue-500 rounded-full">
<span
className={`inline-flex items-center justify-center w-4 h-4 text-xs font-bold ${isDarkMode ? 'text-white bg-gray-500' : 'text-gray-800 bg-gray-300'} rounded-full`}
>
{visibleCount}
</span>
)}
@@ -778,8 +780,8 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
${
isSelected
? isDarkMode
? 'bg-blue-600 text-white'
: 'bg-blue-50 text-blue-800 font-semibold'
? 'text-white font-semibold'
: 'text-gray-800 font-semibold'
: `${themeClasses.optionText} ${themeClasses.optionHover}`
}
`}
@@ -790,7 +792,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
flex items-center justify-center w-3.5 h-3.5 border rounded
${
isSelected
? 'bg-blue-500 border-blue-500 text-white'
? 'bg-gray-600 border-gray-600 text-white'
: 'border-gray-300 dark:border-gray-600'
}
`}

2
worklenz-frontend/src/features/projects/singleProject/phase/ConfigPhaseButton.tsx
View File

@@ -24,7 +24,7 @@ const ConfigPhaseButton = () => {
onClick={() => dispatch(toggleDrawer())}
icon={
<SettingOutlined
style={{ color: themeMode === 'dark' ? colors.white : colors.skyBlue }}
style={{ color: themeMode === 'dark' ? colors.white : 'black' }}
/>
}
/>

21
worklenz-frontend/src/features/projects/singleProject/task-list-custom-columns/task-list-custom-columns-slice.ts
View File

@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { CustomTableColumnsType } from '../taskListColumns/taskColumnsSlice';
import { LabelType } from '../../../../types/label.type';
import { LabelType } from '../../../../pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/label-type-column/label-type-column';
import { SelectionType } from '../../../../pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/selection-type-column/selection-type-column';
export type CustomFieldsTypes =
@@ -21,6 +21,7 @@ type TaskListCustomColumnsState = {
isCustomColumnModalOpen: boolean;
customColumnModalType: 'create' | 'edit';
customColumnId: string | null;
currentColumnData: any | null; // Store the current column data for editing
customFieldType: CustomFieldsTypes;
customFieldNumberType: CustomFieldNumberTypes;
@@ -39,6 +40,7 @@ const initialState: TaskListCustomColumnsState = {
isCustomColumnModalOpen: false,
customColumnModalType: 'create',
customColumnId: null,
currentColumnData: null,
customFieldType: 'people',
customFieldNumberType: 'formatted',
@@ -62,10 +64,11 @@ const taskListCustomColumnsSlice = createSlice({
},
setCustomColumnModalAttributes: (
state,
action: PayloadAction<{ modalType: 'create' | 'edit'; columnId: string | null }>
action: PayloadAction<{ modalType: 'create' | 'edit'; columnId: string | null; columnData?: any }>
) => {
state.customColumnModalType = action.payload.modalType;
state.customColumnId = action.payload.columnId;
state.currentColumnData = action.payload.columnData || null;
},
setCustomFieldType: (state, action: PayloadAction<CustomFieldsTypes>) => {
state.customFieldType = action.payload;
@@ -98,7 +101,19 @@ const taskListCustomColumnsSlice = createSlice({
state.selectionsList = action.payload;
},
resetCustomFieldValues: state => {
state = initialState;
// Reset all field values to initial state while keeping modal state
state.customFieldType = initialState.customFieldType;
state.customFieldNumberType = initialState.customFieldNumberType;
state.decimals = initialState.decimals;
state.label = initialState.label;
state.labelPosition = initialState.labelPosition;
state.previewValue = initialState.previewValue;
state.expression = initialState.expression;
state.firstNumericColumn = initialState.firstNumericColumn;
state.secondNumericColumn = initialState.secondNumericColumn;
state.labelsList = initialState.labelsList;
state.selectionsList = initialState.selectionsList;
state.currentColumnData = initialState.currentColumnData;
},
},
});

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

@@ -137,6 +137,14 @@ export const selectTaskGroups = createSelector(
tasks.map(task => {
if (currentGrouping === 'status') return task.status;
if (currentGrouping === 'priority') return task.priority;
if (currentGrouping === 'phase') {
// For phase grouping, use 'Unmapped' for tasks without a phase
if (!task.phase || task.phase.trim() === '') {
return 'Unmapped';
} else {
return task.phase;
}
}
return task.phase;
})
));
@@ -148,6 +156,13 @@ export const selectTaskGroups = createSelector(
.filter(task => {
if (currentGrouping === 'status') return task.status === value;
if (currentGrouping === 'priority') return task.priority === value;
if (currentGrouping === 'phase') {
if (value === 'Unmapped') {
return !task.phase || task.phase.trim() === '';
} else {
return task.phase === value;
}
}
return task.phase === value;
})
.sort((a, b) => (a.order || 0) - (b.order || 0));
@@ -178,9 +193,20 @@ export const selectTasksByCurrentGrouping = createSelector(
tasks.forEach(task => {
let key: string;
if (currentGrouping === 'status') key = task.status;
else if (currentGrouping === 'priority') key = task.priority;
else key = task.phase || 'Development';
if (currentGrouping === 'status') {
key = task.status;
} else if (currentGrouping === 'priority') {
key = task.priority;
} else if (currentGrouping === 'phase') {
// For phase grouping, use 'Unmapped' for tasks without a phase
if (!task.phase || task.phase.trim() === '') {
key = 'Unmapped';
} else {
key = task.phase;
}
} else {
key = task.phase || 'Development';
}
if (!grouped[key]) grouped[key] = [];
grouped[key].push(task);
@@ -214,6 +240,7 @@ const getGroupColor = (groupType: GroupingType, value: string): string => {
Development: '#1890ff',
Testing: '#faad14',
Deployment: '#52c41a',
Unmapped: '#fbc84c69',
},
};

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

@@ -7,12 +7,14 @@ import {
EntityId,
} from '@reduxjs/toolkit';
import { Task, TaskManagementState, TaskGroup, TaskGrouping } from '@/types/task-management.types';
import { ITaskListColumn } from '@/types/tasks/taskList.types';
import { RootState } from '@/app/store';
import {
tasksApiService,
ITaskListConfigV2,
ITaskListV3Response,
} from '@/api/tasks/tasks.api.service';
import { tasksCustomColumnsService } from '@/api/tasks/tasks-custom-columns.service';
import logger from '@/utils/errorLogger';
import { DEFAULT_TASK_NAME } from '@/shared/constants';
import { InlineMember } from '@/types/teamMembers/inlineMember.types';
@@ -56,6 +58,10 @@ const initialState: TaskManagementState = {
selectedPriorities: [],
search: '',
loadingSubtasks: {},
// Add column-related state
loadingColumns: false,
columns: [],
customColumns: [],
};
// Async thunk to fetch tasks from API
@@ -435,6 +441,59 @@ export const updateTaskWithSubtasks = createAsyncThunk(
}
);
// Add async thunk to fetch task list columns
export const fetchTaskListColumns = createAsyncThunk(
'taskManagement/fetchTaskListColumns',
async (projectId: string, { dispatch }) => {
const [standardColumns, customColumns] = await Promise.all([
tasksApiService.fetchTaskListColumns(projectId),
dispatch(fetchCustomColumns(projectId)),
]);
return {
standard: standardColumns.body,
custom: customColumns.payload,
};
}
);
// Add async thunk to fetch custom columns
export const fetchCustomColumns = createAsyncThunk(
'taskManagement/fetchCustomColumns',
async (projectId: string, { rejectWithValue }) => {
try {
const response = await tasksCustomColumnsService.getCustomColumns(projectId);
return response.body;
} catch (error) {
logger.error('Fetch Custom Columns', error);
if (error instanceof Error) {
return rejectWithValue(error.message);
}
return rejectWithValue('Failed to fetch custom columns');
}
}
);
// Add async thunk to update column visibility
export const updateColumnVisibility = createAsyncThunk(
'taskManagement/updateColumnVisibility',
async (
{ projectId, item }: { projectId: string; item: ITaskListColumn },
{ rejectWithValue }
) => {
try {
const response = await tasksApiService.toggleColumnVisibility(projectId, item);
return response.body;
} catch (error) {
logger.error('Update Column Visibility', error);
if (error instanceof Error) {
return rejectWithValue(error.message);
}
return rejectWithValue('Failed to update column visibility');
}
}
);
// Create the slice
const taskManagementSlice = createSlice({
name: 'taskManagement',
@@ -627,7 +686,12 @@ const taskManagementSlice = createSlice({
updatedTask.priority = destinationGroup.id;
break;
case IGroupBy.PHASE:
updatedTask.phase = destinationGroup.id;
// Handle unmapped group specially
if (destinationGroup.id === 'Unmapped' || destinationGroup.title === 'Unmapped') {
updatedTask.phase = ''; // Clear phase for unmapped group
} else {
updatedTask.phase = destinationGroup.id;
}
break;
case IGroupBy.MEMBERS:
// If moving to a member group, ensure task is assigned to that member
@@ -782,7 +846,57 @@ const taskManagementSlice = createSlice({
};
}
},
// Add column-related reducers
toggleColumnVisibility: (state, action: PayloadAction<string>) => {
const column = state.columns.find(col => col.key === action.payload);
if (column) {
column.pinned = !column.pinned;
}
},
addCustomColumn: (state, action: PayloadAction<ITaskListColumn>) => {
state.customColumns.push(action.payload);
// Also add to columns array to maintain visibility
state.columns.push({
...action.payload,
pinned: true, // New columns are visible by default
});
},
updateCustomColumn: (
state,
action: PayloadAction<{ key: string; column: ITaskListColumn }>
) => {
const { key, column } = action.payload;
const index = state.customColumns.findIndex(col => col.key === key);
if (index !== -1) {
state.customColumns[index] = column;
// Update in columns array as well
const colIndex = state.columns.findIndex(col => col.key === key);
if (colIndex !== -1) {
state.columns[colIndex] = { ...column, pinned: state.columns[colIndex].pinned };
}
}
},
deleteCustomColumn: (state, action: PayloadAction<string>) => {
const key = action.payload;
state.customColumns = state.customColumns.filter(col => col.key !== key);
// Remove from columns array as well
state.columns = state.columns.filter(col => col.key !== key);
},
// Add action to sync backend columns with local fields
syncColumnsWithFields: (state, action: PayloadAction<{ projectId: string; fields: any[] }>) => {
const { fields } = action.payload;
// Update columns based on local fields
state.columns = state.columns.map(column => {
const field = fields.find(f => f.key === column.key);
if (field) {
return {
...column,
pinned: field.visible
};
}
return column;
});
},
},
extraReducers: builder => {
builder
@@ -885,6 +999,60 @@ const taskManagementSlice = createSlice({
state.ids = [];
state.entities = {};
state.groups = [];
})
// Add column-related extraReducers
.addCase(fetchTaskListColumns.pending, state => {
state.loadingColumns = true;
state.error = null;
})
.addCase(fetchTaskListColumns.fulfilled, (state, action) => {
state.loadingColumns = false;
// Process standard columns
const standardColumns = action.payload.standard;
standardColumns.splice(1, 0, {
key: 'TASK',
name: 'Task',
index: 1,
pinned: true,
});
// Process custom columns
const customColumns = (action.payload as { custom: any[] }).custom.map((col: any) => ({
...col,
isCustom: true,
}));
// Merge columns
state.columns = [...standardColumns, ...customColumns];
state.customColumns = customColumns;
})
.addCase(fetchTaskListColumns.rejected, (state, action) => {
state.loadingColumns = false;
state.error = action.error.message || 'Failed to fetch task list columns';
})
.addCase(fetchCustomColumns.pending, state => {
state.loadingColumns = true;
state.error = null;
})
.addCase(fetchCustomColumns.fulfilled, (state, action) => {
state.loadingColumns = false;
state.customColumns = action.payload;
// Add custom columns to the columns array
const customColumnsForVisibility = action.payload;
state.columns = [...state.columns, ...customColumnsForVisibility];
})
.addCase(fetchCustomColumns.rejected, (state, action) => {
state.loadingColumns = false;
state.error = action.error.message || 'Failed to fetch custom columns';
})
.addCase(updateColumnVisibility.fulfilled, (state, action) => {
const column = state.columns.find(col => col.key === action.payload.key);
if (column) {
column.pinned = action.payload.pinned;
}
})
.addCase(updateColumnVisibility.rejected, (state, action) => {
state.error = action.payload as string;
});
},
});
@@ -913,6 +1081,12 @@ export const {
updateTaskAssignees,
createSubtask,
removeTemporarySubtask,
// Add column-related actions
toggleColumnVisibility,
addCustomColumn,
updateCustomColumn,
deleteCustomColumn,
syncColumnsWithFields,
} = taskManagementSlice.actions;
// Export the selectors
@@ -944,3 +1118,24 @@ export default taskManagementSlice.reducer;
// V3 API selectors - no processing needed, data is pre-processed by backend
export const selectTaskGroupsV3 = (state: RootState) => state.taskManagement.groups;
export const selectCurrentGroupingV3 = (state: RootState) => state.taskManagement.grouping;
// Column-related selectors
export const selectColumns = (state: RootState) => state.taskManagement.columns;
export const selectCustomColumns = (state: RootState) => state.taskManagement.customColumns;
export const selectLoadingColumns = (state: RootState) => state.taskManagement.loadingColumns;
// Helper selector to check if columns are in sync with local fields
export const selectColumnsInSync = (state: RootState) => {
const columns = state.taskManagement.columns;
const fields = state.taskManagementFields || [];
if (columns.length === 0 || fields.length === 0) return true;
return !fields.some(field => {
const backendColumn = columns.find(c => c.key === field.key);
if (backendColumn) {
return (backendColumn.pinned ?? false) !== field.visible;
}
return false;
});
};

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

@@ -59,13 +59,21 @@ const taskListFieldsSlice = createSlice({
const field = state.find(f => f.key === action.payload);
if (field) {
field.visible = !field.visible;
// Save to localStorage immediately after toggle
saveFields(state);
}
},
setFields(state, action: PayloadAction<TaskListField[]>) {
return action.payload;
const newState = action.payload;
// Save to localStorage when fields are set
saveFields(newState);
return newState;
},
resetFields() {
return DEFAULT_FIELDS;
const defaultFields = DEFAULT_FIELDS;
// Save to localStorage when fields are reset
saveFields(defaultFields);
return defaultFields;
},
},
});

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

@@ -481,18 +481,18 @@ export const useTaskSocketHandlers = () => {
// Find target group based on new phase value
let targetGroup: any = null;
if (newPhaseValue) {
if (newPhaseValue && newPhaseValue.trim() !== '') {
// Find group by phase name
targetGroup = groups.find(
group => group.groupValue === newPhaseValue || group.title === newPhaseValue
);
} else {
// Find "No Phase" or similar group
// Find "Unmapped" group for tasks without a phase or with default phase
targetGroup = groups.find(
group =>
group.groupValue === '' ||
group.title.toLowerCase().includes('no phase') ||
group.title.toLowerCase().includes('unassigned')
group.groupValue === 'Unmapped' ||
group.title === 'Unmapped' ||
group.title.toLowerCase().includes('unmapped')
);
}

219
worklenz-frontend/src/pages/projects/projectView/project-view.css
View File

@@ -5,217 +5,26 @@
width: 8px;
}
/* Enhanced Project View Tab Styles - Compact */
.project-view-tabs {
margin-top: 16px;
/* Light mode - selected tab header bold */
[data-theme="light"] .project-view-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: 700;
color: #000000 !important;
}
/* Remove default tab border */
.project-view-tabs .ant-tabs-nav::before {
border: none !important;
/* Dark mode - selected tab header bold and white */
[data-theme="dark"] .project-view-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: 900;
color: #ffffff;
}
/* Tab bar container */
.project-view-tabs .ant-tabs-nav {
margin-bottom: 8px;
background: transparent;
padding: 0 12px;
/* Light mode - selected tab underline black */
[data-theme="light"] .project-view-tabs .ant-tabs-ink-bar {
background-color: #000000 !important;
}
/* Individual tab styling - Compact */
.project-view-tabs .ant-tabs-tab {
position: relative;
margin: 0 4px 0 0;
padding: 8px 16px;
border-radius: 6px 6px 0 0;
background: transparent;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500;
font-size: 13px;
min-height: 36px;
display: flex;
align-items: center;
/* Dark mode - selected tab underline white */
[data-theme="dark"] .project-view-tabs .ant-tabs-ink-bar {
background-color: #ffffff;
}
/* Light mode tab styles */
[data-theme="default"] .project-view-tabs .ant-tabs-tab {
color: #64748b;
background: #f8fafc;
}
[data-theme="default"] .project-view-tabs .ant-tabs-tab:hover {
color: #3b82f6;
background: #eff6ff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
[data-theme="default"] .project-view-tabs .ant-tabs-tab-active {
color: #1e40af !important;
background: #ffffff !important;
box-shadow:
0 -2px 8px rgba(59, 130, 246, 0.1),
0 4px 16px rgba(59, 130, 246, 0.1);
z-index: 1;
}
/* Dark mode tab styles - matching task list row colors */
[data-theme="dark"] .project-view-tabs .ant-tabs-tab {
color: #94a3b8;
background: #141414;
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab:hover {
color: #60a5fa;
background: #262626;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab-active {
color: #60a5fa !important;
background: #1f1f1f !important;
box-shadow:
0 -2px 8px rgba(96, 165, 250, 0.15),
0 4px 16px rgba(96, 165, 250, 0.15);
z-index: 1;
}
/* Tab content area - Compact */
.project-view-tabs .ant-tabs-content-holder {
background: transparent;
border-radius: 6px;
position: relative;
z-index: 0;
margin-top: 4px;
}
[data-theme="default"] .project-view-tabs .ant-tabs-content-holder {
background: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .project-view-tabs .ant-tabs-content-holder {
background: #1f1f1f;
border: 1px solid #303030;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.project-view-tabs .ant-tabs-tabpane {
padding: 0;
min-height: 300px;
}
/* Pin button styling - Compact */
.project-view-tabs .borderless-icon-btn {
margin-left: 6px;
padding: 2px;
border-radius: 3px;
transition: all 0.2s ease;
opacity: 0.7;
}
.project-view-tabs .borderless-icon-btn:hover {
opacity: 1;
transform: scale(1.05);
}
[data-theme="default"] .project-view-tabs .borderless-icon-btn:hover {
background: rgba(59, 130, 246, 0.1) !important;
}
[data-theme="dark"] .project-view-tabs .borderless-icon-btn:hover {
background: rgba(96, 165, 250, 0.1) !important;
}
/* Pinned tab indicator */
.project-view-tabs .ant-tabs-tab-active .borderless-icon-btn {
opacity: 1;
}
[data-theme="default"] .project-view-tabs .ant-tabs-tab-active .borderless-icon-btn {
background: rgba(59, 130, 246, 0.1) !important;
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab-active .borderless-icon-btn {
background: rgba(96, 165, 250, 0.1) !important;
}
/* Tab label flex container */
.project-view-tabs .ant-tabs-tab .ant-tabs-tab-btn {
display: flex;
align-items: center;
width: 100%;
}
/* Responsive adjustments - Compact */
@media (max-width: 768px) {
.project-view-tabs .ant-tabs-nav {
padding: 0 8px;
}
.project-view-tabs .ant-tabs-tab {
margin: 0 2px 0 0;
padding: 6px 12px;
font-size: 12px;
min-height: 32px;
}
.project-view-tabs .borderless-icon-btn {
margin-left: 4px;
padding: 1px;
}
}
@media (max-width: 480px) {
.project-view-tabs .ant-tabs-tab {
padding: 6px 10px;
font-size: 11px;
min-height: 30px;
}
.project-view-tabs .borderless-icon-btn {
display: none; /* Hide pin buttons on very small screens */
}
}
/* Animation for tab switching */
.project-view-tabs .ant-tabs-content {
position: relative;
}
.project-view-tabs .ant-tabs-tabpane-active {
animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Focus states for accessibility - Compact */
.project-view-tabs .ant-tabs-tab:focus-visible {
outline: 1px solid #3b82f6;
outline-offset: 1px;
border-radius: 6px;
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab:focus-visible {
outline-color: #60a5fa;
}
/* Loading state for tab content */
.project-view-tabs .ant-tabs-tabpane .suspense-fallback {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}

10
worklenz-frontend/src/pages/projects/projectView/project-view.tsx
View File

@@ -351,20 +351,12 @@ const ProjectView = React.memo(() => {
activeKey={activeTab}
onChange={handleTabChange}
items={tabMenuItems}
tabBarStyle={{
paddingInline: 0,
marginBottom: 8,
background: 'transparent',
minHeight: '36px',
}}
tabBarGutter={0}
destroyInactiveTabPane={true}
destroyOnHidden={true}
animated={{
inkBar: true,
tabPane: false,
}}
size="small"
type="card"
/>
{portalElements}

178
worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal.tsx
View File

@@ -10,6 +10,7 @@ import {
Typography,
Popconfirm,
} from 'antd';
import { useTranslation } from 'react-i18next';
import SelectionTypeColumn from './selection-type-column/selection-type-column';
import NumberTypeColumn from './number-type-column/number-type-column';
import LabelTypeColumn from './label-type-column/label-type-column';
@@ -31,6 +32,7 @@ import {
setSecondNumericColumn,
setSelectionsList,
setLabelsList,
resetCustomFieldValues,
} from '@features/projects/singleProject/task-list-custom-columns/task-list-custom-columns-slice';
import CustomColumnHeader from '../custom-column-header/custom-column-header';
import { nanoid } from '@reduxjs/toolkit';
@@ -41,10 +43,12 @@ import {
import { themeWiseColor } from '@/utils/themeWiseColor';
import KeyTypeColumn from './key-type-column/key-type-column';
import logger from '@/utils/errorLogger';
import {
import {
fetchTasksV3,
fetchTaskListColumns,
addCustomColumn,
deleteCustomColumn as deleteCustomColumnFromTasks,
} from '@/features/tasks/tasks.slice';
deleteCustomColumn as deleteCustomColumnFromTaskManagement,
} from '@/features/task-management/task-management.slice';
import { useParams } from 'react-router-dom';
import { tasksCustomColumnsService } from '@/api/tasks/tasks-custom-columns.service';
import { ExclamationCircleFilled } from '@ant-design/icons';
@@ -52,6 +56,7 @@ import { ExclamationCircleFilled } from '@ant-design/icons';
const CustomColumnModal = () => {
const [mainForm] = Form.useForm();
const { projectId } = useParams();
const { t } = useTranslation('task-list-table');
// get theme details from theme reducer
const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -62,6 +67,7 @@ const CustomColumnModal = () => {
customColumnId,
customColumnModalType,
isCustomColumnModalOpen,
currentColumnData,
decimals,
label,
labelPosition,
@@ -82,35 +88,84 @@ const CustomColumnModal = () => {
state => state.taskListCustomColumnsReducer.customFieldNumberType
);
// if it is already created column get the column data
const openedColumn = useAppSelector(state => state.taskReducer.customColumns).find(
col => col.id === customColumnId
);
// Use the column data passed from TaskListV2
const openedColumn = currentColumnData;
// Debug logging
console.log('Modal Debug Info:', {
customColumnId,
customColumnModalType,
currentColumnData,
openedColumn,
openedColumnFound: !!openedColumn,
openedColumnId: openedColumn?.id
});
// Function to reset all form and Redux state
const resetModalData = () => {
mainForm.resetFields();
dispatch(resetCustomFieldValues());
dispatch(setCustomColumnModalAttributes({ modalType: 'create', columnId: null }));
};
// Function to handle deleting a custom column
const handleDeleteColumn = async () => {
if (!customColumnId) return;
console.log('Delete function called with:', {
customColumnId,
openedColumn,
openedColumnId: openedColumn?.id,
openedColumnKey: openedColumn?.key,
fullColumnData: openedColumn
});
// Try to get UUID from different possible locations in the column data
const columnUUID = openedColumn?.id ||
openedColumn?.uuid ||
openedColumn?.custom_column_obj?.id ||
openedColumn?.custom_column_obj?.uuid;
console.log('Extracted UUID candidates:', {
'openedColumn?.id': openedColumn?.id,
'openedColumn?.uuid': openedColumn?.uuid,
'openedColumn?.custom_column_obj?.id': openedColumn?.custom_column_obj?.id,
'openedColumn?.custom_column_obj?.uuid': openedColumn?.custom_column_obj?.uuid,
'finalColumnUUID': columnUUID
});
if (!customColumnId || !columnUUID) {
console.error('Missing required data for deletion:', {
customColumnId,
columnUUID,
openedColumn
});
message.error('Cannot delete column: Missing UUID');
return;
}
try {
console.log('Attempting to delete column with UUID:', columnUUID);
// Make API request to delete the custom column using the service
await tasksCustomColumnsService.deleteCustomColumn(openedColumn?.id || customColumnId);
await tasksCustomColumnsService.deleteCustomColumn(columnUUID);
// Dispatch actions to update the Redux store
dispatch(deleteCustomColumnFromTasks(customColumnId));
dispatch(deleteCustomColumnFromTaskManagement(customColumnId));
dispatch(deleteCustomColumnFromColumns(customColumnId));
// Close the modal
// Close the modal and reset data
dispatch(toggleCustomColumnModalOpen(false));
dispatch(setCustomColumnModalAttributes({ modalType: 'create', columnId: null }));
resetModalData();
// Show success message
message.success('Custom column deleted successfully');
message.success(t('customColumns.modal.deleteSuccessMessage'));
// Reload the page to reflect the changes
window.location.reload();
// Refresh tasks and columns to reflect the deleted custom column
if (projectId) {
dispatch(fetchTaskListColumns(projectId));
dispatch(fetchTasksV3(projectId));
}
} catch (error) {
logger.error('Error deleting custom column:', error);
message.error('Failed to delete custom column');
message.error(t('customColumns.modal.deleteErrorMessage'));
}
};
@@ -118,49 +173,49 @@ const CustomColumnModal = () => {
{
key: 'people',
value: 'people',
label: 'People',
label: t('customColumns.fieldTypes.people'),
disabled: false,
},
{
key: 'number',
value: 'number',
label: 'Number',
label: t('customColumns.fieldTypes.number'),
disabled: false,
},
{
key: 'date',
value: 'date',
label: 'Date',
label: t('customColumns.fieldTypes.date'),
disabled: false,
},
{
key: 'selection',
value: 'selection',
label: 'Selection',
label: t('customColumns.fieldTypes.selection'),
disabled: false,
},
{
key: 'checkbox',
value: 'checkbox',
label: 'Checkbox',
label: t('customColumns.fieldTypes.checkbox'),
disabled: true,
},
{
key: 'labels',
value: 'labels',
label: 'Labels',
label: t('customColumns.fieldTypes.labels'),
disabled: true,
},
{
key: 'key',
value: 'key',
label: 'Key',
label: t('customColumns.fieldTypes.key'),
disabled: true,
},
{
key: 'formula',
value: 'formula',
label: 'Formula',
label: t('customColumns.fieldTypes.formula'),
disabled: true,
},
];
@@ -231,12 +286,21 @@ const CustomColumnModal = () => {
if (res.done) {
if (res.body.id) newColumn.id = res.body.id;
dispatch(addCustomColumn(newColumn));
dispatch(setCustomColumnModalAttributes({ modalType: 'create', columnId: null }));
dispatch(toggleCustomColumnModalOpen(false));
resetModalData();
// Show success message
message.success(t('customColumns.modal.createSuccessMessage'));
// Refresh tasks and columns to include the new custom column values
if (projectId) {
dispatch(fetchTaskListColumns(projectId));
dispatch(fetchTasksV3(projectId));
}
}
} catch (error) {
logger.error('Error creating custom column:', error);
message.error('Failed to create custom column');
message.error(t('customColumns.modal.createErrorMessage'));
}
} else if (customColumnModalType === 'edit' && customColumnId) {
const updatedColumn = openedColumn
@@ -264,7 +328,7 @@ const CustomColumnModal = () => {
}
: null;
if (updatedColumn) {
if (updatedColumn && openedColumn?.id) {
try {
// Prepare the configuration object
const configuration = {
@@ -299,7 +363,7 @@ const CustomColumnModal = () => {
};
// Make API request to update custom column using the service
await tasksCustomColumnsService.updateCustomColumn(openedColumn?.id || customColumnId, {
await tasksCustomColumnsService.updateCustomColumn(openedColumn.id, {
name: value.fieldTitle,
field_type: value.fieldType,
width: 150,
@@ -307,15 +371,21 @@ const CustomColumnModal = () => {
configuration,
});
// Close modal
// Close modal and reset data
dispatch(toggleCustomColumnModalOpen(false));
dispatch(setCustomColumnModalAttributes({ modalType: 'create', columnId: null }));
resetModalData();
// Reload the page instead of updating the slice
window.location.reload();
// Show success message
message.success(t('customColumns.modal.updateSuccessMessage'));
// Refresh tasks and columns to reflect the updated custom column
if (projectId) {
dispatch(fetchTaskListColumns(projectId));
dispatch(fetchTasksV3(projectId));
}
} catch (error) {
logger.error('Error updating custom column:', error);
message.error('Failed to update custom column');
message.error(t('customColumns.modal.updateErrorMessage'));
}
}
}
@@ -328,20 +398,17 @@ const CustomColumnModal = () => {
return (
<Modal
title={customColumnModalType === 'create' ? 'Add field' : 'Edit field'}
title={customColumnModalType === 'create' ? t('customColumns.modal.addFieldTitle') : t('customColumns.modal.editFieldTitle')}
centered
open={isCustomColumnModalOpen}
onCancel={() => {
dispatch(toggleCustomColumnModalOpen(false));
dispatch(setCustomColumnModalAttributes({ modalType: 'create', columnId: null }));
resetModalData();
}}
styles={{
header: { position: 'relative' },
footer: { display: 'none' },
}}
onClose={() => {
mainForm.resetFields();
}}
afterOpenChange={open => {
if (open && customColumnModalType === 'edit' && openedColumn) {
// Set the field type first so the correct form fields are displayed
@@ -394,9 +461,11 @@ const CustomColumnModal = () => {
secondNumericColumn: openedColumn.custom_column_obj?.secondNumericColumn,
});
} else if (open && customColumnModalType === 'create') {
// Reset form for create mode
mainForm.resetFields();
dispatch(setCustomFieldType('people'));
// Reset all data for create mode
resetModalData();
} else if (!open) {
// Reset data when modal closes
resetModalData();
}
}}
>
@@ -437,22 +506,22 @@ const CustomColumnModal = () => {
<Flex gap={16} align="center" justify="space-between">
<Form.Item
name={'fieldTitle'}
label={<Typography.Text>Field title</Typography.Text>}
label={<Typography.Text>{t('customColumns.modal.fieldTitle')}</Typography.Text>}
layout="vertical"
rules={[
{
required: true,
message: 'Field title is required',
message: t('customColumns.modal.fieldTitleRequired'),
},
]}
required={false}
>
<Input placeholder="title" style={{ minWidth: '100%', width: 300 }} />
<Input placeholder={t('customColumns.modal.columnTitlePlaceholder')} style={{ minWidth: '100%', width: 300 }} />
</Form.Item>
<Form.Item
name={'fieldType'}
label={<Typography.Text>Type</Typography.Text>}
label={<Typography.Text>{t('customColumns.modal.type')}</Typography.Text>}
layout="vertical"
>
<Select
@@ -485,27 +554,30 @@ const CustomColumnModal = () => {
>
{customColumnModalType === 'edit' && customColumnId && (
<Popconfirm
title="Are you sure you want to delete this custom column?"
description="This action cannot be undone. All data associated with this column will be permanently deleted."
title={t('customColumns.modal.deleteConfirmTitle')}
description={t('customColumns.modal.deleteConfirmDescription')}
icon={<ExclamationCircleFilled style={{ color: 'red' }} />}
onConfirm={handleDeleteColumn}
okText="Delete"
cancelText="Cancel"
okText={t('customColumns.modal.deleteButton')}
cancelText={t('customColumns.modal.cancelButton')}
okButtonProps={{ danger: true }}
>
<Button danger>Delete</Button>
<Button danger>{t('customColumns.modal.deleteButton')}</Button>
</Popconfirm>
)}
<Flex gap={8}>
<Button onClick={() => dispatch(toggleCustomColumnModalOpen(false))}>Cancel</Button>
<Button onClick={() => {
dispatch(toggleCustomColumnModalOpen(false));
resetModalData();
}}>{t('customColumns.modal.cancelButton')}</Button>
{customColumnModalType === 'create' ? (
<Button type="primary" htmlType="submit">
Create
{t('customColumns.modal.createButton')}
</Button>
) : (
<Button type="primary" htmlType="submit">
Update
{t('customColumns.modal.updateButton')}
</Button>
)}
</Flex>

1
worklenz-frontend/src/shared/antd-imports.ts
View File

@@ -100,6 +100,7 @@ export {
RetweetOutlined,
DoubleRightOutlined,
UserAddOutlined,
ArrowsAltOutlined,
} from '@ant-design/icons';
// Re-export all components with React

7
worklenz-frontend/src/types/task-management.types.ts
View File

@@ -1,5 +1,6 @@
import { InlineMember } from './teamMembers/inlineMember.types';
import { EntityState } from '@reduxjs/toolkit';
import { ITaskListColumn } from './tasks/taskList.types';
export interface Task {
id: string;
@@ -25,12 +26,13 @@ export interface Task {
sub_tasks_count?: number;
show_sub_tasks?: boolean;
parent_task_id?: string;
is_sub_task?: boolean; // Add this property
progress?: number;
weight?: number;
color?: string;
statusColor?: string;
priorityColor?: string;
labels?: { id: string; name: string; color: string }[];
labels?: { id: string; name: string; color: string; end?: boolean; names?: string[] }[];
comments_count?: number;
attachments_count?: number;
has_dependencies?: boolean;
@@ -97,6 +99,9 @@ export interface TaskManagementState {
selectedPriorities: string[];
search: string;
loadingSubtasks: Record<string, boolean>; // Track loading state for individual tasks
loadingColumns: boolean;
columns: ITaskListColumn[];
customColumns: ITaskListColumn[];
}
export interface TaskGroupsState {