@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
223 lines (222 loc) • 9.82 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import FormLayout, { FormRow } from '../../components/FormLayout';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import Panel from '../../components/Panel';
import { Tabs } from '../../components/Tabs';
import { useAdaptable } from '../AdaptableContext';
import { AdaptableObjectList } from '../Components/AdaptableObjectList';
import { ButtonNew } from '../Components/Buttons/ButtonNew';
import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
import { Box, Flex } from '../../components/Flex';
import { formatColumnInspectorPinning, formatColumnInspectorSizing, formatColumnInspectorSorting, } from '../Layout/Wizard/sections/columnLayoutHelpers';
const BASE_CLASS_NAME = 'ab-AdaptableColumns';
const domProps = {
className: 'twa:flex-1 twa:min-h-0 twa:w-full',
};
const MODULES_WITH_COLUMN = [
'Alert',
'CalculatedColumn',
'CustomSort',
'FormatColumn',
'FlashingCell',
'PlusMinus',
'Shortcut',
'StyledColumn',
];
const MODULES_WITH_SCOPE = [
'Alert',
'FormatColumn',
'PlusMinus',
'Shortcut',
'StyledColumn',
];
const formatColumnInfoSummaryWidth = (columnId, sizing, resolveDefaultWidth) => {
const explicit = formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth);
if (explicit !== 'Default') {
return explicit;
}
return String(resolveDefaultWidth(columnId));
};
const ColumnDefPreview = (props) => {
const adaptable = useAdaptable();
if (props.column) {
const api = adaptable.api;
const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
const layout = api.layoutApi.getCurrentLayout();
const resolveDefaultWidth = (columnId) => adaptable.getDefaultColumnWidthForCol(columnId);
const columnSizing = layout.ColumnSizing?.[props.column.columnId];
const keyValuePairs = [
{
Key: 'Column Id',
Value: props.column.columnId,
},
{
Key: 'Header',
Value: props.column.friendlyName,
},
{
Key: 'Data Type',
Value: props.column.dataType,
},
{
Key: 'Column Types',
Value: ArrayExtensions.createCommaSeparatedString(props.column.columnTypes),
},
{
Key: 'Primary Key Column',
Value: props.column.isPrimaryKey ? 'Yes' : 'Ignore',
},
{
Key: 'Calculated Column',
Value: props.column.isCalculatedColumn ? 'Yes' : 'Ignore',
},
{
Key: 'Free Text Column',
Value: props.column.isFreeTextColumn ? 'Yes' : 'Ignore',
},
{
Key: 'Action Column',
Value: props.column.isActionColumn ? 'Yes' : 'Ignore',
},
{
Key: 'Sparkline Column',
Value: props.column.isSparkline ? 'Yes' : 'Ignore',
},
{
Key: 'Column Group',
Value: props.column.columnGroup ? props.column.columnGroup.friendlyName : 'Ignore',
},
{
Key: 'Visible',
Value: props.column.visible ? 'Yes' : 'No',
},
{
Key: 'Pinning',
Value: formatColumnInspectorPinning(layout, props.column.columnId),
},
{
Key: 'Width',
Value: formatColumnInfoSummaryWidth(props.column.columnId, columnSizing, resolveDefaultWidth),
},
{
Key: 'Sorting',
Value: formatColumnInspectorSorting(layout, props.column.columnId),
},
{
Key: 'Row Grouped',
Value: props.column.groupable ? (props.column.isGrouped ? 'Yes' : 'No') : 'Ignore',
},
{
Key: 'Groupable',
Value: props.column.groupable ? 'Yes' : 'No',
},
{
Key: 'Aggregatable',
Value: props.column.aggregatable ? 'Yes' : 'No',
},
{
Key: 'Aggregation Function',
Value: props.column.aggregatable ? props.column.aggregationFunction : 'Ignore',
},
{
Key: 'Filterable',
Value: props.column.filterable ? 'Yes' : 'No',
},
{
Key: 'Column Filter',
Value: props.column.filterable
? api.filterApi.columnFilterApi.columnFilterToString(summary.columnFilter)
: 'Ignore',
},
{
Key: 'Hideable',
Value: props.column.hideable ? 'Yes' : 'No',
},
{
Key: 'Editable',
Value: !props.column.IsReadOnly ? 'Yes' : 'No',
},
{
Key: 'Moveable',
Value: props.column.moveable ? 'Yes' : 'No',
},
{
Key: 'Pivotable',
Value: props.column.pivotable ? 'Yes' : 'No',
},
{
Key: 'Queryable',
Value: props.column.queryable ? 'Yes' : 'No',
},
{
Key: 'Exportable',
Value: props.column.exportable ? 'Yes' : 'No',
},
{
Key: 'Sortable',
Value: props.column.sortable ? 'Yes' : 'No',
},
{
Key: 'No. Distinct Values',
Value: summary.uniqueGridCells.length,
},
]
.map((keyValuePair) => {
return {
Key: keyValuePair.Key,
Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
};
})
.filter((x) => x.Value);
const columnsMap = {
Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
};
return (_jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }));
}
};
const ModuleView = (props) => {
const adaptable = useAdaptable();
const module = adaptable.ModuleService.getModuleById(props.moduleName);
if (!module?.isModuleVisible()) {
return null;
}
const moduleInfo = module.moduleInfo;
const [isWizardOpen, setIsWizardOpen] = React.useState(false);
const EditWizard = module?.getViewProperties?.()?.getEditWizard?.();
const column = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
const allItems = module?.toViewAll?.();
if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
return _jsx(_Fragment, {});
}
const itemsInScope = allItems.filter((item) => {
if ('Scope' in item.abObject) {
return adaptable.api.columnScopeApi.isColumnInScope(column, item.abObject.Scope);
}
if ('ColumnId' in item.abObject) {
return item.abObject?.ColumnId === props.selectedColumnId;
}
return false;
});
if (!itemsInScope) {
return null;
}
const handleWizardClose = React.useCallback(() => {
setIsWizardOpen(false);
}, []);
return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, children: [_jsxs(Flex, { children: [_jsx("b", { className: `${BASE_CLASS_NAME}__header`, children: module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), _jsx(ButtonNew, { onClick: () => setIsWizardOpen(true), children: "New" })] }), itemsInScope?.length ? _jsx(AdaptableObjectList, { items: itemsInScope, module: module }) : null, isWizardOpen && EditWizard && (_jsx(EditWizard, { popupParams: {
column,
action: 'New',
source: 'ModuleButton',
}, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }, module.moduleInfo.ModuleName));
};
export const ColumnInfo = (props) => {
const adaptable = useAdaptable();
const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
return (_jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsxs(Panel.FlexBody, { className: "twa:gap-3", children: [_jsx(FormLayout, { children: _jsx(FormRow, { label: "Select Column", children: _jsx(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }) }) }), selectedColumnId && (_jsxs(Tabs, { className: "twa:min-h-0 twa:flex-1", children: [_jsx(Tabs.Tab, { children: "Column Summary" }), _jsx(Tabs.Tab, { children: "Column State" }), _jsx(Tabs.Content, { children: selectedColumnId && _jsx(ColumnDefPreview, { column: column }) }), _jsx(Tabs.Content, { children: selectedColumnId && (_jsx(Box, { className: BASE_CLASS_NAME, children: MODULES_WITH_COLUMN.map((moduleName) => {
return (_jsx(ModuleView, { moduleName: moduleName, selectedColumnId: selectedColumnId }, moduleName));
}) })) })] }))] }) }));
};