✨ [Frontend] Workspaces

services/static-webserver/client/source/class/osparc/dashboard/FolderHeader.js → services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js

@@ -20,7 +20,7 @@
  *
  */
 
-qx.Class.define("osparc.dashboard.FolderHeader", {
+qx.Class.define("osparc.dashboard.ContainerHeader", {
   extend: qx.ui.core.Widget,
 
   construct: function() {
@@ -31,17 +31,21 @@ qx.Class.define("osparc.dashboard.FolderHeader", {
     }));
   },
 
-  events: {
-    "changeCurrentFolderId": "qx.event.type.Data"
-  },
-
   properties: {
+    currentWorkspaceId: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      event: "changeCurrentWorkspaceId",
+      apply: "__buildBreadcrumbs"
+    },
+
     currentFolderId: {
       check: "Number",
       nullable: true,
       init: null,
       event: "changeCurrentFolderId",
-      apply: "__applyCurrentFolderId"
+      apply: "__buildBreadcrumbs"
     }
   },
 
@@ -55,24 +59,10 @@ qx.Class.define("osparc.dashboard.FolderHeader", {
           }));
           this._addAt(control, 0, {flex: 1});
           break;
-        case "permissions-info": {
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
-            alignY: "middle"
-          })).set({
-            paddingRight: 14
-          });
-          this._addAt(control, 1);
-          break;
-        }
       }
       return control || this.base(arguments, id);
     },
 
-    __applyCurrentFolderId: function() {
-      this.__buildBreadcrumbs();
-      this.__populatePermissions();
-    },
-
     __buildBreadcrumbs: function() {
       const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
       breadcrumbsLayout.removeAll();
@@ -110,14 +100,38 @@ qx.Class.define("osparc.dashboard.FolderHeader", {
       return this.__createFolderButton(currentFolder);
     },
 
+    __createRootButton: function(workspaceId) {
+      let rootButton = null;
+      if (workspaceId) {
+        if (workspaceId === -1) {
+          rootButton = new qx.ui.form.Button(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath());
+        } else {
+          const workspace = osparc.store.Workspaces.getWorkspace(workspaceId);
+          rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath());
+        }
+        rootButton.addListener("execute", () => this.set({
+          currentWorkspaceId: workspaceId,
+          currentFolderId: null,
+        }));
+      } else {
+        rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14");
+        rootButton.addListener("execute", () => this.set({
+          currentWorkspaceId: null,
+          currentFolderId: null,
+        }));
+      }
+      return rootButton;
+    },
+
     __createFolderButton: function(folder) {
       let folderButton = null;
       if (folder) {
         folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14");
+        folderButton.addListener("execute", () => this.fireDataEvent("changeCurrentFolderId", folder ? folder.getFolderId() : null), this);
       } else {
-        folderButton = new qx.ui.form.Button(this.tr("Home"), "@FontAwesome5Solid/home/14");
+        const workspaceId = this.getCurrentWorkspaceId();
+        folderButton = this.__createRootButton(workspaceId);
       }
-      folderButton.addListener("execute", () => this.fireDataEvent("changeCurrentFolderId", folder ? folder.getFolderId() : null), this);
       folderButton.set({
         backgroundColor: "transparent",
         textColor: "text",
@@ -128,22 +142,6 @@ qx.Class.define("osparc.dashboard.FolderHeader", {
 
     __createArrow: function() {
       return new qx.ui.basic.Label("/");
-    },
-
-    __populatePermissions: function() {
-      const permissionsLayout = this.getChildControl("permissions-info");
-      permissionsLayout.removeAll();
-
-      if (this.getCurrentFolderId()) {
-        const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
-        const ar = currentFolder.getMyAccessRights();
-        const permissions = ar["read"] + ar["write"] + ar["delete"];
-        const roleTitle = new qx.ui.basic.Label().set({
-          value: osparc.data.Roles.FOLDERS[permissions].label
-        });
-        permissionsLayout.add(roleTitle);
-        permissionsLayout.add(osparc.data.Roles.createRolesFolderInfo(false));
-      }
     }
   }
 });

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

@@ -167,7 +167,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       const preResourcePromises = [];
       const store = osparc.store.Store.getInstance();
       preResourcePromises.push(store.getAllGroupsAndMembers());
-      preResourcePromises.push(osparc.service.Store.getServicesLatest(false));
+      preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
       if (permissions.canDo("study.tag")) {
         preResourcePromises.push(osparc.data.Resources.get("tags"));
       }

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

@@ -79,18 +79,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       apply: "__applyDescription"
     },
 
-    myAccessRights: {
-      check: "Object",
-      nullable: true,
-      apply: "__applyMyAccessRights"
-    },
-
-    accessRights: {
-      check: "Object",
-      nullable: true,
-      apply: "__applyAccessRights"
-    },
-
     lastModified: {
       check: "Date",
       nullable: true,
@@ -103,7 +91,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       let control;
       switch (id) {
         case "icon": {
-          control = new osparc.dashboard.FolderWithSharedIcon().set({
+          control = new qx.ui.basic.Image().set({
+            source: "@FontAwesome5Solid/folder/26",
             anonymous: true,
             height: 40,
             padding: 5
@@ -155,9 +144,9 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       folder.bind("parentId", this, "parentFolderId");
       folder.bind("name", this, "title");
       folder.bind("description", this, "description");
-      folder.bind("accessRights", this, "accessRights");
       folder.bind("lastModified", this, "lastModified");
-      folder.bind("myAccessRights", this, "myAccessRights");
+
+      this.__addMenuButton();
     },
 
     __applyTitle: function(value) {
@@ -177,73 +166,51 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       }
     },
 
-    __applyMyAccessRights: function(value) {
-      if (value && value["delete"]) {
-        const menuButton = this.getChildControl("menu-button");
-        menuButton.setVisibility("visible");
+    __addMenuButton: function() {
+      const menuButton = this.getChildControl("menu-button");
+      menuButton.setVisibility("visible");
 
-        const menu = new qx.ui.menu.Menu().set({
-          position: "bottom-right"
-        });
+      const menu = new qx.ui.menu.Menu().set({
+        position: "bottom-right"
+      });
 
-        const editButton = new qx.ui.menu.Button(this.tr("Rename..."), "@FontAwesome5Solid/pencil-alt/12");
-        editButton.addListener("execute", () => {
-          const folder = this.getFolder();
-          const newFolder = false;
-          const folderEditor = new osparc.editor.FolderEditor(newFolder).set({
-            label: folder.getName(),
-            description: folder.getDescription()
-          });
-          const title = this.tr("Edit Folder");
-          const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 200);
-          folderEditor.addListener("updateFolder", () => {
-            const newName = folderEditor.getLabel();
-            const newDescription = folderEditor.getDescription();
-            const updateData = {
-              "name": newName,
-              "description": newDescription
-            };
-            osparc.data.model.Folder.putFolder(this.getFolderId(), updateData)
-              .then(() => {
-                folder.set({
-                  name: newName,
-                  description: newDescription
-                });
-                this.fireDataEvent("folderUpdated", folder.getFolderId());
-              })
-              .catch(err => console.error(err));
-            win.close();
-          });
-          folderEditor.addListener("cancel", () => win.close());
+      const editButton = new qx.ui.menu.Button(this.tr("Rename..."), "@FontAwesome5Solid/pencil-alt/12");
+      editButton.addListener("execute", () => {
+        const folder = this.getFolder();
+        const newFolder = false;
+        const folderEditor = new osparc.editor.FolderEditor(newFolder).set({
+          label: folder.getName(),
+          description: folder.getDescription()
         });
-        menu.add(editButton);
-
-        const shareButton = new qx.ui.menu.Button(this.tr("Share..."), "@FontAwesome5Solid/share-alt/12");
-        shareButton.addListener("execute", () => this.__openShareWith(), this);
-        menu.add(shareButton);
-
-        menu.addSeparator();
-
-        const deleteButton = new qx.ui.menu.Button(this.tr("Delete"), "@FontAwesome5Solid/trash/12");
-        deleteButton.addListener("execute", () => this.__deleteStudyRequested(), this);
-        menu.add(deleteButton);
+        const title = this.tr("Edit Folder");
+        const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 200);
+        folderEditor.addListener("updateFolder", () => {
+          const newName = folderEditor.getLabel();
+          const newDescription = folderEditor.getDescription();
+          const updateData = {
+            "name": newName,
+            "description": newDescription
+          };
+          osparc.data.model.Folder.putFolder(this.getFolderId(), updateData)
+            .then(() => {
+              folder.set({
+                name: newName,
+                description: newDescription
+              });
+              this.fireDataEvent("folderUpdated", folder.getFolderId());
+            })
+            .catch(err => console.error(err));
+          win.close();
+        });
+        folderEditor.addListener("cancel", () => win.close());
+      });
+      menu.add(editButton);
 
-        menuButton.setMenu(menu);
-      }
-    },
+      const deleteButton = new qx.ui.menu.Button(this.tr("Delete"), "@FontAwesome5Solid/trash/12");
+      deleteButton.addListener("execute", () => this.__deleteStudyRequested(), this);
+      menu.add(deleteButton);
 
-    __applyAccessRights: function(value) {
-      if (value && Object.keys(value).length) {
-        const shareIcon = this.getChildControl("icon").getChildControl("shared-icon");
-        // if it's not shared don't show the share icon
-        shareIcon.addListener("changeSource", e => {
-          const newSource = e.getData();
-          shareIcon.set({
-            visibility: newSource.includes(osparc.dashboard.CardBase.SHARE_ICON) ? "hidden" : "visible"
-          });
-        });
-        osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);
-      }
+      menuButton.setMenu(menu);
     },
 
     __updateTooltip: function() {
@@ -260,18 +227,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       this.setValue(false);
     },
 
-    __openShareWith: function() {
-      const disableShare = true;
-      if (disableShare) {
-        osparc.FlashMessenger.getInstance().logAs(this.tr("Not yet implemented"), "WARNING");
-      } else {
-        const title = this.tr("Share Folder");
-        const permissionsView = new osparc.share.CollaboratorsFolder(this.getFolder());
-        osparc.ui.window.Window.popUpInWindow(permissionsView, title);
-        permissionsView.addListener("updateAccessRights", () => this.__applyAccessRights(this.getFolder().getAccessRights()), this);
-      }
-    },
-
     __deleteStudyRequested: function() {
       const msg = this.tr("Are you sure you want to delete") + " <b>" + this.getTitle() + "</b>?";
       const confirmationWin = new osparc.ui.window.Confirmation(msg).set({