@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) • 8.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashboardPopup = exports.DashboardConfigView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
const rebass_1 = require("rebass");
const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
const CheckBox_1 = require("../../components/CheckBox");
const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
var DashboardConfigView;
(function (DashboardConfigView) {
DashboardConfigView["Toolbars"] = "Toolbars";
DashboardConfigView["Buttons"] = "Buttons";
DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
})(DashboardConfigView || (exports.DashboardConfigView = DashboardConfigView = {}));
class DashboardPopupComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
DashboardConfigView: DashboardConfigView.Toolbars,
};
}
render() {
const systemToolbars = this.props.api.dashboardApi.internalApi
.getModuleToolbars()
.map((toolbar) => ({
Id: toolbar.id,
Title: toolbar.friendlyName,
}));
const customToolbars = this.props.api.dashboardApi.getCustomToolbars().map((ct) => ({
Id: ct.name,
Title: ct.title ? ct.title : ct.name,
}));
const tabs = this.props.DashboardState.Tabs.map((tab) => {
const Toolbars = tab.Toolbars.filter((vt) => {
let customToolbar = this.props.api.dashboardApi
.getCustomToolbars()
.find((ct) => ct.name === vt);
return customToolbar
? true
: this.props.api.internalApi.getModuleService().isModuleAvailable(vt);
});
return { ...tab, Toolbars };
});
let selectedModuleButtons = [];
this.props.DashboardState.ModuleButtons.forEach((x) => {
let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == x);
if (menuItem?.isVisible) {
selectedModuleButtons.push(x);
}
});
const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
const baseClassName = 'ab-Dashboard-Popup';
const dashboardAccessLevel = this.props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
const areDashboardSettingsVisible = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
const isModuleCheckboxDisabled = (module) => {
if (module === 'SettingsPanel') {
return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
}
return false;
};
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, { flex: 1, height: "100%", flexDirection: "column" },
areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapsed"),
' ',
this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
' ',
React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
' ',
React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
? 'toolbars'
: 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)))))));
}
onDashboardConfigViewChanged(event) {
let e = event.target;
let dashboardConfigView = e.value;
this.setState({
DashboardConfigView: dashboardConfigView,
});
}
}
function mapStateToProps(state, ownProps) {
return {
DashboardState: state.Dashboard,
InternalState: state.Internal,
IsCollapsed: state.Dashboard.IsCollapsed,
IsHidden: state.Dashboard.IsHidden,
IsFloating: state.Dashboard.IsFloating,
};
}
function mapDispatchToProps(dispatch) {
return {
onDashboardSetModuleButtons: (moduleButtons) => dispatch(DashboardRedux.DashboardSetModuleButtons(moduleButtons)),
onDashboardSetTabs: (Tabs) => dispatch(DashboardRedux.DashboardSetTabs(Tabs)),
onSetDashboardCollapsed: (isCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(isCollapsed)),
onSetDashboardHidden: (isHidden) => dispatch(DashboardRedux.DashboardSetIsHidden(isHidden)),
onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
};
}
exports.DashboardPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);