@sapui5/sap.suite.ui.generic.template 1.147.2 → 1.148.1

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

@@ -0,0 +1,491 @@
+sap.ui.define([
+    "sap/ui/comp/smartfield/SmartField",
+    "sap/m/Text",
+    "sap/m/Title",
+    "sap/m/Table",
+    "sap/m/Column",
+    "sap/m/ColumnListItem",
+    "sap/m/VBox",
+    "sap/m/HBox",
+    "sap/m/SegmentedButton",
+    "sap/m/SegmentedButtonItem",
+    "sap/suite/ui/generic/template/genericUtilities/FeLogger",
+    "sap/suite/ui/generic/template/genericUtilities/FeError"
+], function(SmartField, Text, Title, Table, Column, ColumnListItem, VBox, HBox, SegmentedButton, SegmentedButtonItem, FeLogger, FeError) {
+    "use strict";
+
+    var sClassName = "lib.ai.EasyFill.EasyFillTableRenderer";
+    var oLogger = new FeLogger(sClassName).getLogger();
+    var iMaxPreviewRows = 20;
+
+    /**
+     * EasyFillTableRenderer
+     *
+     * Responsible for rendering the SmartTable collection preview in the EasyFill dialog.
+     * For each collection (navigation property) with LLM-suggested row updates, this module:
+     *
+    * 1. Creates transient OData row contexts for preview rendering.
+     * 2. Creates a "Previous Values" read-only table and a "New Values" editable SmartField table.
+     * 3. Renders a SegmentedButton toggle between the two views.
+    * 4. Provides reset logic to discard staged values if the user cancels.
+     *
+     * The table preview container (VBox#EasyFillTablePreviewContainer) in the dialog XML is populated
+     * programmatically — no table rows are declared in the fragment XML.
+     */
+    return {
+
+        /**
+         * Renders collection (SmartTable) previews into the EasyFillTablePreviewContainer VBox.
+         * For each collection with AI-suggested updates:
+         * - Creates transient staging contexts for the preview rows
+         * - Creates a Previous/New table pair with a toggle SegmentedButton
+         * - Appends the section to the container
+         *
+         * @param {object} mCollectionUpdates - map of { navProperty: [ rowUpdate ] } from AI response
+         * @param {object} mFieldMapping - full LLM field mapping (used to get item properties and descriptions)
+         * @param {Array} aTableValidationErrors - validation errors from value-help checks
+         * @param {object} oController - MVC controller (used to byId the container)
+         * @param {object} oRb - i18n resource bundle
+         * @param {object} mCollectionState - collection tracking state { mCollectionRowContexts, mCollectionRowContextsByPath, mCollectionProperties }
+         * @param {object} oTableStagingState - mutable table staging state { mStagedRows }
+         * @param {object} oObjectPageModel - the OData model used to create transient staging contexts
+         * @param {function} fnOnTableFieldChange - callback invoked when a preview table cell changes
+         */
+        renderCollectionPreviews: function(mCollectionUpdates, mFieldMapping, aTableValidationErrors, oController, oRb, mCollectionState, oTableStagingState, oObjectPageModel, fnOnTableFieldChange) {
+            var oTablePreviewContainer = oController.byId("EasyFillTablePreviewContainer");
+            if (!oTablePreviewContainer) {
+                oLogger.warning("renderCollectionPreviews: EasyFillTablePreviewContainer not found");
+                return;
+            }
+
+            // Remove all previously rendered table sections
+            oTablePreviewContainer.destroyItems();
+
+            this._initializeStagedCollectionRows(
+                mCollectionUpdates,
+                mFieldMapping,
+                mCollectionState,
+                oTableStagingState,
+                oObjectPageModel
+            );
+
+            var that = this;
+            Object.keys(mCollectionUpdates).forEach(function(sCollectionName) {
+                var oCollectionMeta = mFieldMapping[sCollectionName];
+                if (!oCollectionMeta || !oCollectionMeta.itemProperties) {
+                    return;
+                }
+
+                var aPropertyNames = Object.keys(oCollectionMeta.itemProperties || {});
+                if (!aPropertyNames.length) {
+                    return;
+                }
+                var aPreviewRows = (oTableStagingState.mStagedRows[sCollectionName] || []).filter(function(oStagedRow) {
+                    return oStagedRow.isPreviewVisible;
+                });
+
+                if (!aPreviewRows.length) {
+                    return;
+                }
+
+                // Previous values table (read-only, initially hidden)
+                var aPreviousRows = aPreviewRows.map(function(oPreviewRow) {
+                    return that._buildCollectionPreviewRowFromContext(aPropertyNames, oPreviewRow.realContext);
+                });
+                var oPreviousTable = that._createPreviewTable(aPropertyNames, oCollectionMeta.itemProperties, aPreviousRows);
+                oPreviousTable.setVisible(false);
+
+                // New values table (editable SmartFields, initially visible)
+                var oNewTable = that._createEditableNewTable(
+                    aPropertyNames,
+                    oCollectionMeta.itemProperties,
+                    aPreviewRows,
+                    sCollectionName,
+                    mCollectionState,
+                    fnOnTableFieldChange
+                );
+
+                // Section title showing collection label and row count
+                var oSectionTitle = new Title({
+                    level: "H5",
+                    text: (oCollectionMeta.description || sCollectionName) + " (" + aPreviewRows.length + ")"
+                });
+
+                // Toggle button between "Previous" and "New" views
+                var oSegmentedButton = new SegmentedButton({
+                    selectedKey: "new",
+                    width: "auto",
+                    items: [
+                        new SegmentedButtonItem({ key: "previous", text: oRb.getText("EASY_FILL_TABLE_VIEW_PREVIOUS"), width: "auto" }),
+                        new SegmentedButtonItem({ key: "new", text: oRb.getText("EASY_FILL_TABLE_VIEW_NEW"), width: "auto" })
+                    ],
+                    selectionChange: function() {
+                        var sKey = oSegmentedButton.getSelectedKey();
+                        oPreviousTable.setVisible(sKey === "previous");
+                        oNewTable.setVisible(sKey === "new");
+                    }
+                });
+
+                var oHeader = new HBox({
+                    justifyContent: "SpaceBetween",
+                    items: [oSectionTitle, oSegmentedButton]
+                }).addStyleClass("sapUiSmallMarginTop");
+
+                var oSection = new VBox({
+                    items: [oHeader, oPreviousTable, oNewTable]
+                }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTableSection");
+
+                oTablePreviewContainer.addItem(oSection);
+                oLogger.debug("renderCollectionPreviews: rendered collection '" + sCollectionName + "' with " + aPreviewRows.length + " rows");
+            });
+        },
+
+        /**
+         * Resets and clears all transient collection contexts created for table preview staging.
+         *
+         * @param {object} oTableStagingState - table staging state { mStagedRows }
+         * @param {object} oObjectPageModel - the OData model
+         */
+        resetStagedCollectionContexts: function(oTableStagingState, oObjectPageModel) {
+            var aTransientPaths = [];
+
+            Object.keys((oTableStagingState && oTableStagingState.mStagedRows) || {}).forEach(function(sCollectionName) {
+                (oTableStagingState.mStagedRows[sCollectionName] || []).forEach(function(oStagedRow) {
+                    var oTransientContext = oStagedRow.transientContext;
+                    var sTransientPath = oTransientContext && oTransientContext.getPath && oTransientContext.getPath();
+                    if (sTransientPath) {
+                        aTransientPaths.push(sTransientPath);
+                    }
+                });
+            });
+
+            if (aTransientPaths.length && oObjectPageModel) {
+                oObjectPageModel.resetChanges(aTransientPaths, false, true);
+            }
+
+            this._clearStagedCollectionState(oTableStagingState);
+            oLogger.debug("resetStagedCollectionContexts: transient table contexts reset");
+        },
+
+        // ─── Private Helpers ─────────────────────────────────────────────────────
+
+        _initializeStagedCollectionRows: function(mCollectionUpdates, mFieldMapping, mCollectionState, oTableStagingState, oObjectPageModel) {
+            var that = this;
+            this._clearStagedCollectionState(oTableStagingState);
+
+            Object.keys(mCollectionUpdates || {}).forEach(function(sCollectionName) {
+                var oCollectionMeta = mFieldMapping[sCollectionName];
+                var aRowUpdates = mCollectionUpdates[sCollectionName] || [];
+                var aCollectionRowContexts = mCollectionState.mCollectionRowContexts[sCollectionName] || [];
+                var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+                var aPropertyNames = Object.keys((oCollectionMeta && oCollectionMeta.itemProperties) || {});
+
+                if (!oCollectionMeta || !oCollectionMeta.entitySet || !aPropertyNames.length) {
+                    return;
+                }
+
+                var mUpdatesByIdentity = Object.create(null);
+                aRowUpdates.forEach(function(oRowUpdate, iUpdateIndex) {
+                    var oResolvedUpdate = that._resolveCollectionRowContext(sCollectionName, oRowUpdate, mCollectionState);
+                    mUpdatesByIdentity[that._getCollectionRowIdentity(oResolvedUpdate, oRowUpdate, iUpdateIndex)] = oRowUpdate;
+                });
+
+                oTableStagingState.mStagedRows[sCollectionName] = [];
+
+                aCollectionRowContexts.forEach(function(oRealContext, iRowIndex) {
+                    var oResolvedRow = { context: oRealContext, rowIndex: iRowIndex };
+                    var sIdentity = that._getCollectionRowIdentity(oResolvedRow, null, iRowIndex);
+                    var oRowUpdate = mUpdatesByIdentity[sIdentity];
+                    var bIsPreviewVisible = iRowIndex < iMaxPreviewRows;
+
+                    if (!bIsPreviewVisible && !oRowUpdate) {
+                        return;
+                    }
+
+                    var oTransientContext = that._createTransientCollectionContext(oCollectionMeta.entitySet, oObjectPageModel);
+                    if (!oTransientContext) {
+                        return;
+                    }
+
+                    var oRealRowObject = oRealContext.getObject && oRealContext.getObject();
+                    that._seedTransientContextFromRowObject(oTransientContext, oRealRowObject);
+                    that._applyRowUpdateToTransientContext(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject);
+
+                    oTableStagingState.mStagedRows[sCollectionName].push({
+                        realContext: oRealContext,
+                        transientContext: oTransientContext,
+                        rowIndex: iRowIndex,
+                        propertyNames: aPropertyNames,
+                        isPreviewVisible: bIsPreviewVisible
+                    });
+                });
+            });
+        },
+
+        /**
+         * Creates a read-only sap.m.Table for displaying table row data (used for "Previous Values" view).
+         * All cells are rendered as plain Text controls.
+         *
+         * @param {Array<string>} aPropertyNames - ordered list of property names to show as columns
+         * @param {object} oItemProperties - map of { propName: { description, dataType } }
+         * @param {Array<object>} aRows - array of plain row value objects
+         * @param {function} [fnCellFormatter] - optional custom cell formatter (oRow, sPropName, sRawValue) → string
+         * @returns {sap.m.Table}
+         */
+        _createPreviewTable: function(aPropertyNames, oItemProperties, aRows, fnCellFormatter) {
+            var aColumns = aPropertyNames.map(function(sPropertyName) {
+                return new Column({
+                    header: new Text({
+                        text: (oItemProperties[sPropertyName] && oItemProperties[sPropertyName].description) || sPropertyName
+                    })
+                });
+            });
+
+            var aItems = aRows.map(function(oRow) {
+                return new ColumnListItem({
+                    cells: aPropertyNames.map(function(sPropertyName) {
+                        var sText = fnCellFormatter
+                            ? fnCellFormatter(oRow, sPropertyName, this._stringifyCellValue(oRow[sPropertyName]))
+                            : this._stringifyCellValue(oRow[sPropertyName]);
+                        return new Text({ text: sText });
+                    }.bind(this))
+                });
+            }.bind(this));
+
+            return new Table({
+                columns: aColumns,
+                items: aItems,
+                fixedLayout: false,
+                autoPopinMode: true
+            }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTablePreview");
+        },
+
+        /**
+         * Creates an editable sap.m.Table for displaying AI-suggested row updates.
+         * Editable cells are rendered as SmartField controls bound to the OData row context.
+         * Non-editable cells are rendered as plain Text controls.
+         *
+         * @param {Array<string>} aPropertyNames - ordered list of property names to show as columns
+         * @param {object} oItemProperties - map of { propName: { description, dataType } }
+         * @param {Array<object>} aPreviewRows - enriched row objects with context, newValues, etc.
+         * @param {string} sCollectionName - navigation property name (used to look up property metadata)
+         * @param {object} mCollectionState - collection tracking state (used to get property metadata)
+         * @returns {sap.m.Table}
+         */
+        _createEditableNewTable: function(aPropertyNames, oItemProperties, aPreviewRows, sCollectionName, mCollectionState, fnOnTableFieldChange) {
+            var aColumns = aPropertyNames.map(function(sPropName) {
+                return new Column({
+                    header: new Text({
+                        text: (oItemProperties[sPropName] && oItemProperties[sPropName].description) || sPropName
+                    })
+                });
+            });
+
+            var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+            var that = this;
+
+            var aItems = aPreviewRows.map(function(oPreviewRow) {
+                var oContext = oPreviewRow.transientContext;
+                var oRowObject = oPreviewRow.realContext && oPreviewRow.realContext.getObject && oPreviewRow.realContext.getObject();
+
+                var aCells = aPropertyNames.map(function(sPropName) {
+                    if (!oContext) {
+                        return new Text({ text: "" });
+                    }
+
+                    var oPropertyMeta = mCollectionPropertyMap[sPropName];
+                    var bEditable = that._isEditableProperty(oPropertyMeta, oRowObject);
+
+                    // Use a SmartField so value-help and type-specific rendering are supported
+                    var oSmartField = new SmartField({
+                        value: "{" + sPropName + "}",
+                        editable: bEditable,
+                        enabled: bEditable,
+                        contextEditable: bEditable,
+                        change: function() {
+                            if (typeof fnOnTableFieldChange === "function") {
+                                fnOnTableFieldChange();
+                            }
+                        },
+                        editableChanged: function(oEvent) {
+                            // Keep table SmartField editability deterministic during preview
+                            if (oEvent.getParameter("editable") !== bEditable) {
+                                oEvent.getSource().setEditable(bEditable);
+                            }
+                        }
+                    });
+
+                    return oSmartField;
+                });
+
+                var oItem = new ColumnListItem({ cells: aCells });
+                if (oContext) {
+                    oItem.setBindingContext(oContext);
+                }
+                return oItem;
+            });
+
+            return new Table({
+                columns: aColumns,
+                items: aItems,
+                fixedLayout: false,
+                autoPopinMode: true
+            }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTablePreview");
+        },
+
+        /**
+         * Builds a plain preview row object from a given OData context.
+         *
+         * @param {Array<string>} aPropertyNames - property names to include
+         * @param {object} oContext - OData context providing the property values
+         * @returns {object} plain row data object
+         */
+        _buildCollectionPreviewRowFromContext: function(aPropertyNames, oContext) {
+            var oPreviewRow = {};
+
+            aPropertyNames.forEach(function(sPropertyName) {
+                oPreviewRow[sPropertyName] = oContext ? oContext.getProperty(sPropertyName) : "";
+            });
+
+            return oPreviewRow;
+        },
+
+        _createTransientCollectionContext: function(sEntitySetName, oObjectPageModel) {
+            if (!sEntitySetName || !oObjectPageModel) {
+                return null;
+            }
+
+            return oObjectPageModel.createEntry("/" + sEntitySetName, {
+                groupId: "EasyFillFETransientChanges",
+                changeSetId: "EasyFillFETransientChanges"
+            });
+        },
+
+        _seedTransientContextFromRowObject: function(oTransientContext, oRowObject) {
+            Object.keys(oRowObject || {}).forEach(function(sPropertyName) {
+                var vValue = oRowObject[sPropertyName];
+                if (vValue === null || vValue === undefined || typeof vValue !== "object" || vValue instanceof Date) {
+                    oTransientContext.setProperty(sPropertyName, vValue);
+                }
+            });
+        },
+
+        _applyRowUpdateToTransientContext: function(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject) {
+            var that = this;
+            Object.keys(oRowUpdate || {}).forEach(function(sPropertyName) {
+                if (sPropertyName === "_rowIndex" || sPropertyName === "_contextPath") {
+                    return;
+                }
+
+                var oPropertyMeta = mCollectionPropertyMap[sPropertyName];
+                if (!that._isEditableProperty(oPropertyMeta, oRealRowObject)) {
+                    return;
+                }
+
+                oTransientContext.setProperty(sPropertyName, oRowUpdate[sPropertyName]);
+            });
+        },
+
+        _clearStagedCollectionState: function(oTableStagingState) {
+            Object.keys((oTableStagingState && oTableStagingState.mStagedRows) || {}).forEach(function(sCollectionName) {
+                delete oTableStagingState.mStagedRows[sCollectionName];
+            });
+        },
+
+        /**
+         * Resolves an OData row context for a given collection row update.
+         * Prefers context path lookup; falls back to row index.
+         *
+         * @param {string} sCollectionName - navigation property name
+         * @param {object} oRowUpdate - the AI row update object ({ _contextPath?, _rowIndex? })
+         * @param {object} mCollectionState - collection tracking state
+         * @returns {{ context, rowIndex }|null}
+         */
+        _resolveCollectionRowContext: function(sCollectionName, oRowUpdate, mCollectionState) {
+            var mByPath = mCollectionState.mCollectionRowContextsByPath[sCollectionName] || Object.create(null);
+            var sContextPath = oRowUpdate && oRowUpdate._contextPath;
+
+            // Prefer context path (more stable across refreshes)
+            if (typeof sContextPath === "string" && mByPath[sContextPath]) {
+                return mByPath[sContextPath];
+            }
+
+            // Fallback to row index
+            var iRowIndex = oRowUpdate && oRowUpdate._rowIndex;
+            var aRowContexts = mCollectionState.mCollectionRowContexts[sCollectionName] || [];
+            if (typeof iRowIndex === "number" && aRowContexts[iRowIndex]) {
+                return { context: aRowContexts[iRowIndex], rowIndex: iRowIndex };
+            }
+
+            return null;
+        },
+
+        /**
+         * Returns a stable string identity for a collection row, used as a map key.
+         * Priority: context path → _contextPath from update → _rowIndex → fallback index string.
+         *
+         * @param {object} oResolvedRow - { context, rowIndex } or null
+         * @param {object} oRowUpdate - the AI row update object
+         * @param {number} iFallbackIndex - fallback numeric index
+         * @returns {string}
+         */
+        _getCollectionRowIdentity: function(oResolvedRow, oRowUpdate, iFallbackIndex) {
+            if (oResolvedRow && oResolvedRow.context && oResolvedRow.context.getPath) {
+                return oResolvedRow.context.getPath();
+            }
+            if (oRowUpdate && typeof oRowUpdate._contextPath === "string") {
+                return oRowUpdate._contextPath;
+            }
+            if (oRowUpdate && typeof oRowUpdate._rowIndex === "number") {
+                return "index:" + String(oRowUpdate._rowIndex);
+            }
+            return "row:" + String(iFallbackIndex);
+        },
+
+        /**
+         * Converts a raw cell value to a display string for read-only table cells.
+         * Handles null/undefined, Date objects, and primitives.
+         *
+         * @param {*} vValue
+         * @returns {string}
+         */
+        _stringifyCellValue: function(vValue) {
+            if (vValue === null || vValue === undefined) {
+                return "";
+            }
+            if (vValue instanceof Date) {
+                return vValue.toISOString();
+            }
+            return String(vValue);
+        },
+
+        /**
+         * Checks whether a collection property is editable given the current row data object.
+         * Delegates to the same annotation checks used in EasyFillFieldCollector.isEditableByContextObject.
+         * Duplicated here to keep TableRenderer self-contained (no circular dependency).
+         *
+         * @param {object} oPropertyMeta - OData property metadata
+         * @param {object} oRowObject - plain row data object
+         * @returns {boolean}
+         */
+        _isEditableProperty: function(oPropertyMeta, oRowObject) {
+            if (!oPropertyMeta) {
+                return false;
+            }
+            var sUpdatable = oPropertyMeta["sap:updatable"];
+            if (sUpdatable) {
+                return sUpdatable !== "false";
+            }
+            var oAnnotation = oPropertyMeta["com.sap.vocabularies.Common.v1.FieldControl"];
+            if (oAnnotation && oAnnotation["EnumMember"]) {
+                return oAnnotation["EnumMember"] !== "com.sap.vocabularies.Common.v1.FieldControlType/ReadOnly";
+            }
+            var sFieldControl = oPropertyMeta["sap:field-control"];
+            if (sFieldControl) {
+                var iFieldControlValue = oRowObject && oRowObject[sFieldControl];
+                return iFieldControlValue !== 1;
+            }
+            return true;
+        }
+    };
+});