diff --git a/apps/web/ee/components/initiatives/components/layouts/kanban.tsx b/apps/web/ee/components/initiatives/components/layouts/kanban.tsx index eb1dbede28..448f8a91e5 100644 --- a/apps/web/ee/components/initiatives/components/layouts/kanban.tsx +++ b/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 ( { 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 ( 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;