eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Merge pull request 'core/page-provider' (#38) from core/page-provider into main

Browse Source 
Reviewed-on: eigen/fe-monorepo-template#38
This commit is contained in:
firmanr
2026-07-27 10:47:32 +00:00
parent d7f50b6576 0f5a1ef1d1
commit 2c02f4e96f
9 changed files with 304 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/example/full-page/presentation/store/index.ts
+3
View File
@@ -16,4 +16,7 @@ export const fullPageStore = create<FullPageStoreState>((set) => ({
privileges: [],
setPrivileges: (privileges) => set({ privileges }),
tableConfig: null,
setTableConfig: (config) => set({ tableConfig: config }),
}));
apps/web/src/apps/modules/layouts/components/sidebar.store.ts
+92
View File
@@ -0,0 +1,92 @@
import { create } from 'zustand';
import { appStorage, AppStorageKey } from '../../../../core/storage/local';
interface SidebarState {
openedKeys: Set<string>;
isInitialized: boolean;
isAllExpanded: boolean;
searchQuery: string;
// Actions
initializeStorage: (initialKeysFromActive: string[], allParentKeys: string[]) => Promise<void>;
toggleMenu: (key: string, isOpened: boolean, allParentKeys: string[]) => Promise<void>;
expandAll: (allParentKeys: string[]) => Promise<void>;
collapseAll: () => Promise<void>;
syncActiveKeys: (keys: string[], allParentKeys: string[]) => Promise<void>;
setSearchQuery: (query: string) => void;
}
export const useSidebarStore = create<SidebarState>((set, get) => ({
openedKeys: new Set<string>(),
isInitialized: false,
isAllExpanded: false,
searchQuery: '',
initializeStorage: async (initialKeysFromActive, allParentKeys) => {
if (get().isInitialized) return;
const saved = await appStorage.getItem<string[]>(AppStorageKey.SIDEBAR_OPEN_MENUS);
if (saved) {
const openedSet = new Set(saved);
const isAllExpanded = saved.length > 0 && allParentKeys.every((k) => openedSet.has(k));
set({ openedKeys: openedSet, isInitialized: true, isAllExpanded });
} else {
// First time load: use initial active keys
await appStorage.setItem(AppStorageKey.SIDEBAR_OPEN_MENUS, initialKeysFromActive);
const openedSet = new Set(initialKeysFromActive);
const isAllExpanded = initialKeysFromActive.length > 0 && allParentKeys.every((k) => openedSet.has(k));
set({ openedKeys: openedSet, isInitialized: true, isAllExpanded });
}
},
toggleMenu: async (key, isOpened, allParentKeys) => {
const prevSet = get().openedKeys;
const nextSet = new Set(prevSet);
if (isOpened) {
nextSet.add(key);
} else {
nextSet.delete(key);
}
const nextArr = Array.from(nextSet);
const isAllExpanded = nextArr.length > 0 && allParentKeys.every((k) => nextSet.has(k));
set({ openedKeys: nextSet, isAllExpanded });
await appStorage.setItem(AppStorageKey.SIDEBAR_OPEN_MENUS, nextArr);
},
expandAll: async (allParentKeys) => {
const nextSet = new Set(allParentKeys);
set({ openedKeys: nextSet, isAllExpanded: true });
await appStorage.setItem(AppStorageKey.SIDEBAR_OPEN_MENUS, allParentKeys);
},
collapseAll: async () => {
set({ openedKeys: new Set(), isAllExpanded: false });
await appStorage.setItem(AppStorageKey.SIDEBAR_OPEN_MENUS, []);
},
syncActiveKeys: async (keysToSync, allParentKeys) => {
const prevSet = get().openedKeys;
let hasChanges = false;
const nextSet = new Set(prevSet);
for (const key of keysToSync) {
if (!nextSet.has(key)) {
nextSet.add(key);
hasChanges = true;
}
}
if (hasChanges) {
const nextArr = Array.from(nextSet);
const isAllExpanded = nextArr.length > 0 && allParentKeys.every((k) => nextSet.has(k));
set({ openedKeys: nextSet, isAllExpanded });
await appStorage.setItem(AppStorageKey.SIDEBAR_OPEN_MENUS, nextArr);
}
},
setSearchQuery: (query: string) => set({ searchQuery: query }),
}));
apps/web/src/apps/modules/layouts/components/sidebar.tsx
+115 -45
View File
@@ -1,6 +1,18 @@
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Box, NavLink, Stack, Tooltip, ActionIcon, Divider, Menu, TextInput, Button, Group } from '@repo/ui/components';
import {
Box,
NavLink,
Stack,
Tooltip,
ActionIcon,
Divider,
Menu,
TextInput,
Button,
Group,
Text,
} from '@repo/ui/components';
import { useCoreAppShell } from '@repo/ui/components';
import { ChevronsLeft, ChevronsRight, PanelTopClose, PanelTopOpen, Search, X, History, Bookmark } from 'lucide-react';
import { publish } from '@repo/core-events';
@@ -9,6 +21,8 @@ import type { SidebarVariant } from '@repo/ui/components';
import { useTranslation } from '@repo/core-i18n';
import { shortcutsData } from '@repo/ui/constants';
import { LAYOUT_EVENTS } from '../../../../core/constants/events';
import { useSidebarStore } from './sidebar.store';
import { useDebouncedValue } from '@repo/ui/hooks';
// ---------------------------------------------------------------------------
// Props
@@ -39,17 +53,15 @@ interface SidebarMenuProps {
interface MenuItemExpandedProps {
item: MenuItemType;
activeKeys: Set<string>;
isSearching?: boolean;
expandVersion?: number;
collapseVersion?: number;
isSearching: boolean;
allParentKeys: string[];
}
const MenuItemExpanded = memo(function MenuItemExpanded({
item,
activeKeys,
isSearching,
expandVersion = 0,
collapseVersion = 0,
allParentKeys,
}: MenuItemExpandedProps) {
const { t } = useTranslation();
const Icon = item.icon;
@@ -59,26 +71,27 @@ const MenuItemExpanded = memo(function MenuItemExpanded({
const isExactActive = isActive && !hasChildren;
const isParentActive = isActive && hasChildren;
const [opened, setOpened] = useState(isActive);
const isOpened = isSearching || opened;
const isOpened = useSidebarStore((state) => state.openedKeys.has(item.key));
const toggleMenu = useSidebarStore((state) => state.toggleMenu);
useEffect(() => {
if (expandVersion > 0) setOpened(true);
}, [expandVersion]);
const effectivelyOpened = isSearching || isOpened;
useEffect(() => {
if (collapseVersion > 0) setOpened(false);
}, [collapseVersion]);
const handleChange = useCallback(
(newOpened: boolean) => {
toggleMenu(item.key, newOpened, allParentKeys);
},
[item.key, toggleMenu, allParentKeys],
);
return (
<NavLink
component={hasChildren ? 'button' : (Link as any)}
to={hasChildren ? undefined : item.path}
label={t(item.label)}
leftSection={<Icon size={18} />}
leftSection={<Icon size={18} strokeWidth={1.8} />}
active={isExactActive}
opened={isOpened}
onChange={setOpened}
opened={effectivelyOpened}
onChange={handleChange}
variant="light"
styles={{
root: {
@@ -89,6 +102,7 @@ const MenuItemExpanded = memo(function MenuItemExpanded({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontWeight: 500,
},
}}
>
@@ -99,8 +113,7 @@ const MenuItemExpanded = memo(function MenuItemExpanded({
item={child}
activeKeys={activeKeys}
isSearching={isSearching}
expandVersion={expandVersion}
collapseVersion={collapseVersion}
allParentKeys={allParentKeys}
/>
))}
</NavLink>
@@ -136,7 +149,7 @@ const MenuItemFlyout = memo(function MenuItemFlyout({ item, activeKeys, isRoot =
size="lg"
aria-label={t(item.label)}
>
<Icon size={20} />
<Icon size={20} strokeWidth={1.8} />
</ActionIcon>
</Tooltip>
);
@@ -153,6 +166,7 @@ const MenuItemFlyout = memo(function MenuItemFlyout({ item, activeKeys, isRoot =
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: 240,
fontWeight: 500,
},
}}
>
@@ -170,7 +184,7 @@ const MenuItemFlyout = memo(function MenuItemFlyout({ item, activeKeys, isRoot =
size="lg"
aria-label={t(item.label)}
>
<Icon size={20} />
<Icon size={20} strokeWidth={1.8} />
</ActionIcon>
) : (
<Menu.Item
@@ -222,6 +236,17 @@ const MenuItemFlyout = memo(function MenuItemFlyout({ item, activeKeys, isRoot =
// SidebarMenu Component
// ---------------------------------------------------------------------------
const getAllParentKeys = (items: MenuItemType[]): string[] => {
let keys: string[] = [];
for (const item of items) {
if (item.children && item.children.length > 0) {
keys.push(item.key);
keys = keys.concat(getAllParentKeys(item.children));
}
}
return keys;
};
export const SidebarMenu = memo(function SidebarMenu({
items,
variantOverride,
@@ -238,23 +263,27 @@ export const SidebarMenu = memo(function SidebarMenu({
const variant = variantOverride ?? contextVariant;
const isMini = variant === 'mini';
const [searchQuery, setSearchQuery] = useState('');
const searchQuery = useSidebarStore((state) => state.searchQuery);
const setSearchQuery = useSidebarStore((state) => state.setSearchQuery);
const [debouncedSearchQuery] = useDebouncedValue(searchQuery, 200);
const inputRef = useRef<HTMLInputElement>(null);
const isSearching = searchQuery.trim().length > 0;
const isSearching = debouncedSearchQuery.trim().length > 0;
const [expandVersion, setExpandVersion] = useState(0);
const [collapseVersion, setCollapseVersion] = useState(0);
const [isAllExpanded, setIsAllExpanded] = useState(false);
const allParentKeys = useMemo(() => getAllParentKeys(items), [items]);
const isInitialized = useSidebarStore((state) => state.isInitialized);
const isAllExpanded = useSidebarStore((state) => state.isAllExpanded);
const initializeStorage = useSidebarStore((state) => state.initializeStorage);
const expandAll = useSidebarStore((state) => state.expandAll);
const collapseAll = useSidebarStore((state) => state.collapseAll);
const syncActiveKeys = useSidebarStore((state) => state.syncActiveKeys);
const handleToggleExpandAll = useCallback(() => {
if (isAllExpanded) {
setCollapseVersion((v) => v + 1);
setIsAllExpanded(false);
collapseAll();
} else {
setExpandVersion((v) => v + 1);
setIsAllExpanded(true);
expandAll(allParentKeys);
}
}, [isAllExpanded]);
}, [isAllExpanded, collapseAll, expandAll, allParentKeys]);
// Recursive active state calculation
const activeKeys = useMemo(() => {
@@ -299,11 +328,33 @@ export const SidebarMenu = memo(function SidebarMenu({
return keys;
}, [pathname, items]);
// Sync initial state to local storage or auto-expand on navigation
useEffect(() => {
const parentKeysToSync: string[] = [];
const checkActiveParents = (item: MenuItemType) => {
if (item.children && item.children.length > 0) {
if (activeKeys.has(item.key)) {
parentKeysToSync.push(item.key);
}
item.children.forEach(checkActiveParents);
}
};
items.forEach(checkActiveParents);
if (!isInitialized) {
initializeStorage(parentKeysToSync, allParentKeys);
} else {
if (parentKeysToSync.length > 0) {
syncActiveKeys(parentKeysToSync, allParentKeys);
}
}
}, [activeKeys, items, isInitialized, initializeStorage, syncActiveKeys, allParentKeys]);
// Client-side recursive filtering logic
const filteredItems = useMemo(() => {
if (!isSearching) return items;
const query = searchQuery.toLowerCase();
const query = debouncedSearchQuery.toLowerCase();
const filterItem = (item: MenuItemType): MenuItemType | null => {
const isMatch = t(item.label).toLowerCase().includes(query);
@@ -327,7 +378,7 @@ export const SidebarMenu = memo(function SidebarMenu({
};
return items.map(filterItem).filter((item): item is MenuItemType => item !== null);
}, [items, isSearching, searchQuery]);
}, [items, isSearching, debouncedSearchQuery, t]);
const handleToggle = useCallback(() => {
setSidebarVariant(isMini ? 'expanded' : 'mini');
@@ -533,10 +584,13 @@ export const SidebarMenu = memo(function SidebarMenu({
onClick={handleToggleExpandAll}
size={30}
radius="md"
fw={400}
aria-label={isAllExpanded ? t('common:collapseAll') : t('common:expandAll')}
>
{isAllExpanded ? <PanelTopOpen size={16} /> : <PanelTopClose size={16} />}
{isAllExpanded ? (
<PanelTopOpen size={16} strokeWidth={1.5} />
) : (
<PanelTopClose size={16} strokeWidth={1.5} />
)}
</ActionIcon>
</Tooltip>
</Box>
@@ -578,16 +632,32 @@ export const SidebarMenu = memo(function SidebarMenu({
)}
<Box p="lg" pt="md" style={{ flex: 1, overflowY: 'auto' }}>
{filteredItems.map((item) => (
<MenuItemExpanded
key={item.key}
item={item}
activeKeys={activeKeys}
isSearching={isSearching}
expandVersion={expandVersion}
collapseVersion={collapseVersion}
/>
))}
{filteredItems.length === 0 && isSearching ? (
<Box
p="md"
ta="center"
style={{
border: '1px dashed var(--mantine-color-default-border)',
borderRadius: 'var(--mantine-radius-md)',
}}
>
<Stack gap="xs" align="center">
<Text size="sm" c="dimmed">
{t('common:system_menu.notFound')}
</Text>
</Stack>
</Box>
) : (
filteredItems.map((item) => (
<MenuItemExpanded
key={item.key}
item={item}
activeKeys={activeKeys}
isSearching={isSearching}
allParentKeys={allParentKeys}
/>
))
)}
</Box>
{withToggle && (
apps/web/src/core/storage/local/index.ts
+6 -1
View File
@@ -6,6 +6,7 @@ export const AppStorageKey = {
ACCESS_TOKEN: 'access_token',
REFRESH_TOKEN: 'refresh_token',
USER_ID: 'u_id',
SIDEBAR_OPEN_MENUS: 'sidebar_open_menus',
} as const;
export type AppStorageKeyValue = (typeof AppStorageKey)[keyof typeof AppStorageKey];
@@ -26,7 +27,11 @@ export const APP_STORAGE_ENCRYPTED_KEYS = new Set<AppStorageKeyValue>([
AppStorageKey.REFRESH_TOKEN,
]);
export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([AppStorageKey.LANGUAGE, AppStorageKey.THEME]);
export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([
AppStorageKey.LANGUAGE,
AppStorageKey.THEME,
AppStorageKey.SIDEBAR_OPEN_MENUS,
]);
export const APP_DATABASE_ENCRYPTED_KEYS = new Set<AppDatabaseKeyValue>([]);
packages/core-i18n/src/languages/en/common.json
+2 -1
View File
@@ -154,7 +154,8 @@
},
"system_menu": {
"history": "History",
"bookmark": "Bookmark"
"bookmark": "Bookmark",
"notFound": "Menu not found"
},
"fields": {
"id": "ID",
packages/core-i18n/src/languages/id/common.json
+2 -1
View File
@@ -154,7 +154,8 @@
},
"system_menu": {
"history": "Riwayat",
"bookmark": "Bookmark"
"bookmark": "Bookmark",
"notFound": "Menu tidak ditemukan"
},
"fields": {
"id": "ID",
packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
+74 -3
View File
@@ -10,6 +10,10 @@ import {
MenuItemDef,
DefaultMenuItem,
StatusBar,
ColumnMovedEvent,
ColumnResizedEvent,
ColumnVisibleEvent,
SortChangedEvent,
} from 'ag-grid-community';
import { Box, Group, TextInput, Indicator, CloseButton } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
@@ -181,6 +185,12 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
searchKey = 'search',
filterConfig,
// Grid config props
onColumnMoved,
onColumnResized,
onColumnVisible,
onSortChanged,
// Bulk action props
customBulkActions,
batchSize,
@@ -200,8 +210,16 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
// ---------------------------------------------------------------------------
const { t } = useEnterpriseModuleTranslationContext();
const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } =
useEnterpriseModuleSelectionContext<E>();
const {
selectedRows,
setSelectedRows,
metaData,
setMetaData,
filterData,
setFilterData,
tableConfig,
setTableConfig,
} = useEnterpriseModuleSelectionContext<E>();
const navigation = useEnterpriseModuleNavigationContext();
const { config } = useEnterpriseModuleConfigContext();
@@ -791,6 +809,11 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
setSelectedRows([]);
if (params.api) {
// Restore grid configuration on mount
if (tableConfig) {
params.api.applyColumnState({ state: tableConfig, applyOrder: true });
}
// Attach the server-side datasource to the grid API
params.api.setGridOption('serverSideDatasource', datasource);
@@ -803,7 +826,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
}
}
},
[datasource, setSelectedRows, isPaginated, metaData],
[datasource, setSelectedRows, isPaginated, metaData, tableConfig],
);
// Triggered whenever the row selection in the grid changes
@@ -817,6 +840,50 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
[setSelectedRows],
);
// ---------------------------------------------------------------------------
// Save Grid Configuration State Handlers
// ---------------------------------------------------------------------------
const saveGridState = useCallback(() => {
if (!gridApiRef.current || !setTableConfig) return;
const state = gridApiRef.current.getColumnState();
setTableConfig(state);
}, [setTableConfig]);
const handleColumnMoved = useCallback(
(e: ColumnMovedEvent<E>) => {
saveGridState();
if (onColumnMoved) onColumnMoved(e);
},
[saveGridState, onColumnMoved],
);
const handleColumnResized = useCallback(
(e: ColumnResizedEvent<E>) => {
// Only save when resizing is finished to prevent excessive re-renders
if (e.finished) {
saveGridState();
}
if (onColumnResized) onColumnResized(e);
},
[saveGridState, onColumnResized],
);
const handleColumnVisible = useCallback(
(e: ColumnVisibleEvent<E>) => {
saveGridState();
if (onColumnVisible) onColumnVisible(e);
},
[saveGridState, onColumnVisible],
);
const handleSortChanged = useCallback(
(e: SortChangedEvent<E>) => {
saveGridState();
if (onSortChanged) onSortChanged(e);
},
[saveGridState, onSortChanged],
);
// Configures the context menu items available when right-clicking a cell
const getContextMenuItems = useCallback(():
| (DefaultMenuItem | MenuItemDef)[]
@@ -923,6 +990,10 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
enableCellTextSelection={true}
onSelectionChanged={handleSelectionChanged}
onGridReady={onGridReady}
onColumnMoved={handleColumnMoved}
onColumnResized={handleColumnResized}
onColumnVisible={handleColumnVisible}
onSortChanged={handleSortChanged}
getContextMenuItems={getContextMenuItems}
statusBar={statusBar}
domLayout={domLayout}
packages/ui/src/foundations/enterprise-module/entities/entity.ts
+5
View File
@@ -4,6 +4,7 @@ import type { ZodType } from 'zod';
import type { BaseEntity, BaseRemoteDataServices, StandardPaginationMeta } from '@repo/core-api/data-services';
import type { ModulePageHeaderProps } from '../components/module-page-header';
import { PageActionsProps } from '../../../components';
import { ColumnState } from 'ag-grid-community';
// ---------------------------------------------------------------------------
// Module Constants & Base Types
@@ -140,6 +141,8 @@ export interface SelectionSlice<
setMetaData: (data: TMeta | null) => void;
filterData: TFilter | null;
setFilterData: (data: TFilter | null) => void;
tableConfig: ColumnState[] | null;
setTableConfig: (config: ColumnState[] | null) => void;
}
/**
@@ -156,6 +159,8 @@ export interface EnterpriseModuleState<
setFilterData: (data: TFilter | null) => void;
selectedRows: E[];
setSelectedRows: (rows: E[]) => void;
tableConfig: ColumnState[] | null;
setTableConfig: (config: ColumnState[] | null) => void;
privileges: string[];
setPrivileges: (privileges: string[]) => void;
}
packages/ui/src/foundations/enterprise-module/providers/module.provider.tsx
+5 -1
View File
@@ -82,6 +82,8 @@ export function EnterpriseModuleProvider<
const setMetaData = store((state: S) => state.setMetaData);
const filterData = store((state: S) => state.filterData);
const setFilterData = store((state: S) => state.setFilterData);
const tableConfig = store((state: S) => state.tableConfig);
const setTableConfig = store((state: S) => state.setTableConfig);
const selectionSlice = useMemo(
() => ({
@@ -91,8 +93,10 @@ export function EnterpriseModuleProvider<
setMetaData,
filterData,
setFilterData,
tableConfig,
setTableConfig,
}),
[selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData],
[selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData, tableConfig, setTableConfig],
);
// ---------------------------------------------------------------------------