@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
131 lines (130 loc) • 8.44 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useState } from 'react';
import Radio from '../../components/Radio';
import { CheckBox } from '../../components/CheckBox';
import { Tabs } from '../../components/Tabs';
import { SummaryText } from '../Wizard/OnePageAdaptableWizard';
import { NewColumnSelector } from './ColumnSelector';
import { useAdaptable } from '../AdaptableContext';
import { getColumnTypeFriendlyName } from '../../AdaptableState/Common/AdaptableColumn';
import { Box, Flex } from '../../components/Flex';
import { ScopeSummaryTags } from '../Wizard/scopeSummaryTags';
export const isScopeValid = ({ Scope }) => {
const result = [];
if (!Scope) {
return 'A scope is required.';
}
if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
result.push('Please select at least one column for the scope.');
}
if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
result.push('Please select at least one data type for the scope.');
}
return result.length ? result.join(', ') : true;
};
const DATA_TYPES_MAP = {
date: {
label: 'Date',
value: 'date',
},
number: {
label: 'Number',
value: 'number',
},
text: {
label: 'Text',
value: 'text',
},
boolean: {
label: 'Boolean',
value: 'boolean',
},
};
export const renderScopeSummary = (scope, labels) => {
const adaptable = useAdaptable();
const scopeApi = adaptable.api.columnScopeApi;
const columnsInScope = scopeApi.getColumnsInScope(scope);
return (_jsxs(_Fragment, { children: [scopeApi.scopeIsAll(scope) ? (_jsxs(Box, { children: [_jsx(SummaryText, { className: "twa:mb-2", children: labels.scopeWholeRow }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnIds' in scope ? (_jsxs(Box, { className: "twa:overflow-hidden", children: [_jsx(SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'DataTypes' in scope ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnTypes' in scope ? (_jsx(Box, { children: _jsx(ScopeSummaryTags, { scope: scope }) })) : null] }));
};
const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
export const NewScopeComponent = (props) => {
const { api } = useAdaptable();
const { columnScopeApi: scopeApi, columnApi } = api;
const [columnsSearchText, setColumnsSearchText] = useState('');
const scopeColumns = React.useMemo(() => {
const allColumns = props.scopeColumns || columnApi.getUIAvailableColumns();
if (typeof props.isColumnAvailable === 'function') {
return allColumns.filter((c) => props.isColumnAvailable(c));
}
return allColumns;
}, []);
const getTabFromScope = (scope) => {
if (!scope) {
return undefined;
}
if (scopeApi.scopeIsAll(scope)) {
return 'Row';
}
if (scopeApi.scopeHasColumns(scope)) {
return 'Column';
}
if (scopeApi.scopeHasDataType(scope)) {
return 'DataType';
}
if (scopeApi.scopeHasColumnType(scope)) {
return 'ColumnType';
}
return undefined;
};
const [activeTab, setActiveTab] = useState(() => getTabFromScope(props.scope));
const onTabChanged = (value) => {
setActiveTab(value);
if (value === 'Row') {
props.updateScope({ All: true });
}
};
const onColumnsSelectedChanged = (cols) => {
const newScope = {
ColumnIds: cols,
};
props.updateScope(newScope);
};
const onCheckBoxDataTypeChecked = (checked, item) => {
let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope) ?? []);
if (checked) {
dataTypes.push(item);
}
else {
const index = dataTypes.indexOf(item, 0);
if (index > -1) {
dataTypes.splice(index, 1);
}
}
let newScope = {
DataTypes: dataTypes,
};
props.updateScope(newScope);
};
const dataTypesInScope = props.scope && 'DataTypes' in props.scope ? scopeApi.getDataTypesInScope(props.scope) : null;
let dataTypeOptions = DATA_TYPES_OPTIONS;
if (Array.isArray(props.availableDataTypes)) {
dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
}
const hasColumnTypes = React.useMemo(() => {
return api.columnApi.getColumnTypes()?.length > 0;
}, []);
return (_jsxs(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : (_jsx(Tabs.Tab, { value: "Row", children: _jsx(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && (_jsx(Tabs.Tab, { value: "Column", children: _jsx(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && (_jsx(Tabs.Tab, { value: "DataType", children: _jsx(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && (_jsx(Tabs.Tab, { value: "ColumnType", children: _jsx(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : (_jsx(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: _jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && (_jsx(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: _jsx(Flex, { flexDirection: "column", className: "twa:overflow-hidden twa:p-2 twa:flex-1 twa:min-h-0 twa:h-full", children: _jsx(NewColumnSelector, { compactColumnList: true, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) }) })), !props.disableDataTypes && (_jsx(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: _jsxs(Box, { children: [props.descriptions.dataTypeScope && (_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), _jsx(Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => (_jsx(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value), children: dataTypeOption.label }, dataTypeOption.value))) })] }) })), hasColumnTypes && (_jsx(Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: _jsx(Box, { children: _jsx(Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => (_jsx(CheckBox, { "data-name": "scope", "data-value": columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
if (checked) {
columnTypes.push(columnType);
}
else {
columnTypes = columnTypes.filter((ct) => ct !== columnType);
}
let newScope = {
ColumnTypes: columnTypes,
};
props.updateScope(newScope);
}, children: getColumnTypeFriendlyName(columnType) }, columnType))) }) }) }))] }));
};