@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
76 lines (75 loc) • 6.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { ModuleValueSelector } from '../ModuleValueSelector';
import { Flex } from '../../../components/Flex';
import { Tag } from '../../../components/Tag';
import { useAdaptable } from '../../AdaptableContext';
import { CollapsibleWizardCard, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
export var ToolPanelConfigView;
(function (ToolPanelConfigView) {
ToolPanelConfigView["Buttons"] = "Buttons";
ToolPanelConfigView["ToolPanels"] = "ToolPanels";
})(ToolPanelConfigView || (ToolPanelConfigView = {}));
export const ToolPanelPopupSections = (props) => {
const { api } = useAdaptable();
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(null);
const selectedModuleButtons = [];
if (ArrayExtensions.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
props.ToolPanelState.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 availableModules = props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
if (!api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
availableModules.push('Dashboard');
}
if (api.pluginsApi.getipushpullPluginApi() &&
!api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
availableModules.push('IPushPull');
}
if (api.pluginsApi.getOpenFinPluginApi() &&
!api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
availableModules.push('OpenFin');
}
const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
const availableCustomToolPanels = api.toolPanelApi
.getCustomToolPanels()
.map((customToolPanel) => customToolPanel.name);
const availableToolPanels = [
...availableCustomToolPanels,
...availableModuleToolPanels,
];
const selectedToolPanels = props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name).filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
const getToolPanelLabel = React.useCallback((toolPanelId) => {
const customToolPanel = api.toolPanelApi.getCustomToolPanelByName(toolPanelId);
if (customToolPanel) {
return customToolPanel.title ?? customToolPanel.name;
}
return (api.internalApi.getModuleService().getModuleFriendlyName(toolPanelId) ??
toolPanelId);
}, [api]);
const isModuleCheckboxDisabled = (module) => {
if (module === 'SettingsPanel') {
return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
}
return false;
};
const handleToolPanelsChanged = (selectedValues) => {
const currentSelectedToolPanelDefinitions = props.ToolPanelState.ToolPanels;
const newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
Name: selectedToolPanel,
VisibilityMode: 'collapsed',
});
props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
};
const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
const toolPanelsSummary = selectedToolPanels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: selectedToolPanels.map((toolPanelId) => (_jsx(Tag, { children: getToolPanelLabel(toolPanelId) }, toolPanelId))) })) : (_jsx(Tag, { children: "No tool panels" }));
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: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('tool-panels', { fillAvailable: true }), "data-name": "tool-panel-tool-panels", title: "Tool Panels", help: "Select and order the Tool Panels to show in the AdapTable Tool Panel", compactSummary: renderCompactColumnTags(selectedToolPanels.map((toolPanelId) => getToolPanelLabel(toolPanelId)), (label) => label), summary: toolPanelsSummary, 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, { options: availableToolPanels, value: selectedToolPanels, onChange: handleToolPanelsChanged, disabled: props.isToolPanelReadOnly }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "tool-panel-module-buttons", title: "Module Buttons", help: "Select and order module buttons shown at the top of the tool panel", compactSummary: renderCompactColumnTags(moduleButtonLabels, (label) => label), 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, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: props.isToolPanelReadOnly, onChange: (selectedValues) => props.onToolPanelSetModuleButtons(selectedValues) }) })] }));
};