diff --git a/services/static-webserver/client/source/class/osparc/study/PricingUnit.js b/services/static-webserver/client/source/class/osparc/study/PricingUnit.js index 4c4c76fca24..f257af307d5 100644 --- a/services/static-webserver/client/source/class/osparc/study/PricingUnit.js +++ b/services/static-webserver/client/source/class/osparc/study/PricingUnit.js @@ -27,6 +27,7 @@ qx.Class.define("osparc.study.PricingUnit", { this.set({ padding: 10, decorator: "rounded", + minWidth: 100, allowGrowX: false, allowGrowY: false, }); diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js index 79f7e6125d3..77009569300 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js @@ -28,7 +28,8 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { }, events: { - "modelPurchased": "qx.event.type.Event", + "modelPurchaseRequested": "qx.event.type.Data", + "modelImportRequested": "qx.event.type.Data", }, properties: { @@ -47,9 +48,11 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { const anatomicalModelsData = this.getAnatomicalModelsData(); if (anatomicalModelsData) { const modelInfo = this.__createModelInfo(anatomicalModelsData); - this._add(modelInfo); const pricingUnits = this.__createPricingUnits(anatomicalModelsData); + const importButton = this.__createImportButton(anatomicalModelsData); + this._add(modelInfo); this._add(pricingUnits); + this._add(importButton); } else { const selectModelLabel = new qx.ui.basic.Label().set({ value: this.tr("Select a model for more details"), @@ -184,7 +187,13 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { const pUnit = new osparc.study.PricingUnitLicense(pricingUnit).set({ showRentButton: true, }); - pUnit.addListener("rentPricingUnit", () => this.__rentAnatomicalModel(anatomicalModelsData, pricingUnit)); + pUnit.addListener("rentPricingUnit", () => { + this.fireDataEvent("modelPurchaseRequested", { + modelId: anatomicalModelsData["modelId"], + licensedItemId: anatomicalModelsData["licensedItemId"], + pricingUnitId: pricingUnit.getPricingUnitId(), + }); + }, this); pricingUnitsLayout.add(pUnit); }); }) @@ -193,8 +202,20 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { return pricingUnitsLayout; }, - __rentAnatomicalModel: function(anatomicalModelsData, pricingUnit) { - console.log(":purchase", anatomicalModelsData["licensedItemId"], pricingUnit.getPricingUnitId()); + __createImportButton: function(anatomicalModelsData) { + const importButton = new qx.ui.form.Button().set({ + label: this.tr("Import"), + appearance: "strong-button", + center: true, + maxWidth: 200, + alignX: "center", + }); + importButton.addListener("execute", () => { + this.fireDataEvent("modelImportRequested", { + modelId: anatomicalModelsData["modelId"] + }); + }, this); + return importButton; }, } }); diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js index 6100b33c110..b55d6704c2d 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js @@ -97,12 +97,12 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", { event: "changePricingPlanId", }, - leased: { + purchased: { check: "Boolean", init: false, nullable: true, - event: "changeLeased", - apply: "__applyLeased", + event: "changePurchased", + apply: "__applyPurchased", }, }, @@ -161,7 +161,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", { this.getChildControl("name").setValue(value); }, - __applyLeased: function(value) { + __applyPurchased: function(value) { if (value) { this.setBackgroundColor("strong-main"); } diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js b/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js index e7992b48be4..44d705d9023 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js @@ -185,8 +185,13 @@ qx.Class.define("osparc.vipMarket.VipMarket", { this.__populateModels(); - anatomicModelDetails.addListener("modelPurchased", e => { - const modelId = e.getData(); + anatomicModelDetails.addListener("modelPurchaseRequested", e => { + const { + modelId, + licensedItemId, + pricingUnitId, + } = e.getData(); + console.log("purchase", licensedItemId, pricingUnitId); const found = this.__anatomicalModels.find(model => model["ID"] === modelId); if (found) { found["purchased"] = true; @@ -194,6 +199,13 @@ qx.Class.define("osparc.vipMarket.VipMarket", { anatomicModelDetails.setAnatomicalModelsData(found); } }, this); + + anatomicModelDetails.addListener("modelImportRequested", e => { + const { + modelId + } = e.getData(); + console.log("Import", modelId); + }, this); }); }) .catch(err => console.error(err));