Merge pull request #186 from shancds/refact/board-task-card-performance

feat(task-filters): enhance ImprovedTaskFilters for Kanban integration

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

@@ -25,8 +25,24 @@ import { toggleField } from '@/features/task-management/taskListFields.slice';
 // Import Redux actions
 import { fetchTasksV3, setSearch as setTaskManagementSearch } from '@/features/task-management/task-management.slice';
 import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
-import { setMembers, setLabels, setSearch, setPriorities } from '@/features/tasks/tasks.slice';
+
-import { setBoardSearch } from '@/features/board/board-slice';
+import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
+import { fetchLabelsByProject, fetchTaskAssignees, setMembers, setLabels, setSearch, setPriorities } from '@/features/tasks/tasks.slice';
+import { getTeamMembers } from '@/features/team-members/team-members.slice';
+import { ITaskPriority } from '@/types/tasks/taskPriority.types';
+import { ITaskListColumn } from '@/types/tasks/taskList.types';
+import { IGroupBy } from '@/features/tasks/tasks.slice';
+// --- Enhanced Kanban imports ---
+import {
+  setGroupBy as setKanbanGroupBy,
+  setSearch as setKanbanSearch,
+  setArchived as setKanbanArchived,
+  setTaskAssignees as setKanbanTaskAssignees,
+  setLabels as setKanbanLabels,
+  setPriorities as setKanbanPriorities,
+  setMembers as setKanbanMembers,
+  fetchEnhancedKanbanGroups,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
 
 // Performance constants
 const FILTER_DEBOUNCE_DELAY = 300; // ms
@@ -121,7 +137,7 @@ function createDebouncedFunction<T extends (...args: any[]) => void>(
 }
 
 // Get real filter data from Redux state
-const useFilterData = (): FilterSection[] => {
+const useFilterData = (position: 'board' | 'list'): FilterSection[] => {
   const { t } = useTranslation('task-list-filters');
   const [searchParams] = useSearchParams();
   const { projectView } = useTabSearchParam();
@@ -129,21 +145,90 @@ const useFilterData = (): FilterSection[] => {
   // Use optimized selector to get all filter data at once
   const filterData = useAppSelector(selectFilterData);
   const currentGrouping = useAppSelector(selectCurrentGrouping);
-
+  // Enhanced Kanban selectors
+  const kanbanState = useAppSelector((state: RootState) => state.enhancedKanbanReducer);
+  const kanbanProject = useAppSelector((state: RootState) => state.projectReducer.project);
+  // Determine which state to use
+  const isBoard = position === 'board';
   const tab = searchParams.get('tab');
   const currentProjectView = tab === 'tasks-list' ? 'list' : 'kanban';
 
   return useMemo(() => {
-    const currentPriorities = currentProjectView === 'list' ? filterData.taskPriorities : filterData.boardPriorities;
+    if (isBoard) {
-    const currentLabels = currentProjectView === 'list' ? filterData.taskLabels : filterData.boardLabels;
+      // Use enhanced kanban state
-    const currentAssignees = currentProjectView === 'list' ? filterData.taskAssignees : filterData.boardAssignees;
+      const currentPriorities = kanbanState.priorities || [];
-    const groupByValue = currentGrouping || 'status';
+      const currentLabels = kanbanState.labels || [];
-
+      const currentAssignees = kanbanState.taskAssignees || [];
+      const groupByValue = kanbanState.groupBy || 'status';
       return [
         {
           id: 'priority',
           label: 'Priority',
-        options: filterData.priorities.slice(0, MAX_FILTER_OPTIONS).map((p: any) => ({
+          options: (kanbanProject?.priorities || []).map((p: any) => ({
+            value: p.id,
+            label: p.name,
+            color: p.color_code,
+          })),
+          selectedValues: currentPriorities,
+          multiSelect: true,
+          searchable: false,
+          icon: FlagOutlined,
+        },
+        {
+          id: 'assignees',
+          label: t('membersText'),
+          icon: TeamOutlined,
+          multiSelect: true,
+          searchable: true,
+          selectedValues: currentAssignees.filter((m: any) => m.selected && m.id).map((m: any) => m.id || ''),
+          options: currentAssignees.map((assignee: any) => ({
+            id: assignee.id || '',
+            label: assignee.name || '',
+            value: assignee.id || '',
+            avatar: assignee.avatar_url,
+            selected: assignee.selected,
+          })),
+        },
+        {
+          id: 'labels',
+          label: t('labelsText'),
+          icon: TagOutlined,
+          multiSelect: true,
+          searchable: true,
+          selectedValues: currentLabels.filter((l: any) => l.selected && l.id).map((l: any) => l.id || ''),
+          options: currentLabels.map((label: any) => ({
+            id: label.id || '',
+            label: label.name || '',
+            value: label.id || '',
+            color: label.color_code,
+            selected: label.selected,
+          })),
+        },
+        {
+          id: 'groupBy',
+          label: t('groupByText'),
+          icon: GroupOutlined,
+          multiSelect: false,
+          searchable: false,
+          selectedValues: [groupByValue],
+          options: [
+            { id: 'status', label: t('statusText'), value: 'status' },
+            { id: 'priority', label: t('priorityText'), value: 'priority' },
+            { id: 'phase', label: kanbanProject?.phase_label || t('phaseText'), value: 'phase' },
+          ],
+        },
+      ];
+    } else {
+      // Use task management/board state
+      const currentPriorities = currentProjectView === 'list' ? filterData.taskPriorities : filterData.boardPriorities;
+      const currentLabels = currentProjectView === 'list' ? filterData.taskLabels : filterData.boardLabels;
+      const currentAssignees = currentProjectView === 'list' ? filterData.taskAssignees : filterData.boardAssignees;
+      const groupByValue = currentGrouping || 'status';
+      return [
+        {
+          id: 'priority',
+          label: 'Priority',
+          options: filterData.priorities.map((p: any) => ({
             value: p.id,
             label: p.name,
             color: p.color_code,
@@ -160,7 +245,7 @@ const useFilterData = (): FilterSection[] => {
           multiSelect: true,
           searchable: true,
           selectedValues: currentAssignees.filter((m: any) => m.selected && m.id).map((m: any) => m.id || ''),
-        options: currentAssignees.slice(0, MAX_FILTER_OPTIONS).map((assignee: any) => ({
+          options: currentAssignees.map((assignee: any) => ({
             id: assignee.id || '',
             label: assignee.name || '',
             value: assignee.id || '',
@@ -175,7 +260,7 @@ const useFilterData = (): FilterSection[] => {
           multiSelect: true,
           searchable: true,
           selectedValues: currentLabels.filter((l: any) => l.selected && l.id).map((l: any) => l.id || ''),
-        options: currentLabels.slice(0, MAX_FILTER_OPTIONS).map((label: any) => ({
+          options: currentLabels.map((label: any) => ({
             id: label.id || '',
             label: label.name || '',
             value: label.id || '',
@@ -197,12 +282,9 @@ const useFilterData = (): FilterSection[] => {
           ],
         },
       ];
-  }, [
+    }
-    filterData, 
+  }, [isBoard, kanbanState, kanbanProject, filterData, currentProjectView, t, currentGrouping]);
-    currentProjectView, 
+
-    t, 
-    currentGrouping
-  ]);
 };
 
 // Filter Dropdown Component
@@ -640,7 +722,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   const debouncedSearchChangeRef = useRef<((projectId: string, value: string) => void) & { cancel: () => void } | null>(null);
 
   // Get real filter data
-  const filterSectionsData = useFilterData();
+  const filterSectionsData = useFilterData(position);
 
   // Check if data is loaded - memoize this computation
   const isDataLoaded = useMemo(() => {
@@ -735,64 +817,83 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
 
   const handleSelectionChange = useCallback((sectionId: string, values: string[]) => {
     if (!projectId) return;
-
+    if (position === 'board') {
-    // Prevent clearing all group by options
+      // Enhanced Kanban logic
-    if (sectionId === 'groupBy' && values.length === 0) {
+      if (sectionId === 'groupBy' && values.length > 0) {
-      return; // Do nothing
+        dispatch(setKanbanGroupBy(values[0] as any));
+        dispatch(fetchEnhancedKanbanGroups(projectId));
+        return;
       }
-
+      if (sectionId === 'priority') {
-    // Update local state first for immediate UI feedback
+        dispatch(setKanbanPriorities(values));
-    setFilterSections(prev => prev.map(section => 
+        dispatch(fetchEnhancedKanbanGroups(projectId));
-      section.id === sectionId 
+        return;
-        ? { ...section, selectedValues: values }
+      }
-        : section
+      if (sectionId === 'assignees') {
+        dispatch(setKanbanTaskAssignees(
+          // Map to {id, selected, ...}
+          values.map(id => ({ id, selected: true }))
         ));
-
+        dispatch(fetchEnhancedKanbanGroups(projectId));
-    // Use task management slices for groupBy (immediate, no debounce)
+        return;
+      }
+      if (sectionId === 'labels') {
+        dispatch(setKanbanLabels(
+          values.map(id => ({ id, selected: true }))
+        ));
+        dispatch(fetchEnhancedKanbanGroups(projectId));
+        return;
+      }
+    } else {
+      // ... existing list logic ...
       if (sectionId === 'groupBy' && values.length > 0) {
         dispatch(setCurrentGrouping(values[0] as 'status' | 'priority' | 'phase'));
         dispatch(fetchTasksV3(projectId));
         return;
       }
-
-    // Handle priorities (with debounce)
       if (sectionId === 'priority') {
-      dispatch(setPriorities(values));
+        dispatch(setSelectedPriorities(values));
-      debouncedFilterChangeRef.current?.(projectId);
+        dispatch(fetchTasksV3(projectId));
         return;
       }
-
-    // Handle assignees (members) (with debounce)
       if (sectionId === 'assignees') {
         const updatedAssignees = currentTaskAssignees.map(member => ({
           ...member,
           selected: values.includes(member.id || '')
         }));
         dispatch(setMembers(updatedAssignees));
-      debouncedFilterChangeRef.current?.(projectId);
+        dispatch(fetchTasksV3(projectId));
         return;
       }
-
-    // Handle labels (with debounce)
       if (sectionId === 'labels') {
         const updatedLabels = currentTaskLabels.map(label => ({
           ...label,
           selected: values.includes(label.id || '')
         }));
         dispatch(setLabels(updatedLabels));
-      debouncedFilterChangeRef.current?.(projectId);
+        dispatch(fetchTasksV3(projectId));
         return;
       }
-  }, [dispatch, projectId, currentTaskAssignees, currentTaskLabels]);
+
+    }
+  }, [dispatch, projectId, position, currentTaskAssignees, currentTaskLabels]);
 
   const handleSearchChange = useCallback((value: string) => {
     setSearchValue(value);
 
+    
     if (!projectId) return;
       
+    if (position === 'board') {
+      dispatch(setKanbanSearch(value));
+      dispatch(fetchEnhancedKanbanGroups(projectId));
+    } else {
       // Use debounced search
       debouncedSearchChangeRef.current?.(projectId, value);
-  }, [projectId]);
+    }
+    
+    
+  }, [dispatch, projectId, position]);
 
   const clearAllFilters = useCallback(async () => {
     if (!projectId || clearingFilters) return;
@@ -866,9 +967,13 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
 
   const toggleArchived = useCallback(() => {
     setShowArchived(!showArchived);
-    // TODO: Implement proper archived toggle
+    if (position === 'board') {
-    console.log('Toggle archived:', !showArchived);
+      dispatch(setKanbanArchived(!showArchived));
-  }, [showArchived]);
+      dispatch(fetchEnhancedKanbanGroups(projectId));
+    } else {
+      // ... existing logic ...
+    }
+  }, [dispatch, projectId, position, showArchived]);
 
   return (
     <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>