@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
113 lines (112 loc) • 8.01 kB
JavaScript
import * as React from 'react';
import { connect } from 'react-redux';
import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import Radio from '../../components/Radio';
import { Box, Flex } from 'rebass';
import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
import { ModuleValueSelector } from '../Components/ModuleValueSelector';
import { CheckBox } from '../../components/CheckBox';
import Panel from '../../components/Panel';
import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
export var DashboardConfigView;
(function (DashboardConfigView) {
DashboardConfigView["Toolbars"] = "Toolbars";
DashboardConfigView["Buttons"] = "Buttons";
DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
})(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, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
React.createElement(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, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
' ',
React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
' ',
React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
React.createElement(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(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(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, 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)),
};
}
export let DashboardPopup = connect(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);