@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
136 lines (135 loc) • 9.75 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { kebabCase } from '../../Utilities/Extensions/StringExtensions';
import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
import { connect } from 'react-redux';
import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';
import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
import { QuickSearchModuleId } from '../../Utilities/Constants/ModuleConstants';
import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
import UIHelper from '../UIHelper';
import { CustomDashboardButton } from './CustomDashboardButton';
import { CustomToolbarWrapper } from './CustomToolbar';
import { DashboardToolbarFactory } from './DashboardToolbarFactory';
import { PinnedDashboard } from './PinnedDashboard';
import { ModuleToolbarWrapper } from './ModuleToolbarWrapper';
import { QuickSearchInput } from '../QuickSearch/QuickSearchInput';
import { Box } from '../../components/Flex';
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 != ACCESS_LEVEL_HIDDEN) {
return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--customToolbar`, children: _jsx(CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision }) }, customToolbar.name));
}
}
else {
const moduleToolbarName = visibleToolbarName;
if (props.api.internalApi.getModuleService().isAdapTableModulePresent(moduleToolbarName)) {
let moduleToolbarView = AdaptableViewPanelFactory.get(moduleToolbarName);
if (moduleToolbarView) {
let moduleInfo = props.api.internalApi
.getModuleService()
.getModuleInfoByModule(moduleToolbarName);
return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}`, children: _jsx(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel, children: _jsx(DashboardToolbarFactory, { toolbarName: moduleToolbarName }) }) }, 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 (_jsx(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
? {
...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
'Success'),
border: 0,
}
: {} }, menuItem.label));
}
});
}
return shortcuts;
};
const renderDashboardButtons = () => {
let dashboardButtonsArray = props.api.dashboardApi
.getCustomDashboardButtons()
.filter(Boolean);
let customDashboardButtons = null;
if (dashboardButtonsArray?.length) {
customDashboardButtons = dashboardButtonsArray.map((button, index) => (_jsx(CustomDashboardButton, { button: button, api: props.api, accessLevel: props.accessLevel }, `${button.label}-${index}`)));
}
return customDashboardButtons;
};
const renderQuickSearch = () => {
return (_jsx(Box, { className: "twa:ml-2", children: _jsx(QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" }) }));
};
let instanceName = props.api.internalApi.getToolbarTitle();
let dashboardOptions = props.api.optionsApi.getDashboardOptions();
const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
props.api.internalApi.getModuleService().isAdapTableModulePresent(QuickSearchModuleId);
const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
if (props.DashboardState.IsHidden) {
return _jsx("div", {});
}
return (_jsx(DashboardUI, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: _jsx(PinnedDashboard, {}), 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);
}, position: props.DashboardState.FloatingPosition, onPositionChange: (FloatingPositionCallback) => {
if (typeof FloatingPositionCallback === 'function') {
const FloatingPosition = FloatingPositionCallback(props.DashboardState.FloatingPosition);
props.onSetFloatingPosition(FloatingPosition);
}
else {
props.onSetFloatingPosition(FloatingPositionCallback);
}
}, left: _jsxs(_Fragment, { children: [_jsx(AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }), dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(), dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()] }), right: _jsxs(_Fragment, { children: [dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(), dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(), shouldRenderQuickSearchHeader && renderQuickSearch()] }), onShowDashboardPopup: props.onShowDashboardPopup, children: props.DashboardState.Tabs &&
props.DashboardState.Tabs.map((tab, index) => (_jsx(DashboardTabUI, { title: tab.Name, children: renderTab(tab) }, index))) }));
};
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')),
};
}
export let Dashboard = connect(mapStateToProps, mapDispatchToProps)(DashboardComponent);