@sapui5/sap.ushell 1.118.0 → 1.119.0

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.controller.js

@@ -2,7 +2,7 @@
 
 /**
  * @file WorkPageBuilder controller for WorkPageBuilder view
- * @version 1.118.0
+ * @version 1.119.0
  */
 sap.ui.define([
     "sap/base/Log",
@@ -130,6 +130,8 @@ sap.ui.define([
             },
 
             onExit: function () {
+                WorkPageBuilderLayoutHelper.deregister();
+
                 if (this.oContentFinderPromise) {
                     this.oContentFinderPromise.then(oComponent => {
                         oComponent.destroy();
@@ -418,6 +420,8 @@ sap.ui.define([
                 }
 
                 oModel.setProperty(sColumnPath, aNewColumns);
+                // Invalidate row to render correct css class for amount of columns.
+                oRow.invalidate();
                 this.getOwnerComponent().fireEvent("workPageEdited");
             },
 
@@ -465,31 +469,67 @@ sap.ui.define([
                 var iDiff = oEvent.getParameter("posXDiff");
                 var oColumn = oEvent.getSource();
                 var oRow = oColumn.getParent();
-                var iColumnWidth = oRow.getSingleColumnWidth();
-                var fDeltaFromOrigin, iColumnsDelta, sDragDirection, iRightColumnIndex, iLeftColumnIndex,
-                    iLeftColumnWidth, iRightColumnWidth, oResult;
+                var iSingleColumnWidthPx = oRow.getSingleColumnWidth();
 
-                if (iColumnWidth === 0) {
-                    return;
-                }
+                if (iSingleColumnWidthPx <= 0) { return; }
+
+                var bRtl = Configuration.getRTL();
+                var fDeltaFromOrigin = iDiff / iSingleColumnWidthPx;
+
+                if (fDeltaFromOrigin > -1 && fDeltaFromOrigin < 1) { return; }
+
+                var iColumnsDelta = fDeltaFromOrigin < 0 ? Math.floor(iDiff / iSingleColumnWidthPx) : Math.ceil(iDiff / iSingleColumnWidthPx);
+                var sDragDirection = iColumnsDelta >= 0 ? "right" : "left";
+                var iFlexStep = sDragDirection === "right" ? STEP_SIZE : -STEP_SIZE;
+                var iRightColumnIndex = oRow.indexOfAggregation("columns", oColumn);
+                var iLeftColumnIndex = iRightColumnIndex - 1;
+                var aColumnFlexValues = oRow.getColumnFlexValues();
 
-                fDeltaFromOrigin = iDiff / iColumnWidth;
+                iFlexStep = bRtl ? iFlexStep : -iFlexStep;
 
-                if (fDeltaFromOrigin > -1 && fDeltaFromOrigin < 1) {
+                if (!this._resizeAllowed(
+                    aColumnFlexValues.length,
+                    aColumnFlexValues[iLeftColumnIndex],
+                    aColumnFlexValues[iRightColumnIndex],
+                    iFlexStep
+                )) {
                     return;
                 }
 
-                iColumnsDelta = fDeltaFromOrigin < 0 ? Math.floor(iDiff / iColumnWidth) : Math.ceil(iDiff / iColumnWidth);
-                sDragDirection = iColumnsDelta >= 0 ? "right" : "left";
-                iRightColumnIndex = oRow.indexOfAggregation("columns", oColumn);
-                iLeftColumnIndex = iRightColumnIndex - 1;
-                iLeftColumnWidth = this._getCurrentColumnWidth(oRow, iLeftColumnIndex);
-                iRightColumnWidth = this._getCurrentColumnWidth(oRow, iRightColumnIndex);
+                aColumnFlexValues[iLeftColumnIndex] -= iFlexStep;
+                aColumnFlexValues[iRightColumnIndex] += iFlexStep;
 
-                oResult = this._doColumnResizeStep(oRow, iLeftColumnIndex, iRightColumnIndex, iLeftColumnWidth, iRightColumnWidth, sDragDirection);
-                if (oResult) {
-                    this._updateModelWithColumnWidths(oRow, iLeftColumnIndex, iRightColumnIndex, oResult.newLeftColumnWidth, oResult.newRightColumnWidth);
-                }
+                oRow.setGridLayoutString(aColumnFlexValues);
+                this._updateModelWithColumnWidths(oRow, iLeftColumnIndex, iRightColumnIndex, aColumnFlexValues[iLeftColumnIndex], aColumnFlexValues[iRightColumnIndex]);
+            },
+
+            /**
+             * Checks if WorkPageColumn resize is allowed based on the given input parameters.
+             *
+             * @param {int} iColumnCount The count of WorkPageColumns in this row.
+             * @param {int} iLeftFlex The old flex value of the left column.
+             * @param {int} iRightFlex The old flex value of the right column.
+             * @param {int} iFlexStep The step to decrease / increase both columns.
+             * @returns {boolean} The result.
+             * @private
+             * @since 1.118.0
+             */
+            _resizeAllowed: function (iColumnCount, iLeftFlex, iRightFlex, iFlexStep) {
+                var oViewSettingsModel = this.getView().getModel("viewSettings");
+                var iColumnMinFlex = oViewSettingsModel.getProperty("/currentBreakpoint/columnMinFlex");
+
+                // resize to left would result in too small column on the left
+                if (iLeftFlex - iFlexStep < iColumnMinFlex) { return false; }
+
+                // resize to right would result in too small column on the right
+                if (iRightFlex + iFlexStep < iColumnMinFlex) { return false; }
+
+                var iMaxColumnsPerRow = oViewSettingsModel.getProperty("/currentBreakpoint/maxColumnsPerRow");
+
+                // no resize allowed if there is a line break for WorkPageRows
+                if (iColumnCount > iMaxColumnsPerRow) { return false; }
+
+                return true;
             },
 
             /**
@@ -1387,17 +1427,17 @@ sap.ui.define([
                 var sEndButtonText = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Deny");
 
                 return new Promise((resolve, reject) => {
-                    sap.ui.require(["sap/m/Dialog", "sap/m/Button", "sap/m/ButtonType", "sap/m/DialogType", "sap/m/Text"], (Dialog, Button, ButtonType, DialogType, Text) => {
+                    sap.ui.require(["sap/m/Dialog", "sap/m/Button", "sap/m/Text"], (Dialog, Button, Text) => {
                         var oDialog = new Dialog({
                             id: this.createId("cardConfigurationResetDialog"),
-                            type: DialogType.Message,
+                            type: mLibrary.DialogType.Message,
                             state: ValueState.Warning,
                             title: sDialogTitle,
                             content: new Text({
                                 text: sDialogContent
                             }),
                             beginButton: new Button({
-                                type: ButtonType.Emphasized,
+                                type: mLibrary.ButtonType.Emphasized,
                                 text: sBeginButtonText
                             }),
                             endButton: new Button({
@@ -1468,13 +1508,13 @@ sap.ui.define([
                 var sCardEditorCancelText = oI18nBundle.getText("WorkPage.CardEditor.Cancel");
 
                 return new Promise((resolve, reject) => {
-                    sap.ui.require(["sap/m/Dialog", "sap/m/Button", "sap/m/ButtonType"], (Dialog, Button, ButtonType) => {
+                    sap.ui.require(["sap/m/Dialog", "sap/m/Button"], (Dialog, Button) => {
                         var oDialog = new Dialog({
                             id: this.createId("cardEditorDialog"),
                             contentWidth: "40rem",
                             beginButton: new Button({
                                 text: sCardEditorSaveText,
-                                type: ButtonType.Emphasized
+                                type: mLibrary.ButtonType.Emphasized
                             }),
                             endButton: new Button({
                                 text: sCardEditorCancelText,
@@ -1730,7 +1770,7 @@ sap.ui.define([
              * @param {object} oVisualization The Visualization
              * @param {object} oSourceCell The Cell where the tile was initially
              * @param {object} oTargetControl The target control (Column or empty Cell)
-             * @param {integer} [iPositionInTargetColumn] The position in the target column. Only needed when target control is a WorkPageColumn
+             * @param {int} [iPositionInTargetColumn] The position in the target column. Only needed when target control is a WorkPageColumn
              *
              * @since 1.118.0
              * @private
@@ -1968,76 +2008,6 @@ sap.ui.define([
                 oModel.setProperty(sRightColumnPath, iNewRightColumnWidth);
             },
 
-            /**
-             * Updates the DOM classes for the column with the given iColumnIndex.
-             *
-             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageRow} oRow The WorkPageRow instance.
-             * @param {int} iColumnIndex The index of the column to update.
-             * @param {int} iColumnWidth The new columnWidth.
-             * @private
-             */
-            _updateColumnWidthClass: function (oRow, iColumnIndex, iColumnWidth) {
-                oRow.$().find(".workPageColumn").eq(iColumnIndex)
-                    .removeClass(function (index, className) {
-                        return (className.match(/workPageColumnWidth.*/g) || []).join(" ");
-                    })
-                    .addClass("workPageColumnWidth" + iColumnWidth);
-            },
-
-            /**
-             * Calculates the step to be taken, based on the input parameters.
-             * If the new columnWidths is smaller than MIN_GRID_COLUMN_WIDTH, do nothing.
-             * Else, update the columnWidths via DOM manipulation.
-             *
-             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageRow} oRow The WorkPageRow control instance.
-             * @param {int} iLeftColumnIndex The index of the left column to update.
-             * @param {int} iRightColumnIndex The index of the right column to update.
-             * @param {int} iLeftColumnWidth The old columnWidth of the left column.
-             * @param {int} iRightColumnWidth The old columnWidth of the right column.
-             * @param {string} sDirection The resize direction: "left" or "right"
-             * @returns {null|{newLeftColumnWidth: int, newRightColumnWidth: int}} The resulting values.
-             * @private
-             */
-            _doColumnResizeStep: function (oRow, iLeftColumnIndex, iRightColumnIndex, iLeftColumnWidth, iRightColumnWidth, sDirection) {
-                var bRtl = Configuration.getRTL();
-                var iStep;
-
-                if (!bRtl) {
-                    iStep = sDirection === "right" ? STEP_SIZE : -STEP_SIZE;
-                } else {
-                    iStep = sDirection === "right" ? -STEP_SIZE : STEP_SIZE;
-                }
-                var iNewLeftColumnWidth = iLeftColumnWidth + iStep;
-                var iNewRightColumnWidth = iRightColumnWidth - iStep;
-
-                if (iNewLeftColumnWidth < MIN_GRID_COLUMN_WIDTH || iNewRightColumnWidth < MIN_GRID_COLUMN_WIDTH) {
-                    Log.debug("new column value too small", iNewLeftColumnWidth, iNewRightColumnWidth);
-                    return null;
-                }
-
-                this._updateColumnWidthClass(oRow, iLeftColumnIndex, iNewLeftColumnWidth);
-                this._updateColumnWidthClass(oRow, iRightColumnIndex, iNewRightColumnWidth);
-
-                return {
-                    newLeftColumnWidth: iNewLeftColumnWidth,
-                    newRightColumnWidth: iNewRightColumnWidth
-                };
-            },
-
-            /**
-             * Retrieves the columnWidth for the column with the given iColumnIndex from the model.
-             *
-             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageRow} oRow The WorkPageRow control instance.
-             * @param {int} iLeftColumnIndex The index of the left column.
-             * @returns {int} The columnWidth.
-             * @private
-             */
-            _getCurrentColumnWidth: function (oRow, iLeftColumnIndex) {
-                var sRowBindingContextPath = oRow.getBindingContext().getPath();
-                var sColumnPath = sRowBindingContextPath + "/columns/" + iLeftColumnIndex + "/descriptor/value/columnWidth";
-                return this.getView().getModel().getProperty(sColumnPath);
-            },
-
             /**
              * Gets the column width from the column descriptor entry, falls back to max column width if the columnWidth is empty.
              *