🐛 [Frontend] Fix: duplicated /folders call (#6587)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js

@@ -282,15 +282,15 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this._addToLayout(resourcesContainer);
     },
 
-    _groupByChanged: function(groupBy) {
+    __groupByChanged: function(groupBy) {
       // if cards are grouped they need to be in grid mode
       this._resourcesContainer.setMode("grid");
       this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
       this._resourcesContainer.setGroupBy(groupBy);
       this._reloadCards();
     },
 
-    _viewByChanged: function(viewMode) {
+    __viewModeChanged: function(viewMode) {
       this._resourcesContainer.setMode(viewMode);
       this._reloadCards();
 
@@ -314,14 +314,14 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       const dontGroup = new qx.ui.menu.RadioButton(this.tr("None"));
       osparc.utils.Utils.setIdToWidget(dontGroup, "groupByNone");
-      dontGroup.addListener("execute", () => this._groupByChanged(null));
+      dontGroup.addListener("execute", () => this.__groupByChanged(null));
 
       groupByMenu.add(dontGroup);
       groupOptions.add(dontGroup);
 
       if (this._resourceType === "template") {
         const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
-        tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
+        tagByGroup.addListener("execute", () => this.__groupByChanged("tags"));
         groupByMenu.add(tagByGroup);
         groupOptions.add(tagByGroup);
         if (
@@ -334,7 +334,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));
-      groupByShared.addListener("execute", () => this._groupByChanged("shared"));
+      groupByShared.addListener("execute", () => this.__groupByChanged("shared"));
       groupByMenu.add(groupByShared);
       groupOptions.add(groupByShared);
 
@@ -343,10 +343,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
     _addViewModeButton: function() {
       const gridBtn = this.self().createToolbarRadioButton(null, "@FontAwesome5Solid/th/14", this.tr("Grid view"), "left");
-      gridBtn.addListener("execute", () => this._viewByChanged("grid"));
+      gridBtn.addListener("execute", () => this.__viewModeChanged("grid"));
 
       const listBtn = this.self().createToolbarRadioButton(null, "@FontAwesome5Solid/bars/14", this.tr("List view"), "right");
-      listBtn.addListener("execute", () => this._viewByChanged("list"));
+      listBtn.addListener("execute", () => this.__viewModeChanged("list"));
 
       const viewModeLayout = this.__viewModeLayout;
       const radioGroup = new qx.ui.form.RadioGroup();

services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js

@@ -59,8 +59,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       check: ["grid", "list"],
       init: "grid",
       nullable: false,
-      event: "changeMode",
-      apply: "__reloadCards"
+      event: "changeMode"
     },
 
     groupBy: {
@@ -277,10 +276,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       this._removeAll();
     },
 
-    __reloadCards: function(mode) {
-      this.reloadCards();
-    },
-
     __addFoldersContainer: function() {
       // add foldersContainer dynamically
       [
@@ -301,7 +296,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       });
     },
 
-    reloadCards: function(resourceType) {
+    __rebuildLayout: function(resourceType) {
       this.__cleanAll();
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
         this.__addFoldersContainer();
@@ -326,8 +321,12 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         });
         this._add(this.__nonGroupedContainer);
       }
+    },
 
-      let cards = [];
+    reloadCards: function(resourceType) {
+      this.__rebuildLayout(resourceType);
+
+      const cards = [];
       this.__resourcesList.forEach(resourceData => {
         Array.prototype.push.apply(cards, this.__resourceToCards(resourceData));
       });

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -104,6 +104,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __workspaceHeader: null,
     __workspacesList: null,
     __foldersList: null,
+    __loadingFolders: null,
 
     // overridden
     initResources: function() {
@@ -170,31 +171,35 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __reloadFolders: function() {
-      if (!osparc.auth.Manager.getInstance().isLoggedIn()) {
+      if (
+        !osparc.auth.Manager.getInstance().isLoggedIn() ||
+        !osparc.utils.DisabledPlugins.isFoldersEnabled() ||
+        this.__loadingFolders) {
         return;
       }
-
-      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const folderId = this.getCurrentFolderId();
-        const workspaceId = this.getCurrentWorkspaceId();
-        if (workspaceId === -1 || workspaceId === -2) {
-          return;
-        }
-        this.__setFoldersToList([]);
-        osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
-          .then(folders => {
-            this.__setFoldersToList(folders);
-          })
-          .catch(console.error);
+      const workspaceId = this.getCurrentWorkspaceId();
+      if (workspaceId === -1 || workspaceId === -2) {
+        return;
       }
+
+      this.__loadingFolders = true;
+      this.__setFoldersToList([]);
+      const folderId = this.getCurrentFolderId();
+      osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
+        .then(folders => {
+          this.__setFoldersToList(folders);
+        })
+        .catch(console.error)
+        .finally(() => this.__loadingFolders = null);
     },
 
     __reloadStudies: function() {
-      if (this._loadingResourcesBtn.isFetching() || !osparc.auth.Manager.getInstance().isLoggedIn()) {
-        return;
-      }
       const workspaceId = this.getCurrentWorkspaceId();
-      if (workspaceId === -1) { // shared workspace listing
+      if (
+        !osparc.auth.Manager.getInstance().isLoggedIn() ||
+        workspaceId === -1 || // listing workspaces
+        this._loadingResourcesBtn.isFetching()
+      ) {
         return;
       }
 
@@ -283,6 +288,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     __resetStudiesList: function() {
       this._resourcesList = [];
+      // It will remove the study cards
       this._reloadCards();
     },
 
@@ -693,7 +699,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     invalidateStudies: function() {
       osparc.store.Store.getInstance().invalidate("studies");
       this.__resetStudiesList();
-      this._resourcesContainer.getFlatList().nextRequest = null;
+      if (this._resourcesContainer.getFlatList()) {
+        this._resourcesContainer.getFlatList().nextRequest = null;
+      }
     },
 
     __addNewStudyButtons: function() {
@@ -938,6 +946,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           return;
         }
 
+        this._loadingResourcesBtn.setFetching(false);
         this.resetSelection();
         this.setMultiSelection(false);
         this.set({
@@ -1233,6 +1242,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       } else {
         this._resourcesList[index] = studyData;
       }
+      // it will render the studies in the right order
       this._reloadCards();
     },
 

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -1370,7 +1370,7 @@ qx.Class.define("osparc.data.Resources", {
           params["url"] = {};
         }
         params["url"]["offset"] = offset;
-        params["url"]["limit"] = 20;
+        params["url"]["limit"] = 10;
         const endpoint = "getPage";
         const options = {
           resolveWResponse: true