903 lines
31 KiB
TypeScript
903 lines
31 KiB
TypeScript
import { useMemo, useCallback, useRef, useState } from 'react';
|
||
import { AgGridReactProps } from 'ag-grid-react';
|
||
import {
|
||
ColDef,
|
||
GridReadyEvent,
|
||
GridApi,
|
||
IServerSideDatasource,
|
||
IServerSideGetRowsParams,
|
||
SelectionChangedEvent,
|
||
MenuItemDef,
|
||
DefaultMenuItem,
|
||
StatusBar,
|
||
} from 'ag-grid-community';
|
||
import { Box, Group, TextInput, Indicator, CloseButton } from '@mantine/core';
|
||
import { useDisclosure } from '@mantine/hooks';
|
||
import { Search, Filter, Settings } from 'lucide-react';
|
||
|
||
import { DataGrid, StatusBadge, PageActions } from '../../../../components';
|
||
import type { PageActionProps } from '../../../../components';
|
||
|
||
import {
|
||
useEnterpriseModuleConfigContext,
|
||
useEnterpriseModuleDataServiceContext,
|
||
useEnterpriseModuleSelectionContext,
|
||
useEnterpriseModuleTranslationContext,
|
||
useEnterpriseModuleNavigationContext,
|
||
} from '../../hooks/use-module.context';
|
||
import type { BaseEntity } from '@repo/core-api/data-services';
|
||
import { notifications } from '@mantine/notifications';
|
||
import {
|
||
ModuleActionType,
|
||
ModuleAction,
|
||
ActionModalState,
|
||
ActionModalConfig,
|
||
BulkActionModalState,
|
||
BulkActionResult,
|
||
} from '../../entities/entity';
|
||
import { RowActionMenu } from './components/row-actions';
|
||
import { BulkActionMenu } from './components/bulk-actions';
|
||
import { ActionConfirmationModal, ACTION_TRANSLATION_MAP } from '../action-confirmation-modal';
|
||
import { BulkActionConfirmationModal } from '../bulk-action-confirmation';
|
||
import { TableFilterDrawer, TableFilterConfig } from './components/table-filter-drawer';
|
||
import { TableSettingDrawer } from './components/table-setting-drawer';
|
||
import { EntityId } from '../../../../../../core-api/src/data-services/types';
|
||
|
||
export * from 'ag-grid-community';
|
||
export * from 'ag-grid-react';
|
||
|
||
export type { TableFilterConfig };
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Types & Interfaces
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export type PaginationMode = 'pagination' | 'infinite-scroll';
|
||
|
||
export interface EnterpriseDataTableProps<E extends BaseEntity> extends Omit<AgGridReactProps<E>, 'rowData'> {
|
||
columnDefs: ColDef<E>[];
|
||
gridHeight?: number | string;
|
||
|
||
/**
|
||
* Controls the data navigation strategy:
|
||
* - `'pagination'` – Manual page navigation with Previous/Next buttons (default).
|
||
* - `'infinite-scroll'` – Rows are lazily loaded as the user scrolls, leveraging
|
||
* AG Grid's server-side infinite row model.
|
||
*
|
||
* Both modes use the same server-side datasource under the hood.
|
||
* @default 'pagination'
|
||
*/
|
||
paginationMode?: PaginationMode;
|
||
|
||
/**
|
||
* Custom message displayed in the loading overlay while data is being fetched.
|
||
* @default 'Loading data...'
|
||
*/
|
||
loadingMessage?: string;
|
||
|
||
/**
|
||
* Custom message displayed when the datasource returns zero rows.
|
||
* @default 'No records found'
|
||
*/
|
||
noRowsMessage?: string;
|
||
|
||
showStatusbar?: boolean;
|
||
|
||
customPrefixColumn?: (col: ColDef<E>[]) => ColDef<E>[];
|
||
|
||
// Action related props
|
||
statusKey?: string;
|
||
customRowActions?: (data: E, defaultActions: any[]) => any[];
|
||
onClickView?: (data: E) => void;
|
||
onClickEdit?: (data: E) => void;
|
||
onClickDuplicate?: (data: E) => void;
|
||
onClickDelete?: (data: E) => void;
|
||
onClickActivate?: (data: E) => void;
|
||
onClickDeactivate?: (data: E) => void;
|
||
onClickConfirm?: (data: E) => void;
|
||
onClickCancel?: (data: E) => void;
|
||
onClickRollback?: (data: E) => void;
|
||
onClickHold?: (data: E) => void;
|
||
|
||
deleteModalConfig?: ActionModalConfig;
|
||
activateModalConfig?: ActionModalConfig;
|
||
deactivateModalConfig?: ActionModalConfig;
|
||
confirmModalConfig?: ActionModalConfig;
|
||
cancelModalConfig?: ActionModalConfig;
|
||
rollbackModalConfig?: ActionModalConfig;
|
||
holdModalConfig?: ActionModalConfig;
|
||
|
||
// Bulk action props
|
||
/** Custom function to modify/extend the default bulk action buttons shown in the table header. */
|
||
customBulkActions?: (selectedRows: any[], defaultActions: PageActionProps[]) => PageActionProps[];
|
||
/** Maximum number of IDs per batch request during bulk operations. @default 20 */
|
||
batchSize?: number;
|
||
|
||
// Bulk action custom flow callbacks (mirrors single-action onClick* pattern)
|
||
onBulkClickDelete?: (data: E[]) => void;
|
||
onBulkClickActivate?: (data: E[]) => void;
|
||
onBulkClickDeactivate?: (data: E[]) => void;
|
||
onBulkClickConfirm?: (data: E[]) => void;
|
||
onBulkClickCancel?: (data: E[]) => void;
|
||
onBulkClickRollback?: (data: E[]) => void;
|
||
onBulkClickHold?: (data: E[]) => void;
|
||
|
||
/**
|
||
* The query parameter key used for search.
|
||
* @default 'q'
|
||
*/
|
||
searchKey?: string;
|
||
|
||
/**
|
||
* Configuration for the Filter Drawer
|
||
*/
|
||
filterConfig?: TableFilterConfig<any>;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Main Component
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataTableProps<E>) {
|
||
// ---------------------------------------------------------------------------
|
||
// Component Props Destructuring
|
||
// ---------------------------------------------------------------------------
|
||
const {
|
||
columnDefs,
|
||
gridHeight = 600,
|
||
paginationMode = 'pagination',
|
||
loadingMessage = 'Loading data...',
|
||
noRowsMessage = 'No records found',
|
||
showStatusbar,
|
||
customPrefixColumn,
|
||
|
||
// new action props
|
||
statusKey = 'status',
|
||
customRowActions,
|
||
onClickView,
|
||
onClickEdit,
|
||
onClickDuplicate,
|
||
onClickDelete,
|
||
onClickActivate,
|
||
onClickDeactivate,
|
||
onClickConfirm,
|
||
onClickCancel,
|
||
onClickRollback,
|
||
onClickHold,
|
||
deleteModalConfig,
|
||
activateModalConfig,
|
||
deactivateModalConfig,
|
||
confirmModalConfig,
|
||
cancelModalConfig,
|
||
rollbackModalConfig,
|
||
holdModalConfig,
|
||
searchKey = 'q',
|
||
filterConfig,
|
||
|
||
// Bulk action props
|
||
customBulkActions,
|
||
batchSize,
|
||
onBulkClickDelete,
|
||
onBulkClickActivate,
|
||
onBulkClickDeactivate,
|
||
onBulkClickConfirm,
|
||
onBulkClickCancel,
|
||
onBulkClickRollback,
|
||
onBulkClickHold,
|
||
|
||
...restAgGridProps
|
||
} = props;
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Context & Hooks
|
||
// ---------------------------------------------------------------------------
|
||
const { t } = useEnterpriseModuleTranslationContext();
|
||
const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
|
||
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } = useEnterpriseModuleSelectionContext<E>();
|
||
const navigation = useEnterpriseModuleNavigationContext();
|
||
|
||
const { config } = useEnterpriseModuleConfigContext();
|
||
const { moduleType } = config;
|
||
const isTransaction = moduleType === 'TRANSACTION';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Local UI State
|
||
// ---------------------------------------------------------------------------
|
||
const [openedFilter, { open: openFilter, close: closeFilter }] = useDisclosure(false);
|
||
const [openedSetting, { open: openSetting, close: closeSetting }] = useDisclosure(false);
|
||
const moduleTitle = config.tabTitle || t(`${config.translationNamespace}:title`);
|
||
|
||
// Reference to the AG Grid API for programmatic interaction
|
||
const gridApiRef = useRef<GridApi<E> | null>(null);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Search & Filter State
|
||
// ---------------------------------------------------------------------------
|
||
const searchRef = useRef<string>((filterData?.[searchKey] as string) || '');
|
||
const filterRef = useRef<Record<string, any>>((() => {
|
||
if (!filterData) return {};
|
||
const copy = { ...filterData };
|
||
delete copy[searchKey];
|
||
return copy;
|
||
})());
|
||
|
||
const [searchValue, setSearchValue] = useState(searchRef.current);
|
||
|
||
const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||
setSearchValue(e.currentTarget.value);
|
||
}, []);
|
||
|
||
const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key === 'Enter') {
|
||
searchRef.current = searchValue;
|
||
gridApiRef.current?.refreshServerSide({ purge: true });
|
||
}
|
||
}, [searchValue]);
|
||
|
||
const handleSearchClear = useCallback(() => {
|
||
setSearchValue('');
|
||
if (searchRef.current !== '') {
|
||
searchRef.current = '';
|
||
gridApiRef.current?.refreshServerSide({ purge: true });
|
||
}
|
||
}, []);
|
||
|
||
const activeFilterCount = useMemo(() => {
|
||
if (!filterData) return 0;
|
||
|
||
const filterKeys = filterConfig?.defaultValues
|
||
? Object.keys(filterConfig.defaultValues)
|
||
: Object.keys(filterData).filter(
|
||
(key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key)
|
||
);
|
||
|
||
return filterKeys.filter((key) => {
|
||
const val = filterData[key];
|
||
if (val === undefined || val === null || val === '') return false;
|
||
if (Array.isArray(val) && val.length === 0) return false;
|
||
return true;
|
||
}).length;
|
||
}, [filterData, searchKey, filterConfig]);
|
||
|
||
const handleFilterApply = useCallback((data: any) => {
|
||
filterRef.current = data || {};
|
||
gridApiRef.current?.refreshServerSide({ purge: true });
|
||
}, []);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Action Handlers & Modal State
|
||
// ---------------------------------------------------------------------------
|
||
const CLOSED_MODAL: ActionModalState<E> = useMemo(() => ({ opened: false, action: null, data: null }), []);
|
||
const [actionModalState, setActionModalState] = useState<ActionModalState<E>>(CLOSED_MODAL);
|
||
|
||
const modalConfigMap = useMemo(
|
||
() => ({
|
||
[ModuleAction.DELETE]: deleteModalConfig,
|
||
[ModuleAction.ACTIVATE]: activateModalConfig,
|
||
[ModuleAction.DEACTIVATE]: deactivateModalConfig,
|
||
[ModuleAction.CONFIRM]: confirmModalConfig,
|
||
[ModuleAction.CANCEL]: cancelModalConfig,
|
||
[ModuleAction.ROLLBACK]: rollbackModalConfig,
|
||
[ModuleAction.HOLD]: holdModalConfig,
|
||
}),
|
||
[
|
||
deleteModalConfig,
|
||
activateModalConfig,
|
||
deactivateModalConfig,
|
||
confirmModalConfig,
|
||
cancelModalConfig,
|
||
rollbackModalConfig,
|
||
holdModalConfig,
|
||
],
|
||
);
|
||
|
||
const openActionModal = useCallback(
|
||
(action: ModuleActionType, data: E) => {
|
||
const config = modalConfigMap[action as keyof typeof modalConfigMap];
|
||
setActionModalState({ opened: true, action, data, config });
|
||
},
|
||
[modalConfigMap],
|
||
);
|
||
|
||
const closeActionModal = useCallback(() => {
|
||
setActionModalState(CLOSED_MODAL);
|
||
}, [CLOSED_MODAL]);
|
||
|
||
const executeAction = useCallback(
|
||
async (action: ModuleActionType, data: E, meta?: Record<string, unknown>) => {
|
||
const id = data.id;
|
||
if (!id) return;
|
||
const currentConfig = modalConfigMap[action as keyof typeof modalConfigMap];
|
||
try {
|
||
switch (action) {
|
||
case ModuleAction.DELETE:
|
||
await dataServices.delete(id, meta);
|
||
break;
|
||
case ModuleAction.ACTIVATE:
|
||
await dataServices.activate(id, meta);
|
||
break;
|
||
case ModuleAction.DEACTIVATE:
|
||
await dataServices.deactivate(id, meta);
|
||
break;
|
||
case ModuleAction.CONFIRM:
|
||
await dataServices.confirmData(id, meta);
|
||
break;
|
||
case ModuleAction.CANCEL:
|
||
await dataServices.cancelData(id, meta);
|
||
break;
|
||
case ModuleAction.ROLLBACK:
|
||
await dataServices.rollbackData(id, meta);
|
||
break;
|
||
case ModuleAction.HOLD:
|
||
await dataServices.holdData(id, meta);
|
||
break;
|
||
default:
|
||
console.warn(`[executeAction] Unhandled action: ${action}`);
|
||
return;
|
||
}
|
||
|
||
const actionKey = ACTION_TRANSLATION_MAP[action]?.confirmKey || `common:actions.${action.toLowerCase()}`;
|
||
const defaultSuccessMessage = t('common:notifications.actionSuccess', { action: t(actionKey) });
|
||
const customSuccessMessage =
|
||
typeof currentConfig?.successMessage === 'function'
|
||
? currentConfig.successMessage(data)
|
||
: currentConfig?.successMessage;
|
||
|
||
notifications.show({
|
||
title: t('common:notifications.successTitle'),
|
||
message: customSuccessMessage || defaultSuccessMessage,
|
||
color: 'teal',
|
||
});
|
||
|
||
closeActionModal();
|
||
if (gridApiRef.current) {
|
||
gridApiRef.current.refreshServerSide({ purge: false });
|
||
}
|
||
} catch (error: any) {
|
||
const actionKey = ACTION_TRANSLATION_MAP[action]?.confirmKey || `common:actions.${action.toLowerCase()}`;
|
||
const defaultErrorMessage = t('common:notifications.actionFailed', {
|
||
action: t(actionKey),
|
||
message: error?.message || 'Unknown error',
|
||
});
|
||
const customErrorMessage =
|
||
typeof currentConfig?.errorMessage === 'function'
|
||
? currentConfig.errorMessage(error)
|
||
: currentConfig?.errorMessage;
|
||
|
||
notifications.show({
|
||
title: t('common:notifications.errorTitle'),
|
||
message: customErrorMessage || defaultErrorMessage,
|
||
color: 'red',
|
||
});
|
||
throw error;
|
||
}
|
||
},
|
||
[dataServices, closeActionModal, modalConfigMap, t],
|
||
);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Bulk Action Modal State & Handlers
|
||
// ---------------------------------------------------------------------------
|
||
const CLOSED_BULK_MODAL: BulkActionModalState<E> = useMemo(() => ({ opened: false, action: null, data: [] }), []);
|
||
const [bulkModalState, setBulkModalState] = useState<BulkActionModalState<E>>(CLOSED_BULK_MODAL);
|
||
|
||
const openBulkActionModal = useCallback(
|
||
(action: ModuleActionType, data: E[]) => {
|
||
const config = modalConfigMap[action as keyof typeof modalConfigMap];
|
||
setBulkModalState({ opened: true, action, data, config });
|
||
},
|
||
[modalConfigMap],
|
||
);
|
||
|
||
const closeBulkActionModal = useCallback(() => {
|
||
setBulkModalState(CLOSED_BULK_MODAL);
|
||
|
||
// Refresh grid data after bulk action completes
|
||
if (gridApiRef.current) {
|
||
gridApiRef.current.refreshServerSide({ purge: false });
|
||
}
|
||
|
||
// Clear selected rows
|
||
setSelectedRows([]);
|
||
if (gridApiRef.current) {
|
||
gridApiRef.current.deselectAll();
|
||
}
|
||
}, [CLOSED_BULK_MODAL, setSelectedRows]);
|
||
|
||
const handleBulkActionClick = useCallback(
|
||
(action: ModuleActionType, data: E[]) => {
|
||
switch (action) {
|
||
case ModuleAction.DELETE:
|
||
if (onBulkClickDelete) onBulkClickDelete(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.ACTIVATE:
|
||
if (onBulkClickActivate) onBulkClickActivate(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.DEACTIVATE:
|
||
if (onBulkClickDeactivate) onBulkClickDeactivate(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.CONFIRM:
|
||
if (onBulkClickConfirm) onBulkClickConfirm(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.CANCEL:
|
||
if (onBulkClickCancel) onBulkClickCancel(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.ROLLBACK:
|
||
if (onBulkClickRollback) onBulkClickRollback(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
case ModuleAction.HOLD:
|
||
if (onBulkClickHold) onBulkClickHold(data);
|
||
else openBulkActionModal(action, data);
|
||
break;
|
||
default:
|
||
openBulkActionModal(action, data);
|
||
break;
|
||
}
|
||
},
|
||
[
|
||
openBulkActionModal,
|
||
onBulkClickDelete,
|
||
onBulkClickActivate,
|
||
onBulkClickDeactivate,
|
||
onBulkClickConfirm,
|
||
onBulkClickCancel,
|
||
onBulkClickRollback,
|
||
onBulkClickHold,
|
||
],
|
||
);
|
||
|
||
/**
|
||
* Executes a single batch chunk of the bulk action.
|
||
* Called by BulkActionConfirmationModal per chunk.
|
||
*/
|
||
const executeBulkAction = useCallback(
|
||
async (action: ModuleActionType, ids: EntityId[], meta?: Record<string, unknown>): Promise<BulkActionResult> => {
|
||
try {
|
||
switch (action) {
|
||
case ModuleAction.DELETE:
|
||
await dataServices.batchDelete(ids, meta);
|
||
break;
|
||
case ModuleAction.ACTIVATE:
|
||
await dataServices.batchActivate(ids, meta);
|
||
break;
|
||
case ModuleAction.DEACTIVATE:
|
||
await dataServices.batchDeactivate(ids, meta);
|
||
break;
|
||
case ModuleAction.CONFIRM:
|
||
await dataServices.batchConfirmData(ids, meta);
|
||
break;
|
||
case ModuleAction.CANCEL:
|
||
await dataServices.batchCancelData(ids, meta);
|
||
break;
|
||
case ModuleAction.ROLLBACK:
|
||
await dataServices.batchRollbackData(ids, meta);
|
||
break;
|
||
case ModuleAction.HOLD:
|
||
await dataServices.batchHoldData(ids, meta);
|
||
break;
|
||
default:
|
||
console.warn(`[executeBulkAction] Unhandled action: ${action}`);
|
||
return { total_items: ids.length, total_success: 0, total_failed: ids.length };
|
||
}
|
||
|
||
return {
|
||
total_items: ids.length,
|
||
total_success: ids.length,
|
||
total_failed: 0,
|
||
};
|
||
} catch (error: any) {
|
||
return {
|
||
total_items: ids.length,
|
||
total_success: 0,
|
||
total_failed: ids.length,
|
||
messages: [error?.message || 'Unknown error'],
|
||
};
|
||
}
|
||
},
|
||
[dataServices],
|
||
);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Action Handlers
|
||
// ---------------------------------------------------------------------------
|
||
|
||
const handleActionClick = useCallback(
|
||
(action: ModuleActionType | 'VIEW', data: E) => {
|
||
switch (action) {
|
||
case 'VIEW':
|
||
if (onClickView) onClickView(data);
|
||
else navigation.navigateToDetail(data.id as string);
|
||
break;
|
||
case ModuleAction.EDIT:
|
||
if (onClickEdit) onClickEdit(data);
|
||
else navigation.navigateToEdit(data.id as string);
|
||
break;
|
||
case ModuleAction.DUPLICATE:
|
||
if (onClickDuplicate) onClickDuplicate(data);
|
||
else navigation.navigateToDuplicate(data.id as string);
|
||
break;
|
||
case ModuleAction.DELETE:
|
||
if (onClickDelete) onClickDelete(data);
|
||
else openActionModal(ModuleAction.DELETE, data);
|
||
break;
|
||
case ModuleAction.ACTIVATE:
|
||
if (onClickActivate) onClickActivate(data);
|
||
else openActionModal(ModuleAction.ACTIVATE, data);
|
||
break;
|
||
case ModuleAction.DEACTIVATE:
|
||
if (onClickDeactivate) onClickDeactivate(data);
|
||
else openActionModal(ModuleAction.DEACTIVATE, data);
|
||
break;
|
||
case ModuleAction.CONFIRM:
|
||
if (onClickConfirm) onClickConfirm(data);
|
||
else openActionModal(ModuleAction.CONFIRM, data);
|
||
break;
|
||
case ModuleAction.CANCEL:
|
||
if (onClickCancel) onClickCancel(data);
|
||
else openActionModal(ModuleAction.CANCEL, data);
|
||
break;
|
||
case ModuleAction.ROLLBACK:
|
||
if (onClickRollback) onClickRollback(data);
|
||
else openActionModal(ModuleAction.ROLLBACK, data);
|
||
break;
|
||
case ModuleAction.HOLD:
|
||
if (onClickHold) onClickHold(data);
|
||
else openActionModal(ModuleAction.HOLD, data);
|
||
break;
|
||
default:
|
||
console.warn(`[ActionHandler] Unhandled action key: ${action}`);
|
||
break;
|
||
}
|
||
},
|
||
[
|
||
navigation,
|
||
onClickView,
|
||
onClickEdit,
|
||
onClickDuplicate,
|
||
onClickDelete,
|
||
onClickActivate,
|
||
onClickDeactivate,
|
||
onClickConfirm,
|
||
onClickCancel,
|
||
onClickRollback,
|
||
onClickHold,
|
||
openActionModal,
|
||
],
|
||
);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Derived State & Configuration
|
||
// ---------------------------------------------------------------------------
|
||
// Determine the number of rows per page based on metadata, defaulting to 10
|
||
const perPage = useMemo(() => {
|
||
return metaData?.limit ?? 10;
|
||
}, [metaData]);
|
||
|
||
// Boolean flag to check if the current mode is pagination
|
||
const isPaginated = paginationMode === 'pagination';
|
||
|
||
// Ensure column definitions are referentially stable
|
||
const finalColumnDefs = useMemo<ColDef<E>[]>(() => {
|
||
// Dedicated Checkbox Column (Pinned to the far left)
|
||
const selectionColumn: ColDef<any> = {
|
||
colId: 'selection_column',
|
||
maxWidth: 40,
|
||
pinned: 'left',
|
||
sortable: false,
|
||
filter: false,
|
||
suppressHeaderMenuButton: true,
|
||
checkboxSelection: true, // Manually enable checkbox selection specifically for this column
|
||
suppressMovable: true,
|
||
};
|
||
|
||
// Define the Master-Detail collapse/expand column
|
||
const masterDetailColumn: ColDef<E> = {
|
||
colId: 'master_detail_column',
|
||
pinned: 'left', // Pin to the right so it remains visible during horizontal scrolling
|
||
maxWidth: 50,
|
||
|
||
sortable: false, // Disable sorting
|
||
filter: false, // Disable filtering
|
||
suppressHeaderMenuButton: true, // Suppress menu to keep the header clean
|
||
suppressMovable: true,
|
||
|
||
cellRenderer: 'agGroupCellRenderer',
|
||
};
|
||
|
||
// Define the Action column (for Edit, Delete, View, etc.)
|
||
const actionColumn: ColDef<any> = {
|
||
colId: 'action_column',
|
||
pinned: 'left', // Pin to the right so it remains visible during horizontal scrolling,
|
||
width: 180,
|
||
minWidth: 100,
|
||
sortable: false, // Disable sorting
|
||
filter: false, // Disable filtering
|
||
suppressHeaderMenuButton: true, // Suppress menu to keep the header clean
|
||
suppressSizeToFit: true, // Prevent this column from stretching if you call api.sizeColumnsToFit()
|
||
suppressMovable: true,
|
||
|
||
headerName: t('common:fields.action'),
|
||
cellRenderer: (params: any) => {
|
||
if (!params.data) return null;
|
||
return (
|
||
<RowActionMenu
|
||
data={params.data}
|
||
onActionClick={handleActionClick}
|
||
statusKey={statusKey}
|
||
customActions={customRowActions}
|
||
/>
|
||
);
|
||
},
|
||
};
|
||
|
||
// Define the default Status column
|
||
const statusColumn: ColDef<E> = {
|
||
colId: 'status',
|
||
maxWidth: 130,
|
||
|
||
suppressHeaderMenuButton: true, // Suppress menu to keep the header clean
|
||
|
||
field: 'status' as any,
|
||
headerName: t('common:fields.status'),
|
||
cellRenderer: ({ value }: any) => <StatusBadge status={value} size="md" variant="outline" />,
|
||
};
|
||
|
||
const prefixColumn: ColDef<E>[] = [
|
||
selectionColumn,
|
||
props.masterDetail ? masterDetailColumn : (null as any),
|
||
actionColumn,
|
||
statusColumn,
|
||
].filter(Boolean);
|
||
|
||
return [...(customPrefixColumn ? customPrefixColumn(prefixColumn) : prefixColumn), ...columnDefs];
|
||
}, [
|
||
columnDefs,
|
||
props.masterDetail,
|
||
isTransaction,
|
||
customPrefixColumn,
|
||
t,
|
||
statusKey,
|
||
customRowActions,
|
||
handleActionClick,
|
||
]);
|
||
|
||
// Default configuration applied to all columns in the grid
|
||
const defaultColDef = useMemo<ColDef>(() => ({ flex: 1, minWidth: 40, sortable: true, resizable: true }), []);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Data Source (Server-Side Row Model)
|
||
// ---------------------------------------------------------------------------
|
||
// Configures the server-side datasource to handle data fetching, pagination, and sorting
|
||
const datasource: IServerSideDatasource = useMemo(
|
||
() => ({
|
||
getRows: async (params: IServerSideGetRowsParams) => {
|
||
try {
|
||
const request = params.request;
|
||
|
||
const limit = perPage
|
||
const page = Math.floor((request.startRow ?? 0) / limit) + 1;
|
||
|
||
// Extract sorting information from the request
|
||
const sortModel = request.sortModel[0];
|
||
const orderBy = sortModel?.colId;
|
||
const orderType = sortModel?.sort?.toUpperCase();
|
||
|
||
// Prepare the request parameters for the API call
|
||
const requestParams: Record<string, any> = {
|
||
page,
|
||
limit,
|
||
order_by: orderBy,
|
||
order_type: orderType,
|
||
...filterRef.current
|
||
};
|
||
|
||
if (searchRef.current) {
|
||
requestParams[searchKey] = searchRef.current;
|
||
}
|
||
|
||
const response = await dataServices.getMany({ params: requestParams });
|
||
|
||
if (!response.data?.data) throw new Error('Invalid response');
|
||
|
||
const rowData = response.data.data;
|
||
const meta = response.data.meta;
|
||
const rowCount = meta?.total || 0;
|
||
|
||
// Update the global metadata state
|
||
setMetaData(meta);
|
||
setFilterData({ ...filterRef.current, [searchKey]: searchRef.current });
|
||
|
||
// Pass the retrieved data back to AG Grid
|
||
params.success({ rowData, rowCount });
|
||
} catch (error: any) {
|
||
// Display an error notification if the request fails
|
||
notifications.show({ title: t('common:notifications.errorTitle'), message: error?.message, color: 'red' });
|
||
params.fail();
|
||
}
|
||
},
|
||
}),
|
||
[dataServices, perPage, setMetaData, setFilterData, searchKey, t],
|
||
);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Event Handlers
|
||
// ---------------------------------------------------------------------------
|
||
// Triggered when the grid is initialized and ready
|
||
const onGridReady = useCallback(
|
||
(params: GridReadyEvent<E>) => {
|
||
gridApiRef.current = params.api;
|
||
setSelectedRows([]);
|
||
|
||
if (params.api) {
|
||
// Attach the server-side datasource to the grid API
|
||
params.api.setGridOption('serverSideDatasource', datasource);
|
||
}
|
||
},
|
||
[datasource, setSelectedRows],
|
||
);
|
||
|
||
// Triggered whenever the row selection in the grid changes
|
||
const handleSelectionChanged = useCallback(
|
||
(event: SelectionChangedEvent<E>) => {
|
||
const selectedData = event.api.getSelectedRows();
|
||
|
||
// Forward full rows to the context for backward compatibility with consumers
|
||
setSelectedRows(selectedData);
|
||
},
|
||
[setSelectedRows],
|
||
);
|
||
|
||
// Configures the context menu items available when right-clicking a cell
|
||
const getContextMenuItems = useCallback(():
|
||
| (DefaultMenuItem | MenuItemDef)[]
|
||
| Promise<(DefaultMenuItem | MenuItemDef)[]> => {
|
||
return ['copy', 'copyWithHeaders'];
|
||
}, []);
|
||
|
||
const statusBar = useMemo<StatusBar | undefined>(() => {
|
||
if (!showStatusbar) return undefined;
|
||
return { statusPanels: [{ statusPanel: 'agSelectedRowCountComponent', align: 'left' }] };
|
||
}, [showStatusbar]);
|
||
|
||
const domLayout = useMemo(() => {
|
||
const meta = { total: metaData?.total ?? 0, limit: metaData?.limit ?? 0 };
|
||
if (!isPaginated) {
|
||
return meta?.total < meta?.limit ? 'autoHeight' : 'normal';
|
||
}
|
||
return 'autoHeight';
|
||
}, [metaData, isPaginated]);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Render
|
||
// ---------------------------------------------------------------------------
|
||
return (
|
||
<Box>
|
||
{/* TABLE HEADER (Search, Filter, Bulk Actions) */}
|
||
<Group justify="space-between" align="center" mb="sm">
|
||
<Group gap="sm">
|
||
<TextInput
|
||
size="sm"
|
||
w={{ base: '100%', sm: 350 }}
|
||
placeholder={t('common:searchPlaceholder')}
|
||
leftSection={<Search size={16} />}
|
||
rightSection={
|
||
searchValue ? (
|
||
<CloseButton
|
||
size="sm"
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onClick={handleSearchClear}
|
||
aria-label={t('common:actions.clear')}
|
||
/>
|
||
) : null
|
||
}
|
||
value={searchValue}
|
||
onChange={handleSearchChange}
|
||
onKeyDown={handleSearchKeyDown}
|
||
/>
|
||
<PageActions
|
||
actions={[
|
||
{ type: 'divider', key: 'search-divider' },
|
||
{
|
||
key: 'filter',
|
||
icon: (
|
||
<Indicator disabled={activeFilterCount === 0} size={8} offset={2}>
|
||
<Filter size={16} />
|
||
</Indicator>
|
||
),
|
||
variant: 'default',
|
||
showLabel: false,
|
||
tooltipLabel: t('common:actions.filter'),
|
||
onClick: openFilter,
|
||
},
|
||
{
|
||
key: 'setting',
|
||
icon: <Settings size={16} />,
|
||
variant: 'default',
|
||
showLabel: false,
|
||
tooltipLabel: t('common:actions.setting'),
|
||
onClick: openSetting,
|
||
},
|
||
]}
|
||
/>
|
||
</Group>
|
||
|
||
{/* BULK ACTION TOOLBAR — shown when rows are selected */}
|
||
<BulkActionMenu
|
||
selectedRows={selectedRows as E[]}
|
||
onActionClick={handleBulkActionClick as (action: ModuleActionType, data: any[]) => void}
|
||
statusKey={statusKey}
|
||
customBulkActions={customBulkActions}
|
||
/>
|
||
</Group>
|
||
|
||
{/* GRID CONTAINER */}
|
||
<Box
|
||
className="erp-data-grid-container"
|
||
style={{
|
||
width: '100%',
|
||
height: domLayout === 'autoHeight' || restAgGridProps.domLayout === 'autoHeight' ? '100%' : gridHeight,
|
||
}}
|
||
>
|
||
<DataGrid<E>
|
||
rowModelType="serverSide"
|
||
getRowId={(v) => v.data.id as string}
|
||
cacheBlockSize={perPage}
|
||
pagination={isPaginated}
|
||
paginationPageSize={isPaginated ? perPage : undefined}
|
||
paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
|
||
columnDefs={finalColumnDefs}
|
||
defaultColDef={defaultColDef}
|
||
animateRows={true}
|
||
rowSelection={{ mode: 'multiRow', checkboxes: false, copySelectedRows: false, headerCheckbox: false }}
|
||
enableCellTextSelection={true}
|
||
onSelectionChanged={handleSelectionChanged}
|
||
onGridReady={onGridReady}
|
||
getContextMenuItems={getContextMenuItems}
|
||
statusBar={statusBar}
|
||
domLayout={domLayout}
|
||
overlayLoadingTemplate={`<span style="padding:10px">${loadingMessage}</span>`}
|
||
overlayNoRowsTemplate={`<span style="padding:10px;color:var(--ag-foreground-color,#868e96)">${noRowsMessage}</span>`}
|
||
{...restAgGridProps}
|
||
/>
|
||
</Box>
|
||
|
||
{/* Single-Row Action Confirmation Modal */}
|
||
<ActionConfirmationModal<E>
|
||
modalState={actionModalState}
|
||
onClose={closeActionModal}
|
||
onExecute={executeAction}
|
||
t={t}
|
||
/>
|
||
|
||
{/* Bulk Action Confirmation Modal */}
|
||
<BulkActionConfirmationModal<E>
|
||
modalState={bulkModalState}
|
||
onClose={closeBulkActionModal}
|
||
onExecute={executeBulkAction}
|
||
t={t}
|
||
batchSize={batchSize}
|
||
/>
|
||
<TableFilterDrawer
|
||
opened={openedFilter}
|
||
onClose={closeFilter}
|
||
title={t('common:filterTitle', { module: moduleTitle })}
|
||
config={filterConfig}
|
||
currentFilterData={filterData}
|
||
onFilter={handleFilterApply}
|
||
/>
|
||
|
||
<TableSettingDrawer
|
||
opened={openedSetting}
|
||
onClose={closeSetting}
|
||
title={t('common:tableSettingTitle', { module: moduleTitle })}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|