@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
192 lines (191 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewScopeComponent = exports.renderScopeSummary = exports.isScopeValid = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
const CheckBox_1 = require("../../components/CheckBox");
const Tabs_1 = require("../../components/Tabs");
const OnePageAdaptableWizard_1 = require("../Wizard/OnePageAdaptableWizard");
const ColumnSelector_1 = require("./ColumnSelector");
const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
const AdaptableContext_1 = require("../AdaptableContext");
const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
const Flex_1 = require("../../components/Flex");
const Tag_1 = require("../../components/Tag/Tag");
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;
};
exports.isScopeValid = isScopeValid;
const DATA_TYPES_MAP = {
date: {
label: 'Date',
value: 'date',
},
number: {
label: 'Number',
value: 'number',
},
text: {
label: 'Text',
value: 'text',
},
boolean: {
label: 'Boolean',
value: 'boolean',
},
};
const renderDataTypeLabel = (c) => {
return 'DataType: ' + StringExtensions_1.default.CapitaliseFirstLetter(c);
};
const renderScopeSummary = (scope, labels) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const scopeApi = adaptable.api.columnScopeApi;
const columnsInScope = scopeApi.getColumnsInScope(scope);
return (React.createElement(React.Fragment, null,
React.createElement(Flex_1.Box, null,
React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-0" }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
React.createElement(Flex_1.Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '' }, labels.scopeColumns),
columnsInScope.length ? (React.createElement(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
React.createElement(Flex_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, labels.scopeDataTypes),
React.createElement(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) }))) : null)));
};
exports.renderScopeSummary = renderScopeSummary;
const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
const NewScopeComponent = (props) => {
const { api } = (0, AdaptableContext_1.useAdaptable)();
const { columnScopeApi: scopeApi, columnApi } = api;
const [columnsSearchText, setColumnsSearchText] = (0, react_1.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 getScopeChoice = (scope) => {
if (!scope) {
return undefined;
}
if (scopeApi.scopeIsAll(scope)) {
return 'All';
}
if (scopeApi.scopeHasColumns(props.scope)) {
return 'Column';
}
if (scopeApi.scopeHasDataType(props.scope)) {
return 'DataType';
}
if (scopeApi.scopeHasColumnType(props.scope)) {
return 'ColumnType';
}
return undefined;
};
const onScopeSelectChanged = (value) => {
let newScope;
if (value == 'Column') {
newScope = {
ColumnIds: [],
};
}
else if (value == 'DataType') {
newScope = {
DataTypes: [],
};
}
else if (value == 'ColumnType') {
newScope = {
ColumnTypes: [],
};
}
else {
newScope = {
All: true,
};
}
props.updateScope(newScope);
};
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 scopeChoice = getScopeChoice(props.scope);
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 (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
React.createElement(Radio_1.default, { className: "twa:m-0", checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
!props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
React.createElement(Radio_1.default, { className: "twa:m-0", value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
!props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
React.createElement(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
hasColumnTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "ColumnType" },
React.createElement(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
!props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
React.createElement(Flex_1.Box, { className: "twa:text-2" }, props.descriptions.columnScope),
React.createElement(Flex_1.Box, { className: "twa:flex-3" }),
React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
React.createElement(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
!props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
React.createElement(Flex_1.Box, null,
props.descriptions.dataTypeScope && (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
React.createElement(Flex_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
React.createElement(Flex_1.Box, null,
React.createElement(Flex_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
let columnTypes = [].concat(props.scope.ColumnTypes);
if (checked) {
columnTypes.push(columnType);
}
else {
columnTypes = columnTypes.filter((ct) => ct !== columnType);
}
let newScope = {
ColumnTypes: columnTypes,
};
props.updateScope(newScope);
} }, (0, AdaptableColumn_1.getColumnTypeFriendlyName)(columnType))))))))));
};
exports.NewScopeComponent = NewScopeComponent;