From 9a5741362460bdd5f9ae00aed4d31ed3e1f4e171 Mon Sep 17 00:00:00 2001 From: chamiakJ Date: Mon, 7 Jul 2025 02:38:50 +0530 Subject: [PATCH] feat(task-filters): enhance archived task handling in task management - Introduced state management for archived tasks in the task management slice, allowing for better control over task visibility. - Updated ImprovedTaskFilters component to utilize the new archived state, enabling toggling of archived tasks based on the current view (list or kanban). - Refactored related functions to ensure proper dispatching of archived state changes, improving user experience and task management efficiency. --- .../task-management/improved-task-filters.tsx | 24 +++++++++++++++---- .../task-management/task-management.slice.ts | 24 +++++++++++++++---- .../src/types/task-management.types.ts | 1 + 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx index 48bdf145..d12ea4fa 100644 --- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx +++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx @@ -26,6 +26,9 @@ import { toggleField } from '@/features/task-management/taskListFields.slice'; import { fetchTasksV3, setSearch as setTaskManagementSearch, + setArchived as setTaskManagementArchived, + toggleArchived as toggleTaskManagementArchived, + selectArchived, } from '@/features/task-management/task-management.slice'; import { setCurrentGrouping, @@ -828,13 +831,17 @@ const ImprovedTaskFilters: React.FC = ({ position, cla // Enhanced Kanban state const kanbanState = useAppSelector((state: RootState) => state.enhancedKanbanReducer); + // Get archived state from the appropriate slice based on position + const taskManagementArchived = useAppSelector(selectArchived); + const taskReducerArchived = useAppSelector(state => state.taskReducer.archived); + const showArchived = position === 'list' ? taskManagementArchived : taskReducerArchived; + // Use the filter data loader hook useFilterDataLoader(); // Local state for filter sections const [filterSections, setFilterSections] = useState([]); const [searchValue, setSearchValue] = useState(''); - const [showArchived, setShowArchived] = useState(false); const [openDropdown, setOpenDropdown] = useState(null); const [activeFiltersCount, setActiveFiltersCount] = useState(0); const [clearingFilters, setClearingFilters] = useState(false); @@ -1079,7 +1086,6 @@ const ImprovedTaskFilters: React.FC = ({ position, cla const batchUpdates = () => { // Clear local state immediately for UI feedback setSearchValue(''); - setShowArchived(false); // Update local filter sections state immediately setFilterSections(prev => @@ -1118,6 +1124,13 @@ const ImprovedTaskFilters: React.FC = ({ position, cla // Clear priority filters dispatch(setPriorities([])); + + // Clear archived state based on position + if (position === 'list') { + dispatch(setTaskManagementArchived(false)); + } else { + dispatch(setKanbanArchived(false)); + } }; // Execute Redux updates @@ -1139,14 +1152,17 @@ const ImprovedTaskFilters: React.FC = ({ position, cla }, [projectId, projectView, dispatch, currentTaskLabels, currentTaskAssignees, clearingFilters]); const toggleArchived = useCallback(() => { - setShowArchived(!showArchived); if (position === 'board') { dispatch(setKanbanArchived(!showArchived)); if (projectId) { dispatch(fetchEnhancedKanbanGroups(projectId)); } } else { - // ... existing logic ... + // For TaskListV2, use the task management slice + dispatch(toggleTaskManagementArchived()); + if (projectId) { + dispatch(fetchTasksV3(projectId)); + } } }, [dispatch, projectId, position, showArchived]); diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts index 48e3901e..3a719d35 100644 --- a/worklenz-frontend/src/features/task-management/task-management.slice.ts +++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts @@ -57,6 +57,7 @@ const initialState: TaskManagementState = { grouping: undefined, selectedPriorities: [], search: '', + archived: false, loadingSubtasks: {}, // Add column-related state loadingColumns: false, @@ -227,9 +228,12 @@ export const fetchTasksV3 = createAsyncThunk( // Get search value from taskReducer const searchValue = state.taskReducer.search || ''; + // Get archived state from task management slice + const archivedState = state.taskManagement.archived; + const config: ITaskListConfigV2 = { id: projectId, - archived: false, + archived: archivedState, group: currentGrouping || '', field: '', order: '', @@ -240,13 +244,11 @@ export const fetchTasksV3 = createAsyncThunk( isSubtasksInclude: false, labels: selectedLabels, priorities: selectedPriorities, - customColumns: true, // Include custom columns in the response + customColumns: true, }; const response = await tasksApiService.getTaskListV3(config); - - // Ensure tasks are properly normalized const tasks: Task[] = response.body.allTasks.map((task: any) => { const now = new Date().toISOString(); @@ -276,7 +278,7 @@ export const fetchTasksV3 = createAsyncThunk( logged: convertTimeValue(task.time_spent), }, customFields: {}, - custom_column_values: task.custom_column_values || {}, // Include custom column values + custom_column_values: task.custom_column_values || {}, createdAt: task.created_at || now, updatedAt: task.updated_at || now, created_at: task.created_at || now, @@ -738,6 +740,12 @@ const taskManagementSlice = createSlice({ setSearch: (state, action: PayloadAction) => { state.search = action.payload; }, + setArchived: (state, action: PayloadAction) => { + state.archived = action.payload; + }, + toggleArchived: (state) => { + state.archived = !state.archived; + }, resetTaskManagement: state => { state.loading = false; state.error = null; @@ -745,6 +753,7 @@ const taskManagementSlice = createSlice({ state.grouping = undefined; state.selectedPriorities = []; state.search = ''; + state.archived = false; state.ids = []; state.entities = {}; }, @@ -1077,6 +1086,8 @@ export const { setError, setSelectedPriorities, setSearch, + setArchived, + toggleArchived, resetTaskManagement, toggleTaskExpansion, addSubtaskToParent, @@ -1114,6 +1125,9 @@ export const selectTasksByPriority = (state: RootState, priority: string) => export const selectTasksByPhase = (state: RootState, phase: string) => Object.values(state.taskManagement.entities).filter(task => task.phase === phase); +// Add archived selector +export const selectArchived = (state: RootState) => state.taskManagement.archived; + // Export the reducer as default export default taskManagementSlice.reducer; diff --git a/worklenz-frontend/src/types/task-management.types.ts b/worklenz-frontend/src/types/task-management.types.ts index 791fd212..d51e2774 100644 --- a/worklenz-frontend/src/types/task-management.types.ts +++ b/worklenz-frontend/src/types/task-management.types.ts @@ -100,6 +100,7 @@ export interface TaskManagementState { grouping: string | undefined; selectedPriorities: string[]; search: string; + archived: boolean; loadingSubtasks: Record; // Track loading state for individual tasks loadingColumns: boolean; columns: ITaskListColumn[];