diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/ContextBreadcrumbs.js similarity index 67% rename from services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js rename to services/static-webserver/client/source/class/osparc/dashboard/ContextBreadcrumbs.js index f79e58395868..9dc67a568b15 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ContextBreadcrumbs.js @@ -15,59 +15,38 @@ ************************************************************************ */ -/** - * Widget used for displaying a New Folder in the Study Browser - * - */ - -qx.Class.define("osparc.dashboard.ContainerHeader", { +qx.Class.define("osparc.dashboard.ContextBreadcrumbs", { extend: qx.ui.core.Widget, construct: function() { this.base(arguments); - this._setLayout(new qx.ui.layout.HBox(20).set({ + this._setLayout(new qx.ui.layout.HBox(5).set({ alignY: "middle" })); }, - events: { - "changeContext": "qx.event.type.Data", - }, - properties: { currentWorkspaceId: { check: "Number", nullable: true, init: null, - apply: "__buildBreadcrumbs" + event: "changeCurrentWorkspaceId", + apply: "__rebuild" }, currentFolderId: { check: "Number", nullable: true, init: null, - apply: "__buildBreadcrumbs" + event: "changeCurrentFolderId", + apply: "__rebuild" } }, members: { - _createChildControlImpl: function(id) { - let control; - switch (id) { - case "breadcrumbs-layout": - control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({ - alignY: "middle" - })); - this._addAt(control, 0, {flex: 1}); - break; - } - return control || this.base(arguments, id); - }, - - __buildBreadcrumbs: function() { - const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout"); - breadcrumbsLayout.removeAll(); + __rebuild: function() { + this._removeAll(); if (this.getCurrentFolderId()) { const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId()); @@ -76,23 +55,22 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { const currentFolderButton = this.__createCurrentFolderButton(); if (currentFolderButton) { - breadcrumbsLayout.add(currentFolderButton); + this._add(currentFolderButton); } }, __createUpstreamButtons: function(childFolder) { if (childFolder) { - const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout"); const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId()); if (parentFolder) { - breadcrumbsLayout.addAt(this.__createArrow(), 0); + this._addAt(this.__createArrow(), 0); const upstreamButton = this.__createFolderButton(parentFolder); - breadcrumbsLayout.addAt(upstreamButton, 0); + this._addAt(upstreamButton, 0); this.__createUpstreamButtons(parentFolder); } else { - breadcrumbsLayout.addAt(this.__createArrow(), 0); + this._addAt(this.__createArrow(), 0); const homeButton = this.__createFolderButton(); - breadcrumbsLayout.addAt(homeButton, 0); + this._addAt(homeButton, 0); } } }, @@ -102,15 +80,12 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { return this.__createFolderButton(currentFolder); }, - __changeContext: function(workspaceId, folderId) { + __changeFolder: function(folderId) { + const workspaceId = this.getCurrentWorkspaceId(); this.set({ currentWorkspaceId: workspaceId, currentFolderId: folderId, }); - this.fireDataEvent("changeContext", { - workspaceId, - folderId, - }); }, __createRootButton: function() { @@ -131,7 +106,7 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { } rootButton.addListener("execute", () => { const folderId = null; - this.__changeContext(workspaceId, folderId); + this.__changeFolder(folderId); }); return rootButton; }, @@ -139,17 +114,20 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { __createFolderButton: function(folder) { let folderButton = null; if (folder) { - folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({ + folderButton = new qx.ui.form.Button(folder.getName()).set({ maxWidth: 200 }); folder.bind("name", folderButton, "label"); folderButton.addListener("execute", () => { - const workspaceId = this.getCurrentWorkspaceId(); const folderId = folder ? folder.getFolderId() : null; - this.__changeContext(workspaceId, folderId); + this.__changeFolder(folderId); }, this); } else { folderButton = this.__createRootButton(); + // Do not show root folder + folderButton.set({ + visibility: "excluded" + }); } folderButton.set({ backgroundColor: "transparent", 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 a52dc18a38a1..f88008d773f9 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js @@ -230,10 +230,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { throw new Error("Abstract method called!"); }, - _createResourcesLayout: function() { - const topBar = this.__createTopBar(); - this._addToLayout(topBar); + _createSearchBar: function() { + const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType).set({ + marginRight: 22 + }); + const textField = searchBarFilter.getChildControl("text-field"); + osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType); + this._addToLayout(searchBarFilter); + }, + _createResourcesLayout: function() { const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({ backgroundColor: "transparent", spacing: 10, @@ -268,34 +274,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData())); resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData())); - const containerHeader = this._resourcesContainer.getContainerHeader(); - containerHeader.addListener("changeContext", e => { - const { - workspaceId, - folderId, - } = e.getData(); - this._resourceFilter.contextChanged(workspaceId, folderId); - }, this); - this._addToLayout(resourcesContainer); }, - __createTopBar: function() { - const topBar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({ - paddingRight: 22, - alignY: "middle" - }); - - const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType); - const textField = searchBarFilter.getChildControl("text-field"); - osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType); - topBar.add(searchBarFilter, { - flex: 1 - }); - - return topBar; - }, - _groupByChanged: function(groupBy) { // if cards are grouped they need to be in grid mode this._resourcesContainer.setMode("grid"); @@ -373,7 +354,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { _addResourceFilter: function() { const resourceFilter = this._resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({ - marginTop: osparc.dashboard.SearchBarFilter.HEIGHT, + marginTop: osparc.dashboard.SearchBarFilter.HEIGHT + 10, maxWidth: this.self().SIDE_SPACER_WIDTH, width: this.self().SIDE_SPACER_WIDTH }); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js index 592d771f2629..994bb1fae43d 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js @@ -32,7 +32,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { this.__resourcesList = []; this.__groupedContainersList = []; - const containerHeader = this.__containerHeader = new osparc.dashboard.ContainerHeader(); + const containerHeader = this.__containerHeader = new osparc.dashboard.ContextBreadcrumbs(); this._add(containerHeader); containerHeader.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded"); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js index 81583c9b24fe..22860e3704b6 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js @@ -145,6 +145,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", { // LAYOUT // _createLayout: function() { + this._createSearchBar(); this._createResourcesLayout(); const list = this._resourcesContainer.getFlatList(); if (list) { 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 97c5638abd26..a5a3ddad2483 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -872,30 +872,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { // LAYOUT // _createLayout: function() { + this._createSearchBar(); + if (osparc.utils.DisabledPlugins.isFoldersEnabled()) { const workspaceHeader = new osparc.dashboard.WorkspaceHeader(); this.bind("currentWorkspaceId", workspaceHeader, "currentWorkspaceId"); + this.bind("currentFolderId", workspaceHeader, "currentFolderId"); + [ + "changeCurrentWorkspaceId", + "changeCurrentFolderId", + ].forEach(ev => { + workspaceHeader.addListener(ev, () => { + const workspaceId = workspaceHeader.getCurrentWorkspaceId(); + const folderId = workspaceHeader.getCurrentFolderId(); + this._changeContext(workspaceId, folderId); + this._resourceFilter.contextChanged(workspaceId, folderId); + }, this); + }); + this._addToLayout(workspaceHeader); } this._createResourcesLayout(); - const containerHeader = this._resourcesContainer.getContainerHeader(); - if (containerHeader) { - this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId"); - this.bind("currentFolderId", containerHeader, "currentFolderId"); - containerHeader.addListener("changeContext", e => { - const { - workspaceId, - folderId, - } = e.getData(); - this.set({ - currentWorkspaceId: workspaceId, - currentFolderId: folderId, - }) - this._changeContext(workspaceId, folderId); - }); - } const list = this._resourcesContainer.getFlatList(); if (list) { osparc.utils.Utils.setIdToWidget(list, "studiesList"); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js index 6a5e516ce9e6..2f824715ea75 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js @@ -162,6 +162,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", { // LAYOUT // _createLayout: function() { + this._createSearchBar(); this._createResourcesLayout(); const list = this._resourcesContainer.getFlatList(); if (list) { 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 b4a567f5c484..88d557312e83 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js @@ -52,6 +52,13 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", { apply: "__buildLayout" }, + currentFolderId: { + check: "Number", + nullable: true, + init: null, + event: "changeCurrentFolderId", + }, + accessRights: { check: "Object", nullable: false, @@ -98,6 +105,14 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", { }); this._add(control); break; + case "breadcrumbs": + control = new osparc.dashboard.ContextBreadcrumbs(); + this.bind("currentWorkspaceId", control, "currentWorkspaceId"); + this.bind("currentFolderId", control, "currentFolderId"); + control.bind("currentWorkspaceId", this, "currentWorkspaceId"); + control.bind("currentFolderId", this, "currentFolderId"); + this._add(control); + break; case "edit-button": control = new qx.ui.form.MenuButton().set({ appearance: "form-button-outlined", @@ -158,7 +173,15 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", { __buildLayout: function(workspaceId) { this.getChildControl("icon"); - const title = this.getChildControl("title"); + const title = this.getChildControl("title").set({ + cursor: "pointer" + }); + title.addListener("tap", () => { + const folderId = null; + this.setCurrentFolderId(folderId); + }); + + this.getChildControl("breadcrumbs"); this.getChildControl("edit-button").exclude(); this.resetAccessRights(); diff --git a/services/static-webserver/client/source/class/osparc/node/TierSelectionView.js b/services/static-webserver/client/source/class/osparc/node/TierSelectionView.js index d2e7e013f13f..34dfc397b377 100644 --- a/services/static-webserver/client/source/class/osparc/node/TierSelectionView.js +++ b/services/static-webserver/client/source/class/osparc/node/TierSelectionView.js @@ -72,7 +72,11 @@ qx.Class.define("osparc.node.TierSelectionView", { .then(preselectedPricingUnit => { if (preselectedPricingUnit && preselectedPricingUnit["pricingUnitId"]) { const tierFound = tierBox.getSelectables().find(t => t.getModel() === preselectedPricingUnit["pricingUnitId"]); - tierBox.setSelection([tierFound]); + if (tierFound) { + tierBox.setSelection([tierFound]); + } else { + console.error("Tier not found"); + } } }) .finally(() => {