Skip to content

Commit 64d5027

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] Workspaces & Folders: Merge Workspace header and Folder breadcrumbs (#6414)
1 parent 50ada4b commit 64d5027

File tree

8 files changed

+79
-92
lines changed

8 files changed

+79
-92
lines changed

‎services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js‎ renamed to ‎services/static-webserver/client/source/class/osparc/dashboard/ContextBreadcrumbs.js‎

Lines changed: 22 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -15,59 +15,38 @@
1515
1616
************************************************************************ */
1717

18-
/**
19-
* Widget used for displaying a New Folder in the Study Browser
20-
*
21-
*/
22-
23-
qx.Class.define("osparc.dashboard.ContainerHeader", {
18+
qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
2419
extend: qx.ui.core.Widget,
2520

2621
construct: function() {
2722
this.base(arguments);
2823

29-
this._setLayout(new qx.ui.layout.HBox(20).set({
24+
this._setLayout(new qx.ui.layout.HBox(5).set({
3025
alignY: "middle"
3126
}));
3227
},
3328

34-
events: {
35-
"changeContext": "qx.event.type.Data",
36-
},
37-
3829
properties: {
3930
currentWorkspaceId: {
4031
check: "Number",
4132
nullable: true,
4233
init: null,
43-
apply: "__buildBreadcrumbs"
34+
event: "changeCurrentWorkspaceId",
35+
apply: "__rebuild"
4436
},
4537

4638
currentFolderId: {
4739
check: "Number",
4840
nullable: true,
4941
init: null,
50-
apply: "__buildBreadcrumbs"
42+
event: "changeCurrentFolderId",
43+
apply: "__rebuild"
5144
}
5245
},
5346

5447
members: {
55-
_createChildControlImpl: function(id) {
56-
let control;
57-
switch (id) {
58-
case "breadcrumbs-layout":
59-
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
60-
alignY: "middle"
61-
}));
62-
this._addAt(control, 0, {flex: 1});
63-
break;
64-
}
65-
return control || this.base(arguments, id);
66-
},
67-
68-
__buildBreadcrumbs: function() {
69-
const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
70-
breadcrumbsLayout.removeAll();
48+
__rebuild: function() {
49+
this._removeAll();
7150

7251
if (this.getCurrentFolderId()) {
7352
const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
@@ -76,23 +55,22 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
7655

7756
const currentFolderButton = this.__createCurrentFolderButton();
7857
if (currentFolderButton) {
79-
breadcrumbsLayout.add(currentFolderButton);
58+
this._add(currentFolderButton);
8059
}
8160
},
8261

8362
__createUpstreamButtons: function(childFolder) {
8463
if (childFolder) {
85-
const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
8664
const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());
8765
if (parentFolder) {
88-
breadcrumbsLayout.addAt(this.__createArrow(), 0);
66+
this._addAt(this.__createArrow(), 0);
8967
const upstreamButton = this.__createFolderButton(parentFolder);
90-
breadcrumbsLayout.addAt(upstreamButton, 0);
68+
this._addAt(upstreamButton, 0);
9169
this.__createUpstreamButtons(parentFolder);
9270
} else {
93-
breadcrumbsLayout.addAt(this.__createArrow(), 0);
71+
this._addAt(this.__createArrow(), 0);
9472
const homeButton = this.__createFolderButton();
95-
breadcrumbsLayout.addAt(homeButton, 0);
73+
this._addAt(homeButton, 0);
9674
}
9775
}
9876
},
@@ -102,15 +80,12 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
10280
return this.__createFolderButton(currentFolder);
10381
},
10482

105-
__changeContext: function(workspaceId, folderId) {
83+
__changeFolder: function(folderId) {
84+
const workspaceId = this.getCurrentWorkspaceId();
10685
this.set({
10786
currentWorkspaceId: workspaceId,
10887
currentFolderId: folderId,
10988
});
110-
this.fireDataEvent("changeContext", {
111-
workspaceId,
112-
folderId,
113-
});
11489
},
11590

11691
__createRootButton: function() {
@@ -131,25 +106,28 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
131106
}
132107
rootButton.addListener("execute", () => {
133108
const folderId = null;
134-
this.__changeContext(workspaceId, folderId);
109+
this.__changeFolder(folderId);
135110
});
136111
return rootButton;
137112
},
138113

139114
__createFolderButton: function(folder) {
140115
let folderButton = null;
141116
if (folder) {
142-
folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({
117+
folderButton = new qx.ui.form.Button(folder.getName()).set({
143118
maxWidth: 200
144119
});
145120
folder.bind("name", folderButton, "label");
146121
folderButton.addListener("execute", () => {
147-
const workspaceId = this.getCurrentWorkspaceId();
148122
const folderId = folder ? folder.getFolderId() : null;
149-
this.__changeContext(workspaceId, folderId);
123+
this.__changeFolder(folderId);
150124
}, this);
151125
} else {
152126
folderButton = this.__createRootButton();
127+
// Do not show root folder
128+
folderButton.set({
129+
visibility: "excluded"
130+
});
153131
}
154132
folderButton.set({
155133
backgroundColor: "transparent",

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

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -230,10 +230,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
230230
throw new Error("Abstract method called!");
231231
},
232232

233-
_createResourcesLayout: function() {
234-
const topBar = this.__createTopBar();
235-
this._addToLayout(topBar);
233+
_createSearchBar: function() {
234+
const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType).set({
235+
marginRight: 22
236+
});
237+
const textField = searchBarFilter.getChildControl("text-field");
238+
osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType);
239+
this._addToLayout(searchBarFilter);
240+
},
236241

242+
_createResourcesLayout: function() {
237243
const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({
238244
backgroundColor: "transparent",
239245
spacing: 10,
@@ -268,34 +274,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
268274
resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
269275
resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
270276

271-
const containerHeader = this._resourcesContainer.getContainerHeader();
272-
containerHeader.addListener("changeContext", e => {
273-
const {
274-
workspaceId,
275-
folderId,
276-
} = e.getData();
277-
this._resourceFilter.contextChanged(workspaceId, folderId);
278-
}, this);
279-
280277
this._addToLayout(resourcesContainer);
281278
},
282279

283-
__createTopBar: function() {
284-
const topBar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
285-
paddingRight: 22,
286-
alignY: "middle"
287-
});
288-
289-
const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType);
290-
const textField = searchBarFilter.getChildControl("text-field");
291-
osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType);
292-
topBar.add(searchBarFilter, {
293-
flex: 1
294-
});
295-
296-
return topBar;
297-
},
298-
299280
_groupByChanged: function(groupBy) {
300281
// if cards are grouped they need to be in grid mode
301282
this._resourcesContainer.setMode("grid");
@@ -373,7 +354,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
373354

374355
_addResourceFilter: function() {
375356
const resourceFilter = this._resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({
376-
marginTop: osparc.dashboard.SearchBarFilter.HEIGHT,
357+
marginTop: osparc.dashboard.SearchBarFilter.HEIGHT + 10,
377358
maxWidth: this.self().SIDE_SPACER_WIDTH,
378359
width: this.self().SIDE_SPACER_WIDTH
379360
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
3232
this.__resourcesList = [];
3333
this.__groupedContainersList = [];
3434

35-
const containerHeader = this.__containerHeader = new osparc.dashboard.ContainerHeader();
35+
const containerHeader = this.__containerHeader = new osparc.dashboard.ContextBreadcrumbs();
3636
this._add(containerHeader);
3737
containerHeader.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
3838

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
145145

146146
// LAYOUT //
147147
_createLayout: function() {
148+
this._createSearchBar();
148149
this._createResourcesLayout();
149150
const list = this._resourcesContainer.getFlatList();
150151
if (list) {

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -872,30 +872,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
872872

873873
// LAYOUT //
874874
_createLayout: function() {
875+
this._createSearchBar();
876+
875877
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
876878
const workspaceHeader = new osparc.dashboard.WorkspaceHeader();
877879
this.bind("currentWorkspaceId", workspaceHeader, "currentWorkspaceId");
880+
this.bind("currentFolderId", workspaceHeader, "currentFolderId");
881+
[
882+
"changeCurrentWorkspaceId",
883+
"changeCurrentFolderId",
884+
].forEach(ev => {
885+
workspaceHeader.addListener(ev, () => {
886+
const workspaceId = workspaceHeader.getCurrentWorkspaceId();
887+
const folderId = workspaceHeader.getCurrentFolderId();
888+
this._changeContext(workspaceId, folderId);
889+
this._resourceFilter.contextChanged(workspaceId, folderId);
890+
}, this);
891+
});
892+
878893
this._addToLayout(workspaceHeader);
879894
}
880895

881896
this._createResourcesLayout();
882897

883-
const containerHeader = this._resourcesContainer.getContainerHeader();
884-
if (containerHeader) {
885-
this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId");
886-
this.bind("currentFolderId", containerHeader, "currentFolderId");
887-
containerHeader.addListener("changeContext", e => {
888-
const {
889-
workspaceId,
890-
folderId,
891-
} = e.getData();
892-
this.set({
893-
currentWorkspaceId: workspaceId,
894-
currentFolderId: folderId,
895-
})
896-
this._changeContext(workspaceId, folderId);
897-
});
898-
}
899898
const list = this._resourcesContainer.getFlatList();
900899
if (list) {
901900
osparc.utils.Utils.setIdToWidget(list, "studiesList");

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
162162

163163
// LAYOUT //
164164
_createLayout: function() {
165+
this._createSearchBar();
165166
this._createResourcesLayout();
166167
const list = this._resourcesContainer.getFlatList();
167168
if (list) {

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

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
5252
apply: "__buildLayout"
5353
},
5454

55+
currentFolderId: {
56+
check: "Number",
57+
nullable: true,
58+
init: null,
59+
event: "changeCurrentFolderId",
60+
},
61+
5562
accessRights: {
5663
check: "Object",
5764
nullable: false,
@@ -98,6 +105,14 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
98105
});
99106
this._add(control);
100107
break;
108+
case "breadcrumbs":
109+
control = new osparc.dashboard.ContextBreadcrumbs();
110+
this.bind("currentWorkspaceId", control, "currentWorkspaceId");
111+
this.bind("currentFolderId", control, "currentFolderId");
112+
control.bind("currentWorkspaceId", this, "currentWorkspaceId");
113+
control.bind("currentFolderId", this, "currentFolderId");
114+
this._add(control);
115+
break;
101116
case "edit-button":
102117
control = new qx.ui.form.MenuButton().set({
103118
appearance: "form-button-outlined",
@@ -158,7 +173,15 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
158173

159174
__buildLayout: function(workspaceId) {
160175
this.getChildControl("icon");
161-
const title = this.getChildControl("title");
176+
const title = this.getChildControl("title").set({
177+
cursor: "pointer"
178+
});
179+
title.addListener("tap", () => {
180+
const folderId = null;
181+
this.setCurrentFolderId(folderId);
182+
});
183+
184+
this.getChildControl("breadcrumbs");
162185

163186
this.getChildControl("edit-button").exclude();
164187
this.resetAccessRights();

‎services/static-webserver/client/source/class/osparc/node/TierSelectionView.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,11 @@ qx.Class.define("osparc.node.TierSelectionView", {
7272
.then(preselectedPricingUnit => {
7373
if (preselectedPricingUnit && preselectedPricingUnit["pricingUnitId"]) {
7474
const tierFound = tierBox.getSelectables().find(t => t.getModel() === preselectedPricingUnit["pricingUnitId"]);
75-
tierBox.setSelection([tierFound]);
75+
if (tierFound) {
76+
tierBox.setSelection([tierFound]);
77+
} else {
78+
console.error("Tier not found");
79+
}
7680
}
7781
})
7882
.finally(() => {

0 commit comments

Comments
 (0)