@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
107 lines (106 loc) • 6.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useDispatch } from 'react-redux';
import { ExpressionEditor } from '../../components/ExpressionEditor';
import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
import SimpleButton from '../../components/SimpleButton';
import * as NamedQueryRedux from '../../Redux/ActionsReducers/NamedQueryRedux';
import { PopupShowForm } from '../../Redux/ActionsReducers/PopupRedux';
import { GridFilterModuleId } from '../../Utilities/Constants/ModuleConstants';
import { IsNotNullOrEmpty, IsNullOrEmpty } from '../../Utilities/Extensions/StringExtensions';
import Helper from '../../Utilities/Helpers/Helper';
import { useAdaptable } from '../AdaptableContext';
import { useGridFilterOptionsForExpressionEditorProps } from './useGridFilterOptionsForExpressionEditor';
import { Box, Flex } from '../../components/Flex';
export const GridFilterExpressionEditor = (props) => {
const dispatch = useDispatch();
const { api } = useAdaptable();
const [namedQuery, setNamedQuery] = React.useState(null);
const [expression, setExpression] = React.useState(props.expression);
const isExpressionValid = api.internalApi
.getQueryLanguageService()
.validateBoolean(expression, GridFilterModuleId).isValid;
const isExistingNamedQuery = Helper.objectExists(api.namedQueryApi.getNamedQueries().find((q) => q.BooleanExpression == expression));
const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
const namedQueryValidationError = namedQuery
? api.namedQueryApi.isValidNamedQuery(namedQuery).message
: '';
const hasNamedQueryError = IsNotNullOrEmpty(namedQueryValidationError);
const onRunQuery = (expression) => {
api.filterApi.gridFilterApi.setGridFilterExpression(expression);
};
const onClearExpression = () => {
setExpression('');
api.filterApi.gridFilterApi.clearGridFilter();
};
const onAddNamedQuery = (namedQuery) => dispatch(NamedQueryRedux.NamedQueryAdd(namedQuery));
const handleSaveQuery = () => {
dispatch(PopupShowForm({
Id: 'save_query_form',
Form: {
title: 'Save as Named Query',
fields: [
{
name: 'name',
label: 'Name',
fieldType: 'text',
},
],
buttons: [
{
label: 'Cancel',
buttonStyle: {
variant: 'text',
tone: 'none',
},
},
{
label: 'Save',
buttonStyle: {
variant: 'raised',
tone: 'accent',
},
disabled: (button, context) => {
if (context.formData.name === '') {
return true;
}
const testQuery = {
Name: context.formData.name,
BooleanExpression: expression,
};
const namedQueryValidationResult = api.namedQueryApi.isValidNamedQuery(testQuery);
if (!namedQueryValidationResult.valid) {
return true;
}
},
onClick: (button, context) => {
onAddNamedQuery({
Name: context.formData.name,
BooleanExpression: expression,
});
},
},
],
},
}));
};
const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError;
return (_jsx(NamedQueryContext.Provider, { value: {
namedQuery: namedQuery,
setNamedQuery: (newQuery) => {
setNamedQuery(newQuery);
},
}, children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1", children: [props.onDismiss && (_jsx(SimpleButton, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
props.onDismiss();
}, children: "CLOSE" })), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save", children: "Save Query" }), _jsx(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1", children: "Clear Query" }), _jsx(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
if (namedQuery) {
onAddNamedQuery({
Name: namedQuery.Name,
BooleanExpression: expression,
});
}
onRunQuery(expression);
props?.onDismiss?.();
}, disabled: actionsDisabled, children: "Apply Grid Filter" })] })] }) }));
};