Skip to content

Commit cb74ff7

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Enh: Tag management (#6720)
1 parent 9e6ca99 commit cb74ff7

File tree

24 files changed

+427
-166
lines changed

24 files changed

+427
-166
lines changed

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,19 @@ qx.Class.define("osparc.NewRelease", {
4444
/**
4545
* Compare the latest version provided by the backend with the one loaded in the browser (might be an old cached one)
4646
*/
47-
isMyFrontendOld: async function() {
48-
const lastUICommit = await osparc.store.AppSummary.getLatestUIFromBE();
49-
const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();
50-
if (lastUICommit && thisUICommit) {
51-
return lastUICommit !== thisUICommit;
52-
}
53-
return false;
47+
isMyFrontendOld: function() {
48+
return new Promise((resolve, reject) => {
49+
osparc.store.AppSummary.getLatestUIFromBE()
50+
.then(lastUICommit => {
51+
const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();
52+
if (lastUICommit && thisUICommit) {
53+
resolve(lastUICommit !== thisUICommit)
54+
} else {
55+
reject();
56+
}
57+
})
58+
.catch(() => reject());
59+
});
5460
}
5561
},
5662

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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,24 @@ qx.Class.define("osparc.NewUITracker", {
2727
__checkInterval: null,
2828

2929
startTracker: function() {
30-
const checkNewUI = async () => {
31-
const newReleaseAvailable = await osparc.NewRelease.isMyFrontendOld();
32-
if (newReleaseAvailable) {
33-
let msg = "";
34-
msg += qx.locale.Manager.tr("A new version of the application is now available.");
35-
msg += "<br>";
36-
msg += qx.locale.Manager.tr("Click the Reload button to get the latest features.");
37-
// permanent message
38-
const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0).set({
39-
maxWidth: 500
40-
});
41-
const reloadButton = osparc.utils.Utils.reloadNoCacheButton();
42-
flashMessage.addWidget(reloadButton);
43-
this.stopTracker();
44-
}
30+
const checkNewUI = () => {
31+
osparc.NewRelease.isMyFrontendOld()
32+
.then(newReleaseAvailable => {
33+
if (newReleaseAvailable) {
34+
let msg = "";
35+
msg += qx.locale.Manager.tr("A new version of the application is now available.");
36+
msg += "<br>";
37+
msg += qx.locale.Manager.tr("Click the Reload button to get the latest features.");
38+
// permanent message
39+
const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0).set({
40+
maxWidth: 500
41+
});
42+
const reloadButton = osparc.utils.Utils.reloadNoCacheButton();
43+
flashMessage.addWidget(reloadButton);
44+
this.stopTracker();
45+
}
46+
})
47+
.catch(() => setTimeout(() => checkNewUI(), 5*1000));
4548
};
4649
checkNewUI();
4750
this.__checkInterval = setInterval(checkNewUI, this.self().CHECK_INTERVAL);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -926,7 +926,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
926926
},
927927

928928
_filterTags: function(tags) {
929-
const checks = this.getTags().map(tag => tag.id);
929+
const checks = this.getTags().map(tag => tag.getTagId());
930930
return this.self().filterTags(checks, tags);
931931
},
932932

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,9 +181,6 @@ qx.Class.define("osparc.dashboard.Dashboard", {
181181
const store = osparc.store.Store.getInstance();
182182
preResourcePromises.push(store.getAllGroupsAndMembers());
183183
preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
184-
if (permissions.canDo("study.tag")) {
185-
preResourcePromises.push(osparc.data.Resources.get("tags"));
186-
}
187184
Promise.all(preResourcePromises)
188185
.then(() => {
189186
[

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
262262
tagsContainer.setVisibility(tags.length ? "visible" : "excluded");
263263
tagsContainer.removeAll();
264264
tags.forEach(tag => {
265-
const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
265+
const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
266266
tagUI.set({
267267
font: "text-12",
268268
toolTipText: this.tr("Click to filter by this Tag")

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
237237
const tagsContainer = this.getChildControl("tags");
238238
tagsContainer.removeAll();
239239
tags.forEach(tag => {
240-
const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
240+
const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
241241
tagUI.set({
242242
alignY: "middle",
243243
font: "text-12",

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
208208
},
209209

210210
__createCard: function(resourceData) {
211-
const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
211+
const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
212212
const card = this.getMode() === "grid" ? new osparc.dashboard.GridButtonItem() : new osparc.dashboard.ListButtonItem();
213213
card.set({
214214
appearance: resourceData.type ? `pb-${resourceData.type}` : `pb-${resourceData.resourceType}`,
@@ -434,7 +434,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
434434
},
435435

436436
__groupByTags: function(cards, resourceData) {
437-
const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
437+
const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
438438
if (tags.length === 0) {
439439
let noGroupContainer = this.__getGroupContainer("no-group");
440440
const card = this.__createCard(resourceData);
@@ -443,9 +443,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
443443
cards.push(card);
444444
} else {
445445
tags.forEach(tag => {
446-
let groupContainer = this.__getGroupContainer(tag.id);
446+
let groupContainer = this.__getGroupContainer(tag.getTagId());
447447
if (groupContainer === null) {
448-
groupContainer = this.__createGroupContainer(tag.id, tag.name, tag.color);
448+
groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());
449+
tag.bind("name", groupContainer, "headerLabel");
450+
tag.bind("color", groupContainer, "headerColor");
449451
groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
450452
this.__groupedContainers.add(groupContainer);
451453
this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,16 +158,15 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
158158
const maxTags = 5;
159159
this.__tagButtons = [];
160160
layout.removeAll();
161-
osparc.store.Store.getInstance().getTags().forEach((tag, idx) => {
162-
const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/18");
161+
osparc.store.Tags.getInstance().getTags().forEach((tag, idx) => {
162+
const button = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/tag/18");
163+
button.id = tag.getTagId();
164+
tag.bind("name", button, "label");
165+
tag.bind("color", button.getChildControl("icon"), "textColor");
163166
osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-tagFilterItem");
164-
button.id = tag.id;
165167
button.set({
166168
appearance: "filter-toggle-button",
167-
value: selectedTagIds.includes(tag.id)
168-
});
169-
button.getChildControl("icon").set({
170-
textColor: tag.color
169+
value: selectedTagIds.includes(tag.getTagId())
171170
});
172171

173172
layout.add(button);

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -208,14 +208,14 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
208208
},
209209

210210
__addTags: function(menuButton) {
211-
const tags = osparc.store.Store.getInstance().getTags();
211+
const tags = osparc.store.Tags.getInstance().getTags();
212212
menuButton.setVisibility(tags.length ? "visible" : "excluded");
213213
if (tags.length) {
214214
const tagsMenu = new qx.ui.menu.Menu();
215215
osparc.utils.Utils.setIdToWidget(tagsMenu, "searchBarFilter-tags-menu");
216216
tags.forEach(tag => {
217-
const tagButton = new qx.ui.menu.Button(tag.name, "@FontAwesome5Solid/tag/12");
218-
tagButton.getChildControl("icon").setTextColor(tag.color);
217+
const tagButton = new qx.ui.menu.Button(tag.getName(), "@FontAwesome5Solid/tag/12");
218+
tagButton.getChildControl("icon").setTextColor(tag.getColor());
219219
tagsMenu.add(tagButton);
220220
tagButton.addListener("execute", () => this.addTagActiveFilter(tag), this);
221221
});
@@ -271,16 +271,17 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
271271
},
272272

273273
addTagActiveFilter: function(tag) {
274-
this.__addChip("tag", tag.id, tag.name);
274+
this.__addChip("tag", tag.getTagId(), tag.getName());
275275
},
276276

277277
setTagsActiveFilter: function(tagIds) {
278-
const tags = osparc.store.Store.getInstance().getTags();
278+
const tags = osparc.store.Tags.getInstance().getTags();
279279
tags.forEach(tag => {
280-
if (tagIds.includes(tag.id)) {
281-
this.__addChip("tag", tag.id, tag.name);
280+
const tagId = tag.getTagId();
281+
if (tagIds.includes(tagId)) {
282+
this.__addChip("tag", tagId, tag.getName());
282283
} else {
283-
this.__removeChip("tag", tag.id, tag.name);
284+
this.__removeChip("tag", tagId, tag.getName());
284285
}
285286
});
286287
},

‎services/static-webserver/client/source/class/osparc/data/model/Tag.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2024 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
/**
19+
* Class that stores Tag data.
20+
*/
21+
22+
qx.Class.define("osparc.data.model.Tag", {
23+
extend: qx.core.Object,
24+
25+
/**
26+
* @param tagData {Object} Object containing the serialized Tag Data
27+
*/
28+
construct: function(tagData) {
29+
this.base(arguments);
30+
31+
this.set({
32+
tagId: tagData.id,
33+
name: tagData.name,
34+
description: tagData.description,
35+
color: tagData.color,
36+
accessRights: tagData.accessRights,
37+
});
38+
},
39+
40+
properties: {
41+
tagId: {
42+
check: "Number",
43+
nullable: true,
44+
init: null,
45+
event: "changeTagId"
46+
},
47+
48+
name: {
49+
check: "String",
50+
nullable: false,
51+
init: null,
52+
event: "changeName"
53+
},
54+
55+
description: {
56+
check: "String",
57+
nullable: true,
58+
init: null,
59+
event: "changeDescription"
60+
},
61+
62+
color: {
63+
check: "Color",
64+
event: "changeColor",
65+
init: "#303030"
66+
},
67+
68+
accessRights: {
69+
check: "Object",
70+
nullable: false,
71+
init: null,
72+
event: "changeAccessRights"
73+
},
74+
},
75+
76+
members: {
77+
serialize: function() {
78+
const jsonObject = {};
79+
const propertyKeys = this.self().getProperties();
80+
propertyKeys.forEach(key => {
81+
jsonObject[key] = this.get(key);
82+
});
83+
return jsonObject;
84+
}
85+
}
86+
});

0 commit comments

Comments
 (0)