@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
56 lines (55 loc) • 5.79 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 { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { DataChangeHistoryTable } from './DataChangeHistoryTable';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
import { ButtonPause } from '../Components/Buttons/ButtonPause';
import { ButtonStop } from '../Components/Buttons/ButtonStop';
import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
import { Box, Flex } from '../../components/Flex';
class DataChangeHistoryPopupComponent extends React.Component {
render() {
const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, changeHistoryLog, } = this.props;
const enabled = changeHistoryMode === 'ACTIVE';
const disabled = changeHistoryMode === 'INACTIVE';
const suspended = changeHistoryMode === 'SUSPENDED';
const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && (_jsx(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && (_jsx(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && _jsx(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
const handleChangeUndo = (changeKey) => {
const changeToBeUndone = changeHistoryLog[changeKey];
if (changeToBeUndone) {
this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
}
};
const handleClearRow = (changeKey) => {
const changeToBeCleared = changeHistoryLog[changeKey];
if (changeToBeCleared) {
this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeCleared);
}
};
return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [_jsx(Flex, { style: {
color: 'var(--ab-dashboard__color)',
background: 'var(--ab-dashboard__background)',
}, children: _jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), _jsx(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: _jsx(DataChangeHistoryTable, { changeHistoryLog: 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);