@openui5/sap.ui.rta 1.133.1 → 1.135.0

package/src/sap/ui/rta/plugin/annotations/AnnotationChangeDialog.fragment.xml

@@ -9,25 +9,10 @@
 		resizable="false"
 		draggable="true"
 		contentWidth="50rem"
-		contentHeight="25rem"
+		contentHeight="{= ${/singleRename} === true ? 'auto' : '25rem'}"
+		title="{/title}"
+		class="sapUiContentPadding"
 	>
-		<customHeader>
-			<Bar>
-				<contentLeft>
-					<Label
-						id="sapUiRtaChangeAnnotationDialog_title"
-						class="sapUiSmallMargin"
-						text="{/title}"/>
-				</contentLeft>
-				<contentRight>
-					<Button
-						id="sapUiRtaChangeAnnotationDialog_toggleShowAllPropertiesButton"
-						class="sapUiSmallMargin"
-						text="{= ${/showChangedPropertiesOnly} ? ${i18n>ANNOTATION_CHANGE_DIALOG_BUTTON_ALL_PROPERTIES} : ${i18n>ANNOTATION_CHANGE_DIALOG_BUTTON_CHANGED_PROPERTIES}}"
-						press="switchDisplayMode"/>
-				</contentRight>
-			</Bar>
-		</customHeader>
 		<content>
 			<VBox>
 				<MessageStrip
@@ -45,56 +30,58 @@
 					id="sapUiRtaChangeAnnotationDialog_description"
 					visible="{= ${/description}.length > 0}"
 					text="{/description}"/>
-				<SearchField
-					id="sapUiRtaChangeAnnotationDialog_propertiesFilter"
-					placeholder="{i18n>ANNOTATION_CHANGE_DIALOG_PROPERTY_SEARCH}"
-					width="100%"
-					value="{/filterText}"
-					liveChange="onFilterProperties"/>
-				<f:Form editable="false">
+				<HBox
+					id="sapUiRtaChangeAnnotationDialog_filterHBox"
+					fitContainer="true"
+					visible="{= ${/singleRename} === false}"
+				>
+					<SearchField
+						id="sapUiRtaChangeAnnotationDialog_propertiesFilter"
+						placeholder="{i18n>ANNOTATION_CHANGE_DIALOG_PROPERTY_SEARCH}"
+						value="{/filterText}"
+						liveChange="onFilterProperties">
+						<layoutData>
+							<FlexItemData growFactor="1" styleClass="sapUiSmallMarginEnd"/>
+						</layoutData>
+					</SearchField>
+					<HBox alignItems="Center">
+						<Label
+							text="{i18n>ANNOTATION_CHANGE_DIALOG_BUTTON_CHANGED_PROPERTIES}"/>
+						<Switch
+							id="sapUiRtaChangeAnnotationDialog_toggleShowAllPropertiesSwitch"
+							state="{/showChangedPropertiesOnly}"
+							change="switchDisplayMode"
+							customTextOn=" "
+							customTextOff=" "/>
+					</HBox>
+				</HBox>
+				<f:Form editable="true">
 					<f:layout>
 						<f:ResponsiveGridLayout
-							labelSpanXL="3"
-							labelSpanL="3"
-							labelSpanM="3"
+							labelSpanXL="4"
+							labelSpanL="4"
+							labelSpanM="4"
 							labelSpanS="12"
 							adjustLabelSpan="false"
-							emptySpanXL="4"
-							emptySpanL="4"
-							emptySpanM="4"
+							emptySpanXL="0"
+							emptySpanL="0"
+							emptySpanM="0"
 							emptySpanS="0"
 							columnsXL="1"
 							columnsL="1"
 							columnsM="1"
-							singleContainerFullSize="false"/>
+							singleContainerFullSize="true"/>
 					</f:layout>
 					<f:FormContainer
 						id="sapUiRtaChangeAnnotationDialog_propertyList"
-						formElements="{path: '/propertiesToDisplay', templateShareable: false}">
-						<f:FormElement label="{propertyName}">
-							<Select
-								visible="{path: '/valueType', formatter: '.formatters.isValueList'}"
-								selectedKey="{currentValue}"
-								change="onValueListChange"
-								items="{path: '/possibleValues', templateShareable: false}">
-								<core:Item key="{key}" text="{text}" />
-							</Select>
-							<Input
-								visible="{path: '/valueType', formatter: '.formatters.isString'}"
-								value="{currentValue}"
-								change="onStringChange"/>
-							<CheckBox
-								visible="{path: '/valueType', formatter: '.formatters.isBoolean'}"
-								selected="{=!!${currentValue}}"
-								select="onBooleanChange"/>
-						</f:FormElement>
-					</f:FormContainer>
+						formElements="{path: '/propertiesToDisplay', factory: '.editorFactory'}" />
 				</f:Form>
 			</VBox>
 		</content>
 		<beginButton>
 			<Button
 				id="sapUiRtaChangeAnnotationDialog_saveButton"
+				enabled="{= ${path: '/properties', formatter: '.hasChangesFormatter'}}"
 				type="Emphasized"
 				text="{i18n>ANNOTATION_CHANGE_DIALOG_SAVE}"
 				press="onSavePress"

package/src/sap/ui/rta/plugin/annotations/AnnotationChangeDialog.js

@@ -7,19 +7,23 @@
 sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/ui/core/Fragment",
-	"sap/ui/fl/apply/api/FlexRuntimeInfoAPI",
+	"sap/ui/dt/ElementUtil",
 	"sap/ui/fl/write/api/PersistenceWriteAPI",
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/model/resource/ResourceModel",
-	"sap/ui/rta/plugin/annotations/AnnotationChangeDialogController"
+	"sap/ui/rta/plugin/annotations/AnnotationChangeDialogController",
+	"sap/ui/rta/plugin/annotations/AnnotationTypes",
+	"sap/ui/rta/Utils"
 ], function(
 	ManagedObject,
 	Fragment,
-	FlexRuntimeInfoAPI,
+	ElementUtil,
 	PersistenceWriteAPI,
 	JSONModel,
 	ResourceModel,
-	AnnotationChangeDialogController
+	AnnotationChangeDialogController,
+	AnnotationTypes,
+	RtaUtils
 ) {
 	"use strict";
 
@@ -27,7 +31,7 @@ sap.ui.define([
 	 * @class Constructor for a new sap.ui.rta.plugin.annotations.AnnotationChangeDialog.
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.133.1
+	 * @version 1.135.0
 	 * @constructor
 	 * @since 1.132
 	 * @private
@@ -35,21 +39,31 @@ sap.ui.define([
 	 */
 	const AnnotationChangeDialog = ManagedObject.extend("sap.ui.rta.plugin.annotations.AnnotationChangeDialog");
 
+	function replaceCurrentValueWithTextFromControl(aProperties, sPreSelectedProperty, oControl) {
+		const oProperty = aProperties.find((oProperty) => oProperty.annotationPath === sPreSelectedProperty);
+		const aNewLabel = ElementUtil.getLabelForElement(oControl);
+		if (oProperty && aNewLabel) {
+			oProperty.currentValue = aNewLabel;
+			oProperty.originalValue = aNewLabel;
+		}
+	}
+
 	AnnotationChangeDialog.prototype._createDialog = async function() {
 		this._oController = new AnnotationChangeDialogController();
-		const oPopover = await Fragment.load({
+		const oDialog = await Fragment.load({
 			name: "sap.ui.rta.plugin.annotations.AnnotationChangeDialog",
 			controller: this._oController
 		});
+		oDialog.addStyleClass(RtaUtils.getRtaStyleClassName());
 		this.oChangeAnnotationModel = new JSONModel();
-		oPopover.setModel(this.oChangeAnnotationModel);
+		oDialog.setModel(this.oChangeAnnotationModel);
 		const oI18nModel = new ResourceModel({ bundleName: "sap.ui.rta.messagebundle" });
-		oPopover.setModel(oI18nModel, "i18n");
-		return oPopover;
+		oDialog.setModel(oI18nModel, "i18n");
+		return oDialog;
 	};
 
 	AnnotationChangeDialog.prototype._openDialog = function() {
-		this._oPopover.open();
+		this._oDialog.open();
 		return this._oController.initialize();
 	};
 
@@ -62,12 +76,13 @@ sap.ui.define([
 	 * @property {string} properties.annotationPath - Path of the property
 	 * @property {string} properties.propertyName - Name of the property
 	 * @property {string} properties.currentValue - Current value of the property
+	 * @property {string} [properties.label] - Label of the property. If not given, the property name is used
+	 * @property {string} [properties.tooltip] - Tooltip of the property
 	 * @property {object[]} possibleValues - Array of possible values for value list type properties
 	 * @property {string} possibleValues.key - Key of the option
 	 * @property {string} possibleValues.text - Text of the option
 	 * @property {string} [preSelectedProperty] - Name of the property that should be filtered for initially
-	 * @private
-	 * @ui5-restricted
+	 * @public
 	 */
 
 	/**
@@ -75,8 +90,7 @@ sap.ui.define([
 	 * @property {sap.ui.core.Control} oControl - Control for which the annotation change is made
 	 * @property {string} sAnnotation - Annotation name
 	 * @returns {sap.ui.rta.plugin.annotations.AnnotationChangeInfo} - Annotation change info
-	 * @private
-	 * @ui5-restricted
+	 * @public
 	 */
 
 	/**
@@ -84,12 +98,16 @@ sap.ui.define([
 	 *
 	 * @typedef {object} sap.ui.rta.plugin.annotations.AnnotationChangeDefinition
 	 * @property {string} annotationChangeType - Change type
+	 * @property {string} serviceUrl - Url of the OData service
 	 * @property {object} content - Change content
 	 * @property {string} content.annotationPath - Path of the property
 	 * @property {string} content.value - New value
-	 * @property {string} serviceUrl - Url of the OData service
-	 * @private
-	 * @ui5-restricted
+	 * @property {string} content.text - New value as translatable text. If given, the value is ignored
+	 * @property {object} [content.objectTemplateInfo] - Object template to construct a return object.
+	 * If given the applyChange function will return an object as value, which is parsed from the template string.
+	 * @property {string} [content.objectTemplateInfo.templateAsString] - Stringified template to be used for constructing the return object
+	 * @property {string} [content.objectTemplateInfo.placeholder] - Placeholder in the template string. Will be replaced by the new value
+	 * @public
 	 */
 
 	/**
@@ -112,14 +130,31 @@ sap.ui.define([
 			delegate: oDelegate,
 			control: oControl,
 			annotation: sAnnotation,
-			description: sAnnotationDescription = ""
+			description: sAnnotationDescription,
+			singleRename: bSingleRename
 		} = mPropertyBag;
 		const {
 			serviceUrl: sServiceUrl,
-			properties: aProperties,
-			possibleValues: aPossibleValues,
+			properties: aDelegateProperties,
+			possibleValues: aDelegatePossibleValues,
 			preSelectedProperty: sPreSelectedPropertyKey
-		} = oDelegate.getAnnotationsChangeInfo(oControl, sAnnotation);
+		} = await oDelegate.getAnnotationsChangeInfo(oControl, sAnnotation);
+
+		const bObjectAsKey = !!aDelegatePossibleValues?.some((oPossibleValue) => typeof oPossibleValue.key === "object");
+		// the key could be an object which does not work as property for the Select control
+		// therefore the key must be stringified and later parsed
+		const aProperties = aDelegateProperties.map((oProperty) => ({
+			...oProperty,
+			currentValue: bObjectAsKey ? JSON.stringify(oProperty.currentValue) : oProperty.currentValue,
+			originalValue: bObjectAsKey ? JSON.stringify(oProperty.currentValue) : oProperty.currentValue,
+			label: oProperty.label || oProperty.propertyName
+		}));
+		const aPossibleValues = (aDelegatePossibleValues || []).map((oPossibleValue) => ({
+			...oPossibleValue,
+			key: bObjectAsKey ? JSON.stringify(oPossibleValue.key) : oPossibleValue.key
+		}));
+
+		aProperties.sort((oProperty1, oProperty2) => oProperty1.label.localeCompare(oProperty2.label));
 
 		const aExistingChanges = PersistenceWriteAPI._getAnnotationChanges({
 			control: oControl
@@ -129,50 +164,53 @@ sap.ui.define([
 			return oChange.getContent().annotationPath;
 		});
 
-		this._oPopover ||= await this._createDialog();
-
-		const oOriginalProperties = {};
-		aProperties.forEach(({ annotationPath, currentValue }) => {
-			oOriginalProperties[annotationPath] = currentValue;
-		});
+		this._oDialog ||= await this._createDialog();
 
 		const sFilterText = sPreSelectedPropertyKey
-			? aProperties.find((oProperty) => oProperty.annotationPath === sPreSelectedPropertyKey).propertyName
+			? aProperties.find((oProperty) => oProperty.annotationPath === sPreSelectedPropertyKey).label
 			: "";
+		// default size limit is 100, but we need to display all properties.
+		// As the list size is not dynamic, we can set the size limit to the number of properties
+		// the size influences all binding sizes, so we only set it if the number of properties is greater than 100
+		if (aProperties.length > 100) {
+			this.oChangeAnnotationModel.setSizeLimit(aProperties.length);
+		}
+
+		if (bSingleRename) {
+			replaceCurrentValueWithTextFromControl(aProperties, sPreSelectedPropertyKey, oControl);
+		}
+
 		this.oChangeAnnotationModel.setData({
+			objectAsKey: bObjectAsKey,
+			control: oControl,
 			title: sAnnotationTitle,
-			description: sAnnotationDescription,
+			description: sAnnotationDescription || "",
 			properties: aProperties, // all properties
 			changedProperties: aProperties.filter(({ annotationPath }) => aChangedAnnotations.includes(annotationPath)),
-			propertiesToDisplay: aProperties, // switches dynamcially between all properties and changed properties
+			propertiesToDisplay: aProperties, // switches dynamically between all properties and changed properties
 			showChangedPropertiesOnly: false,
 			filterText: sFilterText,
+			singleRename: bSingleRename || false,
 			possibleValues: aPossibleValues,
-			valueType: sAnnotationValueType
+			valueType: sAnnotationValueType,
+			serviceUrl: sServiceUrl
 		});
 		if (sFilterText) {
 			this._oController.filterProperties(sFilterText);
 		}
-		const oChangedProperties = await this._openDialog();
-		this._oPopover.close();
-		return Object.entries(oChangedProperties).map(([sPath, vNewValue]) => {
-			if (oOriginalProperties[sPath] === vNewValue) {
-				return null;
-			}
-			return {
-				serviceUrl: sServiceUrl,
-				content: {
-					annotationPath: sPath,
-					value: vNewValue
-				}
-			};
-		}).filter(Boolean);
+		// Ensure that the model is fully refreshed before opening the dialog
+		this.oChangeAnnotationModel.refresh(true);
+		const aChangedProperties = await this._openDialog();
+		// reset filter to not have a filtered list when opening the dialog again
+		this._oController.filterProperties("");
+		this._oDialog.close();
+		return aChangedProperties;
 	};
 
 	AnnotationChangeDialog.prototype.destroy = function(...aArgs) {
 		ManagedObject.prototype.destroy.apply(this, aArgs);
-		if (this._oPopover) {
-			this._oPopover.destroy();
+		if (this._oDialog) {
+			this._oDialog.destroy();
 		}
 		if (this._oController) {
 			this._oController.destroy();

package/src/sap/ui/rta/plugin/annotations/AnnotationChangeDialogController.js

@@ -5,14 +5,26 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
+	"sap/m/Input",
+	"sap/m/Label",
+	"sap/m/Select",
+	"sap/m/Switch",
 	"sap/ui/core/mvc/Controller",
 	"sap/ui/core/Element",
+	"sap/ui/core/Item",
+	"sap/ui/layout/form/FormElement",
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
 	"sap/ui/rta/plugin/annotations/AnnotationTypes"
 ], function(
+	Input,
+	Label,
+	Select,
+	Switch,
 	Controller,
 	Element,
+	Item,
+	FormElement,
 	Filter,
 	FilterOperator,
 	AnnotationTypes
@@ -23,7 +35,7 @@ sap.ui.define([
 	 * @class Controller for the AnnotationChangeDialog.
 	 * @extends sap.ui.core.mvc.Controller
 	 * @author SAP SE
-	 * @version 1.133.1
+	 * @version 1.135.0
 	 * @constructor
 	 * @since 1.132
 	 * @private
@@ -32,7 +44,6 @@ sap.ui.define([
 	const AnnotationChangeDialogController = Controller.extend("sap.ui.rta.plugin.annotations.AnnotationChangeDialogController");
 
 	AnnotationChangeDialogController.prototype.initialize = function() {
-		this._oChangedProperties = {};
 		return new Promise((resolve) => {
 			this._fnResolveAfterClose = resolve;
 		});
@@ -41,7 +52,7 @@ sap.ui.define([
 	AnnotationChangeDialogController.prototype.filterProperties = function(sQuery) {
 		const aFilters = [];
 		if (sQuery && sQuery.length > 0) {
-			const filter = new Filter("propertyName", FilterOperator.Contains, sQuery);
+			const filter = new Filter("label", FilterOperator.Contains, sQuery);
 			aFilters.push(filter);
 		}
 
@@ -55,9 +66,9 @@ sap.ui.define([
 		this.filterProperties(sQuery);
 	};
 
-	AnnotationChangeDialogController.prototype.switchDisplayMode = function() {
+	AnnotationChangeDialogController.prototype.switchDisplayMode = function(oEvent) {
+		const bShowChangedPropertiesOnly = oEvent.getParameter("state");
 		const oList = Element.getElementById("sapUiRtaChangeAnnotationDialog_propertyList");
-		const bShowChangedPropertiesOnly = !oList.getModel().getProperty("/showChangedPropertiesOnly");
 		oList.getModel().setProperty("/showChangedPropertiesOnly", bShowChangedPropertiesOnly);
 		oList.getModel().setProperty(
 			"/propertiesToDisplay",
@@ -67,42 +78,95 @@ sap.ui.define([
 		);
 	};
 
-	AnnotationChangeDialogController.prototype.onValueListChange = function(oEvent) {
-		const sPath = oEvent.getSource().getBindingContext().getObject().annotationPath;
-		const sSelectedKey = oEvent.getParameters().selectedItem.getKey();
-		this._oChangedProperties[sPath] = sSelectedKey;
-	};
+	AnnotationChangeDialogController.prototype.onSavePress = function(oEvent) {
+		const oModelData = oEvent.getSource().getModel().getData();
+		const aChanges = oModelData.properties
+		.map((oProperty) => {
+			if (oProperty.originalValue === oProperty.currentValue) {
+				return null;
+			}
+			const oChangeSpecificData = {
+				serviceUrl: oModelData.serviceUrl,
+				content: {
+					annotationPath: oProperty.annotationPath
+				}
+			};
+			oChangeSpecificData.content[oModelData.valueType === AnnotationTypes.StringType ? "text" : "value"] =
+			oModelData.objectAsKey ? JSON.parse(oProperty.currentValue) : oProperty.currentValue;
+			return oChangeSpecificData;
+		})
+		.filter(Boolean);
 
-	AnnotationChangeDialogController.prototype.onBooleanChange = function(oEvent) {
-		const sPath = oEvent.getSource().getBindingContext().getObject().annotationPath;
-		const bSelected = oEvent.getParameters().selected;
-		this._oChangedProperties[sPath] = bSelected;
+		this._fnResolveAfterClose(aChanges);
 	};
 
-	AnnotationChangeDialogController.prototype.onStringChange = function(oEvent) {
-		const sPath = oEvent.getSource().getBindingContext().getObject().annotationPath;
-		const sValue = oEvent.getParameters().value;
-		this._oChangedProperties[sPath] = sValue;
+	AnnotationChangeDialogController.prototype.onCancelPress = function() {
+		this._fnResolveAfterClose([]);
 	};
 
-	AnnotationChangeDialogController.prototype.onSavePress = function() {
-		this._fnResolveAfterClose(this._oChangedProperties);
-	};
+	function createEditorField(sValueType) {
+		const onChange = () => {
+			// Property updates are handled via two-way binding
+			// However, the binding of the save button doesn't detect changes
+			// within nested object properties, so it has to be refreshed explicitly
+			const oSaveButton = Element.getElementById("sapUiRtaChangeAnnotationDialog_saveButton");
+			oSaveButton.getBinding("enabled").refresh(true);
+		};
 
-	AnnotationChangeDialogController.prototype.onCancelPress = function() {
-		this._fnResolveAfterClose({});
-	};
+		if (sValueType === AnnotationTypes.ValueListType) {
+			const oSelect = new Select({
+				selectedKey: "{currentValue}",
+				change: onChange
+			});
+
+			const oItemTemplate = new Item({
+				key: "{key}",
+				text: "{text}"
+			});
+
+			oSelect.bindItems({
+				path: "/possibleValues",
+				template: oItemTemplate,
+				templateShareable: false
+			});
+
+			return oSelect;
+		}
 
-	AnnotationChangeDialogController.prototype.formatters = {
-		isValueList(sType) {
-			return sType === AnnotationTypes.ValueListType;
-		},
-		isBoolean(sType) {
-			return sType === AnnotationTypes.BooleanType;
-		},
-		isString(sType) {
-			return sType === AnnotationTypes.StringType;
+		if (sValueType === AnnotationTypes.StringType) {
+			return new Input({
+				value: "{currentValue}",
+				change: onChange
+			});
 		}
+
+		if (sValueType === AnnotationTypes.BooleanType) {
+			return new Switch({
+				state: "{currentValue}",
+				change: onChange
+			});
+		}
+
+		throw new Error(`Unsupported value type: ${sValueType}`);
+	}
+
+	AnnotationChangeDialogController.prototype.editorFactory = function(sId, oContext) {
+		const sValueType = oContext.getProperty("/valueType");
+
+		return new FormElement({
+			id: sId,
+			label: new Label({
+				text: "{= ${label} || ${propertyName}}",
+				tooltip: "{tooltip}"
+			}),
+			fields: [
+				createEditorField.call(this, sValueType)
+			]
+		});
+	};
+
+	AnnotationChangeDialogController.prototype.hasChangesFormatter = function(aProperties) {
+		return aProperties?.some((oProperty) => oProperty.originalValue !== oProperty.currentValue);
 	};
 
 	return AnnotationChangeDialogController;