🎨 [Frontend] UX: Create Study from Template

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

@@ -95,7 +95,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       return isLogged;
     },
 
-    startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {
+    startStudyById: function(studyId, openCB, cancelCB, showStudyOptions = false) {
       if (!osparc.dashboard.ResourceBrowserBase.checkLoggedIn()) {
         return;
       }
@@ -117,7 +117,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         osparc.data.Resources.fetch("studies", "getWallet", params)
           .then(wallet => {
             if (
-              isStudyCreation ||
+              showStudyOptions ||
               wallet === null ||
               osparc.desktop.credits.Utils.getWallet(wallet["walletId"]) === null
             ) {

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

@@ -1229,7 +1229,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         folderId: this.getCurrentFolderId(),
       };
       osparc.study.Utils.createStudyFromTemplate(templateCopyData, this._loadingPage, contextProps)
-        .then(studyId => this.__startStudyAfterCreating(studyId))
+        .then(studyData => this.__startStudyAfterCreating(studyData["uuid"]))
         .catch(err => {
           this._hideLoadingPage();
           osparc.FlashMessenger.getInstance().logAs(err.message, "ERROR");

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

@@ -137,27 +137,85 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
         return;
       }
 
-      this._showLoadingPage(this.tr("Creating ") + (templateData.name || osparc.product.Utils.getStudyAlias({firstUpperCase: true})));
-      osparc.study.Utils.createStudyFromTemplate(templateData, this._loadingPage)
-        .then(studyId => {
-          const openCB = () => this._hideLoadingPage();
-          const cancelCB = () => {
-            this._hideLoadingPage();
-            const params = {
-              url: {
-                studyId
-              }
+      const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});
+      this._showLoadingPage(this.tr("Creating ") + (templateData.name || studyAlias));
+
+      const studyOptions = new osparc.study.StudyOptions();
+      // they will be patched once the study is created
+      studyOptions.setPatchStudy(false);
+      studyOptions.setStudyData(templateData);
+      const win = osparc.study.StudyOptions.popUpInWindow(studyOptions);
+      win.moveItUp();
+      const cancelStudyOptions = () => {
+        this._hideLoadingPage();
+        win.close();
+      }
+      win.addListener("cancel", () => cancelStudyOptions());
+      studyOptions.addListener("cancel", () => cancelStudyOptions());
+      studyOptions.addListener("startStudy", () => {
+        const newName = studyOptions.getChildControl("title-field").getValue();
+        const walletSelection = studyOptions.getChildControl("wallet-selector").getSelection();
+        const nodesPricingUnits = studyOptions.getChildControl("study-pricing-units").getNodePricingUnits();
+        win.close();
+        this._showLoadingPage(this.tr("Creating ") + (newName || studyAlias));
+        osparc.study.Utils.createStudyFromTemplate(templateData, this._loadingPage)
+          .then(newStudyData => {
+            const studyId = newStudyData["uuid"];
+            const openCB = () => {
+              this._hideLoadingPage();
             };
-            osparc.data.Resources.fetch("studies", "delete", params);
-          };
-          const isStudyCreation = true;
-          this._startStudyById(studyId, openCB, cancelCB, isStudyCreation);
-        })
-        .catch(err => {
-          this._hideLoadingPage();
-          osparc.FlashMessenger.getInstance().logAs(err.message, "ERROR");
-          console.error(err);
-        });
+            const cancelCB = () => {
+              this._hideLoadingPage();
+              const params = {
+                url: {
+                  studyId
+                }
+              };
+              osparc.data.Resources.fetch("studies", "delete", params);
+            };
+
+            const promises = [];
+            // patch the name
+            if (newStudyData["name"] !== newName) {
+              promises.push(osparc.study.StudyOptions.updateName(newStudyData, newName));
+            }
+            // patch the wallet
+            if (walletSelection.length && walletSelection[0]["walletId"]) {
+              const walletId = walletSelection[0]["walletId"];
+              promises.push(osparc.study.StudyOptions.updateWallet(newStudyData["uuid"], walletId));
+            }
+            // patch the pricing units
+            // the nodeIds are coming from the original template, they need to be mapped to the newStudy
+            const workbench = newStudyData["workbench"];
+            const nodesIdsListed = [];
+            Object.keys(workbench).forEach(nodeId => {
+              const node = workbench[nodeId];
+              if (osparc.study.StudyPricingUnits.includeInList(node)) {
+                nodesIdsListed.push(nodeId);
+              }
+            });
+            nodesPricingUnits.forEach((nodePricingUnits, idx) => {
+              const selectedPricingUnitId = nodePricingUnits.getPricingUnits().getSelectedUnitId();
+              if (selectedPricingUnitId) {
+                const nodeId = nodesIdsListed[idx];
+                const pricingPlanId = nodePricingUnits.getPricingPlanId();
+                promises.push(osparc.study.NodePricingUnits.patchPricingUnitSelection(studyId, nodeId, pricingPlanId, selectedPricingUnitId));
+              }
+            });
+
+            Promise.all(promises)
+              .then(() => {
+                win.close();
+                const showStudyOptions = false;
+                this._startStudyById(studyId, openCB, cancelCB, showStudyOptions);
+              });
+          })
+          .catch(err => {
+            this._hideLoadingPage();
+            osparc.FlashMessenger.getInstance().logAs(err.message, "ERROR");
+            console.error(err);
+          });
+      });
     },
 
     // LAYOUT //

services/static-webserver/client/source/class/osparc/node/TierSelectionView.js

@@ -105,7 +105,7 @@ qx.Class.define("osparc.node.TierSelectionView", {
                   if (selection.length) {
                     tierBox.setEnabled(false);
                     const selectedUnitId = selection[0].getModel();
-                    osparc.study.NodePricingUnits.pricingUnitSelected(studyId, nodeId, pricingPlans["pricingPlanId"], selectedUnitId)
+                    osparc.study.NodePricingUnits.patchPricingUnitSelection(studyId, nodeId, pricingPlans["pricingPlanId"], selectedUnitId)
                       .finally(() => {
                         tierBox.setEnabled(true);
                         showSelectedTier(selectedUnitId);

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

@@ -30,8 +30,10 @@ qx.Class.define("osparc.study.NodePricingUnits", {
       layout: new qx.ui.layout.VBox()
     });
 
-    this.__studyId = studyId;
-    this.__nodeId = nodeId;
+    this.set({
+      studyId,
+      nodeId,
+    });
     if (node instanceof osparc.data.model.Node) {
       this.__nodeKey = node.getKey();
       this.__nodeVersion = node.getVersion();
@@ -43,8 +45,35 @@ qx.Class.define("osparc.study.NodePricingUnits", {
     }
   },
 
+  properties: {
+    studyId: {
+      check: "String",
+      init: null,
+      nullable: false,
+    },
+
+    nodeId: {
+      check: "String",
+      init: null,
+      nullable: false,
+    },
+
+    pricingPlanId: {
+      check: "Number",
+      init: null,
+      nullable: false,
+    },
+
+    patchNode: {
+      check: "Boolean",
+      init: true,
+      nullable: false,
+      event: "changePatchNode",
+    },
+  },
+
   statics: {
-    pricingUnitSelected: function(studyId, nodeId, planId, selectedUnitId) {
+    patchPricingUnitSelection: function(studyId, nodeId, planId, selectedUnitId) {
       const params = {
         url: {
           studyId,
@@ -58,19 +87,18 @@ qx.Class.define("osparc.study.NodePricingUnits", {
   },
 
   members: {
-    __studyId: null,
-    __nodeId: null,
     __nodeKey: null,
     __nodeVersion: null,
     __nodeLabel: null,
+    __pricingUnits: null,
 
     showPricingUnits: function(inGroupBox = true) {
       return new Promise(resolve => {
         const nodeKey = this.__nodeKey;
         const nodeVersion = this.__nodeVersion;
         const nodeLabel = this.__nodeLabel;
-        const studyId = this.__studyId;
-        const nodeId = this.__nodeId;
+        const studyId = this.getStudyId();
+        const nodeId = this.getNodeId();
 
         const plansParams = {
           url: osparc.data.Resources.getServiceUrl(
@@ -79,37 +107,47 @@ qx.Class.define("osparc.study.NodePricingUnits", {
           )
         };
         osparc.data.Resources.fetch("services", "pricingPlans", plansParams)
-          .then(pricingPlans => {
-            if (pricingPlans) {
+          .then(pricingPlan => {
+            if (pricingPlan) {
               const unitParams = {
                 url: {
                   studyId,
                   nodeId
                 }
               };
+              this.set({
+                pricingPlanId: pricingPlan["pricingPlanId"]
+              });
               osparc.data.Resources.fetch("studies", "getPricingUnit", unitParams)
                 .then(preselectedPricingUnit => {
-                  if (pricingPlans && "pricingUnits" in pricingPlans && pricingPlans["pricingUnits"].length) {
-                    const unitButtons = new osparc.study.PricingUnits(pricingPlans["pricingUnits"], preselectedPricingUnit);
+                  if (pricingPlan && "pricingUnits" in pricingPlan && pricingPlan["pricingUnits"].length) {
+                    const pricingUnitButtons = this.__pricingUnits = new osparc.study.PricingUnits(pricingPlan["pricingUnits"], preselectedPricingUnit);
                     if (inGroupBox) {
                       const pricingUnitsLayout = osparc.study.StudyOptions.createGroupBox(nodeLabel);
-                      pricingUnitsLayout.add(unitButtons);
+                      pricingUnitsLayout.add(pricingUnitButtons);
                       this._add(pricingUnitsLayout);
                     } else {
-                      this._add(unitButtons);
+                      this._add(pricingUnitButtons);
                     }
-                    unitButtons.addListener("changeSelectedUnitId", e => {
-                      unitButtons.setEnabled(false);
-                      const selectedPricingUnitId = e.getData();
-                      this.self().pricingUnitSelected(this.__studyId, this.__nodeId, pricingPlans["pricingPlanId"], selectedPricingUnitId)
-                        .finally(() => unitButtons.setEnabled(true));
+                    pricingUnitButtons.addListener("changeSelectedUnitId", e => {
+                      if (this.isPatchNode()) {
+                        pricingUnitButtons.setEnabled(false);
+                        const pricingPlanId = this.getPricingPlanId();
+                        const selectedPricingUnitId = e.getData();
+                        this.self().patchPricingUnitSelection(studyId, nodeId, pricingPlanId, selectedPricingUnitId)
+                          .finally(() => pricingUnitButtons.setEnabled(true));
+                      }
                     });
                   }
                 })
                 .finally(() => resolve());
             }
           });
       });
-    }
+    },
+
+    getPricingUnits: function() {
+      return this.__pricingUnits;
+    },
   }
 });