🎨 [Frontend] Move multiple studies at once

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

@@ -784,13 +784,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
         if (billingSettingsButton) {
           billingSettingsButton.setEnabled(osparc.study.Utils.canShowBillingOptions(resourceData));
         }
-        const moveToFolderButton = menuButtons.find(menuBtn => "moveToFolderButton" in menuBtn);
-        if (moveToFolderButton) {
-          moveToFolderButton.setEnabled(osparc.study.Utils.canMoveToFolder(resourceData));
-        }
-        const moveToWorkspaceButton = menuButtons.find(menuBtn => "moveToWorkspaceButton" in menuBtn);
-        if (moveToWorkspaceButton) {
-          moveToWorkspaceButton.setEnabled(osparc.study.Utils.canMoveToWorkspace(resourceData));
+        const moveToButton = menuButtons.find(menuBtn => "moveToButton" in menuBtn);
+        if (moveToButton) {
+          moveToButton.setEnabled(osparc.study.Utils.canMoveTo(resourceData));
         }
         const deleteButton = menuButtons.find(menuBtn => "deleteButton" in menuBtn);
         if (deleteButton) {

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

@@ -45,8 +45,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
   events: {
     "folderSelected": "qx.event.type.Data",
     "folderUpdated": "qx.event.type.Data",
-    "moveFolderToFolderRequested": "qx.event.type.Data",
-    "moveFolderToWorkspaceRequested": "qx.event.type.Data",
+    "moveFolderToRequested": "qx.event.type.Data",
     "deleteFolderRequested": "qx.event.type.Data"
   },
 
@@ -191,13 +190,9 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       editButton.addListener("execute", () => this.__editFolder(), this);
       menu.add(editButton);
 
-      const moveToFolderButton = new qx.ui.menu.Button(this.tr("Move to Folder..."), "@FontAwesome5Solid/folder/12");
-      moveToFolderButton.addListener("execute", () => this.fireDataEvent("moveFolderToFolderRequested", this.getFolderId()), this);
-      menu.add(moveToFolderButton);
-
-      const moveToWorkspaceButton = new qx.ui.menu.Button(this.tr("Move to Workspace..."), osparc.store.Workspaces.iconPath(14));
-      moveToWorkspaceButton.addListener("execute", () => this.fireDataEvent("moveFolderToWorkspaceRequested", this.getFolderId()), this);
-      menu.add(moveToWorkspaceButton);
+      const moveToButton = new qx.ui.menu.Button(this.tr("Move to..."), "@FontAwesome5Solid/folder/12");
+      moveToButton.addListener("execute", () => this.fireDataEvent("moveFolderToRequested", this.getFolderId()), this);
+      menu.add(moveToButton);
 
       menu.addSeparator();
 

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

@@ -29,22 +29,21 @@ qx.Class.define("osparc.dashboard.GridButtonLoadMore", {
 
     this._applyFetching(false);
 
+    // A minimalistic spinning wheel
+    this.getChildControl("header").exclude();
     this.getChildControl("footer").exclude();
+    this.set({
+      backgroundColor: "transparent"
+    });
   },
 
   members: {
     _applyFetching: function(value) {
-      const title = this.getChildControl("title");
-      const desc = this.getChildControl("subtitle-text");
       this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
       if (value) {
-        title.setValue(this.tr("Loading..."));
-        desc.setValue("");
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .addClass("rotate");
       } else {
-        title.setValue(this.tr("Load More"));
-        desc.setValue(this.tr("Click to load more").toString());
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .removeClass("rotate");
       }

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

@@ -30,19 +30,19 @@ qx.Class.define("osparc.dashboard.ListButtonLoadMore", {
     this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.LOADER);
 
     this._applyFetching(false);
+
+    this.set({
+      backgroundColor: "transparent"
+    });
   },
 
   members: {
     _applyFetching: function(value) {
-      const title = this.getChildControl("title");
+      this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
       if (value) {
-        title.setValue(this.tr("Loading..."));
-        this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .addClass("rotate");
       } else {
-        title.setValue(this.tr("Load More"));
-        this.setIcon("@FontAwesome5Solid/paw/");
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .removeClass("rotate");
       }

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

@@ -0,0 +1,125 @@
+/* ************************************************************************
+
+   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.MoveResourceTo", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(currentWorkspaceId, currentFolderId) {
+    this.base(arguments);
+
+    this.__currentWorkspaceId = currentWorkspaceId;
+    this.__currentFolderId = currentFolderId;
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+
+    this.getChildControl("current-location");
+
+    const workspacesAndFoldersTree = this.getChildControl("workspaces-and-folders-tree");
+    this.getChildControl("cancel-btn");
+    const moveButton = this.getChildControl("move-btn");
+
+    moveButton.setEnabled(false);
+    workspacesAndFoldersTree.getSelection().addListener("change", () => {
+      const selection = workspacesAndFoldersTree.getSelection();
+      if (selection.getLength() > 0) {
+        const item = selection.getItem(0);
+        this.__selectedWorkspaceId = item.getWorkspaceId();
+        this.__selectedFolderId = item.getFolderId();
+        moveButton.setEnabled(this.__currentWorkspaceId !== this.__selectedWorkspaceId || this.__currentFolderId !== this.__selectedFolderId);
+      }
+    }, this);
+    moveButton.addListener("execute", () => {
+      this.fireDataEvent("moveTo", {
+        workspaceId: this.__selectedWorkspaceId,
+        folderId: this.__selectedFolderId,
+      });
+    }, this);
+  },
+
+  events: {
+    "cancel": "qx.event.type.Event",
+    "moveTo": "qx.event.type.Data"
+  },
+
+  members: {
+    __currentWorkspaceId: null,
+    __currentFolderId: null,
+    __selectedWorkspaceId: null,
+    __selectedFolderId: null,
+
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "current-location": {
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+          const intro = new qx.ui.basic.Label(this.tr("Current location"));
+          control.add(intro);
+          const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.__currentWorkspaceId);
+          const workspaceText = workspace ? workspace.getName() : "My Workspace";
+          const workspaceLabel = new qx.ui.basic.Label(this.tr("- Workspace: ") + workspaceText);
+          control.add(workspaceLabel);
+          const folder = osparc.store.Folders.getInstance().getFolder(this.__currentFolderId);
+          if (folder) {
+            const folderText = folder.getName();
+            const folderLabel = new qx.ui.basic.Label(this.tr("- Folder: ") + folderText);
+            control.add(folderLabel);
+          }
+          this._add(control);
+          break;
+        }
+        case "workspaces-and-folders-tree":
+          control = new osparc.dashboard.WorkspacesAndFoldersTree();
+          this._add(control, {
+            flex: 1
+          });
+          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);
+    },
+
+    __getUpstreamFolders: function(childFolder, folderIds = []) {
+      if (childFolder) {
+        folderIds.unshift(childFolder.getFolderId());
+        const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());
+        this.__getUpstreamFolders(parentFolder, folderIds);
+      }
+    }
+  }
+});