Skip to content

Commit bdfb4c8

Browse files
odeimaizodeimaiz
committed
refactoring
1 parent 19f6a67 commit bdfb4c8

File tree

4 files changed

+199
-163
lines changed

4 files changed

+199
-163
lines changed

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

Lines changed: 22 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,91 +17,32 @@
1717

1818

1919
qx.Class.define("osparc.desktop.credits.Checkouts", {
20-
extend: qx.ui.core.Widget,
21-
22-
construct: function() {
23-
this.base(arguments);
24-
25-
this._setLayout(new qx.ui.layout.VBox(5));
26-
27-
this.__buildLayout()
28-
},
20+
extend: osparc.desktop.credits.ResourceInTableViewer,
2921

3022
members: {
31-
__buildLayout: function() {
32-
const lbl = new qx.ui.basic.Label(this.tr("Select a Credit Account:"));
33-
this._add(lbl);
34-
35-
const selectBoxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
36-
const walletSelectBox = new qx.ui.form.SelectBox().set({
37-
allowStretchX: false,
38-
width: 200
39-
});
40-
selectBoxContainer.add(walletSelectBox);
41-
this.__fetchingImg = new qx.ui.basic.Image().set({
42-
source: "@FontAwesome5Solid/circle-notch/12",
43-
alignX: "center",
44-
alignY: "middle",
45-
visibility: "excluded"
46-
});
47-
this.__fetchingImg.getContentElement().addClass("rotate");
48-
selectBoxContainer.add(this.__fetchingImg);
49-
this._add(selectBoxContainer);
50-
51-
const filterContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5))
52-
this.__dateFilters = new osparc.desktop.credits.DateFilters();
53-
this.__dateFilters.addListener("change", e => {
54-
this.__table.getTableModel().setFilters(e.getData())
55-
this.__table.getTableModel().reloadData()
56-
});
57-
filterContainer.add(this.__dateFilters);
58-
filterContainer.add(new qx.ui.core.Spacer(), {
59-
flex: 1
60-
});
61-
const refreshButton = new qx.ui.form.Button(this.tr("Reload"), "@FontAwesome5Solid/sync-alt/14").set({
62-
allowStretchY: false,
63-
alignY: "bottom"
64-
});
65-
refreshButton.addListener("execute", () => this.__table && this.__table.getTableModel().reloadData());
66-
filterContainer.add(refreshButton)
67-
this._add(filterContainer);
68-
69-
walletSelectBox.addListener("changeSelection", e => {
70-
const selection = e.getData();
71-
if (selection.length) {
72-
this.__selectedWallet = selection[0].getModel()
73-
if (this.__table) {
74-
this.__table.getTableModel().setWalletId(this.__selectedWallet.getWalletId())
75-
this.__table.getTableModel().reloadData()
76-
} else {
77-
// qx: changeSelection is triggered after the first item is added to SelectBox
78-
this.__table = new osparc.desktop.credits.CheckoutsTable(this.__selectedWallet.getWalletId(), this.__dateFilters.getValue()).set({
79-
marginTop: 10
80-
})
81-
this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
82-
converter: isFetching => isFetching ? "visible" : "excluded"
83-
})
84-
this._add(this.__table, { flex: 1 })
85-
}
23+
_createChildControlImpl: function(id) {
24+
let control;
25+
switch (id) {
26+
case "table": {
27+
const dateFilters = this.getChildControl("date-filters");
28+
control = new osparc.desktop.credits.CheckoutsTable(this._getSelectWalletId(), dateFilters.getValue()).set({
29+
marginTop: 10
30+
});
31+
const fetchingImage = this.getChildControl("fetching-image");
32+
control.getTableModel().bind("isFetching", fetchingImage, "visibility", {
33+
converter: isFetching => isFetching ? "visible" : "excluded"
34+
})
35+
this._add(control, { flex: 1 })
36+
break;
8637
}
87-
});
88-
89-
if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
90-
const store = osparc.store.Store.getInstance();
91-
store.getWallets().forEach(wallet => {
92-
walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet));
93-
});
94-
} else {
95-
lbl.setVisibility("excluded")
96-
walletSelectBox.setVisibility("excluded")
97-
this.__table = new osparc.desktop.credits.CheckoutsTable(null, this.__dateFilters.getValue()).set({
98-
marginTop: 10
99-
})
100-
this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
101-
converter: isFetching => isFetching ? "visible" : "excluded"
102-
})
103-
this._add(this.__table, { flex: 1 })
10438
}
39+
return control || this.base(arguments, id);
40+
},
41+
42+
_buildLayout: function() {
43+
this.base(arguments);
44+
45+
this.getChildControl("export-button").exclude();
10546
},
10647
}
10748
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTableModel", {
145145
}
146146
}
147147
data.push({
148-
[checkoutsCols.CHECKOUT_ID.id]: checkoutsItem["licensed_item_checkout_id"],
148+
[checkoutsCols.CHECKOUT_ID.id]: checkoutsItem["licensedItemCheckoutId"],
149149
[checkoutsCols.ITEM_ID.id]: licensedItemId,
150150
[checkoutsCols.ITEM_LABEL.id]: vipModel ? vipModel["name"] : "unknown model",
151151
[checkoutsCols.START.id]: start,

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

Lines changed: 22 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,91 +17,32 @@
1717

1818

1919
qx.Class.define("osparc.desktop.credits.Purchases", {
20-
extend: qx.ui.core.Widget,
21-
22-
construct: function() {
23-
this.base(arguments);
24-
25-
this._setLayout(new qx.ui.layout.VBox(5));
26-
27-
this.__buildLayout()
28-
},
20+
extend: osparc.desktop.credits.ResourceInTableViewer,
2921

3022
members: {
31-
__buildLayout: function() {
32-
const lbl = new qx.ui.basic.Label(this.tr("Select a Credit Account:"));
33-
this._add(lbl);
34-
35-
const selectBoxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
36-
const walletSelectBox = new qx.ui.form.SelectBox().set({
37-
allowStretchX: false,
38-
width: 200
39-
});
40-
selectBoxContainer.add(walletSelectBox);
41-
this.__fetchingImg = new qx.ui.basic.Image().set({
42-
source: "@FontAwesome5Solid/circle-notch/12",
43-
alignX: "center",
44-
alignY: "middle",
45-
visibility: "excluded"
46-
});
47-
this.__fetchingImg.getContentElement().addClass("rotate");
48-
selectBoxContainer.add(this.__fetchingImg);
49-
this._add(selectBoxContainer);
50-
51-
const filterContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5))
52-
this.__dateFilters = new osparc.desktop.credits.DateFilters();
53-
this.__dateFilters.addListener("change", e => {
54-
this.__table.getTableModel().setFilters(e.getData())
55-
this.__table.getTableModel().reloadData()
56-
});
57-
filterContainer.add(this.__dateFilters);
58-
filterContainer.add(new qx.ui.core.Spacer(), {
59-
flex: 1
60-
});
61-
const refreshButton = new qx.ui.form.Button(this.tr("Reload"), "@FontAwesome5Solid/sync-alt/14").set({
62-
allowStretchY: false,
63-
alignY: "bottom"
64-
});
65-
refreshButton.addListener("execute", () => this.__table && this.__table.getTableModel().reloadData());
66-
filterContainer.add(refreshButton)
67-
this._add(filterContainer);
68-
69-
walletSelectBox.addListener("changeSelection", e => {
70-
const selection = e.getData();
71-
if (selection.length) {
72-
this.__selectedWallet = selection[0].getModel()
73-
if (this.__table) {
74-
this.__table.getTableModel().setWalletId(this.__selectedWallet.getWalletId())
75-
this.__table.getTableModel().reloadData()
76-
} else {
77-
// qx: changeSelection is triggered after the first item is added to SelectBox
78-
this.__table = new osparc.desktop.credits.PurchasesTable(this.__selectedWallet.getWalletId(), this.__dateFilters.getValue()).set({
79-
marginTop: 10
80-
})
81-
this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
82-
converter: isFetching => isFetching ? "visible" : "excluded"
83-
})
84-
this._add(this.__table, { flex: 1 })
85-
}
23+
_createChildControlImpl: function(id) {
24+
let control;
25+
switch (id) {
26+
case "table": {
27+
const dateFilters = this.getChildControl("date-filters");
28+
control = new osparc.desktop.credits.PurchasesTable(this._getSelectWalletId(), dateFilters.getValue()).set({
29+
marginTop: 10
30+
});
31+
const fetchingImage = this.getChildControl("fetching-image");
32+
control.getTableModel().bind("isFetching", fetchingImage, "visibility", {
33+
converter: isFetching => isFetching ? "visible" : "excluded"
34+
})
35+
this._add(control, { flex: 1 })
36+
break;
8637
}
87-
});
88-
89-
if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
90-
const store = osparc.store.Store.getInstance();
91-
store.getWallets().forEach(wallet => {
92-
walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet));
93-
});
94-
} else {
95-
lbl.setVisibility("excluded")
96-
walletSelectBox.setVisibility("excluded")
97-
this.__table = new osparc.desktop.credits.PurchasesTable(null, this.__dateFilters.getValue()).set({
98-
marginTop: 10
99-
})
100-
this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
101-
converter: isFetching => isFetching ? "visible" : "excluded"
102-
})
103-
this._add(this.__table, { flex: 1 })
10438
}
39+
return control || this.base(arguments, id);
40+
},
41+
42+
_buildLayout: function() {
43+
this.base(arguments);
44+
45+
this.getChildControl("export-button").exclude();
10546
},
10647
}
10748
});

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2025 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
* Ignacio Pascual (ignapas)
16+
17+
************************************************************************ */
18+
19+
qx.Class.define("osparc.desktop.credits.ResourceInTableViewer", {
20+
extend: qx.ui.core.Widget,
21+
type: "abstract",
22+
23+
construct: function() {
24+
this.base(arguments);
25+
26+
this._setLayout(new qx.ui.layout.VBox(5));
27+
28+
this._buildLayout();
29+
},
30+
31+
members: {
32+
_createChildControlImpl: function(id) {
33+
let layout;
34+
let control;
35+
switch (id) {
36+
case "intro-text":
37+
control = new qx.ui.basic.Label("Select a Credit Account:");
38+
this._add(control);
39+
break;
40+
case "wallet-selector-layout":
41+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
42+
this._add(control);
43+
break;
44+
case "wallet-selector":
45+
control = new qx.ui.form.SelectBox().set({
46+
allowStretchX: false,
47+
width: 200
48+
});
49+
layout = this.getChildControl("wallet-selector-layout");
50+
layout.add(control);
51+
break;
52+
case "fetching-image":
53+
control = new qx.ui.basic.Image().set({
54+
source: "@FontAwesome5Solid/circle-notch/12",
55+
alignX: "center",
56+
alignY: "middle",
57+
visibility: "excluded"
58+
});
59+
control.getContentElement().addClass("rotate");
60+
layout = this.getChildControl("wallet-selector-layout");
61+
layout.add(control);
62+
break;
63+
case "filter-layout":
64+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
65+
this._add(control);
66+
break;
67+
case "date-filters":
68+
control = new osparc.desktop.credits.DateFilters();
69+
control.addListener("change", e => {
70+
const table = this.getChildControl("table");
71+
table.getTableModel().setFilters(e.getData());
72+
table.getTableModel().reloadData();
73+
});
74+
layout = this.getChildControl("filter-layout");
75+
layout.add(control);
76+
break;
77+
case "export-button":
78+
control = new qx.ui.form.Button(this.tr("Export")).set({
79+
allowStretchY: false,
80+
alignY: "bottom",
81+
visibility: "excluded",
82+
});
83+
control.addListener("execute", () => this._handleExport());
84+
layout = this.getChildControl("filter-layout");
85+
layout.add(control);
86+
break;
87+
case "reload-button":
88+
control = new qx.ui.form.Button(this.tr("Reload"), "@FontAwesome5Solid/sync-alt/14").set({
89+
allowStretchY: false,
90+
alignY: "bottom"
91+
});
92+
control.addListener("execute", () => {
93+
const table = this.getChildControl("table");
94+
table.getTableModel().reloadData();
95+
});
96+
layout = this.getChildControl("filter-layout");
97+
layout.add(control);
98+
break;
99+
}
100+
return control || this.base(arguments, id);
101+
},
102+
103+
_buildLayout: function() {
104+
const introText = this.getChildControl("intro-text");
105+
const walletSelectBox = this.getChildControl("wallet-selector");
106+
this.getChildControl("fetching-image");
107+
108+
const filterLayout = this.getChildControl("filter-layout");
109+
this.getChildControl("date-filters");
110+
filterLayout.add(new qx.ui.core.Spacer(), {
111+
flex: 1
112+
});
113+
const exportButton = this.getChildControl("export-button");
114+
this.getChildControl("reload-button");
115+
116+
walletSelectBox.addListener("changeSelection", e => {
117+
const selection = e.getData();
118+
if (selection.length) {
119+
const table = this.getChildControl("table");
120+
table.getTableModel().setWalletId(this._getSelectWalletId());
121+
table.getTableModel().reloadData();
122+
}
123+
});
124+
125+
if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
126+
const store = osparc.store.Store.getInstance();
127+
store.getWallets().forEach(wallet => {
128+
walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet));
129+
});
130+
} else {
131+
introText.setVisibility("excluded");
132+
walletSelectBox.setVisibility("excluded");
133+
exportButton.setVisibility("excluded");
134+
this.getChildControl("table");
135+
}
136+
},
137+
138+
_getSelectWalletId: function() {
139+
if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
140+
const walletSelectBox = this.getChildControl("wallet-selector");
141+
const selectedWallet = walletSelectBox.getSelection()[0].getModel();
142+
return selectedWallet.getWalletId();
143+
}
144+
return null;
145+
},
146+
147+
_handleExport() {
148+
const reportUrl = new URL("/v0/services/-/usage-report", window.location.origin)
149+
reportUrl.searchParams.append("wallet_id", this._getSelectWalletId())
150+
reportUrl.searchParams.append("filters", JSON.stringify({ "started_at": this.__dateFilters.getValue() }))
151+
window.open(reportUrl, "_blank")
152+
}
153+
}
154+
});

0 commit comments

Comments
 (0)