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.
This commit is contained in:
@@ -23,9 +23,10 @@ import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
|
|||||||
import { toggleField } from '@/features/task-management/taskListFields.slice';
|
import { toggleField } from '@/features/task-management/taskListFields.slice';
|
||||||
|
|
||||||
// Import Redux actions
|
// 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 { 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
|
// Optimized selectors with proper transformation logic
|
||||||
const selectFilterData = createSelector(
|
const selectFilterData = createSelector(
|
||||||
@@ -719,18 +720,42 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
|
|||||||
const handleSearchChange = useCallback((value: string) => {
|
const handleSearchChange = useCallback((value: string) => {
|
||||||
setSearchValue(value);
|
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 });
|
console.log('Search change:', value, { projectView, projectId });
|
||||||
|
|
||||||
// TODO: Implement proper search dispatch
|
// Trigger task refetch with new search value
|
||||||
}, [projectView, projectId]);
|
dispatch(fetchTasksV3(projectId));
|
||||||
|
}, [projectView, projectId, dispatch]);
|
||||||
|
|
||||||
const clearAllFilters = useCallback(() => {
|
const clearAllFilters = useCallback(() => {
|
||||||
// TODO: Implement clear all filters
|
if (!projectId) return;
|
||||||
console.log('Clear all filters');
|
|
||||||
|
// Clear search
|
||||||
setSearchValue('');
|
setSearchValue('');
|
||||||
|
if (projectView === 'list') {
|
||||||
|
dispatch(setSearch(''));
|
||||||
|
} else {
|
||||||
|
dispatch(setBoardSearch(''));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear other filters
|
||||||
setShowArchived(false);
|
setShowArchived(false);
|
||||||
}, []);
|
|
||||||
|
// Trigger task refetch with cleared filters
|
||||||
|
dispatch(fetchTasksV3(projectId));
|
||||||
|
|
||||||
|
console.log('Clear all filters');
|
||||||
|
}, [projectId, projectView, dispatch]);
|
||||||
|
|
||||||
const toggleArchived = useCallback(() => {
|
const toggleArchived = useCallback(() => {
|
||||||
setShowArchived(!showArchived);
|
setShowArchived(!showArchived);
|
||||||
@@ -738,8 +763,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
|
|||||||
console.log('Toggle archived:', !showArchived);
|
console.log('Toggle archived:', !showArchived);
|
||||||
}, [showArchived]);
|
}, [showArchived]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
|
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ const initialState: TaskManagementState = {
|
|||||||
groups: [],
|
groups: [],
|
||||||
grouping: null,
|
grouping: null,
|
||||||
selectedPriorities: [],
|
selectedPriorities: [],
|
||||||
|
search: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
// Async thunk to fetch tasks from API
|
// Async thunk to fetch tasks from API
|
||||||
@@ -153,7 +154,11 @@ export const fetchTasksV3 = createAsyncThunk(
|
|||||||
? state.taskManagement.selectedPriorities.join(',')
|
? state.taskManagement.selectedPriorities.join(',')
|
||||||
: '';
|
: '';
|
||||||
|
|
||||||
|
// Get search value from taskReducer
|
||||||
|
const searchValue = state.taskReducer.search || '';
|
||||||
|
|
||||||
console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
|
console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
|
||||||
|
console.log('fetchTasksV3 - searchValue:', searchValue);
|
||||||
|
|
||||||
const config: ITaskListConfigV2 = {
|
const config: ITaskListConfigV2 = {
|
||||||
id: projectId,
|
id: projectId,
|
||||||
@@ -161,7 +166,7 @@ export const fetchTasksV3 = createAsyncThunk(
|
|||||||
group: currentGrouping,
|
group: currentGrouping,
|
||||||
field: '',
|
field: '',
|
||||||
order: '',
|
order: '',
|
||||||
search: '',
|
search: searchValue,
|
||||||
statuses: '',
|
statuses: '',
|
||||||
members: selectedAssignees,
|
members: selectedAssignees,
|
||||||
projects: '',
|
projects: '',
|
||||||
@@ -328,6 +333,11 @@ const taskManagementSlice = createSlice({
|
|||||||
setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
|
setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
|
||||||
state.selectedPriorities = action.payload;
|
state.selectedPriorities = action.payload;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Search action
|
||||||
|
setSearch: (state, action: PayloadAction<string>) => {
|
||||||
|
state.search = action.payload;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
extraReducers: (builder) => {
|
extraReducers: (builder) => {
|
||||||
builder
|
builder
|
||||||
@@ -387,6 +397,7 @@ export const {
|
|||||||
setLoading,
|
setLoading,
|
||||||
setError,
|
setError,
|
||||||
setSelectedPriorities,
|
setSelectedPriorities,
|
||||||
|
setSearch,
|
||||||
} = taskManagementSlice.actions;
|
} = taskManagementSlice.actions;
|
||||||
|
|
||||||
export default taskManagementSlice.reducer;
|
export default taskManagementSlice.reducer;
|
||||||
|
|||||||
@@ -76,6 +76,7 @@ export interface TaskManagementState {
|
|||||||
groups: TaskGroup[]; // Pre-processed groups from V3 API
|
groups: TaskGroup[]; // Pre-processed groups from V3 API
|
||||||
grouping: string | null; // Current grouping from V3 API
|
grouping: string | null; // Current grouping from V3 API
|
||||||
selectedPriorities: string[]; // Selected priority filters
|
selectedPriorities: string[]; // Selected priority filters
|
||||||
|
search: string; // Search query for filtering tasks
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TaskGroupsState {
|
export interface TaskGroupsState {
|
||||||
|
|||||||
Reference in New Issue
Block a user