diff --git a/services/static-webserver/client/source/class/osparc/service/PricingUnitsList.js b/services/static-webserver/client/source/class/osparc/service/PricingUnitsList.js index fac14e0449d..f7dcc85a457 100644 --- a/services/static-webserver/client/source/class/osparc/service/PricingUnitsList.js +++ b/services/static-webserver/client/source/class/osparc/service/PricingUnitsList.js @@ -64,30 +64,16 @@ qx.Class.define("osparc.service.PricingUnitsList", { __populateList: function(pricingUnits) { this.getChildControl("pricing-units-container").removeAll(); - if (pricingUnits.length === 0) { + if (pricingUnits.length) { + const pUnits = new osparc.study.PricingUnits(pricingUnits, null, false); + this.getChildControl("pricing-units-container").add(pUnits); + } else { const notFound = new qx.ui.basic.Label().set({ value: this.tr("No Tiers found"), font: "text-14" }); this.getChildControl("pricing-units-container").add(notFound); - return; } - - pricingUnits.forEach(pricingUnit => { - const pUnit = new osparc.study.PricingUnit(pricingUnit).set({ - allowGrowY: false - }); - this.getChildControl("pricing-units-container").add(pUnit); - }); - - const buttons = this.getChildControl("pricing-units-container").getChildren(); - const keepDefaultSelected = () => { - buttons.forEach(btn => { - btn.setValue(btn.getUnitData().isDefault()); - }); - }; - keepDefaultSelected(); - buttons.forEach(btn => btn.addListener("execute", () => keepDefaultSelected())); } } }); diff --git a/services/static-webserver/client/source/class/osparc/study/PricingUnits.js b/services/static-webserver/client/source/class/osparc/study/PricingUnits.js index 2f3fe92d2ac..5238825a838 100644 --- a/services/static-webserver/client/source/class/osparc/study/PricingUnits.js +++ b/services/static-webserver/client/source/class/osparc/study/PricingUnits.js @@ -18,14 +18,15 @@ qx.Class.define("osparc.study.PricingUnits", { extend: qx.ui.container.Composite, - construct: function(pricingUnits, preselectedPricingUnit) { + construct: function(pricingUnits, preselectedPricingUnit, changeSelectionAllowed = true) { this.base(arguments); this.set({ - layout: new qx.ui.layout.HBox(5) + layout: new qx.ui.layout.HBox(5), + allowGrowY: false, }); - this.__buildLayout(pricingUnits, preselectedPricingUnit); + this.__buildLayout(pricingUnits, preselectedPricingUnit, changeSelectionAllowed); }, properties: { @@ -38,7 +39,7 @@ qx.Class.define("osparc.study.PricingUnits", { }, members: { - __buildLayout: function(pricingUnits, preselectedPricingUnit) { + __buildLayout: function(pricingUnits, preselectedPricingUnit, changeSelectionAllowed) { const buttons = []; pricingUnits.forEach(pricingUnit => { const button = new osparc.study.PricingUnit(pricingUnit); @@ -47,7 +48,12 @@ qx.Class.define("osparc.study.PricingUnits", { }); const groupOptions = new qx.ui.form.RadioGroup(); - buttons.forEach(btn => groupOptions.add(btn)); + buttons.forEach(btn => { + groupOptions.add(btn); + btn.bind("value", btn, "backgroundColor", { + converter: selected => selected ? "background-main-1" : "transparent" + }); + }); if (preselectedPricingUnit) { const buttonFound = buttons.find(button => button.getUnitData().getPricingUnitId() === preselectedPricingUnit["pricingUnitId"]); @@ -63,12 +69,19 @@ qx.Class.define("osparc.study.PricingUnits", { }); } - buttons.forEach(button => button.addListener("changeValue", e => { - if (e.getData()) { - const selectedUnitId = button.getUnitData().getPricingUnitId(); - this.setSelectedUnitId(selectedUnitId); + buttons.forEach(button => { + if (!changeSelectionAllowed) { + button.setCursor("default"); } - })); + button.addListener("execute", () => { + if (changeSelectionAllowed) { + const selectedUnitId = button.getUnitData().getPricingUnitId(); + this.setSelectedUnitId(selectedUnitId); + } else { + buttons.forEach(btn => btn.setValue(btn.getUnitData().isDefault())); + } + }); + }); } } });