@adaptabletools/adaptable-cjs/src/View/GridFilter/GridFilterPopup.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridFilterPopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const NamedQuerySelector_1 = require("./NamedQuerySelector");
const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
const GridFilterPopup = () => {
    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
    const handleEnter = (e) => {
        if (e.key === 'Enter') {
            runQuery();
        }
    };
    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
        React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
            React.createElement(FormLayout_1.default, null,
                React.createElement(FormLayout_1.FormRow, { label: "Expression" },
                    React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
                        React.createElement(Input_1.default, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
                        ' ',
                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
                React.createElement(FormLayout_1.FormRow, { label: "" },
                    React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
};
exports.GridFilterPopup = GridFilterPopup;