@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
53 lines (52 loc) • 5.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import FieldWrap from '../../components/FieldWrap';
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 { ButtonSave } from '../Components/Buttons/ButtonSave';
import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
import { NamedQuerySelector } from './NamedQuerySelector';
import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
import { Box, Flex } from '../../components/Flex';
import Tooltip from '../../components/Tooltip';
import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
import { cn } from '../../lib/utils';
const QueryViewPanelComponent = (props) => {
const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
if (!isAdaptableReady) {
return null;
}
const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
const buttonExpand = (_jsx(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-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
const placeholderClasses = 'twa:text-gray-400 twa:italic';
const labelClassName = cn(baseClasses, {
[placeholderClasses]: !expression,
});
const expressionLabel = (_jsx(Tooltip, { label: expression || 'Click to edit Grid Filter', children: _jsx(Box, { className: cn('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
return (_jsxs(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
};
const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
const hasActiveGridFilter = gridFilter != null && hasExpression;
const hasNamedQueries = namedQueries && namedQueries.length > 0;
const clearButton = hasExpression ? (_jsx(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
const saveButton = hasExpression ? (_jsx(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
const suspendButton = hasActiveGridFilter ? (_jsx(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
const unSuspendButton = hasActiveGridFilter ? (_jsx(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
const namedQuerySelector = hasNamedQueries ? (_jsx(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
const renderButtons = () => {
return (_jsxs(_Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
};
const isToolbar = props.viewType === 'Toolbar';
return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: cn(`ab-${elementType}__Query__wrap`, {
'twa:w-[500px]': isToolbar,
}), children: [_jsx(Flex, { className: cn({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), _jsx(Flex, { className: cn('twa:flex-shrink-0', {
'twa:pl-1': isToolbar,
'twa:pt-1': !isToolbar,
}), children: renderButtons() })] }));
};
export const GridFilterPanelControl = QueryViewPanelComponent;