🎨 [Frontend] Folder & Workspaces: Missing features I (#6317)

ITISFoundation · Sep 10, 2024 · a3b8340 · a3b8340
1 parent e28d3bd
commit a3b8340
Show file tree

Hide file tree

Showing 21 changed files with 554 additions and 353 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/About.js b/services/static-webserver/client/source/class/osparc/About.js
@@ -184,27 +184,6 @@ qx.Class.define("osparc.About", {
       const label = lib.name || "unknown-library";
       const version = lib.version || "-";
       const url = lib.url || null;
-      const thumbnail = lib.thumbnail || null;
-
-      if (thumbnail) {
-        const image = new qx.ui.basic.Image(thumbnail).set({
-          height: 30,
-          maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING,
-          scale: true,
-          toolTipText: label + (version === "-" ? "" : (" " + version))
-        });
-        image.getContentElement().setStyles({
-          "object-fit": "contain",
-          "object-position": "left"
-        });
-        if (url) {
-          image.set({
-            cursor: "pointer"
-          });
-          image.addListener("tap", () => window.open(url));
-        }
-        return [image];
-      }
 
       let entryLabel;
       if (url) {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js
@@ -109,17 +109,12 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
           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,
-        }));
       }
+      rootButton.addListener("execute", () => this.set({
+        currentFolderId: null,
+      }));
       return rootButton;
     },
 

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js
@@ -58,6 +58,12 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       apply: "__applyFolder"
     },
 
+    workspaceId: {
+      check: "Number",
+      nullable: true,
+      apply: "__applyWorkspaceId"
+    },
+
     folderId: {
       check: "Number",
       nullable: false
@@ -87,8 +93,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       let control;
       switch (id) {
         case "icon": {
-          control = new qx.ui.basic.Image().set({
-            source: "@FontAwesome5Solid/folder/26",
+          control = new osparc.dashboard.FolderWithSharedIcon().set({
             anonymous: true,
             height: 40,
             padding: 5
@@ -136,6 +141,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       this.set({
         cardKey: "folder-" + folder.getFolderId()
       });
+      folder.bind("workspaceId", this, "workspaceId");
       folder.bind("folderId", this, "folderId");
       folder.bind("parentId", this, "parentFolderId");
       folder.bind("name", this, "title");
@@ -144,6 +150,22 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       this.__addMenuButton();
     },
 
+    __applyWorkspaceId: function(workspaceId) {
+      const workspace = osparc.store.Workspaces.getWorkspace(workspaceId);
+      const accessRights = workspace ? workspace.getAccessRights() : {};
+      if (accessRights && Object.keys(accessRights).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, accessRights);
+      }
+    },
+
     __applyTitle: function(value) {
       const label = this.getChildControl("title");
       label.setValue(value);
@@ -172,7 +194,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       moveToFolderButton.addListener("execute", () => this.fireDataEvent("moveFolderToFolderRequested", this.getFolderId()), this);
       menu.add(moveToFolderButton);
 
-      const moveToWorkspaceButton = new qx.ui.menu.Button(this.tr("Move to Workspace..."), "");
+      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);
 
@@ -199,7 +221,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         label: folder.getName(),
       });
       const title = this.tr("Edit Folder");
-      const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 150);
+      const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 120);
       folderEditor.addListener("updateFolder", () => {
         const newName = folderEditor.getLabel();
         const updateData = {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonNew.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonNew.js
@@ -80,7 +80,7 @@ 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, 150);
+        const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 120);
         folderEditor.addListener("createFolder", () => {
           const name = folderEditor.getLabel();
           this.fireDataEvent("createFolder", {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderTreeItem.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderTreeItem.js
diff --git a/...parc/dashboard/WorkspaceWithSharedIcon.js → .../osparc/dashboard/FolderWithSharedIcon.js b/...parc/dashboard/WorkspaceWithSharedIcon.js → .../osparc/dashboard/FolderWithSharedIcon.js
@@ -15,7 +15,7 @@
 
 ************************************************************************ */
 
-qx.Class.define("osparc.dashboard.WorkspaceWithSharedIcon", {
+qx.Class.define("osparc.dashboard.FolderWithSharedIcon", {
   extend: qx.ui.core.Widget,
 
   construct: function() {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FoldersTree.js b/services/static-webserver/client/source/class/osparc/dashboard/FoldersTree.js
@@ -20,21 +20,19 @@ qx.Class.define("osparc.dashboard.FoldersTree", {
 
   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);
 
-    this.base(arguments, root, "label", "children");
+    const workspace = osparc.store.Workspaces.getWorkspace(this.__currentWorkspaceId);
+    const workspaceLabel = workspace ? workspace.getName() : "My Workspace";
+    const rootData = {
+      label: workspaceLabel,
+      folderId: null,
+      children: [],
+      loaded: true,
+    };
+    const root = qx.data.marshal.Json.createModel(rootData, true);
+    this.__populateFolder(root);
 
-    this.set({
-      openMode: "dbltap",
-      decorator: "no-border",
-      font: "text-14",
-      showLeafs: true,
-      paddingLeft: -10,
-    });
+    this.base(arguments, root, "label", "children");
 
     this.__initTree();
   },
@@ -43,94 +41,48 @@ qx.Class.define("osparc.dashboard.FoldersTree", {
     "selectionChanged": "qx.event.type.Event" // tap
   },
 
-  statics: {
-    createNewEntry: function(label, folderId) {
-      return {
-        label,
-        folderId,
-        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: {
     __currentWorkspaceId:null,
 
     __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) {
+            converter(value, model, source, target) {
               const isOpen = target.isOpen();
               if (isOpen && !value.getLoaded()) {
+                value.setLoaded(true);
                 // eslint-disable-next-line no-underscore-dangle
-                that.__fetchChildren(value);
+                that.__populateFolder(value);
               }
               return isOpen;
-            }
+            },
           }, item, id);
         },
         configureItem: item => {
-          item.addListener("tap", () => this.fireDataEvent("selectionChanged", item.getModel()), this);
+          item.addListener("tap", () => this.fireDataEvent("selectionChanged", item.getModel().getFolderId()), 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, this.__currentWorkspaceId)
+    __populateFolder: function(parent) {
+      osparc.store.Folders.getInstance().fetchFolders(parent.getFolderId(), this.__currentWorkspaceId)
         .then(folders => {
-          this.self().removeLoadingChild(parentModel);
+          parent.getChildren().removeAll();
           folders.forEach(folder => {
-            const folderData = this.self().createNewEntry(folder.getName(), folder.getFolderId());
-            const folderModel = qx.data.marshal.Json.createModel(folderData, true);
-            parentModel.getChildren().append(folderModel);
+            const folderData = {
+              label: folder.getName(),
+              folderId: folder.getFolderId(),
+              loaded: false,
+              children: [{
+                label: "Loading...",
+              }]
+            };
+            parent.getChildren().push(qx.data.marshal.Json.createModel(folderData, true));
           });
-        })
-        .catch(console.error);
-    }
+        });
+    },
   }
 });
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceToWorkspace.js b/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceToWorkspace.js
@@ -33,8 +33,12 @@ qx.Class.define("osparc.dashboard.MoveResourceToWorkspace", {
     moveButton.setEnabled(false)
     workspacesTree.addListener("selectionChanged", e => {
       const workspaceId = e.getData();
-      moveButton.setEnabled(this.__currentWorkspaceId !== workspaceId);
-      this.__selectedWorkspaceId = workspaceId;
+      if (this.__currentWorkspaceId !== workspaceId && workspaceId !== -1) {
+        moveButton.setEnabled(true);
+        this.__selectedWorkspaceId = workspaceId;
+      } else {
+        moveButton.setEnabled(false);
+      }
     });
     moveButton.addListener("execute", () => {
       this.fireDataEvent("moveToWorkspace", this.__selectedWorkspaceId);
@@ -48,6 +52,7 @@ qx.Class.define("osparc.dashboard.MoveResourceToWorkspace", {
 
   members: {
     __currentWorkspaceId: null,
+    __selectedWorkspaceId: null,
 
     _createChildControlImpl: function(id) {
       let control;

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js
@@ -157,7 +157,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       osparc.store.Workspaces.fetchWorkspaces()
         .then(workspaces => {
           workspaces.forEach(workspace => {
-            const workspaceButton = new qx.ui.toolbar.RadioButton(workspace.getName(), osparc.store.Workspaces.iconPath(22));
+            const workspaceButton = new qx.ui.toolbar.RadioButton(null, osparc.store.Workspaces.iconPath(22));
+            workspace.bind("name", workspaceButton, "label");
             workspaceButton.workspaceId = workspace.getWorkspaceId();
             this.__workspaceButtons.push(workspaceButton);
             workspaceButton.set({