@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
96 lines (95 loc) • 5.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { DragDropProvider } from '../../dnd';
import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
import { useAdaptable } from '../../../View/AdaptableContext';
import ErrorBox from '../../ErrorBox';
import HelpBlock from '../../HelpBlock';
import Panel from '../../Panel';
import SimpleButton from '../../SimpleButton';
import { WarningBox } from '../../WarningBox';
import { QueryPredicateBuilder } from './QueryPredicateBuilder';
import { getFunctionsForColumnType, getUnsuportedExpressionFromQlPredicate } from './utils';
import { Box, Flex } from '../../Flex';
const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
const QueryBuilderContext = React.createContext(null);
export function useQueryBuilderContext() {
const context = React.useContext(QueryBuilderContext);
if (!context) {
throw new Error('useQueryBuilderContext must be used within a QueryBuilderContext');
}
return context;
}
export const QueryBuilder = (props) => {
const adaptable = useAdaptable();
const [qlPredicate, setQlPredicate] = React.useState(() => {
const qlPredicate = mapExpressionToQlPredicate(props.query);
return qlPredicate;
});
const [expressionStr, setExpressionStr] = React.useState(props.query);
const handleQlPredicateChange = (qlPredicate) => {
setQlPredicate(qlPredicate);
if (qlPredicate && !('errorMessage' in qlPredicate)) {
const newQuery = mapQlPredicateToExpression(qlPredicate);
props.onChange(newQuery);
setExpressionStr(newQuery);
}
};
const clearExpression = () => {
const predicate = mapExpressionToQlPredicate('');
setQlPredicate(predicate);
setExpressionStr('');
props.onChange('');
};
const booleanExpressions = React.useMemo(() => {
const expressionMap = adaptable.api.internalApi
.getQueryLanguageService()
.getModuleExpressionFunctionsMap(props.module);
const booleanExpressions = { ...expressionMap.booleanFunctions };
const booleanExpressionsWithoutCombinators = booleanExpressions;
delete booleanExpressionsWithoutCombinators.AND;
delete booleanExpressionsWithoutCombinators.OR;
return booleanExpressionsWithoutCombinators;
}, [adaptable.api.internalApi, props.module]);
const context = React.useMemo(() => {
return {
getColumns: props.getColumns,
getFields: props.getFields,
getExpressions: (columnType) => {
return booleanExpressions
? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
: [];
},
onQlPredicateChange: handleQlPredicateChange,
};
}, [props.getColumns, props.getFields, booleanExpressions, handleQlPredicateChange]);
const clearExpressionButton = (_jsx(SimpleButton, { onClick: () => {
clearExpression();
}, children: "Clear Expression" }));
const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate, {
supportedFields: props.getFields(),
});
let errorOrEditor = null;
if (qlPredicate && 'errorMessage' in qlPredicate) {
errorOrEditor = props.query?.includes?.('QUERY') ? (_jsx(WarningBox, { "data-name": "unsupported-query-warning", children: _jsxs(Flex, { alignItems: "center", children: ["Named Queries are not supported in the Query Builder", _jsx(Box, { className: "twa:flex-1" }), clearExpressionButton] }) })) : (_jsx(ErrorBox, { children: _jsxs(Flex, { children: [qlPredicate.errorMessage, _jsx(Box, { className: "twa:flex-1" }), clearExpressionButton] }) }));
}
else if (unsupportedExpressionFunction) {
errorOrEditor = (_jsx(WarningBox, { "data-name": "unsupported-expression-warning", children: unsupportedExpressionFunction }));
}
else if (qlPredicate && !('errorMessage' in qlPredicate)) {
errorOrEditor = (_jsx(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
const newPredicate = {
operator: type === 'filter' ? undefined : 'AND',
args: [],
};
handleQlPredicateChange({
...qlPredicate,
args: [...qlPredicate.args, newPredicate],
});
}, onChange: (predicate) => {
handleQlPredicateChange(predicate);
} }));
}
return (_jsx(DragDropProvider, { children: _jsx(QueryBuilderContext.Provider, { value: context, children: _jsxs(Box, { className: QUERY_BUILDER_CLASSNAME, children: [_jsx(HelpBlock, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3", children: "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required" }), errorOrEditor, _jsx(Panel, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3", children: _jsx(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3`, children: expressionStr || 'Output Expression will display here' }) })] }) }) }));
};