diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js b/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js index 1be932d331a..3093df0cd7d 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js @@ -43,16 +43,26 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", { statics: { createMiniWalletView: function() { - const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)).set({ + const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({ alignX: "center", minWidth: 120, maxWidth: 150 }); - const store = osparc.store.Store.getInstance(); + const walletName = new qx.ui.basic.Label().set({ + alignX: "center" + }); + layout.add(walletName); const creditsIndicator = new osparc.desktop.credits.CreditsIndicator(); - store.bind("contextWallet", creditsIndicator, "wallet"); layout.add(creditsIndicator); + const store = osparc.store.Store.getInstance(); + store.bind("contextWallet", walletName, "value", { + converter: wallet => wallet.getName() + }); + store.bind("contextWallet", walletName, "toolTipText", { + converter: wallet => wallet.getName() + }); + store.bind("contextWallet", creditsIndicator, "wallet"); layout.add(new qx.ui.core.Spacer(15, 15)); diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js index 2c2a70a7f07..e003f05c229 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js +++ b/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js @@ -81,6 +81,7 @@ qx.Class.define("osparc.desktop.wallets.WalletListItem", { control = new qx.ui.basic.Label().set({ font: "text-14" }); + control.bind("value", control, "toolTipText"); this._add(control, { row: 0, column: 0, diff --git a/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js b/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js index aa385449834..47065547fff 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js +++ b/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js @@ -86,7 +86,7 @@ qx.Class.define("osparc.navigation.UserMenu", { this.add(control); break; case "market": - control = new qx.ui.menu.Button(this.tr("Market")); + control = new qx.ui.menu.Button(this.tr("Model Market")); control.addListener("execute", () => osparc.vipMarket.MarketWindow.openWindow()); this.add(control); break; diff --git a/services/static-webserver/client/source/class/osparc/store/LicensedItems.js b/services/static-webserver/client/source/class/osparc/store/LicensedItems.js index 1dcfaef2e23..8331e95bb8c 100644 --- a/services/static-webserver/client/source/class/osparc/store/LicensedItems.js +++ b/services/static-webserver/client/source/class/osparc/store/LicensedItems.js @@ -70,10 +70,10 @@ qx.Class.define("osparc.store.LicensedItems", { return nSeats; }, - licensedResourceNameAndVersion: function(licensedResource) { + licensedResourceTitle: function(licensedResource) { const name = licensedResource["source"]["features"]["name"] || osparc.store.LicensedItems.extractNameFromDescription(licensedResource); - const version = licensedResource["source"]["features"]["version"] || ""; - return `${name} ${version}`; + const functionality = licensedResource["source"]["features"]["functionality"] || "Static"; + return `${name}, ${functionality}`; }, extractNameFromDescription: function(licensedResource) { diff --git a/services/static-webserver/client/source/class/osparc/store/Pricing.js b/services/static-webserver/client/source/class/osparc/store/Pricing.js index 572a4b95e0d..884f1e3b436 100644 --- a/services/static-webserver/client/source/class/osparc/store/Pricing.js +++ b/services/static-webserver/client/source/class/osparc/store/Pricing.js @@ -82,7 +82,7 @@ qx.Class.define("osparc.store.Pricing", { }, fetchPricingUnits: function(pricingPlanId) { - if (this.getPricingPlan(pricingPlanId)) { + if (this.getPricingPlan(pricingPlanId) && this.getPricingPlan(pricingPlanId).getPricingUnits().length !== 0) { return new Promise(resolve => resolve(this.getPricingPlan(pricingPlanId).getPricingUnits())); } const params = { diff --git a/services/static-webserver/client/source/class/osparc/study/PricingUnitLicense.js b/services/static-webserver/client/source/class/osparc/study/PricingUnitLicense.js index a73a45a5515..00db92b60e1 100644 --- a/services/static-webserver/client/source/class/osparc/study/PricingUnitLicense.js +++ b/services/static-webserver/client/source/class/osparc/study/PricingUnitLicense.js @@ -29,13 +29,6 @@ qx.Class.define("osparc.study.PricingUnitLicense", { nullable: true, event: "changeShowRentButton" }, - - licenseUrl: { - check: "String", - init: false, - nullable: true, - event: "changeLicenseUrl" - }, }, statics: { @@ -95,29 +88,13 @@ qx.Class.define("osparc.study.PricingUnitLicense", { const nCredits = this.getUnitData().getCost(); const expirationDate = osparc.study.PricingUnitLicense.getExpirationDate(); let msg = this.getUnitData().getName() + this.tr(" will be available until ") + osparc.utils.Utils.formatDate(expirationDate); - msg += "
"; - msg += `The rental will cost ${nCredits} credits`; + msg += `
The rental will cost ${nCredits} credits`; + msg += `
I hereby accept the Terms and Conditions`; const confirmationWin = new osparc.ui.window.Confirmation(msg).set({ caption: this.tr("Rent"), confirmText: this.tr("Rent"), }); - if (this.getLicenseUrl()) { - const useCacheCB = new qx.ui.form.CheckBox().set({ - value: false, - label: this.tr("Accept Terms and Conditions"), - rich: true, - }); - useCacheCB.getChildControl("label").set({ - anonymous: false, - cursor: "pointer", - }); - useCacheCB.getChildControl("label").addListener("tap", () => this.__openLicense()); - confirmationWin.addWidget(useCacheCB); - confirmationWin.getExtraWidgetsLayout().setPaddingTop(0); // reset paddingTop - useCacheCB.bind("value", confirmationWin.getConfirmButton(), "enabled"); - } - confirmationWin.open(); confirmationWin.addListener("close", () => { if (confirmationWin.getConfirmed()) { @@ -125,19 +102,5 @@ qx.Class.define("osparc.study.PricingUnitLicense", { } }, this); }, - - __openLicense: function() { - let rawLink = this.getLicenseUrl() || ""; - if (rawLink.includes("github")) { - // make sure the raw version of the link is shown - rawLink += "?raw=true"; - } - const mdWindow = new osparc.ui.markdown.MarkdownWindow(rawLink).set({ - caption: this.tr("Terms and Conditions"), - width: 800, - height: 600, - }); - mdWindow.open(); - }, } }); diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js index e73b8a09381..f4b53ae5c6b 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js @@ -70,11 +70,11 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { __populateLayout: function() { this._removeAll(); - const anatomicalModelsData = this.getAnatomicalModelsData(); - if (anatomicalModelsData && anatomicalModelsData["licensedResources"].length) { + const licensedItemBundleData = this.getAnatomicalModelsData(); + if (licensedItemBundleData && licensedItemBundleData["licensedResources"].length) { this.__addModelsInfo(); - this.__addPricing(); this.__addSeatsSection(); + this.__addPricing(); } else { const selectModelLabel = new qx.ui.basic.Label().set({ value: this.tr("Select a model for more details"), @@ -89,37 +89,42 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { }, __addModelsInfo: function() { - const modelLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)); + const modelBundleLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)); this.__selectedModelLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)); - modelLayout.add(this.__selectedModelLayout); + modelBundleLayout.add(this.__selectedModelLayout); - const anatomicalModelsData = this.getAnatomicalModelsData(); - const modelsInfo = anatomicalModelsData["licensedResources"]; + const licensedItemBundleData = this.getAnatomicalModelsData(); + const modelsInfo = licensedItemBundleData["licensedResources"]; if (modelsInfo.length > 1) { const modelSelectionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4)); const titleLabel = new qx.ui.basic.Label(this.tr("This bundle contains:")); modelSelectionLayout.add(titleLabel); - const thumbnailsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2)); - modelSelectionLayout.add(thumbnailsLayout); + const modelsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4)); + modelSelectionLayout.add(modelsLayout); const thumbnailTapped = idx => { this.__populateSelectedModelInfo(idx); const selectedBorderColor = qx.theme.manager.Color.getInstance().resolve("strong-main"); const unselectedBorderColor = "transparent"; - thumbnailsLayout.getChildren().forEach((thumbnail, index) => { + modelsLayout.getChildren().forEach((thumbnailAndTitle, index) => { + const thumbnail = thumbnailAndTitle.getChildren()[0]; osparc.utils.Utils.updateBorderColor(thumbnail, index === idx ? selectedBorderColor : unselectedBorderColor); }); } modelsInfo.forEach((modelInfo, idx) => { + const modelLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(4)); const miniThumbnail = this.self().createThumbnail(modelInfo["source"]["thumbnail"], 32); - miniThumbnail.set({ - toolTipText: osparc.store.LicensedItems.licensedResourceNameAndVersion(modelInfo), - }); osparc.utils.Utils.addBorder(miniThumbnail); + modelLayout.add(miniThumbnail); miniThumbnail.addListener("tap", () => thumbnailTapped(idx)); - thumbnailsLayout.add(miniThumbnail); + const title = new qx.ui.basic.Label().set({ + value: osparc.store.LicensedItems.licensedResourceTitle(modelInfo), + alignY: "middle" + }); + modelLayout.add(title); + modelsLayout.add(modelLayout); }); - modelLayout.add(modelSelectionLayout); + modelBundleLayout.add(modelSelectionLayout); thumbnailTapped(0); this.__populateSelectedModelInfo(); @@ -127,18 +132,18 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { this.__populateSelectedModelInfo(); } - this._add(modelLayout); + this._add(modelBundleLayout); }, __populateSelectedModelInfo: function(selectedIdx = 0) { this.__selectedModelLayout.removeAll(); - const anatomicalModelsData = this.getAnatomicalModelsData(); + const licensedItemBundleData = this.getAnatomicalModelsData(); const topGrid = new qx.ui.layout.Grid(8, 6); topGrid.setColumnFlex(0, 1); const headerLayout = new qx.ui.container.Composite(topGrid); - const anatomicalModel = anatomicalModelsData["licensedResources"][selectedIdx]["source"]; + const anatomicalModel = licensedItemBundleData["licensedResources"][selectedIdx]["source"]; let description = anatomicalModel["description"] || ""; description = description.replace(/SPEAG/g, " "); // remove SPEAG substring const delimiter = " - "; @@ -182,26 +187,28 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { manufacturerData["link"] = "https://speag.swiss/products/em-phantoms/overview-2/"; manufacturerData["icon"] = "https://media.licdn.com/dms/image/v2/D4E0BAQG2CYG28KAKbA/company-logo_200_200/company-logo_200_200/0/1700045977122/schmid__partner_engineering_ag_logo?e=2147483647&v=beta&t=6CZb1jjg5TnnzQWkrZBS9R3ebRKesdflg-_xYi4dwD8"; } - const manufacturerLink = new qx.ui.basic.Atom().set({ - label: manufacturerData["label"], - icon: manufacturerData["icon"], - font: "text-16", - gap: 10, - iconPosition: "right", - cursor: "pointer", - }); - manufacturerLink.getChildControl("icon").set({ - maxWidth: 32, - maxHeight: 32, - scale: true, - decorator: "rounded", - }); - manufacturerLink.addListener("tap", () => window.open(manufacturerData["link"])); - headerLayout.add(manufacturerLink, { - column: 1, - row: 0, - rowSpan: 2, - }); + if (Object.keys(manufacturerData).length) { + const manufacturerLink = new qx.ui.basic.Atom().set({ + label: manufacturerData["label"], + icon: manufacturerData["icon"], + font: "text-16", + gap: 10, + iconPosition: "right", + cursor: "pointer", + }); + manufacturerLink.getChildControl("icon").set({ + maxWidth: 32, + maxHeight: 32, + scale: true, + decorator: "rounded", + }); + manufacturerLink.addListener("tap", () => window.open(manufacturerData["link"])); + headerLayout.add(manufacturerLink, { + column: 1, + row: 0, + rowSpan: 2, + }); + } } this.__selectedModelLayout.add(headerLayout); @@ -256,7 +263,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { value: "DOI", font: "text-14", alignX: "right", - marginTop: 16, + marginTop: 10, }); featuresLayout.add(doiTitle, { column: 0, @@ -267,7 +274,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { const doiLabel = new osparc.ui.basic.LinkLabel("-").set({ font: "text-14", alignX: "left", - marginTop: 16, + marginTop: 10, }); if (doi) { doiLabel.set({ @@ -282,16 +289,46 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { column: 1, row: idx, }); + idx++; + } + + if (licensedItemBundleData["termsOfUseUrl"] || anatomicalModel["termsOfUseUrl"]) { // remove the first one when this info goes down to the model + const tAndC = new qx.ui.basic.Label().set({ + font: "text-14", + value: this.tr("Terms and Conditions"), + rich: true, + anonymous: false, + cursor: "pointer", + }); + tAndC.addListener("tap", () => this.__openLicense(licensedItemBundleData["termsOfUseUrl"] || anatomicalModel["termsOfUseUrl"])); + featuresLayout.add(tAndC, { + column: 1, + row: idx, + }); + idx++; } middleLayout.add(featuresLayout); this.__selectedModelLayout.add(middleLayout); - const importSection = this.__createImportSection(anatomicalModelsData, selectedIdx); + const importSection = this.__createImportSection(licensedItemBundleData, selectedIdx); this.__selectedModelLayout.add(importSection); }, + __openLicense: function(rawLink) { + if (rawLink.includes("github")) { + // make sure the raw version of the link is shown + rawLink += "?raw=true"; + } + const mdWindow = new osparc.ui.markdown.MarkdownWindow(rawLink).set({ + caption: this.tr("Terms and Conditions"), + width: 800, + height: 600, + }); + mdWindow.open(); + }, + __createImportSection: function(anatomicalModelsData, selectedIdx) { const importSection = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({ alignX: "center" @@ -310,7 +347,8 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { }); importButton.addListener("execute", () => { this.fireDataEvent("modelImportRequested", { - modelId: anatomicalModelsData["licensedResources"][selectedIdx]["source"]["id"] + modelId: anatomicalModelsData["licensedResources"][selectedIdx]["source"]["id"], + categoryId: anatomicalModelsData["categoryId"], }); }, this); @@ -345,12 +383,16 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { osparc.store.Pricing.getInstance().fetchPricingUnits(licensedItemData["pricingPlanId"]) .then(pricingUnits => { if (pricingUnits.length === 1 && pricingUnits[0].getCost() === 0) { - const availableLabel = new qx.ui.basic.Label().set({ + const availableForImporting = new qx.ui.basic.Label().set({ font: "text-14", value: this.tr("Available for Importing"), padding: 10, }); - pricingUnitsLayout.add(availableLabel); + pricingUnitsLayout.add(availableForImporting); + // hide the text if Import button is there + this.bind("openBy", pricingLayout, "visibility", { + converter: openBy => openBy ? "excluded" : "visible" + }); } else { pricingUnits.forEach(pricingUnit => { pricingUnit.set({ @@ -358,7 +400,6 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { }); const pUnit = new osparc.study.PricingUnitLicense(pricingUnit).set({ showRentButton: true, - licenseUrl: licensedItemData["termsOfUseUrl"], }); pUnit.addListener("rentPricingUnit", () => { this.fireDataEvent("modelPurchaseRequested", { @@ -373,31 +414,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { }) .catch(err => console.error(err)); this._add(pricingUnitsLayout); - pricingLayout.add(pricingUnitsLayout) - - osparc.store.LicensedItems.getInstance().getLicensedItems() - .then(licensedItems => { - const lowerLicensedItems = osparc.store.LicensedItems.getLowerLicensedItems(licensedItems, licensedItemData["key"], licensedItemData["version"]) - if (licensedItemData["licensedResources"].length > 1 || lowerLicensedItems.length) { - let text = this.tr("This bundle gives you access to:") + "
"; - licensedItemData["licensedResources"].forEach(licensedResource => { - text += `- ${osparc.store.LicensedItems.licensedResourceNameAndVersion(licensedResource)}
`; - }); - lowerLicensedItems.forEach(lowerLicensedItem => { - lowerLicensedItem["licensedResources"].forEach(licensedResource => { - text += `- ${osparc.store.LicensedItems.licensedResourceNameAndVersion(licensedResource)}
`; - }); - }) - const bundleText = new qx.ui.basic.Label().set({ - value: text, - font: "text-14", - padding: 10, - rich: true, - alignX: "center", - }); - pricingLayout.add(bundleText); - } - }); + pricingLayout.add(pricingUnitsLayout); this._add(layout); }, @@ -407,74 +424,21 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", { if (licensedItemData["seats"].length === 0) { return; } - - const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({ - alignX: "center", + const seatsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({ + alignX: "left", })); - osparc.store.LicensedItems.getInstance().getLicensedItems() - .then(licensedItems => { - const grid = new qx.ui.layout.Grid(15, 5); - grid.setColumnAlign(0, "left", "middle"); - grid.setColumnAlign(1, "center", "middle"); - grid.setColumnAlign(2, "right", "middle"); - const seatsSection = new qx.ui.container.Composite(grid).set({ - allowGrowX: false, - decorator: "border", - padding: 10, - }); - - let rowIdx = 0; - seatsSection.add(new qx.ui.basic.Label("Models Rented").set({font: "title-14"}), { - column: 0, - row: rowIdx, - }); - seatsSection.add(new qx.ui.basic.Label("Seats").set({font: "title-14"}), { - column: 1, - row: rowIdx, - }); - seatsSection.add(new qx.ui.basic.Label("Until").set({font: "title-14"}), { - column: 2, - row: rowIdx, - }); - rowIdx++; - - const entryToGrid = (licensedResource, seat, row) => { - const title = osparc.store.LicensedItems.licensedResourceNameAndVersion(licensedResource); - seatsSection.add(new qx.ui.basic.Label(title).set({font: "text-14"}), { - column: 0, - row, - }); - seatsSection.add(new qx.ui.basic.Label(seat["numOfSeats"].toString()).set({font: "text-14"}), { - column: 1, - row, - }); - seatsSection.add(new qx.ui.basic.Label(osparc.utils.Utils.formatDate(seat["expireAt"])).set({font: "text-14"}), { - column: 2, - row, - }); - }; - - licensedItemData["seats"].forEach(seat => { - licensedItemData["licensedResources"].forEach(licensedResource => { - entryToGrid(licensedResource, seat, rowIdx); - rowIdx++; - }); - }); - - const lowerLicensedItems = osparc.store.LicensedItems.getLowerLicensedItems(licensedItems, licensedItemData["key"], licensedItemData["version"]) - lowerLicensedItems.forEach(lowerLicensedItem => { - lowerLicensedItem["seats"].forEach(seat => { - lowerLicensedItem["licensedResources"].forEach(licensedResource => { - entryToGrid(licensedResource, seat, rowIdx); - rowIdx++; - }); - }); - }); - - layout.add(seatsSection); - this._add(layout); + licensedItemData["seats"].forEach(purchase => { + const nSeats = purchase["numOfSeats"]; + const seatsText = "seat" + (nSeats > 1 ? "s" : ""); + const entry = new qx.ui.basic.Label().set({ + value: `${nSeats} ${seatsText} available until ${osparc.utils.Utils.formatDate(purchase["expireAt"])}`, + font: "text-14", }); + seatsSection.add(entry); + }); + + this._add(seatsSection); }, } }); diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/Market.js b/services/static-webserver/client/source/class/osparc/vipMarket/Market.js index a54e90d81f2..ec5f0d38e9a 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/Market.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/Market.js @@ -50,8 +50,8 @@ qx.Class.define("osparc.vipMarket.Market", { }, members: { - __purchasedCategoryButton: null, - __purchasedCategoryMarket: null, + __myModelsCategoryMarket: null, + __myModelsCategoryButton: null, __populateCategories: function(openCategory) { const store = osparc.store.Store.getInstance(); @@ -68,18 +68,18 @@ qx.Class.define("osparc.vipMarket.Market", { const purchasedItems = values[1]; osparc.store.LicensedItems.populateSeatsFromPurchases(licensedItems, purchasedItems); const categories = []; - const purchasedCategory = { - categoryId: "purchasedModels", - label: this.tr("Rented"), + const availableCategory = { + categoryId: "availableModels", + label: this.tr("My Models"), icon: "osparc/market/RentedModels.svg", items: [], }; - categories.push(purchasedCategory); + categories.push(availableCategory); licensedItems.forEach(licensedItem => { if (licensedItem["seats"].length) { - purchasedCategory["items"].push(licensedItem); + availableCategory["items"].push(licensedItem); if (!openCategory) { - openCategory = purchasedCategory["categoryId"]; + openCategory = availableCategory["categoryId"]; } } if (licensedItem && licensedItem["categoryId"]) { @@ -109,29 +109,22 @@ qx.Class.define("osparc.vipMarket.Market", { this.__openCategory(openCategory); } - this.__addFreeCategory(); + this.__addFreeItems(); }); }, - __addFreeCategory: function() { - const freeCategory = { - categoryId: "freeModels", - label: this.tr("Open Access Models"), - icon: "osparc/market/RentedModels.svg", - items: [], - }; + __addFreeItems: function() { const licensedItemsStore = osparc.store.LicensedItems.getInstance(); licensedItemsStore.getLicensedItems() .then(async licensedItems => { + this.__freeItems = []; for (const licensedItem of licensedItems) { const pricingUnits = await osparc.store.Pricing.getInstance().fetchPricingUnits(licensedItem["pricingPlanId"]); if (pricingUnits.length === 1 && pricingUnits[0].getCost() === 0) { - freeCategory["items"].push(licensedItem); + this.__freeItems.push(licensedItem); } } - if (freeCategory["items"].length) { - this.__buildViPMarketPage(freeCategory, freeCategory["items"]); - } + this.__repopulateMyModelsCategory(); }); }, @@ -141,19 +134,19 @@ qx.Class.define("osparc.vipMarket.Market", { category: marketTabInfo["categoryId"], }); this.bind("openBy", vipMarketView, "openBy"); - vipMarketView.addListener("modelPurchased", () => this.__repopulatePurchasedCategory()); + vipMarketView.addListener("modelPurchased", () => this.__repopulateMyModelsCategory()); vipMarketView.addListener("importMessageSent", () => this.fireEvent("importMessageSent")); const page = this.addTab(marketTabInfo["label"], marketTabInfo["icon"], vipMarketView); page.category = marketTabInfo["categoryId"]; - if (page.category === "purchasedModels") { - this.__purchasedCategoryMarket = vipMarketView; - this.__purchasedCategoryButton = page.getChildControl("button"); - this.__purchasedCategoryButton.setVisibility(licensedItems.length ? "visible" : "excluded"); + if (page.category === "availableModels") { + this.__myModelsCategoryMarket = vipMarketView; + this.__myModelsCategoryButton = page.getChildControl("button"); + this.__myModelsCategoryButton.setVisibility(licensedItems.length ? "visible" : "excluded"); } return page; }, - __repopulatePurchasedCategory: function() { + __repopulateMyModelsCategory: function() { const store = osparc.store.Store.getInstance(); const contextWallet = store.getContextWallet(); const walletId = contextWallet.getWalletId(); @@ -172,8 +165,9 @@ qx.Class.define("osparc.vipMarket.Market", { items.push(licensedItem); } }); - this.__purchasedCategoryButton.setVisibility(items.length ? "visible" : "excluded"); - this.__purchasedCategoryMarket.setLicensedItems(items); + items = items.concat(this.__freeItems); + this.__myModelsCategoryButton.setVisibility(items.length ? "visible" : "excluded"); + this.__myModelsCategoryMarket.setLicensedItems(items); }); }, diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/MarketWindow.js b/services/static-webserver/client/source/class/osparc/vipMarket/MarketWindow.js index 8f230d2a9e5..4c8cb238b6d 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/MarketWindow.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/MarketWindow.js @@ -19,11 +19,11 @@ qx.Class.define("osparc.vipMarket.MarketWindow", { extend: osparc.ui.window.TabbedWindow, construct: function(nodeId, category) { - this.base(arguments, "store", this.tr("Market")); + this.base(arguments, "store", this.tr("Model Market")); osparc.utils.Utils.setIdToWidget(this, "storeWindow"); - const width = 1080; + const width = Math.min(1100, window.innerWidth); // since we go over the supported minimum, take the min const height = 700; this.set({ width, diff --git a/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js b/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js index 1599bddbcb6..c1f2e7415b3 100644 --- a/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js +++ b/services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js @@ -163,9 +163,9 @@ qx.Class.define("osparc.vipMarket.VipMarket", { const selection = e.getData(); if (selection.length) { const licensedItemId = selection[0].getLicensedItemId(); - const bundleFound = this.__anatomicalBundles.find(anatomicalBundle => anatomicalBundle["licensedItemId"] === licensedItemId); - if (bundleFound) { - anatomicModelDetails.setAnatomicalModelsData(bundleFound); + const licensedItemBundle = this.__anatomicalBundles.find(anatomicalBundle => anatomicalBundle["licensedItemId"] === licensedItemId); + if (licensedItemBundle) { + anatomicModelDetails.setAnatomicalModelsData(licensedItemBundle); return; } } @@ -212,9 +212,10 @@ qx.Class.define("osparc.vipMarket.VipMarket", { if (!anatomicModelDetails.hasListener("modelImportRequested")) { anatomicModelDetails.addListener("modelImportRequested", e => { const { - modelId + modelId, + categoryId, } = e.getData(); - this.__sendImportModelMessage(modelId); + this.__sendImportModelMessage(modelId, categoryId); }, this); } }, @@ -317,7 +318,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", { }); }, - __sendImportModelMessage: function(modelId) { + __sendImportModelMessage: function(modelId, categoryId) { const store = osparc.store.Store.getInstance(); const currentStudy = store.getCurrentStudy(); const nodeId = this.getOpenBy(); @@ -326,6 +327,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", { "type": "importModel", "message": { "modelId": modelId, + "categoryId": categoryId, }, }; if (currentStudy.sendMessageToIframe(nodeId, msg)) {