@openui5/sap.m 1.96.1 → 1.97.1

package/src/sap/m/table/ColumnMenu.js

@@ -0,0 +1,377 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/m/ResponsivePopover",
+	"sap/m/List",
+	"sap/m/StandardListItem",
+	"sap/m/Button",
+	"sap/m/Title",
+	"sap/m/VBox",
+	"sap/m/Toolbar",
+	"sap/m/OverflowToolbar",
+	"sap/m/ToolbarSpacer",
+	"sap/m/ScrollContainer",
+	"sap/m/table/ColumnMenuRenderer",
+	"sap/m/library",
+	"sap/ui/core/Control",
+	"sap/ui/core/Core",
+	"sap/ui/thirdparty/jquery",
+	"sap/base/strings/capitalize",
+	"sap/m/p13n/AbstractContainerItem",
+	"sap/ui/core/Element",
+	"sap/m/p13n/Container"
+], function (
+	ResponsivePopover,
+	List,
+	StandardListItem,
+	Button,
+	Title,
+	VBox,
+	Toolbar,
+	OverflowToolbar,
+	ToolbarSpacer,
+	ScrollContainer,
+	ColumnMenuRenderer,
+	library,
+	Control,
+	Core,
+	jQuery,
+	capitalize,
+	AbstractContainerItem,
+	Element,
+	Container
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new ColumnMenu.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * This control is a popover, intended to be used by a table.
+	 * It serves as a entry point for the table personalization via the column headers.
+	 * The ColumnMenu is separated into two sections: quick actions and menu items.
+	 *
+	 * The top section of the popover contains contextual quick actions for the column the menu was triggered from.
+	 * The lower section contains menu items, which consist of generic and global table settings.
+	 *
+	 * There are control- and application-specific quick actions and menu items.
+	 * Applications are able to add their own quick actions, actions and items.
+	 *
+	 * @extends sap.ui.core.Control
+	 *
+	 * @author SAP SE
+	 * @version 1.97.1
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.ColumnMenu
+	 */
+	var ColumnMenu = Control.extend("sap.m.table.ColumnMenu", {
+		metadata: {
+			library: "sap.m",
+			aggregations: {
+				quickActions: { type: "sap.m.table.QuickActionBase" },
+				items: { type: "sap.m.table.ItemBase" },
+				_quickActions: { type: "sap.m.table.QuickActionBase", visibility: "hidden" },
+				_items: { type: "sap.m.table.ItemBase", visibility: "hidden" }
+			}
+		}
+	});
+
+	var DEFAULT_KEY = "$default";
+
+	ColumnMenu.prototype.applySettings = function (mSettings) {
+		// Only works in JS views, but that's fine. This is only convenience for controls.
+		if (mSettings) {
+			this._addAllToPrivateAggregation(mSettings, "_quickActions");
+			this._addAllToPrivateAggregation(mSettings, "_items");
+		}
+		Control.prototype.applySettings.apply(this, arguments);
+	};
+
+	/**
+	 * Opens the popover at the specified target.
+	 *
+	 * @param {sap.ui.core.Control} oControl This is the control, where the popover will be placed at.
+	 *
+	 * @public
+	 */
+	ColumnMenu.prototype.openBy = function (oControl) {
+		if (!this._oPopover) {
+			this._createPopover();
+		}
+		if (!this._oItemsContainer) {
+			this._initItemsContainer();
+		}
+		this._oPopover.openBy(oControl);
+	};
+
+	/**
+	 * Closes the popover.
+	 *
+	 * @public
+	 */
+	ColumnMenu.prototype.close = function () {
+		this._previousView = null;
+		if (this._oPopover) {
+			this._oPopover.close();
+		}
+	};
+
+	ColumnMenu.prototype.exit = function () {
+		Control.prototype.exit.apply(this, arguments);
+		if (this._oPopover) {
+			delete this._oPopover;
+		}
+		if (this._oItemsContainer) {
+			delete this._oItemsContainer;
+		}
+	};
+
+	ColumnMenu.prototype._addAllToPrivateAggregation = function (mSettings, sAggregationName) {
+		if (mSettings[sAggregationName]) {
+			mSettings[sAggregationName].forEach(function (oItem) {
+				this.addAggregation(sAggregationName, oItem);
+			}.bind(this));
+			delete mSettings[sAggregationName];
+		}
+	};
+
+	ColumnMenu.prototype._createPopover = function () {
+		if (!this._oPopover) {
+			this._oPopover = new ResponsivePopover({
+				showArrow: false,
+				showHeader: false,
+				placement: library.PlacementType.Bottom,
+				content: new AssociativeControl({control: this, height: true}),
+				contentWidth: "500px",
+				horizontalScrolling: false,
+				verticalScrolling: false
+			});
+			this.addDependent(this._oPopover);
+			this._oPopover.attachAfterClose(function () {
+				this.close();
+			}.bind(this));
+
+			this._focusDelegate = {
+				"onAfterRendering": this._focusItem
+			};
+			this._oPopover.addEventDelegate(this._focusDelegate, this);
+			if (this.getItems().length == 0 && !this.getAggregation("_items")) {
+				this._oPopover.attachAfterOpen(this._focusInitialQuickAction.bind(this));
+			}
+		}
+		return this._oPopover;
+	};
+
+	ColumnMenu.prototype._initItemsContainer = function () {
+		var aControlMenuItems = (this.getAggregation("_items") || []).reduce(function (aItems, oItem) {
+			return aItems.concat(oItem.getEffectiveItems());
+		}, []);
+		var aApplicationMenuItems = this.getItems().reduce(function (aItems, oItem) {
+			return aItems.concat(oItem.getEffectiveItems());
+		}, []);
+
+		if (!this._oItemsContainer) {
+			this._createItemsContainer();
+		}
+
+		aControlMenuItems.forEach(function (oColumnMenuItem, iIndex) {
+			this._addView(oColumnMenuItem);
+			iIndex == 0 && this._oItemsContainer.addSeparator();
+		}.bind(this));
+		aApplicationMenuItems.forEach(function (oColumnMenuItem, iIndex) {
+			this._addView(oColumnMenuItem);
+			iIndex == 0 && this._oItemsContainer.addSeparator();
+		}.bind(this));
+	};
+
+	var AssociativeControl = Control.extend("sap.m.table.AssociativeControl", {
+		metadata: {
+			"final": true,
+			properties: {
+				height: {type: "boolean", defaultValue: false}
+			},
+			associations: {
+				control: {type: "sap.ui.core.Control"}
+			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function (oRm, oControl) {
+				oRm.openStart("div", oControl);
+				oControl.getHeight() && oRm.style("height", "100%");
+				oRm.openEnd();
+				oRm.renderControl(sap.ui.getCore().byId(oControl.getControl()));
+				oRm.close("div");
+			}
+		}
+	});
+
+	ColumnMenu.prototype._addView = function (oColumnMenuItem) {
+		var oItem = new AbstractContainerItem({
+			content: new AssociativeControl({
+				control: oColumnMenuItem.getContent(),
+				height: true
+			}),
+			key: oColumnMenuItem.getId(),
+			text: oColumnMenuItem.getLabel(),
+			icon: oColumnMenuItem.getIcon()
+		});
+
+		this._oItemsContainer.addView(oItem);
+		this._setItemVisibility(oColumnMenuItem, oColumnMenuItem.getVisible());
+	};
+
+	ColumnMenu.prototype._createItemsContainer = function () {
+		var oColumnMenu = this;
+
+		this._oBtnCancel =  new Button({
+			text: this._getResourceText("table.COLUMNMENU_CANCEL"),
+			press: function () {
+				var sKey = oColumnMenu._oItemsContainer.getCurrentViewKey();
+				if (oColumnMenu._fireEvent(Core.byId(sKey), "cancel")) {
+					oColumnMenu.close();
+					oColumnMenu.exit();
+				}
+			}
+		});
+		this._oBtnOk = new Button({
+			text: this._getResourceText("table.COLUMNMENU_CONFIRM"),
+			press: function () {
+				var sKey = oColumnMenu._oItemsContainer.getCurrentViewKey();
+				if (oColumnMenu._fireEvent(Core.byId(sKey), "confirm")) {
+					oColumnMenu.close();
+				}
+			}
+		});
+
+		oColumnMenu._oItemsContainer = new Container({
+			listLayout: true,
+			defaultView: DEFAULT_KEY,
+			footer: new Toolbar({
+				content: [
+					new ToolbarSpacer(),
+					this._oBtnOk,
+					this._oBtnCancel
+				]
+			}),
+			beforeViewSwitch: function (oEvent) {
+				var mParameters = oEvent.getParameters();
+
+				if (mParameters.target !== "$default") {
+					var oContainerItem = oColumnMenu._oItemsContainer.getView(mParameters.target);
+					var oColumnMenuItem = oColumnMenu._getItemFromContainerItem(oContainerItem);
+					if (oColumnMenuItem && oColumnMenuItem.firePress && !oColumnMenu._fireEvent(oColumnMenuItem, "press")) {
+						oEvent.preventDefault();
+						return;
+					}
+				}
+			},
+			afterViewSwitch: function (oEvent) {
+				var mParameters = oEvent.getParameters();
+				this.oLayout.setShowFooter(mParameters.target !== "$default");
+
+				oColumnMenu._previousView = mParameters.source;
+				if (mParameters.target !== "$default") {
+					var oContainerItem = oColumnMenu._oItemsContainer.getView(mParameters.target);
+					if (oContainerItem) {
+						var oItem = oColumnMenu._getItemFromContainerItem(oContainerItem);
+						oColumnMenu._updateButtonState(oItem);
+					} else {
+						var oContainerItem = oColumnMenu._oItemsContainer.getView(mParameters.target);
+						var oItem = oColumnMenu._getItemFromContainerItem(oContainerItem);
+						oItem && oItem.focus();
+						this._oPopover && this._oPopover.invalidate();
+					}
+				}
+			}
+		});
+		oColumnMenu._oItemsContainer.getHeader().addContentRight(new Button({
+			text: this._getResourceText("table.COLUMNMENU_RESET"),
+			press: function () {
+				oColumnMenu._fireEvent(Core.byId(oColumnMenu._oItemsContainer.getCurrentViewKey()), "reset", false);
+			}
+		}));
+		this._oPopover.addDependent(oColumnMenu._oItemsContainer);
+		oColumnMenu.addDependent(oColumnMenu._oItemsContainer);
+	};
+
+	ColumnMenu.prototype._fireEvent = function (oColumnMenuEntry, sEventType, bAllowPreventDefault) {
+		var fnHook = oColumnMenuEntry["on" + capitalize(sEventType)];
+		if (bAllowPreventDefault !== false) {
+			var oEvent = jQuery.Event(sEventType);
+			fnHook.call(oColumnMenuEntry, oEvent);
+			return !oEvent.isDefaultPrevented();
+		} else {
+			fnHook.call(oColumnMenuEntry);
+			return true;
+		}
+	};
+
+	ColumnMenu.prototype._getResourceText = function(sText, vValue) {
+		this.oResourceBundle = this.oResourceBundle ? this.oResourceBundle : sap.ui.getCore().getLibraryResourceBundle("sap.m");
+		return sText ? this.oResourceBundle.getText(sText, vValue) : this.oResourceBundle;
+	};
+
+	ColumnMenu.prototype._getItemFromContainerItem = function (oContainerItem) {
+		// Low performance as linear search has to be done
+		var oItem = this.getAggregation("_items") && this.getAggregation("_items").find(function(item) {
+			return item.getId() == oContainerItem.getKey();
+		});
+		if (!oItem) {
+			oItem = this.getAggregation("items") && this.getAggregation("items").find(function(item) {
+				return item.getId() == oContainerItem.getKey();
+			});
+		}
+		return oItem;
+	};
+
+	ColumnMenu.prototype._updateButtonState = function (oItem) {
+		this._oItemsContainer.getHeader().getContentRight()[0].setEnabled(oItem.getButtonSettings()["reset"]["enabled"]);
+		this._oItemsContainer.getHeader().getContentRight()[0].setVisible(oItem.getButtonSettings()["reset"]["visible"]);
+		this._oBtnOk.setVisible(oItem.getButtonSettings()["confirm"]["visible"]);
+		this._oBtnCancel.setVisible(oItem.getButtonSettings()["cancel"]["visible"]);
+	};
+
+	ColumnMenu.prototype._focusItem = function () {
+		if (this._previousView == DEFAULT_KEY) {
+			this._oItemsContainer._getNavBackBtn().focus();
+		} else {
+			var oItem = this._oItemsContainer._getNavigationList().getItems().find(function (oItem) {
+				return oItem.getVisible() && oItem._key === this._previousView;
+			}.bind(this));
+			oItem && oItem.focus();
+		}
+	};
+
+	ColumnMenu.prototype._focusInitialQuickAction = function () {
+		// Does not work with content, which contains multiple items
+		if (this.getItems().length == 0 && !this.getAggregation("_items")) {
+			var aQuickActions = [];
+			if (this.getAggregation("_quickActions")) {
+				aQuickActions = this.getAggregation("_quickActions")[0].getEffectiveQuickActions();
+			} else if (this.getQuickActions().length > 0) {
+				aQuickActions = this.getQuickActions()[0].getEffectiveQuickActions();
+			}
+			aQuickActions.length > 0 && aQuickActions[0].getContent().focus();
+		}
+	};
+
+	ColumnMenu.prototype._setItemVisibility = function (oItem, bVisible) {
+		var oList = this._oItemsContainer._getNavigationList().getItems();
+		var oListItem = oList.find(function (oListItem) {
+			return oListItem._key == oItem.getId();
+		});
+		oListItem && oListItem.setVisible(bVisible);
+	};
+
+	return ColumnMenu;
+});

package/src/sap/m/table/ColumnMenuEntry.js

@@ -0,0 +1,101 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/ui/core/Element"
+], function (
+	Element
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new ColumnMenuEntry.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * This control serves as a base class for elements residing inside the sap.m.table.ColumnMenu.
+	 * This base class is faceless and should be inherited to implement ColumnMenu items and quick actions.
+	 *
+	 * @extends sap.ui.core.Element
+	 *
+	 * @author SAP SE
+	 * @version 1.97.1
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.ColumnMenuEntry
+	 */
+	var ColumnMenuEntry = Element.extend("sap.m.table.ColumnMenuEntry", {
+		metadata: {
+			"abstract": true,
+			library: "sap.m",
+			properties: {
+				visible: {type: "boolean", defaultValue: true}
+			}
+		}
+	});
+
+	/**
+	 * This method can be used to retrieve the ColumnMenu, in which the entry resides in.
+	 *
+	 * If an entry is internally creating entries that use #getMenu or #getParent,
+	 * and returns them in #getEffectiveItems or #getEffectiveQuickActions, they
+	 * must be its children in the control tree.
+	 *
+	 * @returns {sap.m.ColumnMenu} The menu of the entry
+	 * @public
+	 */
+	ColumnMenuEntry.prototype.getMenu = function () {
+		var oElement = this.getParent();
+		while (oElement) {
+			if (oElement.isA("sap.m.table.ColumnMenu")) {
+				return oElement;
+			}
+			oElement = oElement.getMenu();
+		}
+		return undefined;
+	};
+
+	/**
+	 * This method can be used to retrieve the label of an entry.
+	 *
+	 * @returns {string} The label property specified in the control
+	 * @abstract
+	 */
+	ColumnMenuEntry.prototype.getLabel = function () {
+		if (this.getMetadata().hasProperty("label")) {
+			return this.getProperty("label");
+		}
+		throw new Error(this + " does not implement #getLabel");
+	};
+
+	/**
+	 * This method can be used to retrieve the content of an entry.
+	 *
+	 * @returns {sap.ui.core.Control} The control specified in the content aggregation
+	 * @abstract
+	 */
+	ColumnMenuEntry.prototype.getContent = function () {
+		if (this.getMetadata().hasAggregation("content")) {
+			return this.getAggregation("content");
+		}
+		throw new Error(this + " does not implement #getContent");
+	};
+
+	ColumnMenuEntry.prototype.setVisible = function (bVisible) {
+		if (this.getVisible() == bVisible) {
+			return this;
+		}
+
+		this.setProperty("visible", bVisible);
+		this.getMenu() && this.getMenu()._setItemVisibility(this, bVisible);
+		return this;
+	};
+
+	return ColumnMenuEntry;
+});

package/src/sap/m/table/ColumnMenuRenderer.js

@@ -0,0 +1,82 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([], function () {
+    "use strict";
+
+    var ColumnMenuRenderer = {
+        apiVersion: 2
+    };
+
+    ColumnMenuRenderer.render = function (oRm, oColumnMenu) {
+        oRm.openStart("div", oColumnMenu);
+        oRm.class("sapMTCMenu");
+        oRm.class("sapMWrapper");
+        oRm.openEnd();
+        if (oColumnMenu.getQuickActions().length > 0 || oColumnMenu.getAggregation("_quickActions")) {
+            this.renderQuickActions(oRm, oColumnMenu);
+        }
+        if (oColumnMenu.getItems().length > 0 || oColumnMenu.getAggregation("_items")) {
+            this.renderItems(oRm, oColumnMenu);
+        }
+        oRm.close("div");
+    };
+
+    ColumnMenuRenderer.renderQuickActions = function (oRm, oColumnMenu) {
+        oRm.openStart("div");
+        oRm.attr("id", oColumnMenu.getId() + "-quickActions");
+        if (oColumnMenu._oItemsContainer) {
+            if (oColumnMenu._oItemsContainer.getCurrentViewKey() === "$default") {
+                oRm.class("sapMTQAList");
+            } else {
+                oRm.class("sapMTQAListHidden");
+            }
+        } else {
+            oRm.class("sapMTQAList");
+        }
+        oRm.openEnd();
+        // Control quick actions
+        (oColumnMenu.getAggregation("_quickActions") || []).forEach(function (oQuickAction) {
+            oQuickAction.getEffectiveQuickActions().forEach(function (oQuickAction) {
+                this.renderQuickAction(oRm, oQuickAction);
+            }.bind(this));
+        }.bind(this));
+        // Application quick actions
+        oColumnMenu.getQuickActions().forEach(function (oQuickAction) {
+            oQuickAction.getEffectiveQuickActions().forEach(function (oQuickAction) {
+                this.renderQuickAction(oRm, oQuickAction);
+            }.bind(this));
+        }.bind(this));
+        oRm.close("div");
+    };
+
+    ColumnMenuRenderer.renderQuickAction = function (oRm, oQuickAction) {
+        oRm.openStart("div", oQuickAction);
+        oRm.class("sapMQAction");
+        oRm.openEnd();
+        // Label
+        oRm.openStart("div");
+        oRm.class("sapMQALabel");
+        oRm.openEnd();
+        oRm.text(oQuickAction.getLabel());
+        oRm.close("div");
+        // Content
+        oRm.openStart("div");
+        oRm.openEnd();
+        oRm.renderControl(oQuickAction.getContent());
+        oRm.close("div");
+        oRm.close("div");
+    };
+
+    ColumnMenuRenderer.renderItems = function (oRm, oColumnMenu) {
+        oRm.openStart("div");
+        oRm.class("sapMContainerWrapper");
+        oRm.openEnd();
+        oRm.renderControl(oColumnMenu._oItemsContainer);
+        oRm.close("div");
+    };
+
+    return ColumnMenuRenderer;
+});

package/src/sap/m/table/Item.js

@@ -0,0 +1,130 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/m/table/ItemBase"
+], function(
+	ItemBase
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new Item.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * This control serves as a menu item for the sap.m.table.ColumnMenu.
+	 * It can be used to specify control- and application-specific items.
+	 *
+	 * @extends sap.m.table.ItemBase
+	 *
+	 * @author SAP SE
+	 * @version 1.97.1
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.Item
+	 */
+	var Item = ItemBase.extend("sap.m.table.Item", {
+		metadata: {
+			library: "sap.m",
+			properties: {
+				/**
+				 * Defines the label, which should be used for the buttons.
+				 */
+				label: {type: "string"},
+				/**
+				 * Defines the icon for the menu item.
+				 */
+				icon: {type: "sap.ui.core.URI"},
+				/**
+				 * Defines whether the reset button should be shown, when navigating to the item.
+				 */
+				showResetButton: {type: "boolean", defaultValue: true},
+				/**
+				 * Defines whether the reset button should be enabled, when navigating to the item.
+				 */
+				resetButtonEnabled: {type: "boolean", defaultValue: true},
+				/**
+				 * Defines whether the confirm button should be shown, when navigating to the item.
+				 */
+				showConfirmButton: {type: "boolean", defaultValue: true},
+				/**
+				 * Defines whether the cancel button should be shown, when navigating to the item.
+				 */
+				showCancelButton: {type: "boolean", defaultValue: true}
+			},
+			aggregations: {
+				/**
+				 * Defines the content, which should be shown when navigating to the item.
+				 */
+				content: {type: "sap.ui.core.Control", multiple: false}
+			},
+			events: {
+				/**
+				 * This event will be fired, when the reset button was pressed.
+				 */
+				reset: {},
+				/**
+				 * This event will be fired, when the confirm button was pressed.
+				 */
+				confirm: {},
+				/**
+				 * This event will be fired, when the cancel button was pressed.
+				 */
+				cancel: {}
+			}
+		}
+	});
+
+	/**
+	 * @override
+	 */
+	Item.prototype.setShowResetButton = function (bShowResetButton) {
+		this.setProperty("showResetButton", bShowResetButton);
+		this.changeButtonSettings({
+			reset: {visible: bShowResetButton}
+		});
+		return this;
+	};
+
+	/**
+	 * @override
+	 */
+	Item.prototype.setResetButtonEnabled = function (bResetButtonEnabled) {
+		this.setProperty("resetButtonEnabled", bResetButtonEnabled);
+		this.changeButtonSettings({
+			reset: {enabled: bResetButtonEnabled}
+		});
+		return this;
+	};
+
+	/**
+	 * @override
+	 */
+	Item.prototype.setShowConfirmButton = function (bShowConfirmButton) {
+		this.setProperty("showConfirmButton", bShowConfirmButton);
+		this.changeButtonSettings({
+			confirm: {visible: bShowConfirmButton}
+		});
+		return this;
+	};
+
+	/**
+	 * @override
+	 */
+	Item.prototype.setShowCancelButton = function (bShowCancelButton) {
+		this.setProperty("showCancelButton", bShowCancelButton);
+		this.changeButtonSettings({
+			cancel: {visible: bShowCancelButton}
+		});
+		return this;
+	};
+
+	return Item;
+});