diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js index fe239b9f7efb..55177a4f2641 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js +++ b/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js @@ -106,7 +106,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", { }, __createIntroText: function() { - const msg = this.tr("Only Accountants of an organization can share a wallet with the entire organization and members."); + const msg = this.tr("Only Accountants of an Organization can share a wallet with other users."); const intro = new qx.ui.basic.Label().set({ value: msg, alignX: "left", diff --git a/services/static-webserver/client/source/class/osparc/filter/SearchingCollaborators.js b/services/static-webserver/client/source/class/osparc/filter/SearchingCollaborators.js new file mode 100644 index 000000000000..084dd9a8e1df --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/filter/SearchingCollaborators.js @@ -0,0 +1,24 @@ +/* + * oSPARC - The SIMCORE frontend - https://osparc.io + * Copyright: 2025 IT'IS Foundation - https://itis.swiss + * License: MIT - https://opensource.org/licenses/MIT + * Authors: Odei Maiz (odeimaiz) + */ + +qx.Class.define("osparc.filter.SearchingCollaborators", { + extend: qx.ui.basic.Atom, + + construct: function() { + this.base(arguments); + + this.set({ + label: this.tr("Searching..."), + icon: "@FontAwesome5Solid/circle-notch/14", + appearance: "tagbutton", + gap: 10, + }); + + this.getChildControl("icon").getContentElement().addClass("rotate"); + this.getChildControl("label").setTextColor("text"); + }, +}); diff --git a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js b/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js index 412fef60293e..7f757b831a3d 100644 --- a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js +++ b/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js @@ -44,8 +44,9 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { __resourceData: null, __showOrganizations: null, __textFilter: null, - __searchButton: null, __collabButtonsContainer: null, + __searchingCollaborators: null, + __searchDelayer: null, __shareButton: null, __selectedCollaborators: null, __potentialCollaborators: null, @@ -72,17 +73,24 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { })); const filter = this.__textFilter = new osparc.filter.TextFilter("name", "collaboratorsManager"); filter.setCompact(true); - this.addListener("appear", () => filter.getChildControl("textfield").focus()); + const filterTextField = filter.getChildControl("textfield"); + filterTextField.setPlaceholder(this.tr("Search")); + this.addListener("appear", () => filterTextField.focus()); toolbar.add(filter, { flex: 1 }); - const searchButton = this.__searchButton = new osparc.ui.form.FetchButton(this.tr("Search"), "@FontAwesome5Solid/search/12").set({ - maxHeight: 30, + filterTextField.addListener("input", e => { + const filterValue = e.getData(); + if (this.__searchDelayer) { + clearTimeout(this.__searchDelayer); + } + if (filterValue.length > 3) { + const waitBeforeSearching = 1000; + this.__searchDelayer = setTimeout(() => { + this.__searchUsers(); + }, waitBeforeSearching); + } }); - const command = new qx.ui.command.Command("Enter"); - searchButton.setCommand(command); - searchButton.addListener("execute", () => this.__searchUsers(), this); - toolbar.add(searchButton); this.add(toolbar); const collabButtonsContainer = this.__collabButtonsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox()); @@ -92,6 +100,10 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { flex: 1 }); + const searchingCollaborators = this.__searchingCollaborators = new osparc.filter.SearchingCollaborators(); + searchingCollaborators.exclude(); + this.__collabButtonsContainer.add(searchingCollaborators); + const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({ alignX: "right" })); @@ -105,8 +117,8 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { }, __searchUsers: function() { + this.__searchingCollaborators.show(); const text = this.__textFilter.getChildControl("textfield").getValue(); - this.__searchButton.setFetching(true); osparc.store.Users.getInstance().searchUsers(text) .then(users => { users.forEach(user => user["collabType"] = 2); @@ -116,7 +128,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { console.error(err); osparc.FlashMessenger.getInstance().logAs(err.message, "ERROR"); }) - .finally(() => this.__searchButton.setFetching(false)); + .finally(() => this.__searchingCollaborators.exclude()); }, __showProductEveryone: function() { @@ -208,6 +220,10 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", { } this.__collabButtonsContainer.add(this.__collaboratorButton(potentialCollaborator)); }); + + // move it to last position + this.__collabButtonsContainer.remove(this.__searchingCollaborators); + this.__collabButtonsContainer.add(this.__searchingCollaborators); }, __shareClicked: function() { diff --git a/services/static-webserver/client/source/class/osparc/ui/hint/Hint.js b/services/static-webserver/client/source/class/osparc/ui/hint/Hint.js index d3f5d2d21d14..cc3bc8f7333d 100644 --- a/services/static-webserver/client/source/class/osparc/ui/hint/Hint.js +++ b/services/static-webserver/client/source/class/osparc/ui/hint/Hint.js @@ -71,6 +71,8 @@ qx.Class.define("osparc.ui.hint.Hint", { setText: function(text) { this.getChildControl("label").setValue(text); + // After setting the text, the dimensions of the Hint changed: recenter it + setTimeout(() => this.updatePosition(), 10); } } });