@adaptabletools/adaptable/src/View/DataChangeHistory/DataChangeHistoryTable.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import { Flex } from '../../components/Flex';
import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
import { useAdaptable } from '../AdaptableContext';
import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton/AdaptableButtonView';
import { buildChangeHistoryButtons, buildDataChangeHistoryContext, } from './buildActionColumnButton';
import { formatChangeHistoryCellValue, getChangeHistoryRowChangeInfo, mapChangeHistoryRowData, } from './dataChangeHistoryHelpers';
const tableDOMProps = {
    style: {
        height: '100%',
        minWidth: '10rem',
    },
};
const columnTypes = {
    default: {
        align: 'start',
        defaultFlex: 1,
        defaultSortable: false,
        style: { fontSize: 'var(--ab-font-size-3)' },
    },
};
const headerOptions = {
    alwaysReserveSpaceForSortIcon: false,
};
export const DataChangeHistoryTable = (props) => {
    const { changeHistoryLog, onUndoChange, onClearRow } = props;
    const adaptable = useAdaptable();
    const undoChangeEnabled = adaptable.api.entitlementApi.isModuleFullEntitlement(DataChangeHistoryModuleId);
    const rowData = React.useMemo(() => mapChangeHistoryRowData(changeHistoryLog, adaptable), [changeHistoryLog, adaptable]);
    const changeHistoryButtons = React.useMemo(() => buildChangeHistoryButtons(adaptable.adaptableOptions?.dataChangeHistoryOptions, adaptable.api, onUndoChange, onClearRow), [adaptable, onUndoChange, onClearRow]);
    const showActionColumn = undoChangeEnabled && !!changeHistoryButtons?.length;
    const primaryKeyHeader = adaptable.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
    const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
    const columnsMap = React.useMemo(() => {
        const columns = {
            primaryKeyValue: {
                header: `Row (${primaryKeyHeader})`,
                valueGetter: (params) => getChangeHistoryRowChangeInfo(params.data)?.primaryKeyValue ?? '',
            },
            changedColumnLabel: {
                field: 'changedColumnLabel',
                header: 'Column',
            },
            oldValue: {
                header: 'Previous',
                valueGetter: (params) => {
                    const info = getChangeHistoryRowChangeInfo(params.data);
                    return formatChangeHistoryCellValue(info?.oldValue, info?.column, info?.rowNode, adaptable.api);
                },
            },
            newValue: {
                header: 'New',
                valueGetter: (params) => {
                    const info = getChangeHistoryRowChangeInfo(params.data);
                    return formatChangeHistoryCellValue(info?.newValue, info?.column, info?.rowNode, adaptable.api);
                },
            },
            changedAt: {
                header: 'Changed',
                valueGetter: (params) => {
                    const changedAt = getChangeHistoryRowChangeInfo(params.data)?.changedAt;
                    return changedAt != null
                        ? FormatHelper.DateFormatter(changedAt, { Pattern: dateFormat })
                        : '';
                },
            },
            changeTriggerLabel: {
                field: 'changeTriggerLabel',
                header: 'Source',
                defaultFlex: 0.75,
            },
        };
        if (showActionColumn && changeHistoryButtons) {
            columns.actions = {
                header: ' ',
                defaultWidth: 110,
                render: (params) => {
                    const rowData = params.data;
                    if (!getChangeHistoryRowChangeInfo(rowData)) {
                        return null;
                    }
                    return (_jsx(Flex, { className: "ab-ActionColumn twa:gap-0.5", children: changeHistoryButtons.map((button, index) => (_jsx(AdaptableButtonView, { button: button, context: buildDataChangeHistoryContext(rowData, adaptable.api, onUndoChange, onClearRow), api: adaptable.api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn }, index))) }));
                },
            };
        }
        return columns;
    }, [
        changeHistoryButtons,
        dateFormat,
        onClearRow,
        onUndoChange,
        primaryKeyHeader,
        showActionColumn,
        adaptable.api,
    ]);
    return (_jsx(DataSource, { data: rowData, primaryKey: "primaryKey", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap, columnPinning: showActionColumn ? { actions: 'end' } : undefined }) }));
};