|
17 | 17 | ************************************************************************ */ |
18 | 18 |
|
19 | 19 | qx.Class.define("osparc.desktop.credits.Usage", { |
20 | | - extend: qx.ui.core.Widget, |
21 | | - |
22 | | - construct: function() { |
23 | | - this.base(arguments); |
24 | | - |
25 | | - this._setLayout(new qx.ui.layout.VBox(15)); |
26 | | - |
27 | | - const store = osparc.store.Store.getInstance(); |
28 | | - this.__userWallets = store.getWallets(); |
29 | | - |
30 | | - this.__buildLayout() |
31 | | - }, |
| 20 | + extend: osparc.desktop.credits.ResourceInTableViewer, |
32 | 21 |
|
33 | 22 | members: { |
34 | | - __buildLayout: function() { |
35 | | - this._removeAll(); |
36 | | - |
37 | | - const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); |
38 | | - |
39 | | - const lbl = new qx.ui.basic.Label("Select a Credit Account:"); |
40 | | - container.add(lbl); |
41 | | - |
42 | | - const selectBoxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)); |
43 | | - const walletSelectBox = new qx.ui.form.SelectBox().set({ |
44 | | - allowStretchX: false, |
45 | | - width: 200 |
46 | | - }); |
47 | | - selectBoxContainer.add(walletSelectBox); |
48 | | - this.__fetchingImg = new qx.ui.basic.Image().set({ |
49 | | - source: "@FontAwesome5Solid/circle-notch/12", |
50 | | - alignX: "center", |
51 | | - alignY: "middle", |
52 | | - visibility: "excluded" |
53 | | - }); |
54 | | - this.__fetchingImg.getContentElement().addClass("rotate"); |
55 | | - selectBoxContainer.add(this.__fetchingImg); |
56 | | - container.add(selectBoxContainer); |
57 | | - |
58 | | - const filterContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)) |
59 | | - this.__dateFilters = new osparc.desktop.credits.DateFilters(); |
60 | | - this.__dateFilters.addListener("change", e => { |
61 | | - this.__table.getTableModel().setFilters(e.getData()) |
62 | | - this.__table.getTableModel().reloadData() |
63 | | - }); |
64 | | - filterContainer.add(this.__dateFilters); |
65 | | - filterContainer.add(new qx.ui.core.Spacer(), { |
66 | | - flex: 1 |
67 | | - }); |
68 | | - this.__exportButton = new qx.ui.form.Button(this.tr("Export")).set({ |
69 | | - allowStretchY: false, |
70 | | - alignY: "bottom" |
71 | | - }); |
72 | | - this.__exportButton.addListener("execute", () => { |
73 | | - this.__handleExport() |
74 | | - }); |
75 | | - filterContainer.add(this.__exportButton); |
76 | | - const refreshButton = new qx.ui.form.Button(this.tr("Reload"), "@FontAwesome5Solid/sync-alt/14").set({ |
77 | | - allowStretchY: false, |
78 | | - alignY: "bottom" |
79 | | - }); |
80 | | - refreshButton.addListener("execute", () => this.__table && this.__table.getTableModel().reloadData()); |
81 | | - filterContainer.add(refreshButton) |
82 | | - container.add(filterContainer); |
83 | | - |
84 | | - this._add(container); |
85 | | - |
86 | | - walletSelectBox.addListener("changeSelection", e => { |
87 | | - const selection = e.getData(); |
88 | | - if (selection.length) { |
89 | | - this.__selectedWallet = selection[0].getModel() |
90 | | - if (this.__table) { |
91 | | - this.__table.getTableModel().setWalletId(this.__selectedWallet.getWalletId()) |
92 | | - this.__table.getTableModel().reloadData() |
93 | | - } else { |
94 | | - // qx: changeSelection is triggered after the first item is added to SelectBox |
95 | | - this.__table = new osparc.desktop.credits.UsageTable(this.__selectedWallet.getWalletId(), this.__dateFilters.getValue()).set({ |
96 | | - marginTop: 10 |
97 | | - }) |
98 | | - this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", { |
99 | | - converter: isFetching => isFetching ? "visible" : "excluded" |
100 | | - }) |
101 | | - container.add(this.__table, { flex: 1 }) |
102 | | - } |
| 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.UsageTable(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; |
103 | 37 | } |
104 | | - }); |
105 | | - |
106 | | - if (osparc.desktop.credits.Utils.areWalletsEnabled()) { |
107 | | - this.__userWallets.forEach(wallet => { |
108 | | - walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet)); |
109 | | - }); |
110 | | - } else { |
111 | | - lbl.setVisibility("excluded") |
112 | | - walletSelectBox.setVisibility("excluded") |
113 | | - this.__exportButton.setVisibility("excluded") |
114 | | - this.__table = new osparc.desktop.credits.UsageTable(null, this.__dateFilters.getValue()).set({ |
115 | | - marginTop: 10 |
116 | | - }) |
117 | | - this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", { |
118 | | - converter: isFetching => isFetching ? "visible" : "excluded" |
119 | | - }) |
120 | | - container.add(this.__table, { flex: 1 }) |
121 | 38 | } |
| 39 | + return control || this.base(arguments, id); |
| 40 | + }, |
| 41 | + |
| 42 | + _handleExport: function() { |
| 43 | + const reportUrl = new URL("/v0/services/-/usage-report", window.location.origin); |
| 44 | + reportUrl.searchParams.append("wallet_id", this._getSelectWalletId()); |
| 45 | + const dateFilters = this.getChildControl("date-filters"); |
| 46 | + reportUrl.searchParams.append("filters", JSON.stringify({ "started_at": dateFilters.getValue() })); |
| 47 | + window.open(reportUrl, "_blank"); |
122 | 48 | }, |
123 | | - __handleExport() { |
124 | | - const reportUrl = new URL("/v0/services/-/usage-report", window.location.origin) |
125 | | - reportUrl.searchParams.append("wallet_id", this.__selectedWallet.getWalletId()) |
126 | | - reportUrl.searchParams.append("filters", JSON.stringify({ "started_at": this.__dateFilters.getValue() })) |
127 | | - window.open(reportUrl, "_blank") |
128 | | - } |
129 | 49 | } |
130 | 50 | }); |
0 commit comments