feat(task-management): enhance task filtering and UI components for improved usability

- Updated AssigneeSelector and LabelsSelector components to include text color adjustments for better visibility in dark mode.
- Introduced ImprovedTaskFilters component for a more efficient task filtering experience, integrating Redux state management for selected priorities and labels.
- Refactored task management slice to support new filtering capabilities, including selected priorities and improved task fetching logic.
- Enhanced TaskGroup and TaskRow components to accommodate new filtering features and improve overall layout consistency.

worklenz-frontend/src/features/board/board-slice.ts

@@ -76,6 +76,10 @@ interface BoardState {
   priorities: string[];
   members: string[];
   editableSectionId: string | null;
+
+  allTasks: IProjectTask[];
+  grouping: string;
+  totalTasks: number;
 }
 
 const initialState: BoardState = {
@@ -98,6 +102,9 @@ const initialState: BoardState = {
   priorities: [],
   members: [],
   editableSectionId: null,
+  allTasks: [],
+  grouping: '',
+  totalTasks: 0,
 };
 
 const deleteTaskFromGroup = (
@@ -186,7 +193,7 @@ export const fetchBoardTaskGroups = createAsyncThunk(
         priorities: boardReducer.priorities.join(' '),
       };
 
-      const response = await tasksApiService.getTaskList(config);
+      const response = await tasksApiService.getTaskListV3(config);
       return response.body;
     } catch (error) {
       logger.error('Fetch Task Groups', error);
@@ -803,7 +810,10 @@ const boardSlice = createSlice({
       })
       .addCase(fetchBoardTaskGroups.fulfilled, (state, action) => {
         state.loadingGroups = false;
-        state.taskGroups = action.payload;
+        state.taskGroups = action.payload && action.payload.groups ? action.payload.groups : [];
+        state.allTasks = action.payload && action.payload.allTasks ? action.payload.allTasks : [];
+        state.grouping = action.payload && action.payload.grouping ? action.payload.grouping : '';
+        state.totalTasks = action.payload && action.payload.totalTasks ? action.payload.totalTasks : 0;
       })
       .addCase(fetchBoardTaskGroups.rejected, (state, action) => {
         state.loadingGroups = false;

worklenz-frontend/src/features/task-management/task-management.slice.ts

@@ -16,6 +16,7 @@ const initialState: TaskManagementState = {
   error: null,
   groups: [],
   grouping: null,
+  selectedPriorities: [],
 };
 
 // Async thunk to fetch tasks from API
@@ -137,6 +138,23 @@ export const fetchTasksV3 = createAsyncThunk(
       const state = getState() as RootState;
       const currentGrouping = state.grouping.currentGrouping;
       
+      // Get selected labels from taskReducer
+      const selectedLabels = state.taskReducer.labels
+        ? state.taskReducer.labels.filter(l => l.selected).map(l => l.id).join(',')
+        : '';
+      
+      // Get selected assignees from taskReducer
+      const selectedAssignees = state.taskReducer.taskAssignees
+        ? state.taskReducer.taskAssignees.filter(m => m.selected).map(m => m.id).join(',')
+        : '';
+      
+      // Get selected priorities from taskManagement slice
+      const selectedPriorities = state.taskManagement.selectedPriorities
+        ? state.taskManagement.selectedPriorities.join(',')
+        : '';
+      
+      console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
+      
       const config: ITaskListConfigV2 = {
         id: projectId,
         archived: false,
@@ -145,11 +163,11 @@ export const fetchTasksV3 = createAsyncThunk(
         order: '',
         search: '',
         statuses: '',
-        members: '',
+        members: selectedAssignees,
         projects: '',
         isSubtasksInclude: false,
-        labels: '',
-        priorities: '',
+        labels: selectedLabels,
+        priorities: selectedPriorities,
       };
 
       const response = await tasksApiService.getTaskListV3(config);
@@ -305,6 +323,11 @@ const taskManagementSlice = createSlice({
       state.error = action.payload;
       state.loading = false;
     },
+
+    // Filter actions
+    setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
+      state.selectedPriorities = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -363,6 +386,7 @@ export const {
   optimisticTaskMove,
   setLoading,
   setError,
+  setSelectedPriorities,
 } = taskManagementSlice.actions;
 
 export default taskManagementSlice.reducer;

worklenz-frontend/src/features/tasks/tasks.slice.ts

@@ -80,6 +80,9 @@ interface ITaskState {
   convertToSubtaskDrawerOpen: boolean;
   customColumns: ITaskListColumn[];
   customColumnValues: Record<string, Record<string, any>>;
+  allTasks: IProjectTask[];
+  grouping: string;
+  totalTasks: number;
 }
 
 const initialState: ITaskState = {
@@ -105,6 +108,9 @@ const initialState: ITaskState = {
   convertToSubtaskDrawerOpen: false,
   customColumns: [],
   customColumnValues: {},
+  allTasks: [],
+  grouping: '',
+  totalTasks: 0,
 };
 
 export const COLUMN_KEYS = {
@@ -165,7 +171,7 @@ export const fetchTaskGroups = createAsyncThunk(
         priorities: taskReducer.priorities.join(' '),
       };
 
-      const response = await tasksApiService.getTaskList(config);
+      const response = await tasksApiService.getTaskListV3(config);
       return response.body;
     } catch (error) {
       logger.error('Fetch Task Groups', error);
@@ -234,9 +240,9 @@ export const fetchSubTasks = createAsyncThunk(
       parent_task: taskId,
     };
     try {
-      const response = await tasksApiService.getTaskList(config);
+      const response = await tasksApiService.getTaskListV3(config);
       // Only expand if we actually fetched subtasks
-      if (response.body.length > 0) {
+      if (response.body && response.body.groups && response.body.groups.length > 0) {
         dispatch(toggleTaskRowExpansion(taskId));
       }
       return response.body;
@@ -1026,7 +1032,10 @@ const taskSlice = createSlice({
       })
       .addCase(fetchTaskGroups.fulfilled, (state, action) => {
         state.loadingGroups = false;
-        state.taskGroups = action.payload;
+        state.taskGroups = action.payload && action.payload.groups ? action.payload.groups : [];
+        state.allTasks = action.payload && action.payload.allTasks ? action.payload.allTasks : [];
+        state.grouping = action.payload && action.payload.grouping ? action.payload.grouping : '';
+        state.totalTasks = action.payload && action.payload.totalTasks ? action.payload.totalTasks : 0;
       })
       .addCase(fetchTaskGroups.rejected, (state, action) => {
         state.loadingGroups = false;
@@ -1035,14 +1044,16 @@ const taskSlice = createSlice({
       .addCase(fetchSubTasks.pending, state => {
         state.error = null;
       })
-      .addCase(fetchSubTasks.fulfilled, (state, action: PayloadAction<IProjectTask[]>) => {
-        if (action.payload.length > 0) {
-          const taskId = action.payload[0].parent_task_id;
+      .addCase(fetchSubTasks.fulfilled, (state, action) => {
+        if (action.payload && action.payload.groups && action.payload.groups.length > 0) {
+          // Assuming subtasks are in the first group for this context
+          const subtasks = action.payload.groups[0].tasks;
+          const taskId = subtasks.length > 0 ? subtasks[0].parent_task_id : null;
           if (taskId) {
             for (const group of state.taskGroups) {
               const task = group.tasks.find(t => t.id === taskId);
               if (task) {
-                task.sub_tasks = action.payload;
+                task.sub_tasks = subtasks;
                 task.show_sub_tasks = true;
                 break;
               }