Skip to content

Commit

Permalink
🎨 [Frontend] UX: Create Study from Template (#6706)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Nov 14, 2024
1 parent a44de5c commit 17f486e
Show file tree
Hide file tree
Showing 8 changed files with 259 additions and 111 deletions.
4 changes: 2 additions & 2 deletions services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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
) {
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
98 changes: 78 additions & 20 deletions services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 //
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/node/TierSelectionView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
76 changes: 57 additions & 19 deletions services/static-webserver/client/source/class/osparc/study/NodePricingUnits.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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,
Expand All @@ -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(
Expand All @@ -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;
},
}
});
Loading

0 comments on commit 17f486e

Please sign in to comment.