@adaptabletools/adaptable/src/View/GridFilter/GridFilterPopupUI/index.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NewDropdownButton } from '../../../components/DropdownButton';
import { Icon } from '../../../components/icons';
import FieldWrap from '../../../components/FieldWrap';
import Input from '../../../components/Input';
import Panel from '../../../components/Panel';
import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
import { ButtonClear } from '../../Components/Buttons/ButtonClear';
import { ButtonExpand } from '../../Components/Buttons/ButtonExpand';
import { ButtonInvalid } from '../../Components/Buttons/ButtonInvalid';
import { ButtonPause } from '../../Components/Buttons/ButtonPause';
import { ButtonPlay } from '../../Components/Buttons/ButtonPlay';
import { ButtonSave } from '../../Components/Buttons/ButtonSave';
import { ButtonUnsuspend } from '../../Components/Buttons/ButtonUnsuspend';
import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
import { NamedQuerySelector } from './../NamedQuerySelector';
import { Box, Flex } from '../../../components/Flex';
import { ACCESS_LEVEL_READ_ONLY } from '../../../Utilities/Constants/GeneralConstants';
export 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 === ACCESS_LEVEL_READ_ONLY;
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            onRunQuery();
        }
    };
    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", _jsxs(FieldWrap, { className: "twa:mr-1 twa:w-full", children: [_jsx(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), _jsx(Input, { 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 && (_jsx(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions.IsNotNullOrEmpty(expression) && (_jsx(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), _jsxs(Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [_jsx(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? (_jsx(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : (_jsx(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), _jsxs(NewDropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", children: [_jsx(Icon, { name: "list" }), "Columns"] }), _jsx(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
};