@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
97 lines (96 loc) • 7.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataChangeHistoryPopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const DataChangeHistoryGrid_1 = require("./DataChangeHistoryGrid");
const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
const rebass_1 = require("rebass");
const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
class DataChangeHistoryPopupComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
dataChangeHistoryAdaptableApi: undefined,
};
}
render() {
const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
const agGridContainerId = 'dataChangeHistoryAgGridContainer';
const enabled = changeHistoryMode === 'ACTIVE';
const disabled = changeHistoryMode === 'INACTIVE';
const suspended = changeHistoryMode === 'SUSPENDED';
const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
(enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
enabled && (React.createElement(React.Fragment, null,
React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
!!activationTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
"(since ",
(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }),
")")))),
suspended && (React.createElement(React.Fragment, null,
React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
!!suspensionTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
"(since ",
(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }),
")")))),
disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-disabled", fontSize: 2 }))));
const handleChangeUndo = (changeKey) => {
const changeToBeUndone = this.props.changeHistoryLog[changeKey];
if (changeToBeUndone) {
this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
}
};
const handleClearRow = (changeKey) => {
const changeToBeUndone = this.props.changeHistoryLog[changeKey];
if (changeToBeUndone) {
this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeUndone);
}
};
const agGridThemeMode = this.props.api.internalApi
.getAdaptableInstance()
.agGridThemeAdapter.getAgGridThemeMode();
const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
React.createElement(rebass_1.Flex, { style: {
color: 'var(--ab-dashboard__color)',
background: 'var(--ab-dashboard__background)',
} },
React.createElement(rebass_1.Flex, { flexDirection: 'row' },
buttonPanel,
statusPanel)),
React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
React.createElement("div", { id: adaptableContainerId }),
React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
}
}
function mapStateToProps(state, ownProps) {
return {
changeHistoryLog: state.Internal.DataChangeHistory.logs,
changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
activationTime: state.Internal.DataChangeHistory.enableTime,
suspensionTime: state.Internal.DataChangeHistory.suspendTime,
};
}
function mapDispatchToProps(dispatch) {
return {
onChangeHistoryEnable: () => dispatch((0, InternalRedux_1.DataChangeHistoryEnable)()),
onChangeHistoryDisable: () => dispatch((0, InternalRedux_1.DataChangeHistoryDisable)()),
onChangeHistorySuspend: () => dispatch((0, InternalRedux_1.DataChangeHistorySuspend)()),
onChangeHistoryResume: () => dispatch((0, InternalRedux_1.DataChangeHistoryResume)()),
};
}
exports.DataChangeHistoryPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);