@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
69 lines (68 loc) • 7.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
import { ModuleValueSelector } from '../Components/ModuleValueSelector';
import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
import { Flex } from '../../components/Flex';
import { Tag } from '../../components/Tag';
import { ToggleButton } from '../../components/ToggleButton';
import { useAdaptable } from '../AdaptableContext';
import { CollapsibleWizardCard, renderCompactColumnTags, useWizardCardAccordion, } from '../Wizard/CollapsibleWizardCard';
const DashboardSettingsToggles = ({ isHidden, isCollapsed, isFloating, hasTabs, canFloat, className, onSetHidden, onSetCollapsed, onSetFloating, }) => (_jsxs(Flex, { alignItems: "center", className: className ?? 'twa:gap-3 twa:p-1', children: [_jsx(ToggleButton, { className: "twa:w-24", onChange: (visible) => onSetHidden(!visible), checked: !isHidden, "data-name": "dashboard-visibility", children: isHidden ? 'Hidden' : 'Visible' }), hasTabs ? (_jsx(ToggleButton, { disabled: isFloating, className: "twa:w-24", onChange: (expanded) => onSetCollapsed(!expanded), checked: !isCollapsed, "data-name": "expand-state", children: isCollapsed ? 'Collapsed' : 'Expanded' })) : null, canFloat ? (_jsx(ToggleButton, { className: "twa:w-24", onChange: (pinned) => onSetFloating(!pinned), checked: !isFloating, "data-name": "floating", children: isFloating ? 'Floating' : 'Pinned' })) : null] }));
export const DashboardPopupSections = (props) => {
const { api } = useAdaptable();
const { bindCard } = useWizardCardAccordion(null);
const systemToolbars = api.dashboardApi.internalApi.getModuleToolbars().map((toolbar) => ({
Id: toolbar.id,
Title: toolbar.friendlyName,
}));
const customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
Id: ct.name,
Title: ct.title ? ct.title : ct.name,
}));
const allToolbars = [...systemToolbars, ...customToolbars];
const toolbarTitleById = React.useMemo(() => allToolbars.reduce((map, toolbar) => {
map.set(toolbar.Id, toolbar.Title);
return map;
}, new Map()), [allToolbars]);
const tabs = props.DashboardState.Tabs.map((tab) => {
const Toolbars = tab.Toolbars.filter((vt) => {
const customToolbar = api.dashboardApi
.getCustomToolbars()
.find((ct) => ct.name === vt);
return customToolbar
? true
: api.internalApi.getModuleService().isAdapTableModulePresent(vt);
});
return { ...tab, Toolbars };
});
const selectedModuleButtons = [];
props.DashboardState.ModuleButtons?.forEach((module) => {
const menuItem = props.InternalState.SettingsPanelModuleEntries.find((entry) => entry.category === module);
if (menuItem?.isVisible) {
selectedModuleButtons.push(module);
}
});
const allModuleButtons = props.InternalState.SettingsPanelModuleEntries.map((entry) => entry.category);
const isModuleCheckboxDisabled = (module) => {
if (module === 'SettingsPanel') {
return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
}
return false;
};
const pinnedToolbarIds = props.DashboardState.PinnedToolbars ?? [];
const pinnedToolbarTitles = pinnedToolbarIds.map((id) => toolbarTitleById.get(id) ?? id);
const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
const tabsCompactLabels = tabs.flatMap((tab) => {
const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
return [`Tab: ${tab.Name}`, ...toolbarTitles];
});
const settingsToggles = (_jsx(DashboardSettingsToggles, { isHidden: props.IsHidden, isCollapsed: props.IsCollapsed, isFloating: props.IsFloating, hasTabs: tabs.length > 0, canFloat: props.canFloat, onSetHidden: props.onSetDashboardHidden, onSetCollapsed: props.onSetDashboardCollapsed, onSetFloating: props.onSetDashboardFloating }));
const pinnedSummary = pinnedToolbarTitles.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: pinnedToolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${title}-${index}`))) })) : (_jsx(Tag, { children: "No Pinned Toolbars" }));
const tabsSummary = tabs.length > 0 ? (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: tabs.map((tab) => {
const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [_jsxs(Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
}) })) : (_jsx(Tag, { children: "No Tabs Configured" }));
const moduleButtonsSummary = moduleButtonLabels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => (_jsx(Tag, { children: label }, label))) })) : (_jsx(Tag, { children: "No Module Buttons" }));
return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { ...bindCard('settings'), "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", compactSummary: settingsToggles, compactSummaryInteractive: true, summary: settingsToggles, className: "twa:overflow-hidden", children: settingsToggles })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactColumnTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactColumnTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactColumnTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
};