@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
66 lines (65 loc) • 5.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridFilterPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
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 ButtonSave_1 = require("../Components/Buttons/ButtonSave");
const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
const NamedQuerySelector_1 = require("./NamedQuerySelector");
const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
const Flex_1 = require("../../components/Flex");
const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
const QueryViewPanelComponent = (props) => {
const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
if (!isAdaptableReady) {
return null;
}
const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
const renderExpressionLabel = () => {
const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
const placeholderClasses = 'twa:text-gray-400 twa:italic';
const labelClassName = (0, clsx_1.default)(baseClasses, {
[placeholderClasses]: !expression,
});
const expressionLabel = (React.createElement(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter' },
React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
return (React.createElement(FieldWrap_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
buttonExpand,
expressionLabel,
gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
};
const hasExpression = StringExtensions_1.default.IsNotNullOrEmpty(expression);
const hasActiveGridFilter = gridFilter != null && hasExpression;
const hasNamedQueries = namedQueries && namedQueries.length > 0;
const clearButton = hasExpression ? (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
const saveButton = hasExpression ? (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
const renderButtons = () => {
return (React.createElement(React.Fragment, null,
clearButton,
isSuspended ? unSuspendButton : suspendButton,
saveButton,
namedQuerySelector));
};
const isToolbar = props.viewType === 'Toolbar';
return (React.createElement(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
'twa:w-[500px]': isToolbar,
}) },
React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
'twa:pl-1': isToolbar,
'twa:pt-1': !isToolbar,
}) }, renderButtons())));
};
exports.GridFilterPanelControl = QueryViewPanelComponent;