@sapui5/sap.ushell 1.114.0 → 1.115.1

package/src/main/js/sap/ushell/components/cepsearchresult/app/util/controls/Category.js

@@ -44,11 +44,10 @@ sap.ui.define(
     includeStylesheet,
     Highlighter,
     ResizeHandler,
-    library
+    mLibrary
     // fetch
   ) {
     "use strict";
-
     appendStyleVars([
       "sapUiShadowLevel0",
       "sapUiElementBorderCornerRadius",
@@ -65,13 +64,14 @@ sap.ui.define(
       "sapUiButtonNegativeActiveBackground",
       "sapUiButtonSuccessActiveBackground",
       "sapUiButtonNeutralBackground",
-      "sapUiTileBackground"
+      "sapUiTileBackground",
+      "sapUiExtraLightBG"
     ]);
 
     // Include the css for the control once
     includeStylesheet(sap.ui.require.toUrl("sap/ushell/components/cepsearchresult/app/util/controls/Category.css"));
 
-    var IllustrationType = library.IllustratedMessageType;
+    var IllustrationType = mLibrary.IllustratedMessageType;
 
     // Fix object identifier handle press
     ObjectIdentifier.prototype._handlePress = function (oEvent) {
@@ -85,32 +85,6 @@ sap.ui.define(
         oEvent.setMarked();
       }
     };
-    var SearchResultList = List.extend("sap.ushell.components.cepsearchresult.app.util.controls.SearchResultList", {
-      renderer: List.getMetadata().getRenderer()
-    });
-
-    SearchResultList.prototype._getCurrentColCount = function () {
-      if (this.getDomRef()) {
-        var aItems = this.getDomRef().querySelectorAll(".sapMListItems > LI"),
-          iCols = 1,
-          iTop = aItems[0].offsetTop;
-        for (var i = 1; i < aItems.length && aItems[i].offsetTop <= iTop; i++) {
-          iCols++;
-        }
-        return iCols;
-      }
-    };
-
-    SearchResultList.prototype._startItemNavigation = function () {
-      List.prototype._startItemNavigation.apply(this, [false]);
-      if (this._oItemNavigation) {
-        var aTiles = Array.from(this.getDomRef().querySelectorAll(".sapMGT"));
-        if (aTiles.length > 0) {
-          this._oItemNavigation.setItemDomRefs(aTiles);
-        }
-      }
-      this._oItemNavigation.setTableMode(false, true).setColumns(this._getCurrentColCount());
-    };
 
     var Category = Control.extend(
       "sap.ushell.components.cepsearchresult.app.util.controls.Category", /** @lends sap.ushell.components.cepsearchresult.app.categories.util.Category.prototype */ {
@@ -148,6 +122,10 @@ sap.ui.define(
             useIllustrations: {
               type: "boolean",
               defaultValue: false
+            },
+            initialPlaceholder: {
+              type: "boolean",
+              defaultValue: false
             }
           },
           aggregations: {
@@ -177,17 +155,22 @@ sap.ui.define(
           }
         },
         renderer: function (rm, oControl) {
+
           rm.openStart("div", oControl);
           rm.class("sapUiCEPSearchCat");
           rm.openEnd();
-          var oHeader = oControl.getAggregation("_header");
-          var oList = oControl.getAggregation("_list");
-          var oFooter = oControl.getAggregation("_footer");
-          var oNoDataIllustration = oControl.getAggregation("_nodata");
+
+          var oHeader = oControl.getAggregation("_header"),
+            oList = oControl.getAggregation("_list"),
+            oFooter = oControl.getAggregation("_footer"),
+            oNoDataIllustration = oControl.getAggregation("_nodata");
+
           if (oHeader) {
             rm.renderControl(oHeader);
           }
-          if (oControl.getUseIllustrations() && oNoDataIllustration && oNoDataIllustration.getVisible()) {
+          if (oControl.getUseIllustrations() &&
+            oNoDataIllustration &&
+            oNoDataIllustration.getVisible()) {
             rm.renderControl(oNoDataIllustration);
           } else if (oList) {
             rm.renderControl(oList);
@@ -202,21 +185,71 @@ sap.ui.define(
     Category._iDataRefreshMs = 1000000000;
     Category._iCountRefreshMs = 1000000000;
 
+    Category.CustomListItem = CustomListItem.extend("sap.ushell.components.cepsearchresult.app.util.controls.Category.CustomListItem", {
+      renderer: CustomListItem.getMetadata().getRenderer()
+    });
+
+    Category.CustomListItem.prototype.onAfterRendering = function () {
+      if (CustomListItem.prototype.onAfterRendering) {
+        CustomListItem.prototype.onAfterRendering.apply(this, arguments);
+      }
+      this._activeHandling(this.$());
+    };
+
+    Category.CustomListItem.prototype._activeHandling = function ($This) {
+      $This.removeClass("sapMLIBActive");
+      $This.removeClass("sapMLIBActionable");
+      $This.removeClass("sapMLIBHoverable");
+      $This.toggleClass("sapUiCEPSearchCatLIActive", this._active);
+
+      if (this.isActionable(true)) {
+        $This.toggleClass("sapUiCEPSearchCatLIHoverable", !this._active);
+      }
+    };
+
+    Category.SearchResultList = List.extend("sap.ushell.components.cepsearchresult.app.util.controls.Category.SearchResultList", {
+      renderer: List.getMetadata().getRenderer()
+    });
+
+    Category.SearchResultList.prototype._getCurrentColCount = function () {
+      if (this.getDomRef()) {
+        var aItems = this.getDomRef().querySelectorAll(".sapMListItems > LI"),
+          iCols = 1,
+          iTop = aItems[0].offsetTop;
+        for (var i = 1; i < aItems.length && aItems[i].offsetTop <= iTop; i++) {
+          iCols++;
+        }
+        return iCols;
+      }
+    };
+
+    Category.SearchResultList.prototype._startItemNavigation = function () {
+      List.prototype._startItemNavigation.apply(this, [false]);
+      if (this._oItemNavigation) {
+        var aTiles = Array.from(this.getDomRef().querySelectorAll(".sapMGT"));
+        if (aTiles.length > 0) {
+          this._oItemNavigation.setItemDomRefs(aTiles);
+        }
+      }
+      this._oItemNavigation.setTableMode(false, true).setColumns(this._getCurrentColCount());
+    };
+
     Category.prototype.init = function () {
       var oResourceModel = this.getResourceModel();
       this.setModel(oResourceModel, "i18n");
+      this.setModel(new JSONModel({}), "data");
       this._oResourceBundle = oResourceModel.getResourceBundle();
       this._iCurrentCount = 0;
       this._oDirty = {
         iDataFetchRequired: 0,
         iCountFetchRequired: 0
       };
-      this.addContent();
       this._oNoDataIllustration = null;
       this._oErrorIllustration = null;
       this._iCurrentHeight = 0;
       this._iAfterRendering = 0;
       this._iAfterRenderingEventDelay = 60;
+      this.addContent();
     };
 
     Category.prototype.addContent = function () {
@@ -235,23 +268,27 @@ sap.ui.define(
     };
 
     Category.prototype.updateDataModel = function (oData) {
-      var oModel = this.getModel("data");
-      if (!oModel) {
-        oModel = new JSONModel();
-        this.setModel(oModel, "data");
-      }
-      oModel.setData(oData);
+      this.setModel(new JSONModel(oData), "data");
     };
 
-    Category.prototype.clearData = function () {
+    Category.prototype.initialData = function (iCount) {
       var oModel = this.getModel("data");
-      if (oModel) {
-        oModel.setProperty("/data", []);
+      if (!oModel && this.getInitialPlaceholder() && this.getPlaceholderData()) {
+        var aData = [];
+        for (var i = 0; i < iCount; i++) {
+          aData.push(this.getPlaceholderData());
+        }
+        this.updateDataModel({
+          data: aData
+        });
       }
     };
 
     Category.prototype.resetDataRequired = function (sSearchTerm, iSkip, iTop) {
       if (this._bResetData) {
+        this._sSearchTerm = sSearchTerm;
+        this._iSkip = iSkip;
+        this._iTop = iTop;
         return true;
       }
       var bVisible = this.getVisible();
@@ -276,110 +313,96 @@ sap.ui.define(
     };
 
     Category.prototype.search = function (sSearchTerm, iSkip, iTop) {
-      if (isNaN(iTop)) {
-        iTop = iTop || this._iTop || this.getPageSize();
-      }
-      if (isNaN(iSkip)) {
-        iSkip = iSkip || this._iSkip || 0;
-      }
+      iTop = isNaN(iTop) || iTop < 0 ? this._iTop || this.getPageSize() : iTop;
+      iSkip = isNaN(iSkip) || iSkip < 0 ? this._iSkip || 0 : iSkip;
       if (typeof sSearchTerm !== "string") {
         sSearchTerm = this.getSearchTerm();
       }
       var bVisible = this.getVisible(),
-        sKey = this.getKey(),
-        iStartTime = performance.now(),
-        pFetch;
+        bSearchTermChanged = this._sSearchTerm !== sSearchTerm,
+        pFetch,
+        oCurrentData = this.getModel("data").getData() || {};
+
       if (!this.resetDataRequired(sSearchTerm, iSkip, iTop)) {
-        this.fireBeforeSearch({
-          category: sKey,
-          top: iTop,
-          skip: iSkip,
-          searchTerm: sSearchTerm,
-          visible: bVisible,
-          time: iStartTime,
-          fetchType: "skipped"
-        });
-        this.fireAfterSearch({
-          category: sKey,
-          count: this._iCurrentCount,
-          top: iTop,
-          skip: iSkip,
-          page: (iSkip / iTop) + 1,
-          searchTerm: sSearchTerm,
-          visible: bVisible,
-          time: performance.now() - iStartTime,
-          fetchType: "skipped"
-        });
+        this.fireFetchEvent("before", "skipped", oCurrentData);
+        this.fireFetchEvent("after", "skipped", oCurrentData);
         return;
       }
 
       this._iCurrentCount = 0;
       this._bResetData = false;
-      this._sSearchTerm = sSearchTerm;
-      this._iSkip = iSkip;
-      this._iTop = iTop;
+      this._bIsLoading = true;
+
+      this.fireFetchEvent("before", bVisible ? "data" : "count", performance.now(), oCurrentData);
 
-      this.fireBeforeSearch({
-        category: sKey,
-        top: iTop,
-        skip: iSkip,
-        searchTerm: sSearchTerm,
-        visible: bVisible,
-        time: iStartTime,
-        fetchType: bVisible ? "data" : "count"
-      });
       if (bVisible) {
-        this.setNoDataText(this.translate("LoadingData"), false, "Loading");
-        this.clearData();
+        this.setNoDataText(this.translate("LoadingData"), "Loading");
+        this.initialData(iTop);
+        this.showLoadingPlaceholder(true);
         this._oDirty.iDataFetchRequired = (Date.now() + Category._iDataRefreshMs);
         pFetch = this.fetchData(sSearchTerm, iSkip, iTop);
-        pFetch = pFetch.then(function (oResultData) {
-          var oData = {
-            count: oResultData.count,
-            top: iTop,
-            skip: iSkip,
-            page: Math.floor(iSkip / iTop) + 1,
-            data: oResultData.data
-          };
-          this.updateDataModel(oData);
-          this.setNoDataText(this.translate("NoData"), true, "NoData");
-          this.invalidate();
-          return oData;
-        }.bind(this));
+        pFetch = pFetch.then(this.applyDataChange.bind(this, bSearchTermChanged));
       } else {
         pFetch = this.fetchCount(sSearchTerm, iSkip, iTop);
-        pFetch = pFetch.then(function (oResultData) {
-          var oData = {
-            count: oResultData.count,
-            top: iTop,
-            skip: iSkip,
-            page: Math.floor(iSkip / iTop) + 1,
-            data: []
-          };
-          this.updateDataModel(oData);
-          return oData;
-        }.bind(this));
+        pFetch = pFetch.then(this.applyCount.bind(this));
       }
       this._oDirty.iCountFetchRequired = (Date.now() + Category._iCountRefreshMs);
 
       if (pFetch) {
         pFetch.then(function (oData) {
           this._iCurrentCount = oData.count || 0;
-          this.fireAfterSearch({
-            category: sKey,
-            count: this._iCurrentCount,
-            top: iTop,
-            skip: iSkip,
-            page: (iSkip / iTop) + 1,
-            searchTerm: sSearchTerm,
-            visible: bVisible,
-            time: performance.now() - iStartTime,
-            fetchType: bVisible ? "data" : "count"
-          });
+          this.setNoDataText(this.translate("NoData"), "NoData");
+          this.fireFetchEvent("after", bVisible ? "data" : "count", oData);
         }.bind(this));
       }
     };
 
+    Category.prototype.applyDataChange = function (bSearchTermChanged, oResultData) {
+      var oData = {
+        count: oResultData.count,
+        top: this._iTop,
+        skip: this._iSkip,
+        page: Math.floor(this._iSkip / this._iTop) + 1,
+        data: oResultData.data
+      };
+      this.showLoadingPlaceholder(false, function () {
+        this.updateDataModel(oData);
+        this.fixHeight(bSearchTermChanged);
+      }.bind(this));
+      return oData;
+    };
+
+    Category.prototype.applyCount = function (oResultData) {
+      var oData = {
+        count: oResultData.count,
+        top: this._iTop,
+        skip: this._iSkip,
+        page: Math.floor(this._iSkip / this._iTop) + 1,
+        data: []
+      };
+      this.updateDataModel(oData);
+      return oData;
+    };
+
+    Category.prototype.fireFetchEvent = function (sBeforeAfter, sFetchType, oResultData) {
+      var oEventData = {
+        count: oResultData ? oResultData.count || 0 : 0,
+        category: this.getKey(),
+        top: this._iTop,
+        skip: this._iSkip,
+        page: (this._iSkip / this._iTop) + 1,
+        searchTerm: this._sSearchTerm,
+        visible: this.getVisible(),
+        time: performance.now(),
+        fetchType: sFetchType
+      };
+      if (sBeforeAfter === "before") {
+        this.fireBeforeSearch(oEventData);
+      } else if (sBeforeAfter === "after") {
+        this.fireAfterSearch(oEventData);
+      }
+    };
+
     Category.prototype.fetchData = function (sSearchTerm, iSkip, iTop) {
       return Promise.resolve({
         data: [],
@@ -394,41 +417,73 @@ sap.ui.define(
       });
     };
 
+    Category.prototype.showLoadingPlaceholder = function (bShow, fAfterPlaceholderHidden) {
+      if (bShow) {
+        if (this._iShowLoader) {
+          clearTimeout(this._iShowLoader);
+        }
+        this._iShowLoader = setTimeout(
+          function () {
+            this._oList.addStyleClass("loading");
+          }.bind(this), 200
+        );
+      } else if (this._iShowLoader) {
+        clearTimeout(this._iShowLoader);
+        this._iShowLoader = setTimeout(
+          function () {
+            this._oList.removeStyleClass("loading");
+            if (fAfterPlaceholderHidden) {
+              fAfterPlaceholderHidden();
+            }
+            this.invalidate();
+            this._bIsLoading = false;
+          }.bind(this), this._oList.hasStyleClass("loading") ? 100 : 0
+        );
+      }
+    };
+
+    Category.prototype.isLoading = function () {
+      return this._bIsLoading;
+    };
+
+    Category.prototype.getPlaceholderData = function () {
+      return {
+        text: " ",
+        description: " "
+      };
+    };
+
     Category.prototype.refreshData = function () {
       this._oDirty.iDataFetchRequired = 0;
       this.search(this.getSearchTerm(), 0, this.getPageSize());
     };
 
     Category.prototype.bindListViewItems = function (sView) {
+      var oTemplate = this.getItemTemplate(sView);
       this._oList.addStyleClass(sView);
       this._oList.bindItems({
         path: "data>/data",
-        template: this.getItemTemplate(sView)
+        template: oTemplate
       });
     };
 
-    Category.prototype.setNoDataText = function (sText, bDelayed, sType) {
-      if (this._oList) {
+    Category.prototype.setNoDataText = function (sText, sType) {
+      this.updateIllustration(sText, "Hide");
+      if (this._oList && !this.bPaging) {
         this._oList.setNoDataText(" ");
-        if (bDelayed) {
-          setTimeout(function () {
-            this.setNoDataText(sText, false, sType);
-          }.bind(this), 200);
-          return;
-        }
-        if (this.getUseIllustrations()) {
-          this.updateIllustration(sText, sType);
-        }
+        this.updateIllustration(sText, sType);
         this._oList.setNoDataText(sText);
       }
     };
 
     Category.prototype.getItemTemplate = function (sView) {
+      var oTemplate = null;
       switch (sView) {
-        case "card": return this.createCardItemTemplate();
-        case "tile": return this.createTileItemTemplate();
-        default: return this.createListItemTemplate();
+        case "card": oTemplate = this.createCardItemTemplate(); break;
+        case "tile": oTemplate = this.createTileItemTemplate(); break;
+        default: oTemplate = this.createListItemTemplate();
       }
+      return oTemplate.addStyleClass("sapUiCEPSearchCatLI " + sView + " " + this.getKey());
     };
 
     Category.prototype.setFooter = function (sType) {
@@ -459,11 +514,13 @@ sap.ui.define(
         currentPage: "{= ${data>/page}}",
         selectPage: function (oEvent) {
           this.fixHeight();
+          this.bPaging = true;
           this.search(
             this.getSearchTerm(),
             oEvent.getParameter("startIndex"),
             oEvent.getParameter("pageSize")
           );
+          this.bPaging = false;
         }.bind(this)
       };
     };
@@ -503,6 +560,7 @@ sap.ui.define(
     Category.prototype.getCurrentView = function () {
       var sCurrentView = this.getProperty("currentView");
       if (sCurrentView === "categoryDefault") {
+        this.setProperty("currentView", this.getViewSettings().default);
         return this.getViewSettings().default;
       }
       return sCurrentView;
@@ -530,6 +588,7 @@ sap.ui.define(
     Category.prototype.setCurrentView = function (sView) {
       var sPreviousView = this.getCurrentView();
       if (sPreviousView !== sView) {
+        this._oList.unbindItems();
         this.setProperty("currentView", sView);
         sView = this.getCurrentView();
         this._oViewSwitch.setSelectedKey(sView);
@@ -565,7 +624,7 @@ sap.ui.define(
     };
 
     Category.prototype.createList = function () {
-      this._oList = new SearchResultList({
+      this._oList = new Category.SearchResultList({
         inset: false,
         noDataText: " ",
         growingThreshold: this.getPageSize()
@@ -595,7 +654,7 @@ sap.ui.define(
     };
 
     Category.prototype.createDefaultItemTemplate = function () {
-      var oListItem = new CustomListItem({
+      var oListItem = new Category.CustomListItem({
         press: this.itemNavigate.bind(this),
         type: "Active",
         content: [
@@ -607,21 +666,26 @@ sap.ui.define(
                 items: [
                   new Avatar(this.getItemAvatarSettings())
                     .addStyleClass("sapUiSmallMarginBegin"),
-                  new ObjectIdentifier({
-                    text: "{data>description}",
-                    title: "{data>title}",
-                    titleActive: "{= !!${data>_navigation} || !!${data>url}}",
-                    titlePress: this.itemNavigate.bind(this)
-                  }).addStyleClass("sapUiSmallMarginBeginEnd")
+                  new ObjectIdentifier(this.getItemObjectIdentifierSettings())
+                    .addStyleClass("sapUiSmallMarginBeginEnd")
                 ]
               })
             ]
           })
         ]
-      }).addStyleClass("sapUiCEPSearchCatLI");
+      });
       return oListItem;
     };
 
+    Category.prototype.getItemObjectIdentifierSettings = function () {
+      return {
+        text: "{data>description}",
+        title: "{data>title}",
+        titleActive: "{= !!${data>_navigation} || !!${data>url}}",
+        titlePress: this.itemNavigate.bind(this)
+      };
+    };
+
     Category.prototype.getItemAvatarSettings = function (sIconBinding) {
       return {
         fallbackIcon: this._oCategoryConfig.icon.src,
@@ -654,7 +718,8 @@ sap.ui.define(
               text: "{i18n>CATEGORIES.All.ViewAll}",
               press: function () {
                 this.fireViewAll({
-                  key: this.getKey()
+                  key: this.getKey(),
+                  currentView: this.getCurrentView()
                 });
               }.bind(this)
             }),
@@ -677,42 +742,57 @@ sap.ui.define(
     };
 
     Category.prototype.updateIllustration = function (sText, sType) {
+      if (!this.getUseIllustrations()) {
+        return;
+      }
       if (!this._oNoDataIllustration) {
         this._oNoDataIllustration = new IllustratedMessage({
           illustrationType: IllustrationType.SimpleNotFoundMagnifier,
           enableDefaultTitleAndDescription: false,
           illustrationSize: "Spot",
-          additionalContent: new Button({
-            text: "Refresh",
+          additionalContent: [new Button({
+            text: this._oResourceBundle.getText("CATEGORY.Views.RefreshButton"),
+            visible: false,
             press: function () {
-              this.refreshData();
+              this.fixHeight();
+              setTimeout(function () {
+                this.refreshData();
+              }.bind(this), 600);
+              this.updateIllustration(this.translate("LoadingData"), "Loading");
             }.bind(this)
-          })
-        });
-      }
-      if (!this._oLoadingIllustration) {
-        this._oLoadingIllustration = new IllustratedMessage({
-          illustrationType: IllustrationType.SimpleMagnifier,
-          illustrationSize: "Spot",
-          enableDefaultTitleAndDescription: false
+          })]
         });
       }
-      this.setAggregation("_nodata", null);
-      if (sType === "NoData") {
-        if (this._iCurrentCount === 0) {
-          this._oNoDataIllustration.setTitle(sText);
-          this.setAggregation("_nodata", this._oNoDataIllustration);
+      if (this._iCurrentCount === 0) {
+        if (sType === "NoData") {
+          if (this._iCurrentCount === 0) {
+            this._oNoDataIllustration.setTitle(sText);
+            this._oNoDataIllustration.setIllustrationType(IllustrationType.SimpleNotFoundMagnifier);
+            this.setAggregation("_nodata", this._oNoDataIllustration);
+            this._oNoDataIllustration.getAdditionalContent()[0].setVisible(true);
+          }
+        } else if (sType === "Loading") {
+          if (this._iCurrentCount === 0) {
+            this._oNoDataIllustration.setTitle(sText);
+            this._oNoDataIllustration.setIllustrationType(IllustrationType.SimpleNotFoundMagnifier);
+            this.setAggregation("_nodata", this._oNoDataIllustration);
+            this._oNoDataIllustration.getAdditionalContent()[0].setVisible(false);
+          }
         }
-      } else if (sType === "Loading") {
-        this._oLoadingIllustration.setTitle(sText);
-        this.setAggregation("_nodata", this._oLoadingIllustration);
+      } else {
+        this.setAggregation("_nodata", null);
       }
     };
 
-    Category.prototype.fixHeight = function () {
+    Category.prototype.fixHeight = function (bReset) {
       if (!this.getDomRef()) {
         return;
       }
+      if (bReset) {
+        this.getDomRef().style.setProperty("--tmpPageSize", "unset");
+        this._iCurrentHeight = 0;
+        return;
+      }
       if (this._oList && this._oList.getVisible() && this._oList.getDomRef()) {
         this._iCurrentHeight = Math.max(this._oList.getDomRef().offsetHeight, this._iCurrentHeight);
       }

package/src/main/js/sap/ushell/components/cepsearchresult/app/util/controls/Paginator.js

@@ -8,7 +8,7 @@ sap.ui.define([
   "sap/ui/core/delegate/ItemNavigation",
   "../appendStyleVars",
   "sap/ui/dom/includeStylesheet"
-  ], function (
+], function (
   Control,
   Button,
   ItemNavigation,