🎨 [Frontend] Enh: Tag management (#6720)

ITISFoundation · Nov 14, 2024 · cb74ff7 · cb74ff7
1 parent 9e6ca99
commit cb74ff7
Show file tree

Hide file tree

Showing 24 changed files with 427 additions and 166 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/NewRelease.js b/services/static-webserver/client/source/class/osparc/NewRelease.js
@@ -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());
+      });
     }
   },
 

diff --git a/services/static-webserver/client/source/class/osparc/NewUITracker.js b/services/static-webserver/client/source/class/osparc/NewUITracker.js
@@ -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);

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
@@ -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);
     },
 

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js
@@ -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(() => {
           [

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js
@@ -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")

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js
@@ -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",

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -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}`,
@@ -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);
@@ -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()));

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js
@@ -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);

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
@@ -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);
         });
@@ -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());
         }
       });
     },

diff --git a/services/static-webserver/client/source/class/osparc/data/model/Tag.js b/services/static-webserver/client/source/class/osparc/data/model/Tag.js
@@ -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;
+    }
+  }
+});
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
@@ -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();

diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPageDesktop.js b/services/static-webserver/client/source/class/osparc/desktop/MainPageDesktop.js
@@ -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();

diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
@@ -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() {

diff --git a/services/static-webserver/client/source/class/osparc/filter/UserTagsFilter.js b/services/static-webserver/client/source/class/osparc/filter/UserTagsFilter.js
@@ -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) {