@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
88 lines (87 loc) • 6.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { connect } from 'react-redux';
import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import { PanelWithImage } from '../Components/Panels/PanelWithImage';
import { AdaptablePopover } from '../AdaptablePopover';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
import { BulkUpdateValueSelector } from '../Components/Selectors/BulkUpdateValueSelector';
import SimpleButton from '../../components/SimpleButton';
import HelpBlock from '../../components/HelpBlock';
import { Flex } from '../../components/Flex';
class BulkUpdatePopupComponent extends React.Component {
constructor(props) {
super(props);
this.state = { isShowingError: false, errorText: '', useSelector: false };
}
componentDidMount() {
this.props.onBulkUpdateValueChange('');
this.props.onBulkUpdateCheckSelectedCells();
}
render() {
let col = this.props.BulkUpdateValidationResult.Column;
let hasDataTypeError = false;
let dataTypeErrorMessage = '';
if (col && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue)) {
if (col.dataType == 'number') {
if (isNaN(Number(this.props.BulkUpdateValue))) {
hasDataTypeError = true;
dataTypeErrorMessage = 'This column only accepts numbers';
}
}
}
let globalValidationMessage = PreviewHelper.GetValidationMessage(this.props.PreviewInfo, this.props.BulkUpdateValue);
let showPanel = this.props.PreviewInfo &&
StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
StringExtensions.IsNotNullOrEmpty(globalValidationMessage);
let previewPanel = showPanel ? (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
if (!col) {
return null;
}
return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
this.onApplyClick();
}, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
this.onApplyClick();
}, children: "Apply Bulk Update" }), ' ', hasDataTypeError && (_jsx(AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })), StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))] })] })), previewPanel] }));
}
onColumnValueSelectedChanged(selectedColumnValue) {
this.props.onBulkUpdateValueChange(selectedColumnValue);
}
onUseColumnValuesSelectorChanged(checked) {
this.setState({ useSelector: checked });
this.props.onBulkUpdateValueChange('');
}
onBulkUpdateValueChange(event) {
const e = event.target;
this.props.onBulkUpdateValueChange(e.value);
}
onApplyClick() {
this.onApplyBulkUpdate();
}
onApplyBulkUpdate() {
this.props.onApplyBulkUpdate();
}
}
function mapStateToProps(state, ownProps) {
return {
BulkUpdateValue: state.Internal.BulkUpdate.BulkUpdateValue,
PreviewInfo: state.Internal.BulkUpdate.BulkUpdatePreviewInfo,
BulkUpdateValidationResult: state.Internal.BulkUpdate.BulkUpdateValidationResult,
SelectedGridCells: state.Internal.SelectedCellInfo?.gridCells,
};
}
function mapDispatchToProps(dispatch) {
return {
onBulkUpdateValueChange: (value) => dispatch(InternalRedux.BulkUpdateChangeValue(value)),
onBulkUpdateCheckSelectedCells: () => dispatch(InternalRedux.BulkUpdateCheckCellSelection()),
onApplyBulkUpdate: () => dispatch(BulkUpdateRedux.BulkUpdateApply(false)),
};
}
export let BulkUpdatePopup = connect(mapStateToProps, mapDispatchToProps)(BulkUpdatePopupComponent);