@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
151 lines (150 loc) • 10.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dashboard = void 0;
const tslib_1 = require("tslib");
const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const rebass_1 = require("rebass");
const Dashboard_1 = require("../../components/Dashboard");
const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
const AdaptableButton_1 = require("../Components/AdaptableButton");
const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
const CustomDashboardButton_1 = require("./CustomDashboardButton");
const CustomToolbar_1 = require("./CustomToolbar");
const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
const PinnedDashboard_1 = require("./PinnedDashboard");
const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
const QuickSearchInput_1 = require("../QuickSearch/QuickSearchInput");
const DashboardComponent = (props) => {
const dashboardAccessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
const renderTab = (tab) => {
const visibleToolbarNames = tab.Toolbars.filter((vt) => vt);
const customToolbars = props.api.dashboardApi.getCustomToolbars();
let visibleDashboardElements = visibleToolbarNames.map((visibleToolbarName) => {
let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
if (customToolbar) {
if (dashboardAccessLevel != 'Hidden') {
return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
}
}
else {
const moduleToolbarName = visibleToolbarName;
if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
let moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(moduleToolbarName);
if (moduleToolbarView) {
let moduleInfo = props.api.internalApi
.getModuleService()
.getModuleInfoByModule(moduleToolbarName);
return (React.createElement(rebass_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
}
else {
props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
}
}
}
});
return visibleDashboardElements;
};
const renderModuleButtons = () => {
let shortcutsArray = props.DashboardState.ModuleButtons;
let shortcuts = null;
const alwaysShowInDashboard = props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
const shouldAddSettingsPanel = alwaysShowInDashboard && !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
shortcutsArray.push('SettingsPanel');
}
if (shortcutsArray) {
shortcuts = shortcutsArray.map((x, index) => {
let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
if (menuItem) {
return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
? {
...UIHelper_1.default.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
'Success'),
border: 0,
}
: {} }));
}
});
}
return shortcuts;
};
const renderDashboardButtons = () => {
let dashboardButtonsArray = props.api.dashboardApi
.getCustomDashboardButtons()
.filter(Boolean);
let customDashboardButtons = null;
if (dashboardButtonsArray?.length) {
customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton_1.CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
}
return customDashboardButtons;
};
const renderQuickSearch = () => {
return (React.createElement(rebass_1.Box, { ml: 2 },
React.createElement(QuickSearchInput_1.QuickSearchInput, { width: '7rem', className: "ab-DashboardToolbar__QuickSearch__text" })));
};
let instanceName = props.api.internalApi.getToolbarTitle();
let dashboardOptions = props.api.optionsApi.getDashboardOptions();
const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
if (props.DashboardState.IsHidden) {
return React.createElement("div", null);
}
return (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard_1.PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
props.onSetActiveTabIndex(ActiveTabIndex);
}, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
props.onSetIsCollapsed(IsCollapsed);
}, floating: props.DashboardState.IsFloating, onFloatingChange: (IsFloating) => {
props.onSetIsFloating(IsFloating);
}, inline: props.DashboardState.IsInline, onInlineChange: (IsInline) => {
props.onSetIsInline(IsInline);
}, position: props.DashboardState.FloatingPosition, onPositionChange: (FloatingPositionCallback) => {
if (typeof FloatingPositionCallback === 'function') {
const FloatingPosition = FloatingPositionCallback(props.DashboardState.FloatingPosition);
props.onSetFloatingPosition(FloatingPosition);
}
else {
props.onSetFloatingPosition(FloatingPositionCallback);
}
}, left: React.createElement(React.Fragment, null,
React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }),
dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(),
dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()), right: React.createElement(React.Fragment, null,
dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(),
dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
};
function mapStateToProps(state, ownProps) {
return {
DashboardRevision: state.Internal.Dashboard.DashboardRevision,
DashboardState: state.Dashboard,
InternalState: state.Internal,
SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
QuickSearchText: state.QuickSearch.QuickSearchText,
};
}
function mapDispatchToProps(dispatch) {
return {
dispatch: (action) => dispatch(action),
onSetActiveTabIndex: (ActiveTabIndex) => dispatch(DashboardRedux.DashboardSetActiveTabIndex(ActiveTabIndex)),
onSetIsCollapsed: (IsCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(IsCollapsed)),
onSetIsFloating: (IsFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(IsFloating)),
onSetFloatingPosition: (FloatingPosition) => dispatch(DashboardRedux.DashboardSetFloatingPosition(FloatingPosition)),
onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)),
onShowQuickSearchPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QuickSearchModuleId, 'QuickSearchPopup')),
onShowDashboardPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.DashboardModuleId, 'DashboardPopup')),
};
}
exports.Dashboard = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardComponent);