refactoring: more binding

Author: odeimaiz

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

@@ -26,22 +26,20 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
     }));
   },
 
-  events: {
-    "changeContext": "qx.event.type.Data",
-  },
-
   properties: {
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
       init: null,
+      event: "changeCurrentWorkspaceId",
       apply: "__rebuild"
     },
 
     currentFolderId: {
       check: "Number",
       nullable: true,
       init: null,
+      event: "changeCurrentFolderId",
       apply: "__rebuild"
     }
   },
@@ -82,15 +80,12 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
       return this.__createFolderButton(currentFolder);
     },
 
-    __changeContext: function(workspaceId, folderId) {
+    __changeFolder: function(folderId) {
+      const workspaceId = this.getCurrentWorkspaceId();
       this.set({
         currentWorkspaceId: workspaceId,
         currentFolderId: folderId,
       });
-      this.fireDataEvent("changeContext", {
-        workspaceId,
-        folderId,
-      });
     },
 
     __createRootButton: function() {
@@ -111,25 +106,28 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
       }
       rootButton.addListener("execute", () => {
         const folderId = null;
-        this.__changeContext(workspaceId, folderId);
+        this.__changeFolder(folderId);
       });
       return rootButton;
     },
 
     __createFolderButton: function(folder) {
       let folderButton = null;
       if (folder) {
-        folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({
+        folderButton = new qx.ui.form.Button(folder.getName()).set({
           maxWidth: 200
         });
         folder.bind("name", folderButton, "label");
         folderButton.addListener("execute", () => {
-          const workspaceId = this.getCurrentWorkspaceId();
           const folderId = folder ? folder.getFolderId() : null;
-          this.__changeContext(workspaceId, folderId);
+          this.__changeFolder(folderId);
         }, this);
       } else {
         folderButton = this.__createRootButton();
+        // Do not show root folder
+        folderButton.set({
+          visibility: "excluded"
+        });
       }
       folderButton.set({
         backgroundColor: "transparent",

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

@@ -274,15 +274,6 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
 
-      const containerHeader = this._resourcesContainer.getContainerHeader();
-      containerHeader.addListener("changeContext", e => {
-        const {
-          workspaceId,
-          folderId,
-        } = e.getData();
-        this._resourceFilter.contextChanged(workspaceId, folderId);
-      }, this);
-
       this._addToLayout(resourcesContainer);
     },
 

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

@@ -877,27 +877,24 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       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);
+        });
+
         this._addToLayout(workspaceHeader);
       }
 
       this._createResourcesLayout();
 
-      const containerHeader = this._resourcesContainer.getContainerHeader();
-      if (containerHeader) {
-        this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId");
-        this.bind("currentFolderId", containerHeader, "currentFolderId");
-        containerHeader.addListener("changeContext", e => {
-          const {
-            workspaceId,
-            folderId,
-          } = e.getData();
-          this.set({
-            currentWorkspaceId: workspaceId,
-            currentFolderId: folderId,
-          })
-          this._changeContext(workspaceId, folderId);
-        });
-      }
       const list = this._resourcesContainer.getFlatList();
       if (list) {
         osparc.utils.Utils.setIdToWidget(list, "studiesList");

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

@@ -52,6 +52,13 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       apply: "__buildLayout"
     },
 
+    currentFolderId: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      event: "changeCurrentFolderId",
+    },
+
     accessRights: {
       check: "Object",
       nullable: false,
@@ -101,6 +108,9 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
         case "breadcrumbs":
           control = new osparc.dashboard.ContextBreadcrumbs();
           this.bind("currentWorkspaceId", control, "currentWorkspaceId");
+          this.bind("currentFolderId", control, "currentFolderId");
+          control.bind("currentWorkspaceId", this, "currentWorkspaceId");
+          control.bind("currentFolderId", this, "currentFolderId");
           this._add(control);
           break;
         case "edit-button":