@adaptabletools/adaptable-cjs/src/View/GridFilter/GridFilterPopupUI/index.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.GridFilterPopupUI = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
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 Flex_1 = require("../../../components/Flex");
const GridFilterPopupUI = (props) => {
    const { expression, isExpressionValid, isExpressionNamedQuery, isSuspended, isReadOnly, availableColumns, namedQueries, cachedQueries, currentGridFilterExpression, headerText, glyphicon, infoLink, infoLinkDisabled, onExpressionChange, onRunQuery, onClearQuery, onSaveQuery, onSuspend, onUnsuspend, onExpand, onSelectNamedQuery, onSetGridFilterExpression, gridFilterAccessLevel, namedQueryAccessLevel, } = props;
    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            onRunQuery();
        }
    };
    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
            React.createElement(Panel_1.default.FlexBody, null,
                React.createElement(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
                    "Expression:",
                    React.createElement(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full" },
                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
                        React.createElement(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }),
                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
                        ' ',
                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
                    React.createElement(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1" }, "Save"),
                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
};
exports.GridFilterPopupUI = GridFilterPopupUI;