Skip to content

Commit

Permalink
🎨 [Frontend] Enh: Tag management (ITISFoundation#6720)
Browse files Browse the repository at this point in the history
  • Loading branch information
odeimaiz authored Nov 14, 2024
1 parent 9e6ca99 commit cb74ff7
Show file tree
Hide file tree
Showing 24 changed files with 427 additions and 166 deletions.
20 changes: 13 additions & 7 deletions services/static-webserver/client/source/class/osparc/NewRelease.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,19 @@ qx.Class.define("osparc.NewRelease", {
/**
* Compare the latest version provided by the backend with the one loaded in the browser (might be an old cached one)
*/
isMyFrontendOld: async function() {
const lastUICommit = await osparc.store.AppSummary.getLatestUIFromBE();
const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();
if (lastUICommit && thisUICommit) {
return lastUICommit !== thisUICommit;
}
return false;
isMyFrontendOld: function() {
return new Promise((resolve, reject) => {
osparc.store.AppSummary.getLatestUIFromBE()
.then(lastUICommit => {
const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();
if (lastUICommit && thisUICommit) {
resolve(lastUICommit !== thisUICommit)
} else {
reject();
}
})
.catch(() => reject());
});
}
},

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,24 @@ qx.Class.define("osparc.NewUITracker", {
__checkInterval: null,

startTracker: function() {
const checkNewUI = async () => {
const newReleaseAvailable = await osparc.NewRelease.isMyFrontendOld();
if (newReleaseAvailable) {
let msg = "";
msg += qx.locale.Manager.tr("A new version of the application is now available.");
msg += "<br>";
msg += qx.locale.Manager.tr("Click the Reload button to get the latest features.");
// permanent message
const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0).set({
maxWidth: 500
});
const reloadButton = osparc.utils.Utils.reloadNoCacheButton();
flashMessage.addWidget(reloadButton);
this.stopTracker();
}
const checkNewUI = () => {
osparc.NewRelease.isMyFrontendOld()
.then(newReleaseAvailable => {
if (newReleaseAvailable) {
let msg = "";
msg += qx.locale.Manager.tr("A new version of the application is now available.");
msg += "<br>";
msg += qx.locale.Manager.tr("Click the Reload button to get the latest features.");
// permanent message
const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0).set({
maxWidth: 500
});
const reloadButton = osparc.utils.Utils.reloadNoCacheButton();
flashMessage.addWidget(reloadButton);
this.stopTracker();
}
})
.catch(() => setTimeout(() => checkNewUI(), 5*1000));
};
checkNewUI();
this.__checkInterval = setInterval(checkNewUI, this.self().CHECK_INTERVAL);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -926,7 +926,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
},

_filterTags: function(tags) {
const checks = this.getTags().map(tag => tag.id);
const checks = this.getTags().map(tag => tag.getTagId());
return this.self().filterTags(checks, tags);
},

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,6 @@ qx.Class.define("osparc.dashboard.Dashboard", {
const store = osparc.store.Store.getInstance();
preResourcePromises.push(store.getAllGroupsAndMembers());
preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
if (permissions.canDo("study.tag")) {
preResourcePromises.push(osparc.data.Resources.get("tags"));
}
Promise.all(preResourcePromises)
.then(() => {
[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
tagsContainer.setVisibility(tags.length ? "visible" : "excluded");
tagsContainer.removeAll();
tags.forEach(tag => {
const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
tagUI.set({
font: "text-12",
toolTipText: this.tr("Click to filter by this Tag")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
const tagsContainer = this.getChildControl("tags");
tagsContainer.removeAll();
tags.forEach(tag => {
const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
tagUI.set({
alignY: "middle",
font: "text-12",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
},

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

__groupByTags: function(cards, resourceData) {
const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
if (tags.length === 0) {
let noGroupContainer = this.__getGroupContainer("no-group");
const card = this.__createCard(resourceData);
Expand All @@ -443,9 +443,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
cards.push(card);
} else {
tags.forEach(tag => {
let groupContainer = this.__getGroupContainer(tag.id);
let groupContainer = this.__getGroupContainer(tag.getTagId());
if (groupContainer === null) {
groupContainer = this.__createGroupContainer(tag.id, tag.name, tag.color);
groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());
tag.bind("name", groupContainer, "headerLabel");
tag.bind("color", groupContainer, "headerColor");
groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
this.__groupedContainers.add(groupContainer);
this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,16 +158,15 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
const maxTags = 5;
this.__tagButtons = [];
layout.removeAll();
osparc.store.Store.getInstance().getTags().forEach((tag, idx) => {
const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/18");
osparc.store.Tags.getInstance().getTags().forEach((tag, idx) => {
const button = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/tag/18");
button.id = tag.getTagId();
tag.bind("name", button, "label");
tag.bind("color", button.getChildControl("icon"), "textColor");
osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-tagFilterItem");
button.id = tag.id;
button.set({
appearance: "filter-toggle-button",
value: selectedTagIds.includes(tag.id)
});
button.getChildControl("icon").set({
textColor: tag.color
value: selectedTagIds.includes(tag.getTagId())
});

layout.add(button);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,14 +208,14 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
},

__addTags: function(menuButton) {
const tags = osparc.store.Store.getInstance().getTags();
const tags = osparc.store.Tags.getInstance().getTags();
menuButton.setVisibility(tags.length ? "visible" : "excluded");
if (tags.length) {
const tagsMenu = new qx.ui.menu.Menu();
osparc.utils.Utils.setIdToWidget(tagsMenu, "searchBarFilter-tags-menu");
tags.forEach(tag => {
const tagButton = new qx.ui.menu.Button(tag.name, "@FontAwesome5Solid/tag/12");
tagButton.getChildControl("icon").setTextColor(tag.color);
const tagButton = new qx.ui.menu.Button(tag.getName(), "@FontAwesome5Solid/tag/12");
tagButton.getChildControl("icon").setTextColor(tag.getColor());
tagsMenu.add(tagButton);
tagButton.addListener("execute", () => this.addTagActiveFilter(tag), this);
});
Expand Down Expand Up @@ -271,16 +271,17 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
},

addTagActiveFilter: function(tag) {
this.__addChip("tag", tag.id, tag.name);
this.__addChip("tag", tag.getTagId(), tag.getName());
},

setTagsActiveFilter: function(tagIds) {
const tags = osparc.store.Store.getInstance().getTags();
const tags = osparc.store.Tags.getInstance().getTags();
tags.forEach(tag => {
if (tagIds.includes(tag.id)) {
this.__addChip("tag", tag.id, tag.name);
const tagId = tag.getTagId();
if (tagIds.includes(tagId)) {
this.__addChip("tag", tagId, tag.getName());
} else {
this.__removeChip("tag", tag.id, tag.name);
this.__removeChip("tag", tagId, tag.getName());
}
});
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/* ************************************************************************
osparc - the simcore frontend
https://osparc.io
Copyright:
2024 IT'IS Foundation, https://itis.swiss
License:
MIT: https://opensource.org/licenses/MIT
Authors:
* Odei Maiz (odeimaiz)
************************************************************************ */

/**
* Class that stores Tag data.
*/

qx.Class.define("osparc.data.model.Tag", {
extend: qx.core.Object,

/**
* @param tagData {Object} Object containing the serialized Tag Data
*/
construct: function(tagData) {
this.base(arguments);

this.set({
tagId: tagData.id,
name: tagData.name,
description: tagData.description,
color: tagData.color,
accessRights: tagData.accessRights,
});
},

properties: {
tagId: {
check: "Number",
nullable: true,
init: null,
event: "changeTagId"
},

name: {
check: "String",
nullable: false,
init: null,
event: "changeName"
},

description: {
check: "String",
nullable: true,
init: null,
event: "changeDescription"
},

color: {
check: "Color",
event: "changeColor",
init: "#303030"
},

accessRights: {
check: "Object",
nullable: false,
init: null,
event: "changeAccessRights"
},
},

members: {
serialize: function() {
const jsonObject = {};
const propertyKeys = this.self().getProperties();
propertyKeys.forEach(key => {
jsonObject[key] = this.get(key);
});
return jsonObject;
}
}
});
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ qx.Class.define("osparc.desktop.MainPage", {
preloadPromises.push(store.reloadWallets());
}
preloadPromises.push(store.getAllClassifiers(true));
preloadPromises.push(store.getTags());
preloadPromises.push(osparc.store.Tags.getInstance().fetchTags());
Promise.all(preloadPromises)
.then(() => {
const mainStack = this.__createMainStack();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ qx.Class.define("osparc.desktop.MainPageDesktop", {
preloadPromises.push(store.reloadWallets());
}
preloadPromises.push(store.getAllClassifiers(true));
preloadPromises.push(store.getTags());
preloadPromises.push(osparc.store.Tags.getInstance().fetchTags());
Promise.all(preloadPromises)
.then(() => {
const desktopCenter = new osparc.desktop.credits.DesktopCenter();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,10 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
icon: "@FontAwesome5Solid/plus/14"
});
osparc.utils.Utils.setIdToWidget(this.__addTagButton, "addTagBtn");
osparc.data.Resources.get("tags")
.then(tags => {
this.__tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({...tag}));
this.__renderLayout();
this.__attachEventHandlers();
})
.catch(err => console.error(err));
const tags = osparc.store.Tags.getInstance().getTags();
this.__tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({tag}));
this.__renderLayout();
this.__attachEventHandlers();
},

__renderLayout: function() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ qx.Class.define("osparc.filter.UserTagsFilter", {
},
members: {
__buildMenu: function() {
osparc.store.Store.getInstance().getTags()
osparc.store.Tags.getInstance().getTags()
.forEach(tag => {
const menuButton = this._addOption(tag.name);
const menuButton = this._addOption(tag.getName());
menuButton.setIcon("@FontAwesome5Solid/square/12");
menuButton.getChildControl("icon").setTextColor(tag.color);
menuButton.getChildControl("icon").setTextColor(tag.getColor());
});
},
__attachEventListeners: function(filterId, filterGroupId) {
Expand Down
Loading

0 comments on commit cb74ff7

Please sign in to comment.