♻️✨ ViP Store: Licensed Item model and Cache

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

@@ -248,15 +248,17 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       container.add(card);
 
       if (this.getMode() === "list") {
+        const fitToContainer = () => {
+          const bounds = container.getBounds() || container.getSizeHint();
+          card.setWidth(bounds.width);
+        };
         [
           "appear",
           "resize",
         ].forEach(ev => {
-          container.addListener(ev, () => {
-            const bounds = container.getBounds() || container.getSizeHint();
-            card.setWidth(bounds.width);
-          });
+          container.addListener(ev, () => fitToContainer());
         });
+        fitToContainer();
       }
     },
 

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

@@ -234,13 +234,15 @@ qx.Class.define("osparc.dashboard.StudyBrowserHeader", {
     },
 
     __titleTapped: function() {
-      const workspaceId = this.getCurrentWorkspaceId();
-      const folderId = null;
-      this.setCurrentFolderId(folderId);
-      this.fireDataEvent("locationChanged", {
-        workspaceId,
-        folderId,
-      });
+      if (osparc.store.Store.getInstance().getStudyBrowserContext() === "studiesAndFolders") {
+        const workspaceId = this.getCurrentWorkspaceId();
+        const folderId = null;
+        this.setCurrentFolderId(folderId);
+        this.fireDataEvent("locationChanged", {
+          workspaceId,
+          folderId,
+        });
+      }
     },
 
     __buildLayout: function() {

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

@@ -0,0 +1,185 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.data.model.LicensedItem", {
+  extend: qx.core.Object,
+
+  /**
+   * @param licensedItemData {Object} Object containing the serialized LicensedItem Data
+   */
+  construct: function(licensedItemData) {
+    this.base(arguments);
+
+    let thumbnail = "";
+    let date = null;
+    let licensedResources = [];
+    if (licensedItemData["licensedResources"]) {
+      if (licensedItemData["licensedResources"].length) {
+        const firstItem = licensedItemData["licensedResources"][0]["source"];
+        if (firstItem["thumbnail"]) {
+          thumbnail = firstItem["thumbnail"];
+        }
+        if (firstItem["features"] && firstItem["features"]["date"]) {
+          date = firstItem["features"]["date"];
+        }
+      }
+      licensedItemData["licensedResources"].forEach(licensedRsrc => {
+        const licensedItemResource = new osparc.data.model.LicensedItemResource(licensedRsrc["source"]);
+        if (licensedItemData["termsOfUseUrl"]) {
+          licensedItemResource.set({
+            termsOfUseUrl: licensedItemData["termsOfUseUrl"],
+          })
+        }
+        licensedResources.push(licensedItemResource);
+      });
+    }
+    let categoryIcon = "@FontAwesome5Solid/shopping-bag/20";
+    if (licensedItemData.categoryIcon) {
+      categoryIcon = licensedItemData.categoryIcon;
+    } else if (qx.util.ResourceManager.getInstance().has(`osparc/market/${licensedItemData.categoryId}.svg`)) {
+      categoryIcon = `osparc/market/${licensedItemData.categoryId}.svg`;
+    }
+
+    this.set({
+      licensedItemId: licensedItemData.licensedItemId,
+      categoryId: licensedItemData.categoryId,
+      categoryDisplay: licensedItemData.categoryDisplay,
+      categoryIcon: categoryIcon,
+      pricingPlanId: licensedItemData.pricingPlanId,
+      key: licensedItemData.key,
+      version: licensedItemData.version,
+      thumbnail: thumbnail,
+      displayName: licensedItemData.displayName,
+      date: new Date(date),
+      licensedResources: licensedResources,
+      seats: licensedItemData.seats || [],
+    });
+  },
+
+  properties: {
+    licensedItemId: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeLicensedItemId",
+    },
+
+    categoryId: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCategoryId",
+    },
+
+    categoryDisplay: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCategoryDisplay",
+    },
+
+    categoryIcon: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCategoryIcon",
+    },
+
+    pricingPlanId: {
+      check: "Number",
+      nullable: false,
+      init: null,
+      event: "changePricingPlanId",
+    },
+
+    key: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeKey",
+    },
+
+    version: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeVersion",
+    },
+
+    thumbnail: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeThumbnail",
+    },
+
+    displayName: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeDisplayName",
+    },
+
+    date: {
+      check: "Date",
+      nullable: false,
+      init: null,
+      event: "changeDate",
+    },
+
+    licensedResources: {
+      check: "Array",
+      nullable: false,
+      init: [],
+      event: "changeLicensedResources",
+    },
+
+    seats: {
+      check: "Array",
+      nullable: false,
+      init: [],
+      event: "changeSeats",
+    },
+  },
+
+  statics: {
+    addSeatsFromPurchases: function(licensedItems, purchases) {
+      // reset seats
+      Object.values(licensedItems).forEach(licensedItem => licensedItem.setSeats([]));
+      // populate seats
+      purchases.forEach(purchase => {
+        const {
+          key,
+          version,
+        } = purchase;
+        Object.values(licensedItems).forEach(licensedItem => {
+          if (licensedItem.getKey() === key && licensedItem.getVersion() <= version) {
+            licensedItem.getSeats().push({
+              licensedItemId: purchase["licensedItemId"],
+              licensedItemPurchaseId: purchase["licensedItemPurchaseId"],
+              numOfSeats: purchase["numOfSeats"],
+              expireAt: new Date(purchase["expireAt"]),
+            });
+          }
+        });
+      })
+    },
+  },
+
+  members: {
+  }
+});

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

@@ -0,0 +1,151 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.data.model.LicensedItemResource", {
+  extend: qx.core.Object,
+
+  /**
+   * @param licensedItemResourceData {Object} Object containing the serialized LicensedItem Data
+   */
+  construct: function(licensedItemResourceData) {
+    this.base(arguments);
+
+    let description = licensedItemResourceData["description"] || "";
+    let title = "";
+    let subtitle = null;
+    description = description.replace(/SPEAG/g, " "); // remove SPEAG substring
+    const delimiter = " - ";
+    let titleAndSubtitle = description.split(delimiter);
+    if (titleAndSubtitle.length > 0) {
+      title = titleAndSubtitle[0];
+      titleAndSubtitle.shift();
+    }
+    if (titleAndSubtitle.length > 0) {
+      subtitle = titleAndSubtitle.join(delimiter);
+    }
+
+    const manufacturerData = {};
+    if (licensedItemResourceData["thumbnail"]) {
+      if (licensedItemResourceData["thumbnail"].includes("itis.swiss")) {
+        manufacturerData["label"] = "IT'IS Foundation";
+        manufacturerData["link"] = "https://itis.swiss/virtual-population/";
+        manufacturerData["icon"] = "https://media.licdn.com/dms/image/v2/C4D0BAQE_FGa66IyvrQ/company-logo_200_200/company-logo_200_200/0/1631341490431?e=2147483647&v=beta&t=7f_IK-ArGjPrz-1xuWolAT4S2NdaVH-e_qa8hsKRaAc";
+      } else if (licensedItemResourceData["thumbnail"].includes("speag.swiss")) {
+        manufacturerData["label"] = "Speag";
+        manufacturerData["link"] = "https://speag.swiss/products/em-phantoms/overview-2/";
+        manufacturerData["icon"] = "https://media.licdn.com/dms/image/v2/D4E0BAQG2CYG28KAKbA/company-logo_200_200/company-logo_200_200/0/1700045977122/schmid__partner_engineering_ag_logo?e=2147483647&v=beta&t=6CZb1jjg5TnnzQWkrZBS9R3ebRKesdflg-_xYi4dwD8";
+      }
+    }
+
+    this.set({
+      description: description,
+      title: title,
+      subtitle: subtitle,
+      thumbnail: licensedItemResourceData.thumbnail || "",
+      features: licensedItemResourceData.features || {},
+      doi: licensedItemResourceData.doi || null,
+      termsOfUseUrl: licensedItemResourceData.termsOfUseUrl || null,
+      manufacturerLabel: manufacturerData.label || null,
+      manufacturerLink: manufacturerData.link || null,
+      manufacturerIcon: manufacturerData.icon || null,
+    });
+  },
+
+  properties: {
+    description: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeDescription",
+    },
+
+    title: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeTitle",
+    },
+
+    subtitle: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeSubtitle",
+    },
+
+    thumbnail: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeThumbnail",
+    },
+
+    features: {
+      check: "Object",
+      nullable: false,
+      init: null,
+      event: "changeFeatures",
+    },
+
+    doi: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeDoi",
+    },
+
+    termsOfUseUrl: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeTermsOfUseUrl",
+    },
+
+    manufacturerLabel: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeManufacturerLabel",
+    },
+
+    manufacturerLink: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeManufacturerLink",
+    },
+
+    manufacturerIcon: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeManufacturerIcon",
+    },
+  },
+
+  statics: {
+    longName: function(licensedResource) {
+      const name = licensedResource.getFeatures()["name"] || licensedResource.getSubtitle();
+      const version = licensedResource.getFeatures()["version"] || "";
+      const functionality = licensedResource.getFeatures()["functionality"] || "Static";
+      return `${name} ${version}, ${functionality}`;
+    },
+  },
+
+  members: {
+  }
+});