[WEB-5298] fix: initiatives layouts filtering and sorting (#4601)

apps/web/ee/components/initiatives/components/layouts/kanban.tsx

@@ -30,7 +30,7 @@ export const InitiativeKanbanLayout = observer(() => {
   const { t } = useTranslation();
 
   const {
-    initiative: { initiativesMap, currentGroupedInitiativeIds, updateInitiative, getInitiativesLabels },
+    initiative: { filteredInitiativesMap, currentGroupedFilteredInitiativeIds, updateInitiative, getInitiativesLabels },
     initiativeFilters,
   } = useInitiatives();
 
@@ -50,9 +50,9 @@ export const InitiativeKanbanLayout = observer(() => {
 
   // Generate groups
   const groups: IBaseLayoutsBaseGroup[] = useMemo(() => {
-    if (!currentGroupedInitiativeIds) return [];
+    if (!currentGroupedFilteredInitiativeIds) return [];
 
-    let groupIds = Object.keys(currentGroupedInitiativeIds);
+    let groupIds = Object.keys(currentGroupedFilteredInitiativeIds);
     if (!workspaceSlug) return [];
 
     const expandGroups = (extra: string[] = [], includeNone = true) => {
@@ -90,7 +90,7 @@ export const InitiativeKanbanLayout = observer(() => {
       icon,
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentGroupedInitiativeIds, groupBy, getUserDetails, workspaceSlug]);
+  }, [currentGroupedFilteredInitiativeIds, groupBy, getUserDetails, workspaceSlug]);
 
   // Render each initiative card
   const renderItem = useCallback(
@@ -103,7 +103,7 @@ export const InitiativeKanbanLayout = observer(() => {
   // Handle drag and drop
   const handleDrop = useCallback(
     async (sourceId: string, destinationId: string | null, sourceGroupId: string, destinationGroupId: string) => {
-      if (!workspaceSlug || !groupBy || !initiativesMap) return;
+      if (!workspaceSlug || !groupBy || !filteredInitiativesMap) return;
 
       try {
         const updatePayload = getInitiativeUpdatePayload(
@@ -111,7 +111,7 @@ export const InitiativeKanbanLayout = observer(() => {
           sourceId,
           sourceGroupId,
           destinationGroupId,
-          initiativesMap
+          filteredInitiativesMap
         );
         if (!updatePayload) return;
         await updateInitiative(workspaceSlug.toString(), sourceId, updatePayload);
@@ -125,15 +125,15 @@ export const InitiativeKanbanLayout = observer(() => {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [workspaceSlug, groupBy, updateInitiative, initiativesMap]
+    [workspaceSlug, groupBy, updateInitiative, filteredInitiativesMap]
   );
 
-  if (!initiativesMap || !currentGroupedInitiativeIds) return null;
+  if (!filteredInitiativesMap || !currentGroupedFilteredInitiativeIds) return null;
 
   return (
     <BaseKanbanLayout
-      items={initiativesMap}
-      groupedItemIds={currentGroupedInitiativeIds}
+      items={filteredInitiativesMap}
+      groupedItemIds={currentGroupedFilteredInitiativeIds}
       groups={groups}
       renderItem={renderItem}
       enableDragDrop={isEditable}

apps/web/ee/components/initiatives/components/layouts/list.tsx

@@ -23,21 +23,18 @@ export const InitiativesListLayout = observer(() => {
   const { workspaceSlug } = useParams();
 
   const {
-    initiative: { initiativesMap, currentGroupedFilteredInitiativeIds, updateInitiative, getInitiativesLabels },
+    initiative: { filteredInitiativesMap, currentGroupedFilteredInitiativeIds, updateInitiative, getInitiativesLabels },
     initiativeFilters,
   } = useInitiatives();
 
   const displayFilters = initiativeFilters.currentInitiativeDisplayFilters;
   const groupBy = displayFilters?.group_by;
-  const groupedInitiativeIds = currentGroupedFilteredInitiativeIds;
-
-  const groupedItemIds = useMemo(() => groupedInitiativeIds || {}, [groupedInitiativeIds]);
 
   // Generate groups
   const groups: IBaseLayoutsBaseGroup[] = useMemo(() => {
-    if (!groupedItemIds) return [];
+    if (!currentGroupedFilteredInitiativeIds) return [];
 
-    let groupIds = Object.keys(groupedItemIds);
+    let groupIds = Object.keys(currentGroupedFilteredInitiativeIds);
     if (!workspaceSlug) return [];
 
     const expandGroups = (extra: string[] = [], includeNone = true) => {
@@ -75,7 +72,7 @@ export const InitiativesListLayout = observer(() => {
       icon,
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [groupedItemIds, groupBy, getUserDetails, workspaceSlug]);
+  }, [currentGroupedFilteredInitiativeIds, groupBy, getUserDetails, workspaceSlug]);
 
   const isEditable = allowPermissions(
     [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
@@ -95,7 +92,7 @@ export const InitiativesListLayout = observer(() => {
   // Handle drag and drop
   const handleDrop = useCallback(
     async (sourceId: string, destinationId: string | null, sourceGroupId: string, destinationGroupId: string) => {
-      if (!workspaceSlug || !groupBy || !initiativesMap) return;
+      if (!workspaceSlug || !groupBy || !filteredInitiativesMap) return;
 
       if (sourceGroupId === destinationGroupId) return;
 
@@ -105,7 +102,7 @@ export const InitiativesListLayout = observer(() => {
           sourceId,
           sourceGroupId,
           destinationGroupId,
-          initiativesMap
+          filteredInitiativesMap
         );
         if (!updatePayload) return;
         await updateInitiative(workspaceSlug.toString(), sourceId, updatePayload);
@@ -118,15 +115,15 @@ export const InitiativesListLayout = observer(() => {
         });
       }
     },
-    [workspaceSlug, groupBy, updateInitiative, initiativesMap, t]
+    [workspaceSlug, groupBy, updateInitiative, filteredInitiativesMap, t]
   );
 
-  if (!initiativesMap || !groupedItemIds) return null;
+  if (!filteredInitiativesMap || !currentGroupedFilteredInitiativeIds) return null;
 
   return (
     <BaseListLayout
-      items={initiativesMap}
-      groupedItemIds={groupedItemIds}
+      items={filteredInitiativesMap}
+      groupedItemIds={currentGroupedFilteredInitiativeIds}
       groups={groups}
       renderItem={renderItem}
       enableDragDrop={isEditable}

apps/web/ee/components/initiatives/utils.tsx

@@ -38,9 +38,21 @@ export const getGroupList = (
     state: (a, b) =>
       INITIATIVE_STATES[a as TInitiativeStates].sortOrder - INITIATIVE_STATES[b as TInitiativeStates].sortOrder,
     label_ids: () => 0,
-    lead: (a) => (a === "None" ? 1 : -1),
-    created_by: (a) => (a === "None" ? 1 : -1),
-    default: (a) => (a === "None" ? 1 : -1),
+    lead: (a, b) => {
+      if (a === "None") return 1;
+      if (b === "None") return -1;
+      return a.localeCompare(b);
+    },
+    created_by: (a, b) => {
+      if (a === "None") return 1;
+      if (b === "None") return -1;
+      return a.localeCompare(b);
+    },
+    default: (a, b) => {
+      if (a === "None") return 1;
+      if (b === "None") return -1;
+      return a.localeCompare(b);
+    },
   };
 
   const sorter = sorters[groupBy ?? "default"] ?? sorters.default;