@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
135 lines (134 loc) • 8.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
import EmptyContent from '../../../../components/EmptyContent';
import { Icon } from '../../../../components/icons';
import { AdaptableObjectList } from '../../AdaptableObjectList';
import { ButtonNew } from '../../Buttons/ButtonNew';
import { PopupPanel } from './PopupPanel';
import { CheckBox } from '../../../../components/CheckBox';
import { LayoutShowNonExtendedObjects } from '../../../../Redux/ActionsReducers/InternalRedux';
import SimpleButton from '../../../../components/SimpleButton';
import { useAdaptable } from '../../../AdaptableContext';
import { useEffect } from 'react';
import { useRerender } from '../../../../components/utils/useRerender';
import { Box, Flex } from '../../../../components/Flex';
import Panel from '../../../../components/Panel';
import { Tabs } from '../../../../components/Tabs';
import { NewDropdownButton } from '../../../../components/DropdownButton';
export const AdaptablePopupModuleView = (props) => {
const adaptable = useAdaptable();
const rerender = useRerender();
useEffect(() => {
return adaptable.api.eventApi.on('AdaptableStateChanged', rerender);
}, [adaptable]);
const [abObjectType, setAbObjectType] = React.useState(null);
const moduleInfo = props.module.moduleInfo;
const items = props.module?.toViewAll();
const moduleViewProperties = props.module?.getViewProperties?.() ?? {};
const EditWizard = moduleViewProperties?.getEditWizard?.();
const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
return (props.popupParams?.action === 'New' ||
props.popupParams?.action === 'NewSchedule' ||
props.popupParams?.action === 'Edit' ||
props.popupParams?.action === 'Clone');
});
const handleOpenEditPopup = React.useCallback(() => {
if (EditWizard) {
setIsWizardOpen(true);
}
if (moduleViewProperties.onOpenEditPopup) {
moduleViewProperties.onOpenEditPopup();
}
}, []);
React.useEffect(() => {
moduleViewProperties?.onMount?.();
}, []);
React.useEffect(() => {
if (props.popupParams?.action === 'New' ||
props.popupParams?.action === 'NewSchedule' ||
props.popupParams?.action === 'Edit' ||
props.popupParams?.action === 'Clone') {
handleOpenEditPopup();
}
}, [props.popupParams?.action]);
const emptyView = moduleViewProperties.emptyView;
let emptyContent = null;
if (typeof emptyView === 'function') {
emptyContent = React.createElement(emptyView, { module: props.module });
}
else if (typeof emptyView === 'string') {
emptyContent = emptyView;
}
const toolTipText = moduleViewProperties.newTooltipText ?? `Create ${moduleInfo.FriendlyName}`;
let newButton = null;
if (moduleViewProperties?.abObjectTypes?.length) {
const items = moduleViewProperties?.abObjectTypes.map((abObjectType) => {
return {
disabled: abObjectType?.accessLevel === ACCESS_LEVEL_READ_ONLY,
onClick: () => {
setAbObjectType(abObjectType);
handleOpenEditPopup();
},
label: abObjectType.label ?? abObjectType.name,
};
});
newButton = (_jsxs(NewDropdownButton, { showDivider: false, tone: "accent", variant: "raised", items: items, tooltip: toolTipText, children: [_jsx(Icon, { name: "plus" }), " New"] }));
}
else if (!moduleViewProperties.hideNewButton &&
(EditWizard || moduleViewProperties.onOpenEditPopup)) {
newButton = (_jsx(ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
}
let suspendButton = null;
const editableObjects = items.filter((item) => !item.abObject.IsReadOnly);
if (editableObjects.length &&
moduleViewProperties?.getSuspendAllAction &&
moduleViewProperties?.getUnSuspendAllAction) {
const isAtLeastOneAbObjectActive = editableObjects.some((item) => {
return !item.abObject?.IsSuspended;
});
const handleSuspendUnsuspendAll = () => {
if (isAtLeastOneAbObjectActive) {
const suspendAllAction = moduleViewProperties.getSuspendAllAction();
dispatch(suspendAllAction);
}
else {
const unsuspendAllAction = moduleViewProperties.getUnSuspendAllAction();
dispatch(unsuspendAllAction);
}
};
suspendButton = (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' }));
}
const handleWizardClose = () => {
setAbObjectType(null);
setIsWizardOpen(false);
if (['Toolbar', 'ContextMenu', 'ColumnMenu'].includes(props?.popupParams?.source)) {
props.onClosePopup();
}
};
const adaptableModule = props.api.internalApi
.getModuleService()
.getModuleById(props.module.moduleInfo.ModuleName);
const dispatch = useDispatch();
const showLayoutNonExtendedObjects = useSelector((state) => state.Internal.Layout.showLayoutNonExtendedObjects);
const toggleButtonShowLayoutExtensionObjects = () => {
if (!adaptableModule?.containsLayoutExtensions()) {
return;
}
if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
return;
}
return (_jsx(Flex, { className: "twa:justify-start", children: _jsxs(CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)), children: ["Show ", moduleInfo.FriendlyName, "s not available in current Layout"] }) }));
};
const renderModuleObjectList = () => (_jsxs(_Fragment, { children: [moduleViewProperties.HeaderComponent && _jsx(moduleViewProperties.HeaderComponent, {}), toggleButtonShowLayoutExtensionObjects(), items?.length ? (_jsx(AdaptableObjectList, { module: props.module, items: items })) : (_jsx(EmptyContent, { children: emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}` }))] }));
const settingsPanelTabs = moduleViewProperties.settingsPanelTabs?.filter((tab) => !tab.isVisible || tab.isVisible(props.api)) ?? [];
const useTabbedSettingsPanel = settingsPanelTabs.length > 1;
const renderTabbedBody = () => {
if (!useTabbedSettingsPanel) {
return renderModuleObjectList();
}
return (_jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [settingsPanelTabs.map((tab) => (_jsx(Tabs.Tab, { children: tab.label }, tab.label))), settingsPanelTabs.map((tab) => (_jsx(Tabs.Content, { children: _jsx(Box, { className: "twa:min-h-0 twa:overflow-auto twa:pt-2", children: tab.render ? React.createElement(tab.render) : renderModuleObjectList() }) }, tab.label)))] }) }) }));
};
return (_jsxs(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, scrollable: !useTabbedSettingsPanel, button: _jsxs(_Fragment, { children: [suspendButton, " ", newButton] }), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [renderTabbedBody(), isWizardOpen && EditWizard && (_jsx(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }));
};