[skip ci] Show rent buttons

Author: odeimaiz

services/static-webserver/client/source/class/osparc/study/PricingUnit.js

@@ -58,10 +58,17 @@ qx.Class.define("osparc.study.PricingUnit", {
 
     showEditButton: {
       check: "Boolean",
-      init: null,
+      init: false,
       nullable: true,
       event: "changeShowEditButton"
     },
+
+    showRentButton: {
+      check: "Boolean",
+      init: false,
+      nullable: true,
+      event: "changeShowRentButton"
+    },
   },
 
   members: {
@@ -97,6 +104,13 @@ qx.Class.define("osparc.study.PricingUnit", {
           control = new qx.ui.form.Button(qx.locale.Manager.tr("Edit"));
           this._add(control);
           break;
+        case "rent-button":
+          control = new qx.ui.form.Button(qx.locale.Manager.tr("Rent")).set({
+            appearance: "strong-button",
+            center: true,
+          });
+          this._add(control);
+          break;
       }
       return control || this.base(arguments, id);
     },
@@ -134,14 +148,21 @@ qx.Class.define("osparc.study.PricingUnit", {
       unitExtraInfo.setValue(text);
       this.bind("showUnitExtraInfo", unitExtraInfo, "visibility", {
         converter: show => show ? "visible" : "excluded"
-      })
+      });
 
       // add edit button
       const editButton = this.getChildControl("edit-button");
       this.bind("showEditButton", editButton, "visibility", {
         converter: show => show ? "visible" : "excluded"
       })
       editButton.addListener("execute", () => this.fireEvent("editPricingUnit"));
+
+      // add rent button
+      const rentButton = this.getChildControl("rent-button");
+      this.bind("showRentButton", rentButton, "visibility", {
+        converter: show => show ? "visible" : "excluded"
+      })
+      rentButton.addListener("execute", () => this.fireEvent("rentPricingUnit"));
     }
   }
 });

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

@@ -21,7 +21,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
   construct: function() {
     this.base(arguments);
 
-    const layout = new qx.ui.layout.VBox(10);
+    const layout = new qx.ui.layout.VBox(20);
     this._setLayout(layout);
 
     this.__poplulateLayout();
@@ -172,7 +172,9 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
 
     __createPricingUnits: function(anatomicalModelsData) {
       console.log(anatomicalModelsData);
-      const pricingUnitsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
+      const pricingUnitsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
+        alignX: "center"
+      }));
 
       const params = {
         url: {
@@ -187,6 +189,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
               showAwsSpecificInfo: false,
               showUnitExtraInfo: false,
               showEditButton: false,
+              showRentButton: true,
               allowGrowY: false
             });
             pricingUnitsLayout.add(pUnit);