47bdcb11d8
## Context Moving isActive filtering to the frontend for page layout tabs and widgets, hiding inactive entities from the UI while keeping them in state for future reactivation Next we will implement deactivated standard tab re-activation during tab creation (cc @Devessier) <img width="234" height="303" alt="📋 Menu (Slots)" src="https://github.com/user-attachments/assets/17a25ac6-55e2-4778-b7f0-e7554ed69704" />
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
|
|
import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
|
|
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
|
|
import { buildWidgetVisibilityContext } from '@/page-layout/utils/buildWidgetVisibilityContext';
|
|
import { filterVisibleWidgets } from '@/page-layout/utils/filterVisibleWidgets';
|
|
import { sortWidgetsByVerticalListPosition } from '@/page-layout/utils/sortWidgetsByVerticalListPosition';
|
|
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { PageLayoutTabLayoutMode } from '~/generated-metadata/graphql';
|
|
|
|
export const usePageLayoutTabWithVisibleWidgetsOrThrow = (
|
|
tabId: string,
|
|
): PageLayoutTab => {
|
|
const { currentPageLayout } = useCurrentPageLayout();
|
|
const isMobile = useIsMobile();
|
|
const { isInSidePanel } = useLayoutRenderingContext();
|
|
const isPageLayoutInEditMode = useIsPageLayoutInEditMode();
|
|
|
|
if (!isDefined(currentPageLayout)) {
|
|
throw new Error('currentPageLayout is not defined');
|
|
}
|
|
|
|
const tab = currentPageLayout.tabs.find((t) => t.id === tabId);
|
|
|
|
if (!isDefined(tab)) {
|
|
throw new Error('Tab not found');
|
|
}
|
|
|
|
const activeWidgets = tab.widgets.filter((widget) => widget.isActive);
|
|
|
|
if (isPageLayoutInEditMode) {
|
|
return {
|
|
...tab,
|
|
widgets:
|
|
tab.layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST
|
|
? sortWidgetsByVerticalListPosition(activeWidgets)
|
|
: activeWidgets,
|
|
};
|
|
}
|
|
|
|
const context = buildWidgetVisibilityContext({ isMobile, isInSidePanel });
|
|
|
|
const visibleWidgets = filterVisibleWidgets({
|
|
widgets: activeWidgets,
|
|
context,
|
|
});
|
|
|
|
return {
|
|
...tab,
|
|
widgets:
|
|
tab.layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST
|
|
? sortWidgetsByVerticalListPosition(visibleWidgets)
|
|
: visibleWidgets,
|
|
};
|
|
};
|