@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
93 lines (92 loc) • 7.21 kB
JavaScript
import * as React from 'react';
import { connect } from 'react-redux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
import { Flex, Text } from 'rebass';
import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
import { ButtonPause } from '../Components/Buttons/ButtonPause';
import { ButtonStop } from '../Components/Buttons/ButtonStop';
import { DateFormatter } from '../../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(Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
disabled && (React.createElement(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, { 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, { 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, { 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(Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
enabled && (React.createElement(React.Fragment, null,
React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
!!activationTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
"(since ",
DateFormatter(activationTime, { Pattern: dateFormat }),
")")))),
suspended && (React.createElement(React.Fragment, null,
React.createElement(Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
!!suspensionTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
"(since ",
DateFormatter(suspensionTime, { Pattern: dateFormat }),
")")))),
disabled && (React.createElement(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, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
React.createElement(Flex, { style: {
color: 'var(--ab-dashboard__color)',
background: 'var(--ab-dashboard__background)',
} },
React.createElement(Flex, { flexDirection: 'row' },
buttonPanel,
statusPanel)),
React.createElement(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, { 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(DataChangeHistoryEnable()),
onChangeHistoryDisable: () => dispatch(DataChangeHistoryDisable()),
onChangeHistorySuspend: () => dispatch(DataChangeHistorySuspend()),
onChangeHistoryResume: () => dispatch(DataChangeHistoryResume()),
};
}
export let DataChangeHistoryPopup = connect(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);