Skip to content

Commit f5c52c3

Browse files
odeimaizodeimaiz
authored
Dashboard UI/UX (I): Tabs to NavBar and Search filter (ITISFoundation#2749)
1 parent 75d0c06 commit f5c52c3

File tree

19 files changed

+1524
-1241
lines changed

19 files changed

+1524
-1241
lines changed

‎services/web/client/source/class/osparc/component/filter/TagsFilter.js‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,21 @@ qx.Class.define("osparc.component.filter.TagsFilter", {
3434
marginLeft: 0
3535
});
3636
this._add(this.__dropdown);
37+
38+
this.__activeTags = [];
39+
this.__tagButtons = {};
40+
},
41+
42+
properties: {
43+
printTags: {
44+
init: true,
45+
check: "Boolean",
46+
nullable: false
47+
}
48+
},
49+
50+
events: {
51+
"activeTagsChanged": "qx.event.type.Data"
3752
},
3853

3954
statics: {
@@ -54,50 +69,61 @@ qx.Class.define("osparc.component.filter.TagsFilter", {
5469
const menuButtons = this._getMenuButtons();
5570
menuButtons.forEach(button => button.resetIcon());
5671
// Remove active tags
57-
if (this.__activeTags && this.__activeTags.length) {
72+
if (this.__activeTags.length) {
5873
this.__activeTags.length = 0;
5974
}
6075
// Remove tag buttons
6176
for (let tagName in this.__tagButtons) {
6277
this._remove(this.__tagButtons[tagName]);
6378
delete this.__tagButtons[tagName];
6479
}
65-
// Dispatch
80+
this.__dispatch();
81+
},
82+
83+
__dispatch: function() {
6684
this._filterChange(this.__activeTags);
85+
this.fireDataEvent("activeTagsChanged", this.__activeTags);
86+
},
87+
88+
getActiveTags: function() {
89+
return this.__activeTags;
6790
},
6891

6992
_addTag: function(tagName, menuButton) {
7093
// Check if added
71-
this.__activeTags = this.__activeTags || [];
7294
if (this.__activeTags.includes(tagName)) {
73-
this.__removeTag(tagName, menuButton);
95+
this.removeTag(tagName, menuButton);
7496
} else {
7597
// Save previous icon
7698
menuButton.prevIcon = menuButton.getIcon();
7799
// Add tick
78100
menuButton.setIcon(this.self().ActiveTagIcon);
79-
// Add tag
80-
const tagButton = new qx.ui.toolbar.Button(tagName, "@MaterialIcons/close/12");
81-
this._add(tagButton);
82-
tagButton.addListener("execute", () => this.__removeTag(tagName, menuButton));
83101
// Update state
84102
this.__activeTags.push(tagName);
85-
this.__tagButtons = this.__tagButtons || {};
86-
this.__tagButtons[tagName] = tagButton;
103+
if (this.isPrintTags()) {
104+
// Add tag
105+
const tagButton = new qx.ui.toolbar.Button(tagName, "@MaterialIcons/close/12");
106+
this._add(tagButton);
107+
tagButton.addListener("execute", () => this.removeTag(tagName, menuButton));
108+
this.__tagButtons[tagName] = tagButton;
109+
}
87110
}
88-
// Dispatch
89-
this._filterChange(this.__activeTags);
111+
this.__dispatch();
90112
},
91113

92-
__removeTag: function(tagName, menuButton) {
114+
removeTag: function(tagName, menuButton) {
115+
if (menuButton === undefined) {
116+
menuButton = this._getMenuButtons().find(btn => btn.getLabel() === tagName);
117+
}
93118
// Restore icon
94119
menuButton.setIcon(menuButton.prevIcon);
95120
// Update state
96121
this.__activeTags.splice(this.__activeTags.indexOf(tagName), 1);
97-
this._remove(this.__tagButtons[tagName]);
98-
delete this.__tagButtons[tagName];
99-
// Dispatch
100-
this._filterChange(this.__activeTags);
122+
if (tagName in this.__tagButtons) {
123+
this._remove(this.__tagButtons[tagName]);
124+
delete this.__tagButtons[tagName];
125+
}
126+
this.__dispatch();
101127
},
102128

103129
_getMenuButtons: function() {

‎services/web/client/source/class/osparc/component/metadata/ClassifiersEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ qx.Class.define("osparc.component.metadata.ClassifiersEditor", {
101101
__createClassifiersTree: function() {
102102
const studyData = this.__studyData;
103103
const classifiers = studyData.classifiers && studyData.classifiers ? studyData.classifiers : [];
104-
const classifiersTree = this.__classifiersTree = new osparc.component.filter.ClassifiersFilter("classifiersEditor", "sideSearchFilter", classifiers);
104+
const classifiersTree = this.__classifiersTree = new osparc.component.filter.ClassifiersFilter("classifiersEditor", "searchBarFilter", classifiers);
105105
osparc.store.Store.getInstance().addListener("changeClassifiers", e => {
106106
classifiersTree.recreateTree();
107107
}, this);

‎services/web/client/source/class/osparc/component/metadata/ServicesInStudy.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ qx.Class.define("osparc.component.metadata.ServicesInStudy", {
2828
this.base(arguments);
2929

3030
const grid = new qx.ui.layout.Grid(20, 5);
31+
grid.setColumnMinWidth(this.self().gridPos.label, 100);
3132
grid.setColumnFlex(this.self().gridPos.label, 1);
3233
grid.setColumnAlign(this.self().gridPos.label, "left", "middle");
3334
grid.setColumnAlign(this.self().gridPos.name, "left", "middle");

‎services/web/client/source/class/osparc/dashboard/CardBase.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,25 @@ qx.Class.define("osparc.dashboard.CardBase", {
5252
MODE_APP: "@FontAwesome5Solid/desktop/14",
5353

5454
filterText: function(checks, text) {
55-
if (text && checks.filter(label => label && label.toLowerCase().trim().includes(text)).length == 0) {
56-
return true;
55+
if (text) {
56+
const includesSome = checks.some(check => check.toLowerCase().trim().includes(text.toLowerCase()));
57+
return !includesSome;
5758
}
5859
return false;
5960
},
6061

6162
filterTags: function(checks, tags) {
6263
if (tags && tags.length) {
63-
const tagNames = checks.map(tag => tag.name);
64-
if (tags.filter(tag => tagNames.includes(tag)).length == 0) {
65-
return true;
66-
}
64+
const includesAll = tags.every(tag => checks.includes(tag));
65+
return !includesAll;
6766
}
6867
return false;
6968
},
7069

7170
filterClassifiers: function(checks, classifiers) {
7271
if (classifiers && classifiers.length) {
73-
const classes = osparc.utils.Classifiers.getLeafClassifiers(classifiers);
74-
if (classes.filter(clas => checks.includes(clas.data.classifier)).length == 0) {
75-
return true;
76-
}
72+
const includesAll = classifiers.every(classifier => checks.includes(classifier));
73+
return !includesAll;
7774
}
7875
return false;
7976
}
@@ -404,6 +401,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
404401
},
405402

406403
_shouldApplyFilter: function(data) {
404+
data = data["searchBarFilter"];
407405
if (this._filterText(data.text)) {
408406
return true;
409407
}
@@ -417,6 +415,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
417415
},
418416

419417
_shouldReactToFilter: function(data) {
418+
data = data["searchBarFilter"];
420419
if (data.text && data.text.length > 1) {
421420
return true;
422421
}

‎services/web/client/source/class/osparc/dashboard/Dashboard.js‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,27 +68,35 @@ qx.Class.define("osparc.dashboard.Dashboard", {
6868

6969
members: {
7070
__studyBrowser: null,
71-
__exploreBrowser: null,
71+
__templateBrowser: null,
72+
__serviceBrowser: null,
7273

7374
getStudyBrowser: function() {
7475
return this.__studyBrowser;
7576
},
7677

77-
getExploreBrowser: function() {
78-
return this.__exploreBrowser;
78+
getTemplateBrowser: function() {
79+
return this.__templateBrowser;
80+
},
81+
82+
getServiceBrowser: function() {
83+
return this.__serviceBrowser;
7984
},
8085

8186
__createMainViewLayout: function() {
8287
const tabs = [{
83-
label: this.tr("Studies"),
88+
label: this.tr("STUDIES"),
8489
buildLayout: this.__createStudyBrowser
8590
}, {
86-
label: this.tr("Discover"),
87-
buildLayout: this.__createExploreBrowser
91+
label: this.tr("TEMPLATES"),
92+
buildLayout: this.__createTemplateBrowser
93+
}, {
94+
label: this.tr("SERVICES"),
95+
buildLayout: this.__createServiceBrowser
8896
}];
8997
if (!osparc.utils.Utils.isProduct("s4l")) {
9098
tabs.push({
91-
label: this.tr("Data"),
99+
label: this.tr("DATA"),
92100
buildLayout: this.__createDataBrowser}
93101
);
94102
}
@@ -124,14 +132,19 @@ qx.Class.define("osparc.dashboard.Dashboard", {
124132
return studiesView;
125133
},
126134

135+
__createTemplateBrowser: function() {
136+
const templatesView = this.__templateBrowser = new osparc.dashboard.TemplateBrowser();
137+
return templatesView;
138+
},
139+
140+
__createServiceBrowser: function() {
141+
const servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
142+
return servicesView;
143+
},
144+
127145
__createDataBrowser: function() {
128146
const dataManagerView = new osparc.dashboard.DataBrowser();
129147
return dataManagerView;
130-
},
131-
132-
__createExploreBrowser: function() {
133-
const exploreView = this.__exploreBrowser = new osparc.dashboard.ExploreBrowser();
134-
return exploreView;
135148
}
136149
}
137150
});

0 commit comments

Comments
 (0)