@sapui5/sap.suite.ui.generic.template 1.151.1 → 1.153.0

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillFormRenderer.js

@@ -2,10 +2,11 @@ sap.ui.define([
     "sap/ui/comp/smartform/GroupElement",
     "sap/ui/comp/smartfield/SmartField",
     "sap/m/Text",
+    "sap/m/Link",
+    "sap/m/Button",
     "sap/ui/layout/form/ColumnElementData",
-    "sap/suite/ui/generic/template/genericUtilities/FeLogger",
-    "sap/suite/ui/generic/template/genericUtilities/FeError"
-], function(GroupElement, SmartField, Text, ColumnElementData, FeLogger, FeError) {
+    "sap/suite/ui/generic/template/genericUtilities/FeLogger"
+], function(GroupElement, SmartField, Text, Link, Button, ColumnElementData, FeLogger) {
     "use strict";
 
     var sClassName = "lib.ai.EasyFill.EasyFillFormRenderer";
@@ -28,103 +29,101 @@ sap.ui.define([
     return {
 
         /**
-         * Populates a target SmartForm group with GroupElements for the given list of field names.
-         * For each field:
-         * - Creates an editable SmartField bound to the transient context (if updatable)
-         *   alongside a read-only "Previously:" SmartField bound to the original OP context.
-         * - Creates a display-only SmartField bound to the OP context (if non-updatable).
+         * Collects all SmartForm controls from an ObjectPageLayout.
+         * In condensed mode the SmartForm is nested inside a wrapper VBox; this helper
+         * handles that one-level-deep wrapping transparently.
+         * Extracted as a shared helper so EasyFillHandler no longer duplicates this walk.
          *
-         * This function is called asynchronously (via setTimeout) to allow the SmartForm DOM to render
-         * before GroupElements are injected.
-         *
-         * @param {string} sId - the CustomData "id" value identifying the target SmartForm group
-         * @param {Array<string>} aFields - array of property names to render as SmartFields
-         * @param {string} sEasyFillMode - current layout mode (Condensed / ObjectPage) — for future use
-         * @param {object} oController - MVC controller (used to byId the ObjectPageLayout)
-         * @param {object} oTransientContextForEasyFill - transient OData context for AI-suggested values
-         * @param {object} oObjectPageContext - original ObjectPage binding context (current values)
-         * @param {object} mUpdatableLookupMap - map of { fieldName: value } for updatable fields only
-         * @param {object} oLLMData - flat map of { fieldName: aiValue } from the LLM response
-         * @returns {boolean} always returns true (used as a formatter return value in XML)
+         * @param {object} oObjectPageLayout - sap.uxap.ObjectPageLayout
+         * @returns {Array<sap.ui.comp.smartform.SmartForm>}
          */
-        populateSmartFields: function(sId, aFields, sEasyFillMode, oController, oTransientContextForEasyFill, oObjectPageContext, mUpdatableLookupMap, oLLMData, fnOnFieldChange) {
-            var oObjectPageLayout = oController.byId("EasyFillObjectPageLayout");
-            if (!oObjectPageLayout || !Array.isArray(aFields) || aFields.length === 0) {
-                return true;
-            }
-
-            var sPreviouslyLabel = oController.getView().getModel("i18n").getResourceBundle().getText("EASY_FILL_PREVIOUSLY_LABEL");
-
-            // Defer injection until after the SmartForm has rendered into the DOM
-            setTimeout(function() {
-                var oTargetGroup = null;
-
-                // Walk the ObjectPageLayout section hierarchy to find the group
-                // matching the given CustomData "id" value.
-                // In condensed mode the SmartForm may be nested inside a wrapper VBox
-                // (used to prevent BlockLayout from placing the table side-by-side with
-                // the SmartForm on resize). We therefore check one level deeper when the
-                // direct block is not a SmartForm.
-                oObjectPageLayout.getSections().forEach(function(oSection) {
-                    oSection.getSubSections().forEach(function(oSubSection) {
-                        oSubSection.getBlocks().forEach(function(oBlock) {
-                            var aSmartFormCandidates = [];
-                            if (oBlock.isA("sap.ui.comp.smartform.SmartForm")) {
-                                aSmartFormCandidates.push(oBlock);
-                            } else if (typeof oBlock.getItems === "function") {
-                                // Look one level inside (e.g. condensed-mode wrapper VBox)
-                                oBlock.getItems().forEach(function(oItem) {
-                                    if (oItem.isA("sap.ui.comp.smartform.SmartForm")) {
-                                        aSmartFormCandidates.push(oItem);
-                                    }
-                                });
-                            }
-                            aSmartFormCandidates.forEach(function(oSmartForm) {
-                                oSmartForm.getGroups().forEach(function(oGroup) {
-                                    var oMatchedCustomData = oGroup.getCustomData().find(function(oData) {
-                                        return oData.getKey() === "id" && oData.getValue() === sId;
-                                    });
-                                    if (oMatchedCustomData) {
-                                        oTargetGroup = oGroup;
-                                    }
-                                });
+        collectSmartForms: function(oObjectPageLayout) {
+            var aForms = [];
+            if (!oObjectPageLayout) { return aForms; }
+            oObjectPageLayout.getSections().forEach(function(oSection) {
+                oSection.getSubSections().forEach(function(oSubSection) {
+                    oSubSection.getBlocks().forEach(function(oBlock) {
+                        if (oBlock.isA("sap.ui.comp.smartform.SmartForm")) {
+                            aForms.push(oBlock);
+                        } else if (typeof oBlock.getItems === "function") {
+                            oBlock.getItems().forEach(function(oItem) {
+                                if (oItem.isA("sap.ui.comp.smartform.SmartForm")) {
+                                    aForms.push(oItem);
+                                }
                             });
-                        });
+                        }
                     });
                 });
+            });
+            return aForms;
+        },
 
-                if (!oTargetGroup) {
-                    oLogger.warning("populateSmartFields: no group found with id '" + sId + "'");
-                    return;
-                }
+        /**
+         * Finds a SmartForm.Group by its CustomData "id" value within an ObjectPageLayout.
+         * Returns null if not found. O(groups) — linear in the number of groups across all forms.
+         *
+         * @param {object} oObjectPageLayout - sap.uxap.ObjectPageLayout
+         * @param {string} sId - the CustomData "id" value to match
+         * @returns {sap.ui.comp.smartform.Group|null}
+         */
+        findGroupById: function(oObjectPageLayout, sId) {
+            var oFound = null;
+            this.collectSmartForms(oObjectPageLayout).some(function(oSmartForm) {
+                return oSmartForm.getGroups().some(function(oGroup) {
+                    var bMatch = oGroup.getCustomData().some(function(oData) {
+                        return oData.getKey() === "id" && oData.getValue() === sId;
+                    });
+                    if (bMatch) { oFound = oGroup; }
+                    return bMatch;
+                });
+            });
+            return oFound;
+        },
+
+        /**
+         * Populates a SmartForm.Group (looked up by CustomData "id" walk via findGroupById) with
+         * GroupElements containing dual SmartFields. Called DIRECTLY by EasyFillHandler
+         * after the LLM result arrives — not via a formatter, not via setTimeout.
+         *
+         * The group is created by the sections= JSONModel binding in the XML fragment.
+         * If the group is not yet in the DOM when called, an afterRendering delegate on the
+         * OPL retries injection once the binding has created the controls.
+         *
+         * @param {string}   sGroupId                    - the CustomData "id" value of the target SmartForm.Group
+         * @param {Array}    aFields                     - field names to render
+         * @param {object}   oController                 - MVC controller
+         * @param {object}   oTransientContextForEasyFill
+         * @param {object}   oObjectPageContext
+         * @param {object}   mUpdatableLookupMap         - { fieldName: aiValue } updatable only
+         * @param {object}   oLLMData                    - { fieldName: aiValue } full LLM result
+         * @param {function} fnOnFieldChange
+         */
+        populateGroupFields: function(sGroupId, aFields, oController, oTransientContextForEasyFill, oObjectPageContext, mUpdatableLookupMap, oLLMData, fnOnFieldChange) {
+            if (!Array.isArray(aFields) || aFields.length === 0) { return; }
 
-                // Clear any previously rendered GroupElements before re-populating
-                oTargetGroup.destroyGroupElements();
+            var oObjectPageLayout = oController.byId("EasyFillObjectPageLayout");
+            var oRb = oController.getView().getModel("i18n").getResourceBundle();
+            var sOriginalValueLabel = oRb.getText("EASY_FILL_ORIGINAL_VALUE_LABEL");
+            var sProposedValueLabel = oRb.getText("EASY_FILL_PROPOSED_VALUE_LABEL");
+            var sRevertTooltip = oRb.getText("EASY_FILL_REVERT_FIELD_TOOLTIP");
+            var that = this;
+
+            function tryInject() {
+                var oGroup = that.findGroupById(oObjectPageLayout, sGroupId);
+                if (!oGroup || oGroup.bIsDestroyed) { return false; }
+
+                oGroup.destroyGroupElements();
 
                 aFields.forEach(function(sKey) {
                     var bIsEditable = Object.prototype.hasOwnProperty.call(mUpdatableLookupMap || {}, sKey);
 
-                    var oGroupElement = new GroupElement({
-                        useHorizontalLayout: false
-                    });
-
-                    /**
-                     * Primary SmartField:
-                     * - If editable: bound to transient context, shows AI-suggested value
-                     * - If non-editable: bound to OP context, display-only
-                     */
                     var oSmartField = new SmartField({
                         value: "{" + sKey + "}",
                         editable: bIsEditable,
                         enabled: bIsEditable,
                         contextEditable: bIsEditable,
-                        layoutData: new ColumnElementData({
-                            cellsSmall: 12,
-                            cellsLarge: 12
-                        }),
+                        layoutData: new ColumnElementData({ cellsSmall: 12, cellsLarge: 12 }),
                         editableChanged: function(oEvent) {
-                            // Prevent the SmartField from toggling its own editability;
-                            // editability is controlled exclusively by EasyFill logic
                             if (oEvent.getParameter("editable") !== bIsEditable) {
                                 oEvent.getSource().setEditable(bIsEditable);
                             }
@@ -132,45 +131,17 @@ sap.ui.define([
                     });
 
                     if (!bIsEditable) {
-                        // Keep read-only behavior, but render like an input field (v4-like visual parity)
                         oSmartField.addStyleClass("sapUiEasyFillReadOnlyInputLike sapMInputBaseContentWrapper");
                     }
 
-                    // Notify on user edits so SmartForm validity can re-gate the Confirm button.
                     if (bIsEditable && typeof fnOnFieldChange === "function") {
                         oSmartField.attachChange(fnOnFieldChange);
-
-                        // Validate AI-seeded values on initial load — mirrors ObjectPage behaviour.
-                        //
-                        // In the OP, validation triggers because when a user TYPES a value the browser
-                        // fires a change event which causes UI5 to call setExternalValue() on the inner
-                        // control's binding. setExternalValue() has no fast-path: it always calls
-                        // parseValue → validateValue → OData value-list lookup. If the lookup fails the
-                        // binding calls setInvalidValue() + checkDataState() → ManagedObject fires
-                        // validationError → inner control gets valueState="Error" (red mark).
-                        //
-                        // SmartForm.check() / SmartField.checkValuesValidity() do NOT work for
-                        // AI-seeded values because SmartField._checkErrors() contains a fast-path:
-                        //   if (!isControlDirty() && formattedModelValue === displayedValue) → skip
-                        // AI values always satisfy this (model = display = AI value, user never typed),
-                        // so _checkErrors() short-circuits to "valid" without the OData lookup.
-                        //
-                        // Fix: after innerControlsCreated, call setExternalValue() on the inner
-                        // control's own binding with the currently displayed value. This is exactly
-                        // the same path the OP uses when the user types. For async types (TextArrangement
-                        // with ValueList) the call starts the OData lookup:
-                        //   valid value   → resolves quietly, no red mark
-                        //   invalid value → rejects → setInvalidValue + checkDataState → red mark
-                        // Non-async types fall through to a plain fnOnFieldChange call because
-                        // SmartForm.check() already handles them correctly (no fast-path for sync).
                         oSmartField.attachInnerControlsCreated(function() {
                             var oInnerControl = oSmartField.getFirstInnerControl();
                             if (oInnerControl && typeof oInnerControl.getValue === "function") {
                                 var oBinding = oInnerControl.getBinding("value");
                                 var oType = oBinding && typeof oBinding.getType === "function" && oBinding.getType();
                                 if (oType && oType.async && typeof oBinding.setExternalValue === "function") {
-                                    // setExternalValue replicates the "user typed this value" path:
-                                    // parseValue → validateValue → OData lookup → validationError/Success
                                     Promise.resolve(oBinding.setExternalValue(oInnerControl.getValue()))
                                         .catch(Function.prototype)
                                         .finally(fnOnFieldChange);
@@ -181,69 +152,123 @@ sap.ui.define([
                         });
                     }
 
-                    /**
-                     * "Previously:" SmartField (read-only):
-                     * - Only shown for editable fields to display the current OP value for comparison
-                     * - Bound to the original ObjectPage context
-                     */
-                    var oSmartFieldPrev = new SmartField({
-                        value: "{" + sKey + "}",
-                        editable: false,
-                        enabled: false,
-                        contextEditable: false,
-                        showLabel: false,
-                        layoutData: new ColumnElementData({
-                            cellsSmall: 9,
-                            cellsLarge: 9
-                        }),
-                        editableChanged: function(oEvent) {
-                            // Always keep the "previously" field read-only
-                            if (oEvent.getParameter("editable") !== false) {
-                                oEvent.getSource().setEditable(false);
-                            }
-                        }
-                    });
+                    // Hoist vAIValue so it can be reused when seeding the transient context below
+                    var vAIValue = oLLMData[sKey];
 
                     if (oTransientContextForEasyFill) {
-                        // Primary field always uses transient context to show AI-proposed value.
-                        // Field editability is controlled by bIsEditable.
                         oSmartField.setBindingContext(oTransientContextForEasyFill);
-
-                        // Only seed the transient context with the AI-suggested value on the first
-                        // population. On subsequent calls (e.g. mode switch), the transient context
-                        // already holds the current value — overwriting it would discard user edits.
                         if (oTransientContextForEasyFill.getProperty(sKey) === undefined) {
-                            oTransientContextForEasyFill.setProperty(sKey, oLLMData[sKey]);
+                            oTransientContextForEasyFill.setProperty(sKey, vAIValue);
                         }
                     } else {
-                        // Fallback: without transient context, bind to original OP context.
                         oSmartField.setBindingContext(oObjectPageContext);
                     }
 
-                    // Previous value is always shown from the original ObjectPage context.
-                    oSmartFieldPrev.setBindingContext(oObjectPageContext);
+                    // Read the current (pre-AI) value as a plain string for display.
+                    var vCurrentValue = (oObjectPageContext && typeof oObjectPageContext.getProperty === "function")
+                        ? oObjectPageContext.getProperty(sKey) : null;
+                    var sCurrentValue;
+                    if (vCurrentValue === null || vCurrentValue === undefined || vCurrentValue === "") {
+                        sCurrentValue = "-";
+                    } else if (vCurrentValue instanceof Date) {
+                        sCurrentValue = vCurrentValue.toLocaleDateString();
+                    } else if (typeof vCurrentValue === "object") {
+                        sCurrentValue = "-";
+                    } else {
+                        sCurrentValue = String(vCurrentValue);
+                    }
+
+                    var oGroupElement = new GroupElement({ useHorizontalLayout: false });
+                    oGroupElement.addElement(oSmartField);
+
+                    // "Original Value:" text shown for all fields (editable and non-editable)
+                    var oOriginalValueText = new Text({
+                        text: sOriginalValueLabel + " " + sCurrentValue,
+                        wrapping: false
+                    }).addStyleClass("sapEasyFillPreviouslyLabel");
+                    oGroupElement.addElement(oOriginalValueText);
 
-                    // Build the GroupElement: [label+primary SmartField] [Previously: label] [preview SmartField]
-                    oGroupElement.addElement(oSmartField); // SmartField provides the label
-                    oGroupElement.addElement(new Text({
-                        text: sPreviouslyLabel,
-                        layoutData: new ColumnElementData({
-                            cellsSmall: 3,
-                            cellsLarge: 3
-                        })
-                    }).addStyleClass("sapEasyFillPreviouslyLabel"));
-                    oGroupElement.addElement(oSmartFieldPrev);
-                    oTargetGroup.addGroupElement(oGroupElement);
+                    // Toggle controls (revert button + proposed value link) only for editable fields
+                    if (bIsEditable) {
+                        var bReverted = false;
+
+                        var oRevertButton = new Button({
+                            icon: "sap-icon://undo",
+                            type: "Transparent",
+                            tooltip: sRevertTooltip
+                        }).addStyleClass("sapEasyFillRevertButton");
+
+                        // State 2 row: "Proposed Value: <aiValue>" clickable link — hidden until user reverts
+                        var sAIDisplayValue;
+                        if (vAIValue === null || vAIValue === undefined || vAIValue === "") {
+                            sAIDisplayValue = "-";
+                        } else if (vAIValue instanceof Date) {
+                            sAIDisplayValue = vAIValue.toLocaleDateString();
+                        } else if (typeof vAIValue === "object") {
+                            sAIDisplayValue = "-";
+                        } else {
+                            sAIDisplayValue = String(vAIValue);
+                        }
+
+                        var oProposedValueLink = new Link({
+                            text: sProposedValueLabel + " " + sAIDisplayValue,
+                            wrapping: false,
+                            visible: false,
+                            icon: "sap-icon://ai"
+                        }).addStyleClass("sapEasyFillProposedValueLink");
+
+                        // Revert button: State 1 → State 2
+                        oRevertButton.attachPress(function() {
+                            if (bReverted) { return; }
+                            bReverted = true;
+                            if (oTransientContextForEasyFill) {
+                                oTransientContextForEasyFill.setProperty(sKey, vCurrentValue);
+                            }
+                            oOriginalValueText.setVisible(false);
+                            oRevertButton.setVisible(false);
+                            oProposedValueLink.setVisible(true);
+                            if (typeof fnOnFieldChange === "function") { fnOnFieldChange(); }
+                        });
+
+                        // Proposed Value link: State 2 → State 1
+                        oProposedValueLink.attachPress(function() {
+                            if (!bReverted) { return; }
+                            bReverted = false;
+                            if (oTransientContextForEasyFill) {
+                                oTransientContextForEasyFill.setProperty(sKey, vAIValue);
+                            }
+                            oProposedValueLink.setVisible(false);
+                            oOriginalValueText.setVisible(true);
+                            oRevertButton.setVisible(true);
+                            if (typeof fnOnFieldChange === "function") { fnOnFieldChange(); }
+                        });
+
+                        oGroupElement.addElement(oRevertButton);
+                        oGroupElement.addElement(oProposedValueLink);
+                    }
+
+                    oGroup.addGroupElement(oGroupElement);
                 });
 
-                // Trigger initial SmartForm validation now that all SmartFields are rendered
-                if (typeof fnOnFieldChange === "function") {
-                    fnOnFieldChange();
-                }
-                oLogger.debug("populateSmartFields: populated " + aFields.length + " fields for group '" + sId + "'");
-            }, 0);
+                if (typeof fnOnFieldChange === "function") { fnOnFieldChange(); }
+                oLogger.debug("populateGroupFields: " + aFields.length + " fields in group '" + sGroupId + "'");
+                return true;
+            }
 
-            return true;
+            // If the group control exists already (e.g. mode switch on existing sections),
+            // inject immediately. Otherwise the sections= binding hasn't created the group
+            // control yet — attach a one-shot afterRendering on the OPL to retry once
+            // the new sections are in the DOM.
+            if (!tryInject()) {
+                if (!oObjectPageLayout) { return; }
+                var oDelegate = {
+                    onAfterRendering: function() {
+                        oObjectPageLayout.removeEventDelegate(oDelegate);
+                        tryInject();
+                    }
+                };
+                oObjectPageLayout.addEventDelegate(oDelegate);
+            }
         },
 
         /**