@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
92 lines (91 loc) • 5.66 kB
JavaScript
import * as React from 'react';
import { Flex } from 'rebass';
import Panel from '../../../components/Panel';
import { Tabs } from '../../../components/Tabs';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import Helper from '../../../Utilities/Helpers/Helper';
import { AdaptablePopover } from '../../AdaptablePopover';
import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
import { ADAPTABLE_VERSION } from '../../../EnvVars';
import { AG_GRID_VERSION } from '../../../agGrid/agGridModules';
const adaptableVersion = ADAPTABLE_VERSION;
const agGridVersion = AG_GRID_VERSION;
export const GridInfoPopup = (props) => {
const api = props.api;
const CreateGridSummaries = (colItems) => {
const returnRows = [];
const calcColumns = api.calculatedColumnApi
.getCalculatedColumns()
.map((c) => c.ColumnId);
const actionColumns = api.actionColumnApi
.getActionColumns()
.map((ac) => ac.columnId);
const freeTextColumns = api.freeTextColumnApi
.getFreeTextColumns()
.map((c) => c.ColumnId);
const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
? api.gridApi.getColumnSorts().map((gs) => {
return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
})
: null;
const selectedRowInfo = api.gridApi.getSelectedRowInfo();
if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', adaptableVersion));
}
if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
returnRows.push(createReadOnlyColItem(colItems, 'AG Grid Version', agGridVersion));
}
returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo?.gridRows.length));
returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length));
returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions.IsNotNullOrEmpty(calcColumns)
? ArrayExtensions.createCommaSeparatedString(calcColumns)
: 'None'));
returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
: 'None'));
returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns)
? ArrayExtensions.createCommaSeparatedString(actionColumns)
: 'None'));
return returnRows;
};
const createReadOnlyColItem = (colItems, item1, item2, item3) => {
let rowColItems = Helper.cloneObject(colItems);
rowColItems[0].Content = item1;
rowColItems[1].Content = item2;
if (item3) {
let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [item3] });
rowColItems[2].Content = infoButton;
}
return rowColItems;
};
let propValueColItems = [
{ Content: 'Property', Size: 5 },
{ Content: 'Value', Size: 7 },
];
let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
return React.createElement(AdaptableObjectRow, { key: index, colItems: x });
});
const baseClassName = 'ab-GridInfo';
return (React.createElement(PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
React.createElement(Panel, { flex: 1 },
React.createElement(Tabs, null,
React.createElement(Tabs.Tab, null, "Grid Summary"),
React.createElement(Tabs.Tab, null, "Grid State"),
React.createElement(Tabs.Content, null,
React.createElement(AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
React.createElement(Tabs.Content, null,
React.createElement(AdaptableObjectsSummary, null)))))));
};