♻️ [Frontend] ViP Market: adapt to latest model

services/static-webserver/client/source/class/osparc/store/LicensedItems.js

@@ -25,6 +25,16 @@ qx.Class.define("osparc.store.LicensedItems", {
     this.__licensedItems = null;
   },
 
+  statics: {
+    purchasesToNSeats: function(purchases) {
+      let nSeats = 0;
+      purchases.forEach(purchase => {
+        nSeats += purchase.getNumberOfSeats();
+      });
+      return nSeats;
+    },
+  },
+
   members: {
     __licensedItems: null,
 

services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js

@@ -53,8 +53,8 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
       this._removeAll();
 
       const anatomicalModelsData = this.getAnatomicalModelsData();
-      if (anatomicalModelsData) {
-        const modelInfo = this.__createModelInfo(anatomicalModelsData["licensedResourceData"]);
+      if (anatomicalModelsData && anatomicalModelsData["licensedResourceData"]) {
+        const modelInfo = this.__createModelInfo(anatomicalModelsData["licensedResourceData"]["source"]);
         const pricingUnits = this.__createPricingUnits(anatomicalModelsData);
         const importButton = this.__createImportSection(anatomicalModelsData);
         this._add(modelInfo);
@@ -161,13 +161,22 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         row: idx,
       });
 
-      const doiValue = new qx.ui.basic.Label().set({
-        value: anatomicalModelsData["doi"] ? anatomicalModelsData["doi"] : "-",
-        font: "text-14",
-        alignX: "left",
-        marginTop: 16,
-      });
-      featuresLayout.add(doiValue, {
+      const doiToLink = doi => {
+        const doiLabel = new osparc.ui.basic.LinkLabel("-").set({
+          font: "text-14",
+          alignX: "left",
+          marginTop: 16,
+        });
+        if (doi) {
+          doiLabel.set({
+            value: doi,
+            url: "https://doi.org/" + doi,
+            font: "link-label-14",
+          });
+        }
+        return doiLabel;
+      };
+      featuresLayout.add(doiToLink(anatomicalModelsData["doi"]), {
         column: 1,
         row: idx,
       });

services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js

@@ -24,11 +24,12 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
     this.base(arguments);
 
     const layout = new qx.ui.layout.Grid(5, 5);
-    layout.setColumnWidth(0, 64);
     layout.setRowFlex(0, 1);
-    layout.setColumnFlex(1, 1);
+    layout.setColumnFlex(1, 1); // flex display name
+    layout.setColumnWidth(0, 48);
     layout.setColumnAlign(0, "center", "middle");
     layout.setColumnAlign(1, "left", "middle");
+    layout.setColumnAlign(2, "center", "middle");
     this._setLayout(layout);
 
     this.set({
@@ -145,6 +146,16 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
             column: 1
           });
           break;
+        case "n-seats":
+          control = new qx.ui.basic.Label().set({
+            font: "text-14",
+            alignY: "middle",
+          });
+          this._add(control, {
+            row: 0,
+            column: 2
+          });
+          break;
       }
       control.set({
         anonymous: true, // pass the tap action over
@@ -162,11 +173,12 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
     },
 
     __applyPurchases: function(purchases) {
-      if (purchases.length) {
-        this.set({
-          textColor: "default-button-text",
-          backgroundColor: "strong-main",
-        })
+      const nSeatsLabel = this.getChildControl("n-seats");
+      const nSeats = osparc.store.LicensedItems.purchasesToNSeats(purchases);
+      if (nSeats) {
+        nSeatsLabel.setValue(`(${nSeats})`);
+      } else {
+        nSeatsLabel.resetValue();
       }
     },
 

services/static-webserver/client/source/class/osparc/vipMarket/Market.js

@@ -43,8 +43,8 @@ qx.Class.define("osparc.vipMarket.Market", {
         const licensedItems = values[0];
         const categories = {};
         licensedItems.forEach(licensedItem => {
-          if (licensedItem["licensedResourceData"] && licensedItem["licensedResourceData"]["category"]) {
-            const category = licensedItem["licensedResourceData"]["category"];
+          if (licensedItem["licensedResourceData"] && licensedItem["licensedResourceData"]["categoryId"]) {
+            const category = licensedItem["licensedResourceData"]["categoryId"];
             if (!(category in categories)) {
               categories[category] = [];
             }
@@ -53,24 +53,25 @@ qx.Class.define("osparc.vipMarket.Market", {
         });
 
         const expectedCategories = [{
-          category: "HumanWholeBody",
+          categoryId: "HumanWholeBody",
           label: "Humans",
           icon: "@FontAwesome5Solid/users/20",
         }, {
-          category: "HumanBodyRegion",
+          categoryId: "HumanBodyRegion",
           label: "Humans (Region)",
           icon: "@FontAwesome5Solid/users/20",
         }, {
-          category: "AnimalWholeBody",
+          categoryId: "AnimalWholeBody",
           label: "Animals",
           icon: "@FontAwesome5Solid/users/20",
         }, {
-          category: "ComputationalPhantom",
+          categoryId: "ComputationalPhantom",
           label: "Phantoms",
           icon: "@FontAwesome5Solid/users/20",
         }]
         expectedCategories.forEach(expectedCategory => {
-          this.__buildViPMarketPage(expectedCategory, categories[expectedCategory["category"]]);
+          const items = categories[expectedCategory["categoryId"]];
+          this.__buildViPMarketPage(expectedCategory, items);
         });
 
         if (openCategory) {
@@ -96,12 +97,12 @@ qx.Class.define("osparc.vipMarket.Market", {
     __buildViPMarketPage: function(marketTabInfo, licensedItems = []) {
       const vipMarketView = new osparc.vipMarket.VipMarket(licensedItems);
       vipMarketView.set({
-        category: marketTabInfo["category"],
+        category: marketTabInfo["categoryId"],
       });
       this.bind("openBy", vipMarketView, "openBy");
       vipMarketView.addListener("importMessageSent", () => this.fireEvent("importMessageSent"));
       const page = this.addTab(marketTabInfo["label"], marketTabInfo["icon"], vipMarketView);
-      page.category = marketTabInfo["category"];
+      page.category = marketTabInfo["categoryId"];
       return page;
     },
 

services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js

@@ -185,18 +185,16 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
             anatomicalModel["modelId"] = licensedItem["licensedItemId"];
             anatomicalModel["thumbnail"] = "";
             anatomicalModel["date"] = null;
-            if (anatomicalModel["licensedResourceData"]) {
-              if (anatomicalModel["licensedResourceData"]["id"]) {
-                anatomicalModel["modelId"] = anatomicalModel["licensedResourceData"]["id"];
+            if (anatomicalModel["licensedResourceData"] && anatomicalModel["licensedResourceData"]["source"]) {
+              const anatomicalModelSource = anatomicalModel["licensedResourceData"]["source"];
+              if (anatomicalModelSource["id"]) {
+                anatomicalModel["modelId"] = anatomicalModelSource["id"];
               }
-              if (anatomicalModel["licensedResourceData"]["thumbnail"]) {
-                anatomicalModel["thumbnail"] = anatomicalModel["licensedResourceData"]["thumbnail"];
+              if (anatomicalModelSource["thumbnail"]) {
+                anatomicalModel["thumbnail"] = anatomicalModelSource["thumbnail"];
               }
-              if (
-                anatomicalModel["licensedResourceData"]["features"] &&
-                anatomicalModel["licensedResourceData"]["features"]["date"]
-              ) {
-                anatomicalModel["date"] = new Date(anatomicalModel["licensedResourceData"]["features"]["date"]);
+              if (anatomicalModelSource["features"] && anatomicalModelSource["features"]["date"]) {
+                anatomicalModel["date"] = new Date(anatomicalModelSource["features"]["date"]);
               }
             }
             // attach license data
@@ -277,9 +275,11 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
       const sortModel = sortBy => {
         models.sort((a, b) => {
           // first criteria
-          if (b["purchases"].length !== a["purchases"].length) {
-            // leased first
-            return b["purchases"].length - a["purchases"].length;
+          const nASeats = osparc.store.LicensedItems.purchasesToNSeats(a["purchases"]);
+          const nBSeats = osparc.store.LicensedItems.purchasesToNSeats(b["purchases"]);
+          if (nASeats !== nBSeats) {
+            // nSeats first
+            return nASeats - nBSeats;
           }
           // second criteria
           if (sortBy) {