@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
123 lines (122 loc) • 8.32 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 DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
const Flex_1 = require("../../components/Flex");
const ToggleButton_1 = require("../../components/ToggleButton");
const Tabs_1 = require("../../components/Tabs");
const Card_1 = require("../../components/Card");
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()
.isAdapTableModulePresent(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;
};
const contentCls = '';
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(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
React.createElement(Card_1.Card, null,
React.createElement(Card_1.Card.Title, { gap: 8 }, "Display Settings"),
React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-2" },
React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3" },
React.createElement(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton_1.ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null))))),
React.createElement(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
React.createElement(Card_1.Card.Title, null, "Contents"),
React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),
React.createElement(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
React.createElement(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls },
React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
}
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);