🐛🎨 [Frontend] Workspaces & Folders: Improve context syncing

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

@@ -26,6 +26,10 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
     }));
   },
 
+  events: {
+    "contextChanged": "qx.event.type.Data",
+  },
+
   properties: {
     currentWorkspaceId: {
       check: "Number",
@@ -86,6 +90,10 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
         currentWorkspaceId: workspaceId,
         currentFolderId: folderId,
       });
+      this.fireDataEvent("contextChanged", {
+        workspaceId,
+        folderId,
+      });
     },
 
     __createRootButton: function() {

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

@@ -269,12 +269,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("folderSelected", e => {
         const folderId = e.getData();
         this._folderSelected(folderId);
-        this._resourceFilter.folderSelected(folderId);
       }, this);
       resourcesContainer.addListener("workspaceSelected", e => {
         const workspaceId = e.getData();
         this._workspaceSelected(workspaceId);
-        this._resourceFilter.workspaceSelected(workspaceId);
       }, this);
       resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
@@ -369,36 +367,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       });
 
       resourceFilter.addListener("changeSharedWith", e => {
-        if (this._resourceType === "study") {
-          this.setCurrentWorkspaceId(null);
-        }
         const sharedWith = e.getData();
         this._searchBarFilter.setSharedWithActiveFilter(sharedWith.id, sharedWith.label);
       }, this);
 
-      if (this._resourceType === "study" && osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const workspacesAndFoldersTree = resourceFilter.getWorkspacesAndFoldersTree();
-        workspacesAndFoldersTree.getSelection().addListener("change", () => {
-          const selection = workspacesAndFoldersTree.getSelection();
-          if (selection.getLength() > 0) {
-            const item = selection.getItem(0);
-            const workspaceId = item.getWorkspaceId();
-            const folderId = item.getFolderId();
-            this._changeContext(workspaceId, folderId);
-          }
-        }, this);
-        this.bind("currentWorkspaceId", workspacesAndFoldersTree, "currentWorkspaceId");
-        this.bind("currentFolderId", workspacesAndFoldersTree, "currentFolderId");
-      }
-
-      resourceFilter.addListener("changeWorkspace", e => {
-        const workspaceId = e.getData();
-        this.setCurrentWorkspaceId(workspaceId);
-        if (this._resourceType === "study") {
-          this._searchBarFilter.resetSharedWithActiveFilter();
-        }
-      }, this);
-
       resourceFilter.addListener("changeSelectedTags", e => {
         const selectedTagIds = e.getData();
         this._searchBarFilter.setTagsActiveFilter(selectedTagIds);
@@ -489,10 +461,6 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
-    _changeContext: function(workspaceId, folderId) {
-      throw new Error("Abstract method called!");
-    },
-
     _folderSelected: function(folderId) {
       throw new Error("Abstract method called!");
     },

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

@@ -284,11 +284,30 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       this._removeAll();
     },
 
+    __addFoldersContainer: function() {
+      // add foldersContainer dynamically
+      [
+        "addChildWidget",
+        "removeChildWidget"
+      ].forEach(ev => {
+        this.__foldersContainer.addListener(ev, () => {
+          const children = this.__foldersContainer.getChildren();
+          if (children.length && !children.includes(this.__foldersContainer)) {
+            this._addAt(this.__foldersContainer, 0);
+            return;
+          }
+          if (children.length === 0 && children.includes(this.__foldersContainer)) {
+            this._remove(this.__foldersContainer);
+            return;
+          }
+        })
+      });
+    },
+
     reloadCards: function(resourceType) {
       this.__cleanAll();
-      if (resourceType === "studies") {
-        this._add(this.__containerHeader);
-        this._add(this.__foldersContainer);
+      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
+        this.__addFoldersContainer();
       }
       if (this.getGroupBy()) {
         const noGroupContainer = this.__createGroupContainer("no-group", "No Group", "transparent");

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

@@ -83,31 +83,6 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     getWorkspacesAndFoldersTree: function() {
       return this.__workspacesAndFoldersTree;
     },
-
-    contextChanged: function(workspaceId, folderId) {
-      this.__workspacesAndFoldersTree.set({
-        currentWorkspaceId: workspaceId,
-        currentFolderId: folderId,
-      });
-      this.__workspacesAndFoldersTree.contextChanged();
-    },
-
-    workspaceSelected: function(workspaceId) {
-      this.__workspacesAndFoldersTree.set({
-        currentWorkspaceId: workspaceId,
-        currentFolderId: null,
-      });
-      this.__workspacesAndFoldersTree.contextChanged();
-    },
-
-    folderSelected: function(folderId) {
-      const workspaceId = this.__workspacesAndFoldersTree.getCurrentWorkspaceId();
-      this.__workspacesAndFoldersTree.set({
-        currentWorkspaceId: workspaceId,
-        currentFolderId: folderId,
-      });
-      this.__workspacesAndFoldersTree.contextChanged();
-    },
     /* /WORKSPACES AND FOLDERS */
 
     /* SHARED WITH */

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

@@ -101,6 +101,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
   members: {
     __dontShowTutorial: null,
+    __workspaceHeader: null,
     __workspacesList: null,
     __foldersList: null,
 
@@ -431,8 +432,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _workspaceSelected: function(workspaceId) {
-      this.setCurrentWorkspaceId(workspaceId);
-      this._changeContext(this.getCurrentWorkspaceId(), null);
+      this.__changeContext(workspaceId, null);
     },
 
     _workspaceUpdated: function() {
@@ -451,25 +451,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
     // /WORKSPACES
 
-    _changeContext: function(workspaceId, folderId) {
-      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        this.resetSelection();
-        this.setMultiSelection(false);
-        this.set({
-          currentWorkspaceId: workspaceId,
-          currentFolderId: folderId,
-        });
-        this.invalidateStudies();
-        this._resourcesContainer.setResourcesToList([]);
-
-        if (workspaceId === -1) {
-          this.__reloadWorkspaces();
-        } else {
-          this.__reloadFoldersAndStudies();
-        }
-      }
-    },
-
     // FOLDERS
     __reloadFolderCards: function() {
       this._resourcesContainer.setFoldersToList(this.__foldersList);
@@ -507,8 +488,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _folderSelected: function(folderId) {
-      this.setCurrentFolderId(folderId);
-      this._changeContext(this.getCurrentWorkspaceId(), folderId);
+      this.__changeContext(this.getCurrentWorkspaceId(), folderId);
     },
 
     _folderUpdated: function() {
@@ -882,21 +862,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._createSearchBar();
 
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const workspaceHeader = new osparc.dashboard.WorkspaceHeader();
-        this.bind("currentWorkspaceId", workspaceHeader, "currentWorkspaceId");
-        this.bind("currentFolderId", workspaceHeader, "currentFolderId");
-        [
-          "changeCurrentWorkspaceId",
-          "changeCurrentFolderId",
-        ].forEach(ev => {
-          workspaceHeader.addListener(ev, () => {
-            const workspaceId = workspaceHeader.getCurrentWorkspaceId();
-            const folderId = workspaceHeader.getCurrentFolderId();
-            this._changeContext(workspaceId, folderId);
-            this._resourceFilter.contextChanged(workspaceId, folderId);
-          }, this);
-        });
-
+        const workspaceHeader = this.__workspaceHeader = new osparc.dashboard.WorkspaceHeader();
         this._addToLayout(workspaceHeader);
       }
 
@@ -930,6 +896,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       this._addResourceFilter();
 
+      this.__connectContexts();
+
       this.__addNewStudyButtons();
 
       const loadMoreBtn = this.__createLoadMoreButton();
@@ -965,6 +933,66 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return this._resourcesContainer;
     },
 
+    __connectContexts: function() {
+      const workspaceHeader = this.__workspaceHeader;
+      workspaceHeader.addListener("contextChanged", () => {
+        const workspaceId = workspaceHeader.getCurrentWorkspaceId();
+        const folderId = workspaceHeader.getCurrentFolderId();
+        this.__changeContext(workspaceId, folderId);
+      }, this);
+
+      const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();
+      workspacesAndFoldersTree.addListener("contextChanged", e => {
+        const context = e.getData();
+        const workspaceId = context["workspaceId"];
+        const folderId = context["folderId"];
+        this.__changeContext(workspaceId, folderId);
+      }, this);
+    },
+
+    __changeContext: function(workspaceId, folderId) {
+      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
+        if (
+          this.getCurrentWorkspaceId() === workspaceId &&
+          this.getCurrentFolderId() === folderId
+        ) {
+          // didn't really change
+          return;
+        }
+
+        console.log("__changeContext", workspaceId, folderId);
+        this.resetSelection();
+        this.setMultiSelection(false);
+        this.set({
+          currentWorkspaceId: workspaceId,
+          currentFolderId: folderId,
+        });
+        this.invalidateStudies();
+        this._resourcesContainer.setResourcesToList([]);
+
+        if (workspaceId === -1) {
+          this.__reloadWorkspaces();
+        } else {
+          this.__reloadFoldersAndStudies();
+        }
+
+        // notify workspaceHeader
+        const workspaceHeader = this.__workspaceHeader;
+        workspaceHeader.set({
+          currentWorkspaceId: workspaceId,
+          currentFolderId: folderId,
+        });
+
+        // notify workspacesAndFoldersTree
+        const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();
+        workspacesAndFoldersTree.set({
+          currentWorkspaceId: workspaceId,
+          currentFolderId: folderId,
+        });
+        workspacesAndFoldersTree.contextChanged(workspaceId, folderId);
+      }
+    },
+
     __addSortByButton: function() {
       const sortByButton = new osparc.dashboard.SortedByMenuButton();
       sortByButton.set({

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

@@ -36,9 +36,13 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
     });
 
     this.__spacers = [];
+
+    this.initCurrentWorkspaceId();
+    this.initCurrentFolderId();
   },
 
   events: {
+    "contextChanged": "qx.event.type.Data",
     "workspaceUpdated": "qx.event.type.Data",
     "deleteWorkspaceRequested": "qx.event.type.Data"
   },
@@ -109,6 +113,9 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
           this.bind("currentFolderId", control, "currentFolderId");
           control.bind("currentWorkspaceId", this, "currentWorkspaceId");
           control.bind("currentFolderId", this, "currentFolderId");
+          control.addListener("contextChanged", e => {
+            this.fireDataEvent("contextChanged", e.getData())
+          });
           this._add(control);
           break;
         case "edit-button":
@@ -177,6 +184,10 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       title.addListener("tap", () => {
         const folderId = null;
         this.setCurrentFolderId(folderId);
+        this.fireDataEvent("contextChanged", {
+          workspaceId,
+          folderId,
+        });
       });
 
       this.getChildControl("breadcrumbs");

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

@@ -76,25 +76,37 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
       const workspace = e.getData();
       this.__removeWorkspace(workspace);
     }, this);
+
+    this.getSelection().addListener("change", () => {
+      const selection = this.getSelection();
+      if (selection.getLength() > 0) {
+        const item = selection.getItem(0);
+        const workspaceId = item.getWorkspaceId();
+        const folderId = item.getFolderId();
+        this.fireDataEvent("contextChanged", {
+          workspaceId,
+          folderId,
+        });
+      }
+    }, this);
   },
 
   events: {
     "openChanged": "qx.event.type.Event",
+    "contextChanged": "qx.event.type.Data",
   },
 
   properties: {
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
       init: null,
-      event: "changeCurrentWorkspaceId",
     },
 
     currentFolderId: {
       check: "Number",
       nullable: true,
       init: null,
-      event: "changeCurrentFolderId",
     },
   },