From e096bc66abf2be1577475301d7a639435ae77dae Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 23:40:41 +0530
Subject: [PATCH] feat(task-filters): implement search functionality for task
 filtering

- Added search state management to ImprovedTaskFilters, allowing users to filter tasks based on search input.
- Integrated search actions for both list and board views, ensuring appropriate task fetching based on the current view.
- Updated task management slice to include a search field, enhancing the overall task filtering capabilities.
---
 .../task-management/improved-task-filters.tsx | 43 ++++++++++++++-----
 .../task-management/task-management.slice.ts  | 13 +++++-
 .../src/types/task-management.types.ts        |  1 +
 3 files changed, 46 insertions(+), 11 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 50c063f5..5eb29310 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -23,9 +23,10 @@ import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
 import { toggleField } from '@/features/task-management/taskListFields.slice';
 
 // Import Redux actions
-import { fetchTasksV3, setSelectedPriorities } from '@/features/task-management/task-management.slice';
+import { fetchTasksV3, setSelectedPriorities, setSearch as setTaskManagementSearch } from '@/features/task-management/task-management.slice';
 import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
-import { setMembers, setLabels } from '@/features/tasks/tasks.slice';
+import { setMembers, setLabels, setSearch } from '@/features/tasks/tasks.slice';
+import { setBoardSearch } from '@/features/board/board-slice';
 
 // Optimized selectors with proper transformation logic
 const selectFilterData = createSelector(
@@ -719,18 +720,42 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   const handleSearchChange = useCallback((value: string) => {
     setSearchValue(value);
     
-    // Log the search change for now
+    if (!projectId) return;
+    
+    // Dispatch search action based on current view
+    if (projectView === 'list') {
+      // For list view, use the tasks slice
+      dispatch(setSearch(value));
+    } else {
+      // For board view, use the board slice
+      dispatch(setBoardSearch(value));
+    }
+    
     console.log('Search change:', value, { projectView, projectId });
     
-    // TODO: Implement proper search dispatch
-  }, [projectView, projectId]);
+    // Trigger task refetch with new search value
+    dispatch(fetchTasksV3(projectId));
+  }, [projectView, projectId, dispatch]);
 
   const clearAllFilters = useCallback(() => {
-    // TODO: Implement clear all filters
-    console.log('Clear all filters');
+    if (!projectId) return;
+    
+    // Clear search
     setSearchValue('');
+    if (projectView === 'list') {
+      dispatch(setSearch(''));
+    } else {
+      dispatch(setBoardSearch(''));
+    }
+    
+    // Clear other filters
     setShowArchived(false);
-  }, []);
+    
+    // Trigger task refetch with cleared filters
+    dispatch(fetchTasksV3(projectId));
+    
+    console.log('Clear all filters');
+  }, [projectId, projectView, dispatch]);
 
   const toggleArchived = useCallback(() => {
     setShowArchived(!showArchived);
@@ -738,8 +763,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     console.log('Toggle archived:', !showArchived);
   }, [showArchived]);
 
-
-
   return (
     <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
       <div className="flex flex-wrap items-center gap-2">
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 f015d0b0..706c75d5 100644
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -17,6 +17,7 @@ const initialState: TaskManagementState = {
   groups: [],
   grouping: null,
   selectedPriorities: [],
+  search: '',
 };
 
 // Async thunk to fetch tasks from API
@@ -153,7 +154,11 @@ export const fetchTasksV3 = createAsyncThunk(
         ? state.taskManagement.selectedPriorities.join(',')
         : '';
       
+      // Get search value from taskReducer
+      const searchValue = state.taskReducer.search || '';
+      
       console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
+      console.log('fetchTasksV3 - searchValue:', searchValue);
       
       const config: ITaskListConfigV2 = {
         id: projectId,
@@ -161,7 +166,7 @@ export const fetchTasksV3 = createAsyncThunk(
         group: currentGrouping,
         field: '',
         order: '',
-        search: '',
+        search: searchValue,
         statuses: '',
         members: selectedAssignees,
         projects: '',
@@ -328,6 +333,11 @@ const taskManagementSlice = createSlice({
     setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
       state.selectedPriorities = action.payload;
     },
+
+    // Search action
+    setSearch: (state, action: PayloadAction<string>) => {
+      state.search = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -387,6 +397,7 @@ export const {
   setLoading,
   setError,
   setSelectedPriorities,
+  setSearch,
 } = taskManagementSlice.actions;
 
 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 246ad0b6..0d1a9d06 100644
--- a/worklenz-frontend/src/types/task-management.types.ts
+++ b/worklenz-frontend/src/types/task-management.types.ts
@@ -76,6 +76,7 @@ export interface TaskManagementState {
   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
 }
 
 export interface TaskGroupsState {