Skip to content

Commit

Permalink
♻️ [Frontend] Context property for the StudyBrowser (#6598)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 25, 2024
1 parent 6bfab60 commit 90f0e6e
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 108 deletions.
61 changes: 20 additions & 41 deletions services/static-webserver/client/source/class/osparc/dashboard/ContextBreadcrumbs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,18 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
},

events: {
"contextChanged": "qx.event.type.Data",
"locationChanged": "qx.event.type.Data",
},

properties: {
currentContext: {
check: ["studiesAndFolders", "workspaces", "search"],
nullable: false,
init: "studiesAndFolders",
event: "changeCurrentContext",
apply: "__rebuild"
},

currentWorkspaceId: {
check: "Number",
nullable: true,
Expand All @@ -52,7 +60,7 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
__rebuild: function() {
this._removeAll();

if (this.getCurrentWorkspaceId() === -2) {
if (this.getCurrentContext() !== "studiesAndFolders") {
return;
}

Expand All @@ -73,12 +81,12 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
if (parentFolder) {
this._addAt(this.__createArrow(), 0);
const upstreamButton = this.__createFolderButton(parentFolder);
this._addAt(upstreamButton, 0);
if (upstreamButton) {
this._addAt(upstreamButton, 0);
}
this.__createUpstreamButtons(parentFolder);
} else {
this._addAt(this.__createArrow(), 0);
const homeButton = this.__createFolderButton();
this._addAt(homeButton, 0);
}
}
},
Expand All @@ -94,59 +102,30 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
currentWorkspaceId: workspaceId,
currentFolderId: folderId,
});
this.fireDataEvent("contextChanged", {
this.fireDataEvent("locationChanged", {
workspaceId,
folderId,
});
},

__createRootButton: function() {
const workspaceId = this.getCurrentWorkspaceId();
let rootButton = null;
if (workspaceId) {
if (workspaceId === -1) {
rootButton = new qx.ui.form.Button(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath());
} else {
const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId);
rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath()).set({
maxWidth: 200
});
workspace.bind("name", rootButton, "label");
}
} else {
rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14");
}
rootButton.addListener("execute", () => {
const folderId = null;
this.__changeFolder(folderId);
});
return rootButton;
},

__createFolderButton: function(folder) {
let folderButton = null;
if (folder) {
folderButton = new qx.ui.form.Button(folder.getName()).set({
const folderButton = new qx.ui.form.Button(folder.getName()).set({
maxWidth: 200
});
folder.bind("name", folderButton, "label");
folderButton.addListener("execute", () => {
const folderId = folder ? folder.getFolderId() : null;
this.__changeFolder(folderId);
}, this);
} else {
folderButton = this.__createRootButton();
// Do not show root folder
folderButton.set({
visibility: "excluded"
backgroundColor: "transparent",
textColor: "text",
gap: 5
});
return folderButton;
}
folderButton.set({
backgroundColor: "transparent",
textColor: "text",
gap: 5
});
return folderButton;
return null;
},

__createArrow: function() {
Expand Down
7 changes: 3 additions & 4 deletions services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
this.__tagButtons = [];
this.__serviceTypeButtons = [];

this._setLayout(new qx.ui.layout.VBox(30));
this._setLayout(new qx.ui.layout.VBox(20));
this.__buildLayout();
},

Expand Down Expand Up @@ -62,15 +62,14 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
}
},


/* WORKSPACES AND FOLDERS */
__createWorkspacesAndFoldersTree: function() {
const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
// Height needs to be calculated manually to make it flexible
workspacesAndFoldersTree.set({
minHeight: 100,
minHeight: 60,
maxHeight: 400,
height: 100,
height: 60,
});
workspacesAndFoldersTree.addListener("openChanged", () => {
const rowConfig = workspacesAndFoldersTree.getPane().getRowConfig();
Expand Down
97 changes: 53 additions & 44 deletions services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,13 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
},

properties: {
currentContext: {
check: ["studiesAndFolders", "workspaces", "search"],
nullable: false,
init: "studiesAndFolders",
event: "changeCurrentContext"
},

currentWorkspaceId: {
check: "Number",
nullable: true,
Expand Down Expand Up @@ -101,7 +108,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {

members: {
__dontShowTutorial: null,
__workspaceHeader: null,
__header: null,
__workspacesList: null,
__foldersList: null,
__loadingFolders: null,
Expand Down Expand Up @@ -174,17 +181,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
if (
!osparc.auth.Manager.getInstance().isLoggedIn() ||
!osparc.utils.DisabledPlugins.isFoldersEnabled() ||
this.__loadingFolders) {
return;
}
const workspaceId = this.getCurrentWorkspaceId();
if (workspaceId === -1 || workspaceId === -2) {
this.getCurrentContext() !== "studiesAndFolders" ||
this.__loadingFolders
) {
return;
}

const workspaceId = this.getCurrentWorkspaceId();
const folderId = this.getCurrentFolderId();
this.__loadingFolders = true;
this.__setFoldersToList([]);
const folderId = this.getCurrentFolderId();
osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
.then(folders => {
this.__setFoldersToList(folders);
Expand All @@ -194,10 +200,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
},

__reloadStudies: function() {
const workspaceId = this.getCurrentWorkspaceId();
if (
!osparc.auth.Manager.getInstance().isLoggedIn() ||
workspaceId === -1 || // listing workspaces
this.getCurrentContext() === "workspaces" ||
this._loadingResourcesBtn.isFetching()
) {
return;
Expand Down Expand Up @@ -388,7 +393,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
},

_workspaceSelected: function(workspaceId) {
this.__changeContext(workspaceId, null);
this.__changeContext("studiesAndFolders", workspaceId, null);
},

_workspaceUpdated: function() {
Expand Down Expand Up @@ -418,7 +423,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
__addNewFolderButton: function() {
const currentWorkspaceId = this.getCurrentWorkspaceId();
if (currentWorkspaceId) {
if (currentWorkspaceId === -1 || currentWorkspaceId === -2) {
if (this.getCurrentContext() !== "studiesAndFolders") {
return;
}
const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
Expand Down Expand Up @@ -448,7 +453,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
},

_folderSelected: function(folderId) {
this.__changeContext(this.getCurrentWorkspaceId(), folderId);
this.__changeContext("studiesAndFolders", this.getCurrentWorkspaceId(), folderId);
},

_folderUpdated: function() {
Expand Down Expand Up @@ -705,11 +710,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
},

__addNewStudyButtons: function() {
if (this.getCurrentContext() !== "studiesAndFolders") {
return;
}
const currentWorkspaceId = this.getCurrentWorkspaceId();
if (currentWorkspaceId) {
if (currentWorkspaceId === -2) {
return;
}
const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(currentWorkspaceId);
if (currentWorkspace && !currentWorkspace.getMyAccessRights()["write"]) {
// If user can't write in workspace, do not show plus buttons
Expand Down Expand Up @@ -835,8 +840,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
this._createSearchBar();

if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
const workspaceHeader = this.__workspaceHeader = new osparc.dashboard.WorkspaceHeader();
this._addToLayout(workspaceHeader);
const header = this.__header = new osparc.dashboard.StudyBrowserHeader();
this._addToLayout(header);
}

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

__connectContexts: function() {
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
const workspaceHeader = this.__workspaceHeader;
workspaceHeader.addListener("contextChanged", () => {
const workspaceId = workspaceHeader.getCurrentWorkspaceId();
const folderId = workspaceHeader.getCurrentFolderId();
this.__changeContext(workspaceId, folderId);
const header = this.__header;
header.addListener("locationChanged", () => {
const workspaceId = header.getCurrentWorkspaceId();
const folderId = header.getCurrentFolderId();
this.__changeContext("studiesAndFolders", workspaceId, folderId);
}, this);

const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();
workspacesAndFoldersTree.addListener("contextChanged", e => {
workspacesAndFoldersTree.addListener("locationChanged", e => {
const context = e.getData();
const workspaceId = context["workspaceId"];
const folderId = context["folderId"];
this.__changeContext(workspaceId, folderId);
if (workspaceId === -1) {
this.__changeContext("workspaces");
} else {
const folderId = context["folderId"];
this.__changeContext("studiesAndFolders", workspaceId, folderId);
}
}, this);

this._searchBarFilter.addListener("filterChanged", e => {
const filterData = e.getData();
if (filterData.text) {
this.__changeContext(-2, null);
this.__changeContext("search");
} else {
// Back to My Workspace
this.__changeContext(null, null);
this.__changeContext("studiesAndFolders", null, null);
}
});
}
},

__changeContext: function(workspaceId, folderId) {
__changeContext: function(context, workspaceId = null, folderId = null) {
if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
if (
workspaceId !== -2 && // reload studies for a new search
context !== "search" && // reload studies for a new search
context === this.getCurrentContext() &&
workspaceId === this.getCurrentWorkspaceId() &&
folderId === this.getCurrentFolderId()
) {
// didn't really change
return;
}

this._loadingResourcesBtn.setFetching(false);
this.resetSelection();
this.setMultiSelection(false);
this.set({
currentContext: context,
currentWorkspaceId: workspaceId,
currentFolderId: folderId,
});
this._loadingResourcesBtn.setFetching(false);
this.resetSelection();
this.setMultiSelection(false);
this.invalidateStudies();
this._resourcesContainer.setResourcesToList([]);

if (workspaceId === -2) {
// Search result: no folders, just studies
if (context === "search") {
this.__setFoldersToList([]);
this.__reloadStudies();
} else if (workspaceId === -1) {
// Workspaces
} else if (context === "workspaces") {
this._searchBarFilter.resetFilters();
this.__reloadWorkspaces();
} else {
// Actual workspace
} else if (context === "studiesAndFolders") {
this._searchBarFilter.resetFilters();
this.__reloadFolders();
this.__reloadStudies();
}

// notify workspaceHeader
const workspaceHeader = this.__workspaceHeader;
workspaceHeader.set({
// notify header
const header = this.__header;
header.set({
currentContext: context,
currentWorkspaceId: workspaceId,
currentFolderId: folderId,
});
Expand All @@ -984,7 +993,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
currentWorkspaceId: workspaceId,
currentFolderId: folderId,
});
workspacesAndFoldersTree.contextChanged(workspaceId, folderId);
workspacesAndFoldersTree.contextChanged(context);
}
},

Expand Down Expand Up @@ -1130,8 +1139,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
}))
});
this.bind("multiSelection", selectButton, "value");
this.bind("currentWorkspaceId", selectButton, "visibility", {
converter: currentWorkspaceId => [-2, -1].includes(currentWorkspaceId) ? "excluded" : "visible"
this.bind("currentContext", selectButton, "visibility", {
converter: currentContext => currentContext === "studiesAndFolders" ? "visible" : "excluded"
});
return selectButton;
},
Expand Down
Loading

0 comments on commit 90f0e6e

Please sign in to comment.