From c21b1fb6eb9b2cb0acd11d97bc11c68b71931372 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Mon, 16 Sep 2024 11:02:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=F0=9F=90=9B=20[Frontend]=20Folders?= =?UTF-8?q?=20tree:=20improvements=20(#6360)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../class/osparc/dashboard/ContainerHeader.js | 31 +++++++-- .../osparc/dashboard/ResourceBrowserBase.js | 16 +++-- .../class/osparc/dashboard/StudyBrowser.js | 65 ++++++++++++------- .../class/osparc/dashboard/WorkspaceHeader.js | 2 +- .../dashboard/WorkspacesAndFoldersTree.js | 13 ---- .../source/class/osparc/data/Resources.js | 7 +- .../source/class/osparc/theme/ColorDark.js | 2 +- .../source/class/osparc/theme/ColorLight.js | 2 +- .../class/osparc/ui/markdown/Markdown.js | 1 - ...{ExtendSelection.js => ExpandSelection.js} | 2 +- .../class/osparc/widget/logger/LoggerView.js | 2 +- 11 files changed, 86 insertions(+), 57 deletions(-) rename services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/{ExtendSelection.js => ExpandSelection.js} (94%) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js index 6ae201b180f..339909c62bd 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js @@ -31,12 +31,15 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { })); }, + events: { + "changeContext": "qx.event.type.Data", + }, + properties: { currentWorkspaceId: { check: "Number", nullable: true, init: null, - event: "changeCurrentWorkspaceId", apply: "__buildBreadcrumbs" }, @@ -44,7 +47,6 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { check: "Number", nullable: true, init: null, - event: "changeCurrentFolderId", apply: "__buildBreadcrumbs" } }, @@ -112,9 +114,16 @@ 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; }, @@ -122,7 +131,17 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { 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 index 55df2db57a4..e15d65a32eb 100644 --- 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 index ac1e0967dee..f6b01ef25fb 100644 --- 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 index 7f89b8ae4b3..6d584cc41b0 100644 --- 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 index 161471e3845..ca2cd75f855 100644 --- 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 index 770b5b48d27..d4b5c86e6ac 100644 --- 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 index e46c25d4f02..0e179de8059 100644 --- 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 index 16f6c8e3fd7..4af8f46d180 100644 --- 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 index fefe6423015..8829944985b 100644 --- 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/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExtendSelection.js b/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js similarity index 94% rename from services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExtendSelection.js rename to services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js index b6ee1a62c17..60a0469c4c8 100644 --- a/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExtendSelection.js +++ b/services/static-webserver/client/source/class/osparc/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 index b95a7434858..9b080b63c7e 100644 --- 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();