✨ [Frontend] Connect folders to backend

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

@@ -44,6 +44,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
 
   events: {
     "folderSelected": "qx.event.type.Data",
+    "folderUpdated": "qx.event.type.Data",
     "deleteFolderRequested": "qx.event.type.Data"
   },
 
@@ -148,9 +149,9 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     __applyFolder: function(folder) {
       this.getChildControl("icon");
       this.set({
-        cardKey: "folder-" + folder.getId()
+        cardKey: "folder-" + folder.getFolderId()
       });
-      folder.bind("id", this, "folderId");
+      folder.bind("folderId", this, "folderId");
       folder.bind("parentId", this, "parentFolderId");
       folder.bind("name", this, "title");
       folder.bind("description", this, "description");
@@ -198,18 +199,18 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
           folderEditor.addListener("updateFolder", () => {
             const newName = folderEditor.getLabel();
             const newDescription = folderEditor.getDescription();
-            const promises = [];
-            if (newName !== folder.getName()) {
-              promises.push(osparc.data.model.Folder.patchFolder(this.getFolderId(), "name", newName));
-            }
-            if (newDescription !== folder.getDescription()) {
-              promises.push(osparc.data.model.Folder.patchFolder(this.getFolderId(), "description", newDescription));
-            }
-            Promise.all(promises)
-              .then(() => folder.set({
-                name: newName,
-                description: newDescription
-              }))
+            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();
           });
@@ -260,10 +261,15 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     },
 
     __openShareWith: function() {
-      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);
+      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() {

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

@@ -117,7 +117,7 @@ qx.Class.define("osparc.dashboard.FolderHeader", {
       } else {
         folderButton = new qx.ui.form.Button(this.tr("Home"), "@FontAwesome5Solid/home/14");
       }
-      folderButton.addListener("execute", () => this.fireDataEvent("changeCurrentFolderId", folder ? folder.getId() : null), this);
+      folderButton.addListener("execute", () => this.fireDataEvent("changeCurrentFolderId", folder ? folder.getFolderId() : null), this);
       folderButton.set({
         backgroundColor: "transparent",
         textColor: "text",

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

@@ -0,0 +1,41 @@
+/* ************************************************************************
+
+   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.FolderTreeItem", {
+  extend: qx.ui.tree.VirtualTreeItem,
+
+  members: {
+    _addWidgets: function() {
+      this.addSpacer();
+      // this.addOpenButton();
+      const openButton = this.getChildControl("open");
+      openButton.addListener("changeOpen", () => {
+        console.log("changeOpen", this);
+      }, this);
+      openButton.addListener("changeVisibility", e => {
+        // console.log("changeVisibility", this.getLabel() + e.getData(), this);
+        openButton.show();
+      }, this);
+      this._add(openButton);
+      this.addIcon();
+      const label = this.getChildControl("label");
+      this._add(label, {
+        flex: 1
+      });
+    }
+  }
+});

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

@@ -0,0 +1,131 @@
+/* ************************************************************************
+
+   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.FoldersTree", {
+  extend: qx.ui.tree.VirtualTree,
+
+  construct: function() {
+    const rootFolder = this.self().createNewEntry(null);
+    const root = qx.data.marshal.Json.createModel(rootFolder, true);
+    this.__fetchChildren(root);
+
+    this.base(arguments, root, "label", "children");
+
+    this.set({
+      openMode: "dbltap",
+      decorator: "no-border",
+      font: "text-14",
+      showLeafs: true,
+      paddingLeft: -10,
+    });
+
+    this.__initTree();
+  },
+
+  events: {
+    "selectionChanged": "qx.event.type.Event" // tap
+  },
+
+  statics: {
+    createNewEntry: function(folder) {
+      return {
+        folderId: folder ? folder.getFolderId() : null,
+        label: folder ? folder.getName() : "Home",
+        children: [
+          this.self().getLoadingData()
+        ],
+        loaded: false,
+      };
+    },
+
+    getLoadingData: function() {
+      return {
+        folderId: -1,
+        label: "Loading...",
+        children: [],
+        icon: "@FontAwesome5Solid/circle-notch/12",
+        loaded: false,
+      };
+    },
+
+    addLoadingChild: function(parentModel) {
+      const loadingModel = qx.data.marshal.Json.createModel(this.self().getLoadingData(), true);
+      parentModel.getChildren().append(loadingModel);
+    },
+
+    removeLoadingChild: function(parent) {
+      for (let i = parent.getChildren().getLength() - 1; i >= 0; i--) {
+        if (parent.getChildren().toArray()[i].getLabel() === "Loading...") {
+          parent.getChildren().splice(i, 1);
+        }
+      }
+    }
+  },
+
+  members: {
+    __initTree: function() {
+      const that = this;
+      this.setDelegate({
+        createItem: () => new osparc.dashboard.FolderTreeItem(),
+        bindItem: (c, item, id) => {
+          c.bindDefaultProperties(item, id);
+          c.bindProperty("folderId", "model", null, item, id);
+          c.bindProperty("", "open", {
+            converter(value, _, __, target) {
+              const isOpen = target.isOpen();
+              if (isOpen && !value.getLoaded()) {
+                // eslint-disable-next-line no-underscore-dangle
+                that.__fetchChildren(value);
+              }
+              return isOpen;
+            }
+          }, item, id);
+        },
+        configureItem: item => {
+          item.addListener("tap", () => this.fireDataEvent("selectionChanged", item.getModel()), this);
+        },
+        sorter: (a, b) => {
+          const aLabel = a.getLabel();
+          if (aLabel === -1) {
+            return 1;
+          }
+          const bLabel = b.getLabel();
+          if (bLabel === -1) {
+            return -1;
+          }
+          return aLabel - bLabel;
+        }
+      });
+    },
+
+    __fetchChildren: function(parentModel) {
+      parentModel.setLoaded(true);
+
+      const folderId = parentModel.getFolderId ? parentModel.getFolderId() : parentModel.getModel();
+      osparc.store.Folders.getInstance().fetchFolders(folderId)
+        .then(folders => {
+          this.self().removeLoadingChild(parentModel);
+          folders.forEach(folder => {
+            const folderData = this.self().createNewEntry(folder);
+            const folderModel = qx.data.marshal.Json.createModel(folderData, true);
+            parentModel.getChildren().append(folderModel);
+          });
+        })
+        .catch(console.error);
+    }
+  }
+});

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

@@ -0,0 +1,92 @@
+/* ************************************************************************
+
+   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.MoveStudyToFolder", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(studyData, currentFolderId) {
+    this.base(arguments);
+
+    this.__studyData = studyData;
+    this.__currentFolderId = currentFolderId;
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+
+    this.getChildControl("current-folder");
+    const foldersTree = this.getChildControl("folders-tree");
+    this.getChildControl("cancel-btn");
+    const moveButton = this.getChildControl("move-btn");
+
+    moveButton.setEnabled(false)
+    foldersTree.addListener("selectionChanged", e => {
+      const folderId = e.getData();
+      moveButton.setEnabled(this.__currentFolderId !== folderId);
+      moveButton.addListenerOnce("execute", () => this.fireDataEvent("moveToFolder", folderId));
+    });
+  },
+
+  events: {
+    "cancel": "qx.event.type.Event",
+    "moveToFolder": "qx.event.type.Data"
+  },
+
+  members: {
+    __studyData: null,
+    __currentFolderId: null,
+
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "current-folder": {
+          const folder = osparc.store.Folders.getInstance().getFolder(this.__currentFolderId);
+          const currentFolderName = folder ? folder["name"] : "Home";
+          control = new qx.ui.basic.Label(this.tr("Current location: ") + currentFolderName);
+          this._add(control);
+          break;
+        }
+        case "folders-tree":
+          control = new osparc.dashboard.FoldersTree();
+          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

@@ -252,6 +252,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("tagClicked", e => this._searchBarFilter.addTagActiveFilter(e.getData()));
       resourcesContainer.addListener("emptyStudyClicked", e => this._deleteResourceRequested(e.getData()));
       resourcesContainer.addListener("folderSelected", e => this._folderSelected(e.getData()));
+      resourcesContainer.addListener("folderUpdated", e => this._folderUpdated(e.getData()));
       resourcesContainer.addListener("deleteFolderRequested", e => this._deleteFolderRequested(e.getData()));
       this._addToLayout(resourcesContainer);
     },
@@ -451,6 +452,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
+    _folderUpdated: function(folderId) {
+      throw new Error("Abstract method called!");
+    },
+
     _deleteFolderRequested: function(folderId) {
       throw new Error("Abstract method called!");
     },