🎨🐛 [Frontend] Folders tree: improvements (#6360)

ITISFoundation · Sep 16, 2024 · c21b1fb · c21b1fb
1 parent e4326eb
commit c21b1fb
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 57 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js
@@ -31,20 +31,22 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
     }));
   },
 
+  events: {
+    "changeContext": "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: "__buildBreadcrumbs"
     }
   },
@@ -112,17 +114,34 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
       } else {
         rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14");
       }
-      rootButton.addListener("execute", () => this.set({
-        currentFolderId: null,
-      }));
+      rootButton.addListener("execute", () => {
+        const folderId = null;
+        this.set({
+          currentFolderId: null,
+        });
+        this.fireDataEvent("changeContext", {
+          workspaceId,
+          folderId,
+        });
+      });
       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);
+        folderButton.addListener("execute", () => {
+          const workspaceId = this.getCurrentWorkspaceId();
+          const folderId = folder ? folder.getFolderId() : null;
+          this.set({
+            currentFolderId: folderId,
+          });
+          this.fireDataEvent("changeContext", {
+            workspaceId,
+            folderId,
+          });
+        }, this);
       } else {
         const workspaceId = this.getCurrentWorkspaceId();
         folderButton = this.__createRootButton(workspaceId);

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -374,13 +374,15 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       if (this._resourceType === "study") {
         const workspacesAndFoldersTree = resourceFilter.getWorkspacesAndFoldersTree();
-        workspacesAndFoldersTree.addListener("changeContext", e => {
-          const {
-            workspaceId,
-            folderId,
-          } = e.getData();
-          this._changeContext(workspaceId, folderId);
-        });
+        workspacesAndFoldersTree.getSelection().addListener("change", () => {
+          const selection = workspacesAndFoldersTree.getSelection();
+          if (selection.getLength() > 0) {
+            const item = selection.getItem(0);
+            const workspaceId = item.getWorkspaceId();
+            const folderId = item.getFolderId();
+            this._changeContext(workspaceId, folderId);
+          }
+        }, this);
         this.bind("currentWorkspaceId", workspacesAndFoldersTree, "currentWorkspaceId");
         this.bind("currentFolderId", workspacesAndFoldersTree, "currentFolderId");
       }

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js
@@ -101,7 +101,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
   members: {
     __dontShowTutorial: null,
-    __currentRequest: null,
     __workspacesList: null,
     __foldersList: null,
 
@@ -164,11 +163,10 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __reloadWorkspaces: function() {
+      this.__setWorkspacesToList([]);
       osparc.store.Workspaces.getInstance().fetchWorkspaces()
         .then(workspaces => {
-          this.__workspacesList = workspaces;
-          workspaces.forEach(workspace => workspace["resourceType"] = "workspace");
-          this.__reloadWorkspaceCards();
+          this.__setWorkspacesToList(workspaces);
         });
     },
 
@@ -179,6 +177,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         if (workspaceId === -1) {
           return;
         }
+        this.__setFoldersToList([]);
         osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId)
           .then(folders => {
             this.__setFoldersToList(folders);
@@ -227,12 +226,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       this._loadingResourcesBtn.setFetching(true);
       this._loadingResourcesBtn.setVisibility("visible");
-      if (this.__currentRequest) {
-        // cancel currentRequest
-      }
-      const currentRequest = this.__currentRequest = this.__getNextStudiesRequest();
-      currentRequest
+      this.__getNextStudiesRequest()
         .then(resp => {
+          if (
+            resp["params"]["url"].workspaceId !== this.getCurrentWorkspaceId() ||
+            resp["params"]["url"].folderId !== this.getCurrentFolderId()
+          ) {
+            // Context might have been changed while waiting for the response.
+            // The new call is on the ways and this can be ignored.
+            return;
+          }
+
           const studies = resp["data"];
           this._resourcesContainer.getFlatList().nextRequest = resp["_links"]["next"];
           this.__addStudiesToList(studies);
@@ -261,7 +265,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         })
         .catch(err => console.error(err))
         .finally(() => {
-          this.__currentRequest = null;
           this._loadingResourcesBtn.setFetching(false);
           this._loadingResourcesBtn.setVisibility(this._resourcesContainer.getFlatList().nextRequest === null ? "excluded" : "visible");
           this._moreResourcesRequired();
@@ -373,6 +376,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this.__reloadFolderCards();
     },
 
+    __setWorkspacesToList: function(workspaces) {
+      this.__workspacesList = workspaces;
+      workspaces.forEach(workspace => workspace["resourceType"] = "workspace");
+      this.__reloadWorkspaceCards();
+    },
+
     _reloadCards: function() {
       const fetching = this._loadingResourcesBtn ? this._loadingResourcesBtn.getFetching() : false;
       const visibility = this._loadingResourcesBtn ? this._loadingResourcesBtn.getVisibility() : "excluded";
@@ -445,13 +454,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           currentWorkspaceId: workspaceId,
           currentFolderId: folderId,
         });
+        this.invalidateStudies();
         this._resourcesContainer.setResourcesToList([]);
-        this._resourcesList = [];
 
         if (workspaceId === -1) {
           this.__reloadWorkspaces();
         } else {
-          this.invalidateStudies();
           this.__reloadFoldersAndStudies();
         }
       }
@@ -462,8 +470,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._resourcesContainer.setFoldersToList(this.__foldersList);
       this._resourcesContainer.reloadFolders();
 
-      const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId())
-      if (currentFolder == null || currentFolder.getMyAccessRights()["write"]) {
+      this.__addNewFolderButton();
+    },
+
+    __addNewFolderButton: function() {
+      if (this.getCurrentWorkspaceId()) {
+        const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
+        if (currentWorkspace && !currentWorkspace.getMyAccessRights()["write"]) {
+          // If user can't write in workspace, do not show plus button
+          return;
+        }
         const newFolderCard = new osparc.dashboard.FolderButtonNew();
         newFolderCard.setCardKey("new-folder");
         newFolderCard.subscribeToFilterGroup("searchBarFilter");
@@ -722,14 +738,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __addNewStudyButtons: function() {
-      if (this.getCurrentFolderId()) {
-        const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
-        if (currentFolder) {
-          const ar = currentFolder.getMyAccessRights();
-          if (!ar["write"]) {
-            // If user can't write in folder, do not show plus buttons
-            return;
-          }
+      if (this.getCurrentWorkspaceId()) {
+        const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
+        if (currentWorkspace && !currentWorkspace.getMyAccessRights()["write"]) {
+          // If user can't write in workspace, do not show plus buttons
+          return;
         }
       }
 
@@ -869,8 +882,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           onUpdate: () => containerHeader.setCurrentFolderId(null)
         });
         this.bind("currentFolderId", containerHeader, "currentFolderId");
-        containerHeader.bind("currentFolderId", this, "currentFolderId", {
-          onUpdate: () => this._changeContext(this.getCurrentWorkspaceId(), this.getCurrentFolderId())
+        containerHeader.addListener("changeContext", e => {
+          const {
+            workspaceId,
+            folderId,
+          } = e.getData();
+          this._changeContext(workspaceId, folderId);
         });
       }
       const list = this._resourcesContainer.getFlatList();

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js
@@ -260,7 +260,7 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
         menu.add(share);
         editButton.setMenu(menu);
         const val = value["read"] + value["write"] + value["delete"];
-        roleText.setValue(osparc.data.Roles.STUDY[val].label);
+        roleText.setValue(osparc.data.Roles.WORKSPACE[val].label);
         roleText.show();
         roleIcon.show();
         this.__showSpacers(true);

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js
@@ -75,7 +75,6 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
   },
 
   events: {
-    "changeContext": "qx.event.type.Data",
     "openChanged": "qx.event.type.Event",
   },
 
@@ -118,18 +117,6 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
           }, item, id);
         },
         configureItem: item => {
-          item.addListener("tap", () => {
-            const workspaceId = item.getModel().getWorkspaceId();
-            const folderId = item.getModel().getFolderId();
-            this.set({
-              currentWorkspaceId: workspaceId,
-              currentFolderId: folderId,
-            });
-            this.fireDataEvent("changeContext", {
-              workspaceId,
-              folderId,
-            });
-          }, this);
           item.set({
             indent: 12, // defaults to 19
           });

diff --git a/services/static-webserver/client/source/class/osparc/data/Resources.js b/services/static-webserver/client/source/class/osparc/data/Resources.js
@@ -1292,7 +1292,12 @@ qx.Class.define("osparc.data.Resources", {
             }
           }
           res.dispose();
-          "resolveWResponse" in options && options.resolveWResponse ? resolve(response) : resolve(data);
+          if ("resolveWResponse" in options && options.resolveWResponse) {
+            response.params = params;
+            resolve(response);
+          } else {
+            resolve(data);
+          }
         }, this);
 
         res.addListenerOnce(endpoint + "Error", e => {

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js
@@ -41,7 +41,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "fab-background": "rgba(255, 255, 255, 0.2)",
     "input_background": "#213248",
     "input_background_disable": "rgba(113, 157, 181, 0.25)",
-    "window-popup-background": "rgba(66, 66, 66, 1)",
     "hint-background": "rgba(82, 82, 82, 1)",
     "transparent_overlay": "rgba(1, 18, 26, 0.1)",
 
@@ -63,6 +62,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
 
     // window
+    "window-popup-background": "rgba(66, 66, 66, 1)",
     "window-caption-background": "background-main",
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js
@@ -41,7 +41,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "fab-background": "rgba(255, 255, 255, 1)",
     "input_background": "rgba(209, 214, 218, 1)",
     "input_background_disable": "rgba(113, 157, 181, 0.04)",
-    "window-popup-background": "rgba(255, 255, 255, 1)",
     "hint-background": "rgba(201, 201, 201, 1)",
     "transparent_overlay": "rgba(1, 18, 26, 0.1)",
 
@@ -63,6 +62,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
 
     // window
+    "window-popup-background": "rgba(255, 255, 255, 1)",
     "window-caption-background": "background-main",
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",

diff --git a/services/static-webserver/client/source/class/osparc/ui/markdown/Markdown.js b/services/static-webserver/client/source/class/osparc/ui/markdown/Markdown.js
@@ -153,7 +153,6 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
       });
       if (domElement && domElement.children) {
         const elemHeight = this.__getChildrenElementHeight(domElement.children);
-        console.log("resizeMe elemHeight", elemHeight);
         if (this.getMaxHeight() && elemHeight > this.getMaxHeight()) {
           this.setHeight(elemHeight);
         } else {

diff --git a/...c/ui/table/rowrenderer/ExtendSelection.js → ...c/ui/table/rowrenderer/ExpandSelection.js b/...c/ui/table/rowrenderer/ExtendSelection.js → ...c/ui/table/rowrenderer/ExpandSelection.js
@@ -15,7 +15,7 @@
 
 ************************************************************************ */
 
-qx.Class.define("osparc.ui.table.rowrenderer.ExtendSelection", {
+qx.Class.define("osparc.ui.table.rowrenderer.ExpandSelection", {
   extend: qx.ui.table.rowrenderer.Default,
 
   members: {

diff --git a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js
@@ -286,7 +286,7 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
       resizeBehavior.setWidth(this.self().POS.TIMESTAMP, 80);
       resizeBehavior.setWidth(this.self().POS.ORIGIN, 100);
 
-      table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExtendSelection(table));
+      table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table));
 
       this.__applyFilters();