@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
117 lines (116 loc) • 7.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BulkUpdateViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Enums_1 = require("../../AdaptableState/Common/Enums");
const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
const BulkUpdateValueSelector_1 = require("../Components/Selectors/BulkUpdateValueSelector");
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const ButtonApply_1 = require("../Components/Buttons/ButtonApply");
const AdaptablePopover_1 = require("../AdaptablePopover");
const UIHelper_1 = require("../UIHelper");
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
const react_redux_1 = require("react-redux");
const Flex_1 = require("../../components/Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
class BulkUpdateViewPanelComponent extends React.Component {
cleanupEvent;
constructor(props) {
super(props);
this.state = {
Disabled: true,
};
}
componentDidMount() {
if (this.props.api) {
let adaptable = this.props.api.internalApi.getAdaptableInstance();
if (adaptable) {
this.cleanupEvent = adaptable._on('CellsSelected', () => {
this.checkSelectedCells();
});
}
}
this.checkSelectedCells();
}
componentWillUnmount() {
this.cleanupEvent?.();
}
render() {
let statusColour = this.getStatusColour();
let selectedColumn = this.props.BulkUpdateValidationResult.Column;
let previewPanel = (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
const valueSelectorDisabled = this.props.accessLevel == 'ReadOnly' ||
!this.props.BulkUpdateValidationResult.IsValid ||
this.props.api.layoutApi.isCurrentLayoutPivot();
const valueOperationDisabled = valueSelectorDisabled ||
StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
(this.props.PreviewInfo != null &&
this.props.PreviewInfo.previewValidationSummary.validationResult == 'All');
const applyStyle = {
color: statusColour,
fill: 'currentColor',
};
const isToolbar = this.props.viewType === 'Toolbar';
const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
const messageStyle = UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour);
const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
'twa:flex-1 twa:flex-wrap': !isToolbar,
}), flexWrap: isToolbar ? 'nowrap' : 'wrap' },
React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
'twa:min-w-[100px]': !isToolbar,
'twa:min-w-0': isToolbar,
}) },
React.createElement(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
listMinWidth: 160,
}, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
React.createElement(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1" },
React.createElement(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-center" },
React.createElement(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel }, 'Apply')),
React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) }))));
}
onColumnValueSelectedChanged(selectedColumnValue) {
this.props.onBulkUpdateValueChange(selectedColumnValue);
}
checkSelectedCells() {
this.props.onBulkUpdateCheckSelectedCells();
if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue)) {
this.props.onBulkUpdateValueChange('');
}
}
getStatusColour() {
if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && this.props.PreviewInfo) {
if (this.props.PreviewInfo.previewValidationSummary.validationResult == 'All') {
return Enums_1.StatusColour.Error;
}
if (this.props.PreviewInfo.previewValidationSummary.validationResult == 'Some') {
return Enums_1.StatusColour.Warn;
}
}
return Enums_1.StatusColour.Success;
}
onApplyClick() {
this.props.onApplyBulkUpdate();
this.props.onBulkUpdateValueChange(undefined);
}
}
function mapStateToProps(state, ownProps) {
return {
SelectedGridCells: state.Internal.SelectedCellInfo?.gridCells,
BulkUpdateValue: state.Internal.BulkUpdate.BulkUpdateValue,
BulkUpdateValidationResult: state.Internal.BulkUpdate.BulkUpdateValidationResult,
PreviewInfo: state.Internal.BulkUpdate.BulkUpdatePreviewInfo,
};
}
function mapDispatchToProps(dispatch) {
return {
onBulkUpdateValueChange: (value) => dispatch(InternalRedux.BulkUpdateChangeValue(value)),
onBulkUpdateCheckSelectedCells: () => dispatch(InternalRedux.BulkUpdateCheckCellSelection()),
onApplyBulkUpdate: () => dispatch(BulkUpdateRedux.BulkUpdateApply(false)),
};
}
exports.BulkUpdateViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(BulkUpdateViewPanelComponent);