Skip to content

🎨 [Frontend] Enh: Extended Search widget for Projects tab #8127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 57 commits into from
Jul 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
f5203dd
remove tagIds from search
odeimaiz Jul 18, 2025
6c89aec
getBounds
odeimaiz Jul 18, 2025
1d9f69c
SearchBarFilterProjects
odeimaiz Jul 18, 2025
0e6cd45
3 buttons and aesthetics
odeimaiz Jul 18, 2025
c977618
attachHideHandlers
odeimaiz Jul 18, 2025
e8824b0
minor
odeimaiz Jul 18, 2025
28f1b10
local radioGroup
odeimaiz Jul 18, 2025
430cb70
showFilterMenu prop
odeimaiz Jul 18, 2025
cd0873f
not needed
odeimaiz Jul 18, 2025
a9ac42e
minor
odeimaiz Jul 18, 2025
251fc75
aesthetics
odeimaiz Jul 18, 2025
188e5a7
populate menus
odeimaiz Jul 18, 2025
be5cb69
excludeElements
odeimaiz Jul 18, 2025
eab1689
minor
odeimaiz Jul 18, 2025
7adf0ca
fix
odeimaiz Jul 18, 2025
3e91d0b
down
odeimaiz Jul 18, 2025
c14883a
rename file
odeimaiz Jul 18, 2025
386350d
minor
odeimaiz Jul 18, 2025
cbb7c79
one way working
odeimaiz Jul 18, 2025
952cd79
minors
odeimaiz Jul 18, 2025
776bfab
minor
odeimaiz Jul 18, 2025
6594e04
open right button
odeimaiz Jul 18, 2025
3150815
needed
odeimaiz Jul 18, 2025
2f4f745
init text
odeimaiz Jul 18, 2025
25b566d
minor
odeimaiz Jul 18, 2025
aee04f7
add tags
odeimaiz Jul 18, 2025
fd29a2e
shared with propagated
odeimaiz Jul 18, 2025
df29e8c
Merge branch 'master' into feature/proejcts-search
odeimaiz Jul 21, 2025
af658bf
Merge branch 'feature/proejcts-search' of github.com:odeimaiz/osparc-…
odeimaiz Jul 21, 2025
12f7e83
__filter
odeimaiz Jul 21, 2025
64d4c21
minor
odeimaiz Jul 21, 2025
a7ce7f9
minor
odeimaiz Jul 21, 2025
1819344
comments
odeimaiz Jul 21, 2025
f580e43
refactor
odeimaiz Jul 21, 2025
8efa952
minor
odeimaiz Jul 21, 2025
be87593
minor
odeimaiz Jul 21, 2025
aeb3663
refactor
odeimaiz Jul 21, 2025
d582315
less context options
odeimaiz Jul 21, 2025
23911eb
minor
odeimaiz Jul 21, 2025
cd1264c
searchContext
odeimaiz Jul 21, 2025
3d54651
refactor
odeimaiz Jul 21, 2025
72aa8f4
override the default theme's bold font
odeimaiz Jul 21, 2025
4533b90
first update the filters
odeimaiz Jul 21, 2025
a69b93f
unused
odeimaiz Jul 21, 2025
1dc2b82
minor
odeimaiz Jul 21, 2025
926b172
missing, don't double call
odeimaiz Jul 21, 2025
1996f4c
product-color for selected toolbar-button
odeimaiz Jul 21, 2025
02a0703
Update services/static-webserver/client/source/class/osparc/dashboard…
odeimaiz Jul 21, 2025
14dfb67
Update services/static-webserver/client/source/class/osparc/dashboard…
odeimaiz Jul 21, 2025
76a37ac
Update services/static-webserver/client/source/class/osparc/dashboard…
odeimaiz Jul 21, 2025
81eeb1b
Merge branch 'feature/proejcts-search' of github.com:odeimaiz/osparc-…
odeimaiz Jul 21, 2025
77d955c
unfocus
odeimaiz Jul 21, 2025
8696929
minors
odeimaiz Jul 21, 2025
413a3e4
last changes
odeimaiz Jul 21, 2025
0914937
Update services/static-webserver/client/source/class/osparc/dashboard…
odeimaiz Jul 21, 2025
4708626
Update services/static-webserver/client/source/class/osparc/dashboard…
odeimaiz Jul 21, 2025
15d6a04
Merge branch 'master' into feature/proejcts-search
mergify[bot] Jul 21, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
this._setLayout(new qx.ui.layout.HBox(5));

this.set({
backgroundColor: "input_background",
backgroundColor: this.self().BG_COLOR,
paddingLeft: 6,
height: this.self().HEIGHT,
maxHeight: this.self().HEIGHT,
decorator: "rounded",
});

Expand All @@ -41,8 +42,17 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
this.__currentFilter = null;
},

properties: {
showFilterMenu: {
check: "Boolean",
init: true,
event: "changeShowFilterMenu",
}
},

statics: {
HEIGHT: 36,
BG_COLOR: "input_background",

getSharedWithOptions: function(resourceType) {
if (resourceType === "template") {
Expand Down Expand Up @@ -70,7 +80,19 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
label: qx.locale.Manager.tr("Public") + " " + resourceAlias,
icon: "@FontAwesome5Solid/globe/20"
}];
}
},

createChip: function(chipType, chipId, chipLabel) {
const chipButton = new qx.ui.form.Button().set({
label: osparc.utils.Utils.capitalize(chipType) + " = '" + chipLabel + "'",
icon: "@MaterialIcons/close/12",
toolTipText: chipLabel,
appearance: "chip-button"
});
chipButton.type = chipType;
chipButton.id = chipId;
return chipButton;
},
},

events: {
Expand Down Expand Up @@ -100,7 +122,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
break;
case "text-field":
control = new qx.ui.form.TextField().set({
backgroundColor: "input_background",
backgroundColor: this.self().BG_COLOR,
font: "text-16",
placeholder: this.tr("search"),
alignY: "bottom",
Expand Down Expand Up @@ -175,7 +197,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
this.__hideFilterMenu();
}
}, this);
textField.addListener("changeValue", () => this.__filter(), this);
textField.addListener("focusout", () => this.__filter(), this);

const resetButton = this.getChildControl("reset-button");
resetButton.addListener("execute", () => this.__resetFilters(), this);
Expand All @@ -184,7 +206,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
},

getTextFilterValue: function() {
return this.getChildControl("text-field").getValue();
return this.getChildControl("text-field").getValue() ? this.getChildControl("text-field").getValue().trim() : null;
},

__showFilterMenu: function() {
Expand All @@ -203,7 +225,9 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
left: left
});

this.__filtersMenu.show();
if (this.getShowFilterMenu()) {
this.__filtersMenu.show();
}
},

__hideFilterMenu: function() {
Expand Down Expand Up @@ -304,7 +328,6 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
});
},


setSharedWithActiveFilter: function(optionId, optionLabel) {
this.__removeChips("shared-with");
if (optionId === "show-all") {
Expand All @@ -323,30 +346,34 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
}
},

// this widget pops up a larger widget with all filters visible
// and lets users search between projects, templates, public projects and, eventually, files
popUpSearchBarFilter: function() {
const initFilterData = this.getFilterData();
const searchBarFilterExtended = new osparc.dashboard.SearchBarFilterExtended(this.__resourceType, initFilterData);
const bounds = osparc.utils.Utils.getBounds(this);
searchBarFilterExtended.setLayoutProperties({
left: bounds.left,
top: bounds.top,
});
searchBarFilterExtended.set({
width: bounds.width,
});
return searchBarFilterExtended;
},

__addChip: function(type, id, label) {
const activeFilter = this.getChildControl("active-filters");
const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);
if (chipFound) {
return;
}
const chip = this.__createChip(type, id, label);
const chip = this.self().createChip(type, id, label);
chip.addListener("execute", () => this.__removeChip(type, id), this);
activeFilter.add(chip);
this.__filter();
},

__createChip: function(chipType, chipId, chipLabel) {
const chipButton = new qx.ui.form.Button().set({
label: osparc.utils.Utils.capitalize(chipType) + " = '" + chipLabel + "'",
icon: "@MaterialIcons/close/12",
toolTipText: chipLabel,
appearance: "chip-button"
});
chipButton.type = chipType;
chipButton.id = chipId;
chipButton.addListener("execute", () => this.__removeChip(chipType, chipId), this);
return chipButton;
},

__removeChip: function(type, id) {
const activeFilter = this.getChildControl("active-filters");
const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);
Expand Down
Loading
Loading