Skip to content

Commit 97097fb

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Licensed items: Adapt to new model and backend's catalog (#7146)
1 parent 1dcd369 commit 97097fb

File tree

9 files changed

+164
-223
lines changed

9 files changed

+164
-223
lines changed

‎services/static-webserver/client/source/class/osparc/desktop/credits/CheckoutsTable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTable", {
8080
id: "user",
8181
column: 6,
8282
label: qx.locale.Manager.tr("User"),
83-
width: 100
83+
width: 150
8484
},
8585
}
8686
}

‎services/static-webserver/client/source/class/osparc/desktop/credits/CheckoutsTableModel.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,19 +122,16 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTableModel", {
122122
return Promise.all([
123123
licensedItemsStore.getLicensedItems(),
124124
licensedItemsStore.getCheckedOutLicensedItems(walletId, urlParams),
125-
licensedItemsStore.getVipModels(),
126125
])
127126
.then(values => {
128127
const licensedItems = values[0];
129128
const checkoutsItems = values[1];
130-
const vipModels = values[2];
131129

132130
const data = [];
133131
const checkoutsCols = osparc.desktop.credits.CheckoutsTable.COLS;
134132
checkoutsItems.forEach(checkoutsItem => {
135133
const licensedItemId = checkoutsItem["licensedItemId"];
136134
const licensedItem = licensedItems.find(licItem => licItem["licensedItemId"] === licensedItemId);
137-
const vipModel = vipModels.find(vipMdl => licensedItem && (vipMdl["modelId"] == licensedItem["name"]));
138135
let start = "";
139136
let duration = "";
140137
if (checkoutsItem["startedAt"]) {
@@ -146,11 +143,11 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTableModel", {
146143
data.push({
147144
[checkoutsCols.CHECKOUT_ID.id]: checkoutsItem["licensedItemCheckoutId"],
148145
[checkoutsCols.ITEM_ID.id]: licensedItemId,
149-
[checkoutsCols.ITEM_LABEL.id]: vipModel ? vipModel["name"] : "unknown model",
146+
[checkoutsCols.ITEM_LABEL.id]: licensedItem ? licensedItem["displayName"] : "unknown model",
150147
[checkoutsCols.START.id]: start,
151148
[checkoutsCols.DURATION.id]: duration,
152149
[checkoutsCols.SEATS.id]: checkoutsItem["numOfSeats"],
153-
[checkoutsCols.USER.id]: checkoutsItem["userId"],
150+
[checkoutsCols.USER.id]: checkoutsItem["userEmail"],
154151
});
155152
});
156153
return data;

‎services/static-webserver/client/source/class/osparc/desktop/credits/PurchasesTable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ qx.Class.define("osparc.desktop.credits.PurchasesTable", {
8787
id: "user",
8888
column: 7,
8989
label: qx.locale.Manager.tr("User"),
90-
width: 100
90+
width: 150
9191
},
9292
}
9393
}

‎services/static-webserver/client/source/class/osparc/desktop/credits/PurchasesTableModel.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -121,28 +121,25 @@ qx.Class.define("osparc.desktop.credits.PurchasesTableModel", {
121121
return Promise.all([
122122
licensedItemsStore.getLicensedItems(),
123123
licensedItemsStore.getPurchasedLicensedItems(walletId, urlParams),
124-
licensedItemsStore.getVipModels(),
125124
])
126125
.then(values => {
127126
const licensedItems = values[0];
128127
const purchasesItems = values[1];
129-
const vipModels = values[2];
130128

131129
const data = [];
132130
const purchasesCols = osparc.desktop.credits.PurchasesTable.COLS;
133131
purchasesItems.forEach(purchasesItem => {
134132
const licensedItemId = purchasesItem["licensedItemId"];
135133
const licensedItem = licensedItems.find(licItem => licItem["licensedItemId"] === licensedItemId);
136-
const vipModel = vipModels.find(vipMdl => licensedItem && (vipMdl["modelId"] == licensedItem["name"]));
137134
data.push({
138135
[purchasesCols.PURCHASE_ID.id]: purchasesItem["licensedItemPurchaseId"],
139136
[purchasesCols.ITEM_ID.id]: licensedItemId,
140-
[purchasesCols.ITEM_LABEL.id]: vipModel ? vipModel["name"] : "unknown model",
137+
[purchasesCols.ITEM_LABEL.id]: licensedItem ? licensedItem["displayName"] : "unknown model",
141138
[purchasesCols.START.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem["startAt"])),
142139
[purchasesCols.END.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem["expireAt"])),
143140
[purchasesCols.SEATS.id]: purchasesItem["numOfSeats"],
144141
[purchasesCols.COST.id]: purchasesItem["pricingUnitCost"] ? ("-" + parseFloat(purchasesItem["pricingUnitCost"]).toFixed(2)) : "", // show it negative
145-
[purchasesCols.USER.id]: purchasesItem["purchasedByUser"],
142+
[purchasesCols.USER.id]: purchasesItem["userEmail"],
146143
});
147144
});
148145
return data;

‎services/static-webserver/client/source/class/osparc/store/LicensedItems.js‎

Lines changed: 0 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,10 @@ qx.Class.define("osparc.store.LicensedItems", {
2323
this.base(arguments);
2424

2525
this.__licensedItems = null;
26-
this.__modelsCache = {};
27-
},
28-
29-
statics: {
30-
VIP_MODELS: {
31-
HUMAN_BODY: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanWholeBody",
32-
HUMAN_BODY_REGION: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanBodyRegion",
33-
ANIMAL: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/AnimalWholeBody",
34-
PHANTOM: "https://speag.swiss/PD_DirectDownload/getDownloadableItems/ComputationalPhantom",
35-
},
36-
37-
curateAnatomicalModels: function(anatomicalModelsRaw) {
38-
const anatomicalModels = [];
39-
const models = anatomicalModelsRaw["availableDownloads"];
40-
models.forEach(model => {
41-
const curatedModel = {};
42-
Object.keys(model).forEach(key => {
43-
if (key === "Features") {
44-
let featuresRaw = model["Features"];
45-
featuresRaw = featuresRaw.substring(1, featuresRaw.length-1); // remove brackets
46-
featuresRaw = featuresRaw.split(","); // split the string by commas
47-
const features = {};
48-
featuresRaw.forEach(pair => { // each pair is "key: value"
49-
const keyValue = pair.split(":");
50-
features[keyValue[0].trim()] = keyValue[1].trim()
51-
});
52-
curatedModel["Features"] = features;
53-
} else {
54-
curatedModel[key] = model[key];
55-
}
56-
});
57-
anatomicalModels.push(curatedModel);
58-
});
59-
return anatomicalModels;
60-
},
6126
},
6227

6328
members: {
6429
__licensedItems: null,
65-
__modelsCache: null,
6630

6731
getLicensedItems: function() {
6832
if (this.__licensedItems) {
@@ -118,48 +82,5 @@ qx.Class.define("osparc.store.LicensedItems", {
11882
}
11983
return osparc.data.Resources.fetch("licensedItems", "checkouts", purchasesParams, options);
12084
},
121-
122-
__fetchVipModels: async function(vipSubset) {
123-
if (!(vipSubset in this.self().VIP_MODELS)) {
124-
return [];
125-
}
126-
127-
if (vipSubset in this.__modelsCache) {
128-
return this.__modelsCache[vipSubset];
129-
}
130-
131-
return await fetch(this.self().VIP_MODELS[vipSubset], {
132-
method:"POST"
133-
})
134-
.then(resp => resp.json())
135-
.then(anatomicalModelsRaw => {
136-
const allAnatomicalModels = this.self().curateAnatomicalModels(anatomicalModelsRaw);
137-
const anatomicalModels = [];
138-
allAnatomicalModels.forEach(model => {
139-
const anatomicalModel = {};
140-
anatomicalModel["modelId"] = model["ID"];
141-
anatomicalModel["thumbnail"] = model["Thumbnail"];
142-
anatomicalModel["name"] = model["Features"]["name"] + " " + model["Features"]["version"];
143-
anatomicalModel["description"] = model["Description"];
144-
anatomicalModel["features"] = model["Features"];
145-
anatomicalModel["date"] = model["Features"]["date"];
146-
anatomicalModel["DOI"] = model["DOI"];
147-
anatomicalModels.push(anatomicalModel);
148-
});
149-
this.__modelsCache[vipSubset] = anatomicalModels;
150-
return anatomicalModels;
151-
});
152-
},
153-
154-
getVipModels: async function(vipSubset) {
155-
const vipModels = this.self().VIP_MODELS;
156-
if (vipSubset && vipSubset in vipModels) {
157-
return await this.__fetchVipModels(vipSubset);
158-
}
159-
const promises = [];
160-
Object.keys(vipModels).forEach(sbs => promises.push(this.__fetchVipModels(sbs)));
161-
return await Promise.all(promises)
162-
.then(values => values.flat());
163-
},
16485
}
16586
});

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
2424
const layout = new qx.ui.layout.VBox(15);
2525
this._setLayout(layout);
2626

27-
this.__poplulateLayout();
27+
this.__populateLayout();
2828
},
2929

3030
events: {
@@ -44,17 +44,17 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
4444
check: "Object",
4545
init: null,
4646
nullable: true,
47-
apply: "__poplulateLayout"
47+
apply: "__populateLayout"
4848
},
4949
},
5050

5151
members: {
52-
__poplulateLayout: function() {
52+
__populateLayout: function() {
5353
this._removeAll();
5454

5555
const anatomicalModelsData = this.getAnatomicalModelsData();
5656
if (anatomicalModelsData) {
57-
const modelInfo = this.__createModelInfo(anatomicalModelsData);
57+
const modelInfo = this.__createModelInfo(anatomicalModelsData["licensedResourceData"]);
5858
const pricingUnits = this.__createPricingUnits(anatomicalModelsData);
5959
const importButton = this.__createImportSection(anatomicalModelsData);
6060
this._add(modelInfo);
@@ -77,7 +77,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
7777
const cardGrid = new qx.ui.layout.Grid(16, 16);
7878
const cardLayout = new qx.ui.container.Composite(cardGrid);
7979

80-
const description = anatomicalModelsData["description"];
80+
const description = anatomicalModelsData["description"] || "";
8181
description.split(" - ").forEach((desc, idx) => {
8282
const titleLabel = new qx.ui.basic.Label().set({
8383
value: desc,
@@ -162,7 +162,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
162162
});
163163

164164
const doiValue = new qx.ui.basic.Label().set({
165-
value: anatomicalModelsData["DOI"] ? anatomicalModelsData["DOI"] : "-",
165+
value: anatomicalModelsData["doi"] ? anatomicalModelsData["doi"] : "-",
166166
font: "text-14",
167167
alignX: "left",
168168
marginTop: 16,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,12 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
6868
apply: "__applyThumbnail",
6969
},
7070

71-
name: {
71+
displayName: {
7272
check: "String",
7373
init: null,
7474
nullable: false,
75-
event: "changeName",
76-
apply: "__applyName",
75+
event: "changeDisplayName",
76+
apply: "__applyDisplayName",
7777
},
7878

7979
date: {
@@ -157,7 +157,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
157157
this.getChildControl("thumbnail").setSource(value);
158158
},
159159

160-
__applyName: function(value) {
160+
__applyDisplayName: function(value) {
161161
this.getChildControl("name").setValue(value);
162162
},
163163

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

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
qx.Class.define("osparc.vipMarket.Market", {
1919
extend: osparc.ui.window.TabbedView,
2020

21-
construct: function(category) {
21+
construct: function(openCategory) {
2222
this.base(arguments);
2323

2424
const miniWallet = osparc.desktop.credits.BillingCenter.createMiniWalletView().set({
@@ -27,34 +27,54 @@ qx.Class.define("osparc.vipMarket.Market", {
2727
});
2828
this.addWidgetOnTopOfTheTabs(miniWallet);
2929

30-
osparc.store.LicensedItems.getInstance().getLicensedItems()
31-
.then(() => {
32-
[{
33-
category: "human",
30+
const store = osparc.store.Store.getInstance();
31+
const contextWallet = store.getContextWallet();
32+
if (!contextWallet) {
33+
return;
34+
}
35+
36+
const walletId = contextWallet.getWalletId();
37+
const licensedItemsStore = osparc.store.LicensedItems.getInstance();
38+
Promise.all([
39+
licensedItemsStore.getLicensedItems(),
40+
licensedItemsStore.getPurchasedLicensedItems(walletId),
41+
])
42+
.then(values => {
43+
const licensedItems = values[0];
44+
const categories = {};
45+
licensedItems.forEach(licensedItem => {
46+
if (licensedItem["licensedResourceData"] && licensedItem["licensedResourceData"]["category"]) {
47+
const category = licensedItem["licensedResourceData"]["category"];
48+
if (!(category in categories)) {
49+
categories[category] = [];
50+
}
51+
categories[category].push(licensedItem);
52+
}
53+
});
54+
55+
const expectedCategories = [{
56+
category: "HumanWholeBody",
3457
label: "Humans",
3558
icon: "@FontAwesome5Solid/users/20",
36-
vipSubset: "HUMAN_BODY",
3759
}, {
38-
category: "human_region",
60+
category: "HumanBodyRegion",
3961
label: "Humans (Region)",
4062
icon: "@FontAwesome5Solid/users/20",
41-
vipSubset: "HUMAN_BODY_REGION",
4263
}, {
43-
category: "animal",
64+
category: "AnimalWholeBody",
4465
label: "Animals",
4566
icon: "@FontAwesome5Solid/users/20",
46-
vipSubset: "ANIMAL",
4767
}, {
48-
category: "phantom",
68+
category: "ComputationalPhantom",
4969
label: "Phantoms",
5070
icon: "@FontAwesome5Solid/users/20",
51-
vipSubset: "PHANTOM",
52-
}].forEach(marketInfo => {
53-
this.__buildViPMarketPage(marketInfo);
71+
}]
72+
expectedCategories.forEach(expectedCategory => {
73+
this.__buildViPMarketPage(expectedCategory, categories[expectedCategory["category"]]);
5474
});
5575

56-
if (category) {
57-
this.openCategory(category);
76+
if (openCategory) {
77+
this.openCategory(openCategory);
5878
}
5979
});
6080
},
@@ -73,15 +93,15 @@ qx.Class.define("osparc.vipMarket.Market", {
7393
},
7494

7595
members: {
76-
__buildViPMarketPage: function(marketInfo) {
77-
const vipMarketView = new osparc.vipMarket.VipMarket();
96+
__buildViPMarketPage: function(marketTabInfo, licensedItems = []) {
97+
const vipMarketView = new osparc.vipMarket.VipMarket(licensedItems);
7898
vipMarketView.set({
79-
vipSubset: marketInfo["vipSubset"],
99+
category: marketTabInfo["category"],
80100
});
81101
this.bind("openBy", vipMarketView, "openBy");
82102
vipMarketView.addListener("importMessageSent", () => this.fireEvent("importMessageSent"));
83-
const page = this.addTab(marketInfo["label"], marketInfo["icon"], vipMarketView);
84-
page.category = marketInfo["category"];
103+
const page = this.addTab(marketTabInfo["label"], marketTabInfo["icon"], vipMarketView);
104+
page.category = marketTabInfo["category"];
85105
return page;
86106
},
87107

0 commit comments

Comments
 (0)