✨ [Frontend] Workspaces: Connect to backend

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

@@ -73,12 +73,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       apply: "__applyTitle"
     },
 
-    description: {
-      check: "String",
-      nullable: true,
-      apply: "__applyDescription"
-    },
-
     lastModified: {
       check: "Date",
       nullable: true,
@@ -143,7 +137,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       folder.bind("folderId", this, "folderId");
       folder.bind("parentId", this, "parentFolderId");
       folder.bind("name", this, "title");
-      folder.bind("description", this, "description");
       folder.bind("lastModified", this, "lastModified");
 
       this.__addMenuButton();
@@ -152,11 +145,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     __applyTitle: function(value) {
       const label = this.getChildControl("title");
       label.setValue(value);
-      this.__updateTooltip();
-    },
-
-    __applyDescription: function() {
-      this.__updateTooltip();
     },
 
     __applyLastModified: function(value) {
@@ -180,22 +168,18 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         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);
+        const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 150);
         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());
             })
@@ -213,13 +197,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       menuButton.setMenu(menu);
     },
 
-    __updateTooltip: function() {
-      const toolTipText = this.getTitle() + (this.getDescription() ? "<br>" + this.getDescription() : "");
-      this.set({
-        toolTipText
-      })
-    },
-
     __itemSelected: function(newVal) {
       if (newVal) {
         this.fireDataEvent("folderSelected", this.getFolderId());

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

@@ -80,13 +80,11 @@ qx.Class.define("osparc.dashboard.FolderButtonNew", {
         const newFolder = true;
         const folderEditor = new osparc.editor.FolderEditor(newFolder);
         const title = this.tr("New Folder");
-        const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 200);
+        const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 150);
         folderEditor.addListener("createFolder", () => {
           const name = folderEditor.getLabel();
-          const description = folderEditor.getDescription();
           this.fireDataEvent("createFolder", {
             name,
-            description
           });
           win.close();
         });

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

@@ -18,8 +18,11 @@
 qx.Class.define("osparc.dashboard.FoldersTree", {
   extend: qx.ui.tree.VirtualTree,
 
-  construct: function() {
-    const rootFolder = this.self().createNewEntry(null);
+  construct: function(currentWorkspaceId) {
+    this.__currentWorkspaceId = currentWorkspaceId;
+    const workspace = osparc.store.Workspaces.getWorkspace(currentWorkspaceId);
+    const rootLabel = workspace ? workspace.getName() : "My Workspace";
+    const rootFolder = this.self().createNewEntry(rootLabel, null);
     const root = qx.data.marshal.Json.createModel(rootFolder, true);
     this.__fetchChildren(root);
 
@@ -41,10 +44,10 @@ qx.Class.define("osparc.dashboard.FoldersTree", {
   },
 
   statics: {
-    createNewEntry: function(folder) {
+    createNewEntry: function(label, folderId) {
       return {
-        folderId: folder ? folder.getFolderId() : null,
-        label: folder ? folder.getName() : "Home",
+        label,
+        folderId,
         children: [
           this.self().getLoadingData()
         ],
@@ -77,6 +80,8 @@ qx.Class.define("osparc.dashboard.FoldersTree", {
   },
 
   members: {
+    __currentWorkspaceId:null,
+
     __initTree: function() {
       const that = this;
       this.setDelegate({
@@ -116,11 +121,11 @@ qx.Class.define("osparc.dashboard.FoldersTree", {
       parentModel.setLoaded(true);
 
       const folderId = parentModel.getFolderId ? parentModel.getFolderId() : parentModel.getModel();
-      osparc.store.Folders.getInstance().fetchFolders(folderId)
+      osparc.store.Folders.getInstance().fetchFolders(folderId, this.__currentWorkspaceId)
         .then(folders => {
           this.self().removeLoadingChild(parentModel);
           folders.forEach(folder => {
-            const folderData = this.self().createNewEntry(folder);
+            const folderData = this.self().createNewEntry(folder.getName(), folder.getFolderId());
             const folderModel = qx.data.marshal.Json.createModel(folderData, true);
             parentModel.getChildren().append(folderModel);
           });

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

@@ -18,11 +18,12 @@
 qx.Class.define("osparc.dashboard.MoveStudyToFolder", {
   extend: qx.ui.core.Widget,
 
-  construct: function(studyData, currentFolderId) {
+  construct: function(studyData, currentFolderId, currentWorkspaceId) {
     this.base(arguments);
 
     this.__studyData = studyData;
     this.__currentFolderId = currentFolderId;
+    this.__currentWorkspaceId = currentWorkspaceId;
 
     this._setLayout(new qx.ui.layout.VBox(10));
 
@@ -35,7 +36,10 @@ qx.Class.define("osparc.dashboard.MoveStudyToFolder", {
     foldersTree.addListener("selectionChanged", e => {
       const folderId = e.getData();
       moveButton.setEnabled(this.__currentFolderId !== folderId);
-      moveButton.addListenerOnce("execute", () => this.fireDataEvent("moveToFolder", folderId));
+      this.__selectedFolderId = folderId;
+    });
+    moveButton.addListener("execute", () => {
+      this.fireDataEvent("moveToFolder", this.__selectedFolderId);
     });
   },
 
@@ -59,7 +63,7 @@ qx.Class.define("osparc.dashboard.MoveStudyToFolder", {
           break;
         }
         case "folders-tree":
-          control = new osparc.dashboard.FoldersTree();
+          control = new osparc.dashboard.FoldersTree(this.__currentWorkspaceId);
           this._add(control);
           break;
         case "buttons-layout":

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

@@ -0,0 +1,95 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.dashboard.MoveStudyToWorkspace", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(studyData, currentWorkspaceId) {
+    this.base(arguments);
+
+    this.__studyData = studyData;
+    this.__currentWorkspaceId = currentWorkspaceId;
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+
+    this.getChildControl("current-workspace");
+    const workspacesTree = this.getChildControl("workspaces-tree");
+    this.getChildControl("cancel-btn");
+    const moveButton = this.getChildControl("move-btn");
+
+    moveButton.setEnabled(false)
+    workspacesTree.addListener("selectionChanged", e => {
+      const workspaceId = e.getData();
+      moveButton.setEnabled(this.__currentWorkspaceId !== workspaceId);
+      this.__selectedWorkspaceId = workspaceId;
+    });
+    moveButton.addListener("execute", () => {
+      this.fireDataEvent("moveToWorkspace", this.__selectedWorkspaceId);
+    }, this);
+  },
+
+  events: {
+    "cancel": "qx.event.type.Event",
+    "moveToWorkspace": "qx.event.type.Data"
+  },
+
+  members: {
+    __studyData: null,
+    __currentWorkspaceId: null,
+
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "current-workspace": {
+          const workspace = osparc.store.Workspaces.getWorkspace(this.__currentWorkspaceId);
+          const currentWorkspaceName = workspace ? workspace.getName() : "My Workspace";
+          control = new qx.ui.basic.Label(this.tr("Current location: ") + currentWorkspaceName);
+          this._add(control);
+          break;
+        }
+        case "workspaces-tree":
+          control = new osparc.dashboard.WorkspacesTree();
+          this._add(control);
+          break;
+        case "buttons-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
+            alignX: "right"
+          }));
+          this._add(control);
+          break;
+        case "cancel-btn": {
+          const buttons = this.getChildControl("buttons-layout");
+          control = new qx.ui.form.Button(this.tr("Cancel")).set({
+            appearance: "form-button-text"
+          });
+          control.addListener("execute", () => this.fireEvent("cancel"), this);
+          buttons.add(control);
+          break;
+        }
+        case "move-btn": {
+          const buttons = this.getChildControl("buttons-layout");
+          control = new qx.ui.form.Button(this.tr("Move")).set({
+            appearance: "form-button"
+          });
+          buttons.add(control);
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    }
+  }
+});

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

@@ -186,6 +186,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
   members: {
     __leftFilters: null,
+    _resourceFilter: null,
     __centerLayout: null,
     _resourceType: null,
     _resourcesList: null,
@@ -256,7 +257,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("workspaceSelected", e => {
         const workspaceId = e.getData();
         this._workspaceSelected(workspaceId);
-        this.__resourceFilter.workspaceSelected(workspaceId);
+        this._resourceFilter.workspaceSelected(workspaceId);
       });
       resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
@@ -355,7 +356,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     },
 
     _addResourceFilter: function() {
-      const resourceFilter = this.__resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({
+      const resourceFilter = this._resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({
         marginTop: osparc.dashboard.SearchBarFilter.HEIGHT + 10, // aligned with toolbar buttons: search bar + spacing
         maxWidth: this.self().SIDE_SPACER_WIDTH,
         width: this.self().SIDE_SPACER_WIDTH

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

@@ -43,6 +43,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
   members: {
     __resourceType: null,
+    __contextLayout: null,
+    __contextRadioGroup: null,
     __sharedWithButtons: null,
     __workspaceButtons: null,
     __tagButtons: null,
@@ -70,9 +72,9 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
     /* SHARED WITH */
     __createSharedWithFilterLayout: function() {
-      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const layout = this.__contextLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 
-      const radioGroup = new qx.ui.form.RadioGroup();
+      const radioGroup = this.__contextRadioGroup = new qx.ui.form.RadioGroup();
       radioGroup.setAllowEmptySelection(false);
 
       const options = osparc.dashboard.SearchBarFilter.getSharedWithOptions(this.__resourceType);
@@ -90,7 +92,15 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
             button.set({
               label: this.tr("My Workspace")
             });
-          } else {
+          } else if (option.id === "shared-with-me") {
+            button.set({
+              label: this.tr("Shared") + " " + osparc.product.Utils.getStudyAlias({
+                firstUpperCase: true,
+                plural: true,
+              })
+            });
+          }
+          if (option.id !== "show-all") {
             button.set({
               marginLeft: 15
             });
@@ -112,27 +122,38 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       });
 
       if (this.__resourceType === "study") {
-        this.__addWorkspaceButtons(layout, radioGroup);
+        this.__addWorkspaceButtons();
       }
 
       return layout;
     },
     /* /SHARED WITH */
 
     /* WORKSPACES */
-    __addWorkspaceButtons: function(layout, radioGroup) {
-      layout.add(new qx.ui.core.Spacer());
+    __addWorkspaceButtons: function() {
+      this.__contextLayout.add(new qx.ui.core.Spacer());
       const workspacesButton = new qx.ui.toolbar.RadioButton(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath(22));
       workspacesButton.workspaceId = -1;
       workspacesButton.set({
         appearance: "filter-toggle-button"
       });
-      layout.add(workspacesButton);
-      radioGroup.add(workspacesButton);
+      this.__contextLayout.add(workspacesButton);
+      this.__contextRadioGroup.add(workspacesButton);
       workspacesButton.addListener("execute", () => {
         this.fireDataEvent("changeWorkspace", workspacesButton.workspaceId);
       });
 
+      this.reloadWorkspaceButtons();
+    },
+
+    reloadWorkspaceButtons: function() {
+      // remove first the workspaces
+      for (let i=this.__workspaceButtons.length-1; i >= 0; i--) {
+        const workspaceButton = this.__workspaceButtons[i];
+        this.__contextLayout.remove(workspaceButton);
+        this.__contextRadioGroup.remove(workspaceButton);
+      }
+      this.__workspaceButtons = [];
       osparc.store.Workspaces.fetchWorkspaces()
         .then(workspaces => {
           workspaces.forEach(workspace => {
@@ -143,8 +164,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
               appearance: "filter-toggle-button",
               marginLeft: 15,
             });
-            layout.add(workspaceButton);
-            radioGroup.add(workspaceButton);
+            this.__contextLayout.add(workspaceButton);
+            this.__contextRadioGroup.add(workspaceButton);
             workspaceButton.addListener("execute", () => {
               this.fireDataEvent("changeWorkspace", workspaceButton.workspaceId);
             }, this);