@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
129 lines (128 loc) • 8.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useMemo } from 'react';
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';
import { Box, Flex } from '../../../components/Flex';
import { twMerge } from '../../../twMerge';
const QueryTab = (props) => {
const { type, label, disabled = false, ...tabProps } = props;
const text = (_jsxs(Flex, { flexDirection: "column", children: [label, " ", _jsx(Box, { className: "twa:text-2", children: "query" })] }));
return (_jsx(Tabs.Tab, { style: { flex: 1 }, ...tabProps, children: !disabled && props.showRadio ? (_jsx(Radio, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value, children: text })) : (text) }));
};
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 _jsx(Box, { className: "twa:text-2", children: "No Rule defined" });
}
return (_jsx(Box, { className: "twa:text-2", children: data.Rule.Predicates ? (_jsx(_Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (_jsx(React.Fragment, { children: props.renderPredicate(predicateApi.predicateToString(predicate)) }, index))) })) : (_jsx(_Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }));
};
const RuleTabTitle = (props) => {
return props.showRadio ? (_jsx(Radio, { className: "twa:m-0", tabIndex: -1, checked: props.checked, children: props.children })) : (_jsx(_Fragment, { children: "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 filteredPredicateDefs = predicateDefs.filter((def) => {
if (api.predicateApi.internalApi.IsInOrNotInPredicateDef(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 (_jsxs(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style, children: [children, _jsxs(Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto", children: [showNoRule ? (_jsx(Tabs.Tab, { value: 'NoRule', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule', children: "No Condition" }) })) : null, showNoRule ? (_jsx(Tabs.Content, { value: 'NoRule', children: _jsx(Box, { className: "twa:text-2 twa:mb-2", children: 'Format Column is always applied' }) })) : null, showPredicate ? (_jsx(Tabs.Tab, { value: 'Predicate', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate', children: "Predicate" }) })) : null, showPredicate ? (_jsx(Tabs.Content, { "data-name": "Predicate", value: "Predicate", children: _jsx(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }) })) : null, showBoolean ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null, showBoolean ? (_jsx(Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', children: (() => {
const editor = (_jsx(ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder, columnScope: data.Scope }));
return props.showQueryBuilder ? _jsx(Panel, { children: editor }) : editor;
})() })) : null, showObservable ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null, showObservable ? (_jsx(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', children: _jsx(ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null, showAggregation ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null, showAggregation ? (_jsx(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', children: _jsx(ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null] })] }));
};