@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
160 lines (159 loc) • 9.17 kB
JavaScript
import * as React from 'react';
import { useMemo } from 'react';
import { Flex, Text } from 'rebass';
import { SupportedTabMenuComps, Tabs } from '../../../components/Tabs';
import Radio from '../../../components/Radio';
import { ExpressionEditor } from '../../../components/ExpressionEditor';
import { useAdaptable } from '../../AdaptableContext';
import { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';
import Panel from '../../../components/Panel';
const QueryTab = (props) => {
const { type, label, disabled = false, ...tabProps } = props;
const text = (React.createElement(Flex, { flexDirection: "column" },
label,
" ",
React.createElement(Text, { fontSize: 2 }, "query")));
return (React.createElement(Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
};
// needed here to be considered a child Tab component, inside the Tabs component
SupportedTabMenuComps.add(QueryTab);
export const EntityRulesSummary = (props) => {
const { data } = props;
const { api: { predicateApi, internalApi }, } = useAdaptable();
if (!data?.Rule?.Predicates?.length &&
!data?.Rule?.BooleanExpression &&
!data?.Rule?.ObservableExpression &&
!data?.Rule?.AggregatedBooleanExpression) {
return React.createElement(Text, { fontSize: 2 }, "No Rule defined");
}
return (React.createElement(
Text,
{ fontSize: 2 },
data.Rule.Predicates ? (React.createElement(React.Fragment, null, data.Rule?.Predicates?.map?.((predicate, index) => (
// predicate id is not unique
(React.createElement(
React.Fragment,
{ key: index },
props.renderPredicate(predicateApi.predicateToString(predicate))
)))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))
));
};
const RuleTabTitle = (props) => {
return props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
};
export const EntityRulesEditor = (props) => {
const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
const { api } = useAdaptable();
const numberOfTabs = [
showNoRule,
showPredicate,
showObservable,
showBoolean,
showAggregation,
].filter(Boolean).length;
const showRadioButtons = numberOfTabs > 1;
const type = data.Rule == undefined
? 'NoRule'
: data.Rule.BooleanExpression != undefined
? 'BooleanExpression'
: data.Rule.ObservableExpression != undefined && showObservable
? 'ObservableExpression'
: data.Rule.AggregatedBooleanExpression != undefined && showAggregation
? 'AggregatedBooleanExpression'
: 'Predicate';
const [selectedTab, setSelectedTab] = React.useState(type);
const setType = (type) => {
setSelectedTab(type);
if (type === 'NoRule' && showNoRule) {
delete data.Rule;
props.onChange({
...data,
});
}
else if (type === 'BooleanExpression' && showBoolean) {
props.onChange({
...data,
Rule: {
BooleanExpression: '',
},
});
}
else if (type === 'ObservableExpression' && showObservable) {
props.onChange({
...data,
Rule: {
ObservableExpression: '',
},
});
}
else if (type === 'AggregatedBooleanExpression' && showAggregation) {
props.onChange({
...data,
Rule: {
AggregatedBooleanExpression: '',
},
});
}
else {
props.onChange({
...data,
Rule: {
Predicates: [
{
PredicateId: props.defaultPredicateId,
},
],
},
});
}
};
const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
const filteredPredicateDefs = predicateDefs.filter((def) => {
if (isValuesPredicateDef(def)) {
return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
}
return true;
});
const setBooleanExpression = (expression) => {
props.onChange({
...data,
Rule: { BooleanExpression: expression },
});
};
const setReactiveExpression = (expression) => {
props.onChange({
...data,
Rule: { ObservableExpression: expression },
});
};
const setAggregationExpression = (expression) => {
props.onChange({
...data,
Rule: { AggregatedBooleanExpression: expression },
});
};
const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
const baseClassName = 'ab-EntityRulesEditor';
return (React.createElement(Flex, { className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0, ...flexProps, style: { height: '100%', ...flexProps?.style } },
children,
React.createElement(Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
showNoRule ? (React.createElement(Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
showNoRule ? (React.createElement(Tabs.Content, { value: 'NoRule' },
React.createElement(Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
showPredicate ? (React.createElement(Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
showPredicate ? (React.createElement(Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
React.createElement(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }))) : null,
showBoolean ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null,
showBoolean ? (React.createElement(Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression' }, (() => {
const editor = (React.createElement(ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder }));
return props.showQueryBuilder ? React.createElement(Panel, null, editor) : editor;
})())) : null,
showObservable ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null,
showObservable ? (React.createElement(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression' },
React.createElement(ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null,
showAggregation ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
showAggregation ? (React.createElement(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression' },
React.createElement(ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null)));
};