@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
105 lines (104 loc) • 7.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
import { connect } from 'react-redux';
import { isEqual } from '../../Utilities/Extensions/ObjectExtensions';
import join from '../../components/utils/join';
import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
import { ButtonClone } from '../Components/Buttons/ButtonClone';
import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
import { isPivotLayout } from '../../Utilities/isPivotLayout';
import { NewDropdownButton } from '../../components/DropdownButton';
import { Icon } from '../../components/icons';
import { Flex } from '../../components/Flex';
import { SingleSelect } from '../../components/NewSelect';
export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
const LayoutViewPanelComponent = (props) => {
const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
const isErrorLayout = !Layouts.length || (Layouts.length === 1 && isEqual(Layouts[0], ERROR_LAYOUT));
React.useEffect(() => {
if (isErrorLayout) {
showMissingLayoutsError();
}
}, [isErrorLayout]);
const layoutEntity = Layouts.find((x) => x.Name === CurrentLayoutName || x.Uuid === CurrentLayoutName);
const cloneAccessLevel = accessLevel;
const newAccessLevel = accessLevel;
const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
const toLayoutSelectItems = (layouts) => layouts.map((layout) => ({
label: layout.Name,
value: layout.Name,
}));
const tableLayoutsArray = Layouts.filter((layout) => !isPivotLayout(layout));
const pivotLayoutsArray = Layouts.filter((layout) => isPivotLayout(layout));
const showLayoutTypeHeadings = tableLayoutsArray.length > 0 && pivotLayoutsArray.length > 0;
const layoutSelectCommonProps = {
showItemTooltip: true,
disabled: isErrorLayout,
className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`,
ariaLabel: 'Select Layout',
value: layoutEntity ? layoutEntity.Name : null,
onValueChange: (layout) => onSelectLayout(layout),
};
return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: showLayoutTypeHeadings ? (_jsx(SingleSelect, { ...layoutSelectCommonProps, groups: [
{
label: 'Table Layouts',
items: toLayoutSelectItems(tableLayoutsArray),
},
{
label: 'Pivot Layouts',
items: toLayoutSelectItems(pivotLayoutsArray),
},
] })) : (_jsx(SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
? GeneralConstants.READ_ONLY_STYLE
: '', `ab-${elementType}__Layout__wrap`), children: [_jsx(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), _jsx(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), _jsx(NewDropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
{
dataName: 'table',
label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),
onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
},
{
dataName: 'pivot',
disabled: api.gridApi.isTreeDataGrid(),
label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Pivot Layout" }),
onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
},
], accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new`, children: _jsx(Icon, { name: "plus" }) }), _jsx(ButtonDelete, { tooltip: LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel })] })] }));
};
function mapStateToProps(state, ownProps) {
const CurrentLayoutName = state.Layout.CurrentLayout;
const Layouts = state.Layout.Layouts || [ERROR_LAYOUT];
const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || ERROR_LAYOUT;
return {
CurrentLayoutName,
CurrentLayout,
Layouts,
};
}
function mapDispatchToProps(dispatch) {
return {
onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
onSaveLayout: (layout) => {
dispatch(LayoutRedux.LayoutSave(layout));
},
showMissingLayoutsError: () => {
dispatch(PopupRedux.PopupShowConfirmation({
Header: 'Missing Layouts',
Msg: 'No Layouts have been defined. Please check the console for details.',
ConfirmAction: null,
ConfirmButtonText: 'OK',
CancelButtonText: null,
CancelAction: null,
ShowInputBox: false,
MessageType: 'Error',
}));
},
};
}
export const LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);