Skip to content

Commit 90f0e6e

Browse files
odeimaizodeimaiz
authored
♻️ [Frontend] Context property for the StudyBrowser (#6598)
1 parent 6bfab60 commit 90f0e6e

File tree

5 files changed

+107
-108
lines changed

5 files changed

+107
-108
lines changed

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

Lines changed: 20 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,18 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
2727
},
2828

2929
events: {
30-
"contextChanged": "qx.event.type.Data",
30+
"locationChanged": "qx.event.type.Data",
3131
},
3232

3333
properties: {
34+
currentContext: {
35+
check: ["studiesAndFolders", "workspaces", "search"],
36+
nullable: false,
37+
init: "studiesAndFolders",
38+
event: "changeCurrentContext",
39+
apply: "__rebuild"
40+
},
41+
3442
currentWorkspaceId: {
3543
check: "Number",
3644
nullable: true,
@@ -52,7 +60,7 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
5260
__rebuild: function() {
5361
this._removeAll();
5462

55-
if (this.getCurrentWorkspaceId() === -2) {
63+
if (this.getCurrentContext() !== "studiesAndFolders") {
5664
return;
5765
}
5866

@@ -73,12 +81,12 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
7381
if (parentFolder) {
7482
this._addAt(this.__createArrow(), 0);
7583
const upstreamButton = this.__createFolderButton(parentFolder);
76-
this._addAt(upstreamButton, 0);
84+
if (upstreamButton) {
85+
this._addAt(upstreamButton, 0);
86+
}
7787
this.__createUpstreamButtons(parentFolder);
7888
} else {
7989
this._addAt(this.__createArrow(), 0);
80-
const homeButton = this.__createFolderButton();
81-
this._addAt(homeButton, 0);
8290
}
8391
}
8492
},
@@ -94,59 +102,30 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
94102
currentWorkspaceId: workspaceId,
95103
currentFolderId: folderId,
96104
});
97-
this.fireDataEvent("contextChanged", {
105+
this.fireDataEvent("locationChanged", {
98106
workspaceId,
99107
folderId,
100108
});
101109
},
102110

103-
__createRootButton: function() {
104-
const workspaceId = this.getCurrentWorkspaceId();
105-
let rootButton = null;
106-
if (workspaceId) {
107-
if (workspaceId === -1) {
108-
rootButton = new qx.ui.form.Button(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath());
109-
} else {
110-
const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId);
111-
rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath()).set({
112-
maxWidth: 200
113-
});
114-
workspace.bind("name", rootButton, "label");
115-
}
116-
} else {
117-
rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14");
118-
}
119-
rootButton.addListener("execute", () => {
120-
const folderId = null;
121-
this.__changeFolder(folderId);
122-
});
123-
return rootButton;
124-
},
125-
126111
__createFolderButton: function(folder) {
127-
let folderButton = null;
128112
if (folder) {
129-
folderButton = new qx.ui.form.Button(folder.getName()).set({
113+
const folderButton = new qx.ui.form.Button(folder.getName()).set({
130114
maxWidth: 200
131115
});
132116
folder.bind("name", folderButton, "label");
133117
folderButton.addListener("execute", () => {
134118
const folderId = folder ? folder.getFolderId() : null;
135119
this.__changeFolder(folderId);
136120
}, this);
137-
} else {
138-
folderButton = this.__createRootButton();
139-
// Do not show root folder
140121
folderButton.set({
141-
visibility: "excluded"
122+
backgroundColor: "transparent",
123+
textColor: "text",
124+
gap: 5
142125
});
126+
return folderButton;
143127
}
144-
folderButton.set({
145-
backgroundColor: "transparent",
146-
textColor: "text",
147-
gap: 5
148-
});
149-
return folderButton;
128+
return null;
150129
},
151130

152131
__createArrow: function() {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
2929
this.__tagButtons = [];
3030
this.__serviceTypeButtons = [];
3131

32-
this._setLayout(new qx.ui.layout.VBox(30));
32+
this._setLayout(new qx.ui.layout.VBox(20));
3333
this.__buildLayout();
3434
},
3535

@@ -62,15 +62,14 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
6262
}
6363
},
6464

65-
6665
/* WORKSPACES AND FOLDERS */
6766
__createWorkspacesAndFoldersTree: function() {
6867
const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
6968
// Height needs to be calculated manually to make it flexible
7069
workspacesAndFoldersTree.set({
71-
minHeight: 100,
70+
minHeight: 60,
7271
maxHeight: 400,
73-
height: 100,
72+
height: 60,
7473
});
7574
workspacesAndFoldersTree.addListener("openChanged", () => {
7675
const rowConfig = workspacesAndFoldersTree.getPane().getRowConfig();

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

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
4949
},
5050

5151
properties: {
52+
currentContext: {
53+
check: ["studiesAndFolders", "workspaces", "search"],
54+
nullable: false,
55+
init: "studiesAndFolders",
56+
event: "changeCurrentContext"
57+
},
58+
5259
currentWorkspaceId: {
5360
check: "Number",
5461
nullable: true,
@@ -101,7 +108,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
101108

102109
members: {
103110
__dontShowTutorial: null,
104-
__workspaceHeader: null,
111+
__header: null,
105112
__workspacesList: null,
106113
__foldersList: null,
107114
__loadingFolders: null,
@@ -174,17 +181,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
174181
if (
175182
!osparc.auth.Manager.getInstance().isLoggedIn() ||
176183
!osparc.utils.DisabledPlugins.isFoldersEnabled() ||
177-
this.__loadingFolders) {
178-
return;
179-
}
180-
const workspaceId = this.getCurrentWorkspaceId();
181-
if (workspaceId === -1 || workspaceId === -2) {
184+
this.getCurrentContext() !== "studiesAndFolders" ||
185+
this.__loadingFolders
186+
) {
182187
return;
183188
}
184189

190+
const workspaceId = this.getCurrentWorkspaceId();
191+
const folderId = this.getCurrentFolderId();
185192
this.__loadingFolders = true;
186193
this.__setFoldersToList([]);
187-
const folderId = this.getCurrentFolderId();
188194
osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
189195
.then(folders => {
190196
this.__setFoldersToList(folders);
@@ -194,10 +200,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
194200
},
195201

196202
__reloadStudies: function() {
197-
const workspaceId = this.getCurrentWorkspaceId();
198203
if (
199204
!osparc.auth.Manager.getInstance().isLoggedIn() ||
200-
workspaceId === -1 || // listing workspaces
205+
this.getCurrentContext() === "workspaces" ||
201206
this._loadingResourcesBtn.isFetching()
202207
) {
203208
return;
@@ -388,7 +393,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
388393
},
389394

390395
_workspaceSelected: function(workspaceId) {
391-
this.__changeContext(workspaceId, null);
396+
this.__changeContext("studiesAndFolders", workspaceId, null);
392397
},
393398

394399
_workspaceUpdated: function() {
@@ -418,7 +423,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
418423
__addNewFolderButton: function() {
419424
const currentWorkspaceId = this.getCurrentWorkspaceId();
420425
if (currentWorkspaceId) {
421-
if (currentWorkspaceId === -1 || currentWorkspaceId === -2) {
426+
if (this.getCurrentContext() !== "studiesAndFolders") {
422427
return;
423428
}
424429
const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
@@ -448,7 +453,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
448453
},
449454

450455
_folderSelected: function(folderId) {
451-
this.__changeContext(this.getCurrentWorkspaceId(), folderId);
456+
this.__changeContext("studiesAndFolders", this.getCurrentWorkspaceId(), folderId);
452457
},
453458

454459
_folderUpdated: function() {
@@ -705,11 +710,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
705710
},
706711

707712
__addNewStudyButtons: function() {
713+
if (this.getCurrentContext() !== "studiesAndFolders") {
714+
return;
715+
}
708716
const currentWorkspaceId = this.getCurrentWorkspaceId();
709717
if (currentWorkspaceId) {
710-
if (currentWorkspaceId === -2) {
711-
return;
712-
}
713718
const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(currentWorkspaceId);
714719
if (currentWorkspace && !currentWorkspace.getMyAccessRights()["write"]) {
715720
// If user can't write in workspace, do not show plus buttons
@@ -835,8 +840,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
835840
this._createSearchBar();
836841

837842
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
838-
const workspaceHeader = this.__workspaceHeader = new osparc.dashboard.WorkspaceHeader();
839-
this._addToLayout(workspaceHeader);
843+
const header = this.__header = new osparc.dashboard.StudyBrowserHeader();
844+
this._addToLayout(header);
840845
}
841846

842847
this._createResourcesLayout();
@@ -908,72 +913,76 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
908913

909914
__connectContexts: function() {
910915
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
911-
const workspaceHeader = this.__workspaceHeader;
912-
workspaceHeader.addListener("contextChanged", () => {
913-
const workspaceId = workspaceHeader.getCurrentWorkspaceId();
914-
const folderId = workspaceHeader.getCurrentFolderId();
915-
this.__changeContext(workspaceId, folderId);
916+
const header = this.__header;
917+
header.addListener("locationChanged", () => {
918+
const workspaceId = header.getCurrentWorkspaceId();
919+
const folderId = header.getCurrentFolderId();
920+
this.__changeContext("studiesAndFolders", workspaceId, folderId);
916921
}, this);
917922

918923
const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();
919-
workspacesAndFoldersTree.addListener("contextChanged", e => {
924+
workspacesAndFoldersTree.addListener("locationChanged", e => {
920925
const context = e.getData();
921926
const workspaceId = context["workspaceId"];
922-
const folderId = context["folderId"];
923-
this.__changeContext(workspaceId, folderId);
927+
if (workspaceId === -1) {
928+
this.__changeContext("workspaces");
929+
} else {
930+
const folderId = context["folderId"];
931+
this.__changeContext("studiesAndFolders", workspaceId, folderId);
932+
}
924933
}, this);
925934

926935
this._searchBarFilter.addListener("filterChanged", e => {
927936
const filterData = e.getData();
928937
if (filterData.text) {
929-
this.__changeContext(-2, null);
938+
this.__changeContext("search");
930939
} else {
931940
// Back to My Workspace
932-
this.__changeContext(null, null);
941+
this.__changeContext("studiesAndFolders", null, null);
933942
}
934943
});
935944
}
936945
},
937946

938-
__changeContext: function(workspaceId, folderId) {
947+
__changeContext: function(context, workspaceId = null, folderId = null) {
939948
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
940949
if (
941-
workspaceId !== -2 && // reload studies for a new search
950+
context !== "search" && // reload studies for a new search
951+
context === this.getCurrentContext() &&
942952
workspaceId === this.getCurrentWorkspaceId() &&
943953
folderId === this.getCurrentFolderId()
944954
) {
945955
// didn't really change
946956
return;
947957
}
948958

949-
this._loadingResourcesBtn.setFetching(false);
950-
this.resetSelection();
951-
this.setMultiSelection(false);
952959
this.set({
960+
currentContext: context,
953961
currentWorkspaceId: workspaceId,
954962
currentFolderId: folderId,
955963
});
964+
this._loadingResourcesBtn.setFetching(false);
965+
this.resetSelection();
966+
this.setMultiSelection(false);
956967
this.invalidateStudies();
957968
this._resourcesContainer.setResourcesToList([]);
958969

959-
if (workspaceId === -2) {
960-
// Search result: no folders, just studies
970+
if (context === "search") {
961971
this.__setFoldersToList([]);
962972
this.__reloadStudies();
963-
} else if (workspaceId === -1) {
964-
// Workspaces
973+
} else if (context === "workspaces") {
965974
this._searchBarFilter.resetFilters();
966975
this.__reloadWorkspaces();
967-
} else {
968-
// Actual workspace
976+
} else if (context === "studiesAndFolders") {
969977
this._searchBarFilter.resetFilters();
970978
this.__reloadFolders();
971979
this.__reloadStudies();
972980
}
973981

974-
// notify workspaceHeader
975-
const workspaceHeader = this.__workspaceHeader;
976-
workspaceHeader.set({
982+
// notify header
983+
const header = this.__header;
984+
header.set({
985+
currentContext: context,
977986
currentWorkspaceId: workspaceId,
978987
currentFolderId: folderId,
979988
});
@@ -984,7 +993,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
984993
currentWorkspaceId: workspaceId,
985994
currentFolderId: folderId,
986995
});
987-
workspacesAndFoldersTree.contextChanged(workspaceId, folderId);
996+
workspacesAndFoldersTree.contextChanged(context);
988997
}
989998
},
990999

@@ -1130,8 +1139,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
11301139
}))
11311140
});
11321141
this.bind("multiSelection", selectButton, "value");
1133-
this.bind("currentWorkspaceId", selectButton, "visibility", {
1134-
converter: currentWorkspaceId => [-2, -1].includes(currentWorkspaceId) ? "excluded" : "visible"
1142+
this.bind("currentContext", selectButton, "visibility", {
1143+
converter: currentContext => currentContext === "studiesAndFolders" ? "visible" : "excluded"
11351144
});
11361145
return selectButton;
11371146
},

0 commit comments

Comments
 (0)