@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
227 lines (226 loc) • 9.24 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import FormLayout, { FormRow } from '../../components/FormLayout';
import { DataSource, InfiniteTable } 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';
const BASE_CLASS_NAME = 'ab-AdaptableColumns';
const domProps = {
style: {
height: '460px',
width: '100%',
},
};
// TODOS:
// - use column from props as initial value
// - table summary
// - access level for edit/new buttons
const MODULES_WITH_COLUMN = [
'Alert', // Scope
'CalculatedColumn', // ColumnId
'CustomSort', // ColumnId
'FormatColumn', // Scope
'FlashingCell',
'PlusMinus', // Scope
'Shortcut', // Scope
'StyledColumn', // Scope
];
const MODULES_WITH_SCOPE = [
'Alert',
'FormatColumn',
'PlusMinus',
'Shortcut',
'StyledColumn',
];
const ColumnDefPreview = (props) => {
const adaptable = useAdaptable();
if (props.column) {
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: 'Width',
Value: props.column.width,
},
{
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
? adaptable.api.filterApi.columnFilterApi.columnFilterToString(adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(props.column.columnId))
: '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',
},
]
.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 (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
React.createElement(InfiniteTable, { domProps: domProps, columns: columnsMap })));
}
};
const ModuleView = (props) => {
const adaptable = useAdaptable();
const module = adaptable.ModuleService.getModuleById(props.moduleName);
if (!module || !module.isModuleAvailable()) {
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?.();
// Dont show calculated column for non calc cols
if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
return React.createElement(React.Fragment, null);
}
// if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
// return <></>;
// }
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);
}, []);
// filter out items with scope
return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
React.createElement(Flex, null,
React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
React.createElement(Box, { flex: 1 }),
React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
itemsInScope?.length ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
column,
action: 'New',
source: 'ModuleButton',
}, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
};
export const ColumnInfo = (props) => {
const adaptable = useAdaptable();
const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
return (React.createElement(Panel, { flex: 1 },
React.createElement(Box, { mb: 3 },
React.createElement(FormLayout, null,
React.createElement(FormRow, { label: "Select Column" },
React.createElement(ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
selectedColumnId && (React.createElement(Tabs, { mb: 3 },
React.createElement(Tabs.Tab, null, "Column Summary"),
React.createElement(Tabs.Tab, null, "Column State"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column }))),
' ',
React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
}))))))));
};