@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
98 lines (97 loc) • 6.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
const react_redux_1 = require("react-redux");
const rebass_1 = require("rebass");
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
const Select_1 = require("../../components/Select");
const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const icons_1 = require("../../components/icons");
exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
const LayoutViewPanelComponent = (props) => {
const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, isEqual_1.default)(Layouts[0], GeneralConstants_1.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_1.default.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(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
React.createElement(Select_1.Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
React.createElement(DropdownButton_1.default, { variant: "text", tooltip: GeneralConstants_1.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(icons_1.Icon, { name: "plus" })),
React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: GeneralConstants_1.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 || [GeneralConstants_1.ERROR_LAYOUT];
const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || GeneralConstants_1.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',
}));
},
};
}
exports.LayoutViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);