@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
94 lines (93 loc) • 6.14 kB
JavaScript
import * as React from 'react';
import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
import { connect } from 'react-redux';
import { Flex } from 'rebass';
import isEqual from 'lodash/isEqual';
import { Select } from '../../components/Select';
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 DropdownButton from '../../components/DropdownButton';
import { Icon } from '../../components/icons';
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);
// the global access level (Layout Entitlement)
const cloneAccessLevel = accessLevel;
const newAccessLevel = accessLevel;
const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
// Layout options for select
const availableLayoutOptions = Layouts.map((layout) => ({
...layout,
label: layout.Name,
value: layout.Name,
onClick: () => onSelectLayout(layout.Name),
}));
const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
React.createElement(Select, { disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
React.createElement(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 }),
React.createElement(DropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [
{
dataName: 'table',
label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Table Layout"),
onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
},
{
dataName: 'pivot',
disabled: api.gridApi.isTreeDataGrid(),
label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Pivot Layout"),
onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
},
], tone: "neutral", accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new` },
React.createElement(Icon, { name: "plus" })),
React.createElement(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: 'You have not defined any Layout! See the console for more details.',
ConfirmAction: null,
ConfirmButtonText: 'OK',
CancelButtonText: null,
CancelAction: null,
ShowInputBox: false,
MessageType: 'Error',
}));
},
};
}
export const LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);