]>
Commit | Line | Data |
---|---|---|
06694509 DM |
1 | /* Renders a list of key values objets |
2 | ||
3 | mandatory config parameters: | |
4 | rows: an object container where each propery is a key-value object we want to render | |
05a977a2 | 5 | let rows = { |
06694509 DM |
6 | keyboard: { |
7 | header: gettext('Keyboard Layout'), | |
8 | editor: 'Your.KeyboardEdit', | |
9 | required: true | |
10 | }, | |
11 | ||
12 | optional: | |
13 | disabled: setting this parameter to true will disable selection and focus on the | |
14 | proxmoxObjectGrid as well as greying out input elements. | |
15 | Useful for a readonly tabular display | |
16 | ||
17 | */ | |
18 | ||
19 | Ext.define('Proxmox.grid.ObjectGrid', { | |
20 | extend: 'Ext.grid.GridPanel', | |
21 | alias: ['widget.proxmoxObjectGrid'], | |
22 | disabled: false, | |
23 | hideHeaders: true, | |
24 | ||
4297e795 DM |
25 | monStoreErrors: false, |
26 | ||
8f7370ee | 27 | add_combobox_row: function(name, text, opts) { |
05a977a2 | 28 | let me = this; |
8f7370ee DM |
29 | |
30 | opts = opts || {}; | |
31 | me.rows = me.rows || {}; | |
32 | ||
33 | me.rows[name] = { | |
34 | required: true, | |
35 | defaultValue: opts.defaultValue, | |
36 | header: text, | |
37 | renderer: opts.renderer, | |
38 | editor: { | |
39 | xtype: 'proxmoxWindowEdit', | |
40 | subject: text, | |
7d16f8b3 | 41 | onlineHelp: opts.onlineHelp, |
37d8d602 | 42 | fieldDefaults: { |
01031528 | 43 | labelWidth: opts.labelWidth || 100, |
37d8d602 | 44 | }, |
8f7370ee DM |
45 | items: { |
46 | xtype: 'proxmoxKVComboBox', | |
47 | name: name, | |
48 | comboItems: opts.comboItems, | |
49 | value: opts.defaultValue, | |
01031528 | 50 | deleteEmpty: !!opts.deleteEmpty, |
8f7370ee DM |
51 | emptyText: opts.defaultValue, |
52 | labelWidth: Proxmox.Utils.compute_min_label_width( | |
53 | text, opts.labelWidth), | |
01031528 TL |
54 | fieldLabel: text, |
55 | }, | |
56 | }, | |
8f7370ee DM |
57 | }; |
58 | }, | |
59 | ||
5dea30d0 | 60 | add_text_row: function(name, text, opts) { |
05a977a2 | 61 | let me = this; |
5dea30d0 DM |
62 | |
63 | opts = opts || {}; | |
c2ea0137 | 64 | me.rows = me.rows || {}; |
5dea30d0 DM |
65 | |
66 | me.rows[name] = { | |
67 | required: true, | |
68 | defaultValue: opts.defaultValue, | |
69 | header: text, | |
70 | renderer: opts.renderer, | |
71 | editor: { | |
72 | xtype: 'proxmoxWindowEdit', | |
73 | subject: text, | |
7d16f8b3 | 74 | onlineHelp: opts.onlineHelp, |
37d8d602 | 75 | fieldDefaults: { |
01031528 | 76 | labelWidth: opts.labelWidth || 100, |
37d8d602 | 77 | }, |
5dea30d0 DM |
78 | items: { |
79 | xtype: 'proxmoxtextfield', | |
80 | name: name, | |
01031528 | 81 | deleteEmpty: !!opts.deleteEmpty, |
5dea30d0 DM |
82 | emptyText: opts.defaultValue, |
83 | labelWidth: Proxmox.Utils.compute_min_label_width( | |
84 | text, opts.labelWidth), | |
85d85d15 | 85 | vtype: opts.vtype, |
01031528 TL |
86 | fieldLabel: text, |
87 | }, | |
88 | }, | |
5dea30d0 DM |
89 | }; |
90 | }, | |
91 | ||
0e49da6d | 92 | add_boolean_row: function(name, text, opts) { |
05a977a2 | 93 | let me = this; |
0e49da6d DM |
94 | |
95 | opts = opts || {}; | |
c2ea0137 | 96 | me.rows = me.rows || {}; |
0e49da6d | 97 | |
0e49da6d DM |
98 | me.rows[name] = { |
99 | required: true, | |
100 | defaultValue: opts.defaultValue || 0, | |
101 | header: text, | |
102 | renderer: opts.renderer || Proxmox.Utils.format_boolean, | |
103 | editor: { | |
104 | xtype: 'proxmoxWindowEdit', | |
105 | subject: text, | |
7d16f8b3 | 106 | onlineHelp: opts.onlineHelp, |
37d8d602 | 107 | fieldDefaults: { |
01031528 | 108 | labelWidth: opts.labelWidth || 100, |
37d8d602 | 109 | }, |
0e49da6d DM |
110 | items: { |
111 | xtype: 'proxmoxcheckbox', | |
112 | name: name, | |
113 | uncheckedValue: 0, | |
01031528 TL |
114 | defaultValue: opts.defaultValue || 0, |
115 | checked: !!opts.defaultValue, | |
116 | deleteDefaultValue: !!opts.deleteDefaultValue, | |
28e54f37 DM |
117 | labelWidth: Proxmox.Utils.compute_min_label_width( |
118 | text, opts.labelWidth), | |
01031528 TL |
119 | fieldLabel: text, |
120 | }, | |
121 | }, | |
0e49da6d DM |
122 | }; |
123 | }, | |
124 | ||
125 | add_integer_row: function(name, text, opts) { | |
05a977a2 | 126 | let me = this; |
0e49da6d | 127 | |
01031528 | 128 | opts = opts || {}; |
c2ea0137 | 129 | me.rows = me.rows || {}; |
0e49da6d | 130 | |
0e49da6d DM |
131 | me.rows[name] = { |
132 | required: true, | |
133 | defaultValue: opts.defaultValue, | |
134 | header: text, | |
0d5c5e14 | 135 | renderer: opts.renderer, |
0e49da6d DM |
136 | editor: { |
137 | xtype: 'proxmoxWindowEdit', | |
138 | subject: text, | |
7d16f8b3 | 139 | onlineHelp: opts.onlineHelp, |
37d8d602 | 140 | fieldDefaults: { |
01031528 | 141 | labelWidth: opts.labelWidth || 100, |
37d8d602 | 142 | }, |
0e49da6d DM |
143 | items: { |
144 | xtype: 'proxmoxintegerfield', | |
145 | name: name, | |
146 | minValue: opts.minValue, | |
147 | maxValue: opts.maxValue, | |
148 | emptyText: gettext('Default'), | |
01031528 | 149 | deleteEmpty: !!opts.deleteEmpty, |
0e49da6d | 150 | value: opts.defaultValue, |
28e54f37 DM |
151 | labelWidth: Proxmox.Utils.compute_min_label_width( |
152 | text, opts.labelWidth), | |
01031528 TL |
153 | fieldLabel: text, |
154 | }, | |
155 | }, | |
0e49da6d DM |
156 | }; |
157 | }, | |
158 | ||
7ec6cd9e DM |
159 | editorConfig: {}, // default config passed to editor |
160 | ||
161 | run_editor: function() { | |
05a977a2 | 162 | let me = this; |
7ec6cd9e | 163 | |
05a977a2 TL |
164 | let sm = me.getSelectionModel(); |
165 | let rec = sm.getSelection()[0]; | |
7ec6cd9e DM |
166 | if (!rec) { |
167 | return; | |
168 | } | |
169 | ||
05a977a2 TL |
170 | let rows = me.rows; |
171 | let rowdef = rows[rec.data.key]; | |
7ec6cd9e DM |
172 | if (!rowdef.editor) { |
173 | return; | |
174 | } | |
175 | ||
05a977a2 TL |
176 | let win; |
177 | let config; | |
7ec6cd9e DM |
178 | if (Ext.isString(rowdef.editor)) { |
179 | config = Ext.apply({ | |
180 | confid: rec.data.key, | |
01031528 | 181 | }, me.editorConfig); |
7ec6cd9e DM |
182 | win = Ext.create(rowdef.editor, config); |
183 | } else { | |
184 | config = Ext.apply({ | |
185 | confid: rec.data.key, | |
01031528 | 186 | }, me.editorConfig); |
7ec6cd9e DM |
187 | Ext.apply(config, rowdef.editor); |
188 | win = Ext.createWidget(rowdef.editor.xtype, config); | |
189 | win.load(); | |
190 | } | |
191 | ||
192 | win.show(); | |
193 | win.on('destroy', me.reload, me); | |
194 | }, | |
195 | ||
196 | reload: function() { | |
05a977a2 | 197 | let me = this; |
7ec6cd9e DM |
198 | me.rstore.load(); |
199 | }, | |
200 | ||
06694509 | 201 | getObjectValue: function(key, defaultValue) { |
05a977a2 TL |
202 | let me = this; |
203 | let rec = me.store.getById(key); | |
06694509 DM |
204 | if (rec) { |
205 | return rec.data.value; | |
206 | } | |
207 | return defaultValue; | |
208 | }, | |
209 | ||
210 | renderKey: function(key, metaData, record, rowIndex, colIndex, store) { | |
05a977a2 TL |
211 | let me = this; |
212 | let rows = me.rows; | |
213 | let rowdef = rows && rows[key] ? rows[key] : {}; | |
06694509 DM |
214 | return rowdef.header || key; |
215 | }, | |
216 | ||
217 | renderValue: function(value, metaData, record, rowIndex, colIndex, store) { | |
05a977a2 TL |
218 | let me = this; |
219 | let rows = me.rows; | |
220 | let key = record.data.key; | |
221 | let rowdef = rows && rows[key] ? rows[key] : {}; | |
06694509 | 222 | |
05a977a2 | 223 | let renderer = rowdef.renderer; |
06694509 DM |
224 | if (renderer) { |
225 | return renderer(value, metaData, record, rowIndex, colIndex, store); | |
226 | } | |
227 | ||
228 | return value; | |
229 | }, | |
230 | ||
9307eda4 | 231 | listeners: { |
ce9a0f27 | 232 | itemkeydown: function(view, record, item, index, e) { |
9307eda4 | 233 | if (e.getKey() === e.ENTER) { |
ce9a0f27 DC |
234 | this.pressedIndex = index; |
235 | } | |
236 | }, | |
237 | itemkeyup: function(view, record, item, index, e) { | |
05a977a2 | 238 | if (e.getKey() === e.ENTER && index === this.pressedIndex) { |
9307eda4 DC |
239 | this.run_editor(); |
240 | } | |
ce9a0f27 DC |
241 | |
242 | this.pressedIndex = undefined; | |
01031528 | 243 | }, |
9307eda4 DC |
244 | }, |
245 | ||
01031528 | 246 | initComponent: function() { |
05a977a2 | 247 | let me = this; |
06694509 | 248 | |
05a977a2 | 249 | let rows = me.rows; |
06694509 DM |
250 | |
251 | if (!me.rstore) { | |
252 | if (!me.url) { | |
253 | throw "no url specified"; | |
254 | } | |
255 | ||
256 | me.rstore = Ext.create('Proxmox.data.ObjectStore', { | |
257 | url: me.url, | |
258 | interval: me.interval, | |
259 | extraParams: me.extraParams, | |
01031528 | 260 | rows: me.rows, |
06694509 DM |
261 | }); |
262 | } | |
263 | ||
4f1b9b8c TL |
264 | let rstore = me.rstore; |
265 | let store = Ext.create('Proxmox.data.DiffStore', { | |
266 | rstore: rstore, | |
06694509 | 267 | sorters: [], |
01031528 | 268 | filters: [], |
06694509 DM |
269 | }); |
270 | ||
271 | if (rows) { | |
f0f898d2 | 272 | for (const [key, rowdef] of Object.entries(rows)) { |
06694509 DM |
273 | if (Ext.isDefined(rowdef.defaultValue)) { |
274 | store.add({ key: key, value: rowdef.defaultValue }); | |
275 | } else if (rowdef.required) { | |
276 | store.add({ key: key, value: undefined }); | |
277 | } | |
f0f898d2 | 278 | } |
06694509 DM |
279 | } |
280 | ||
281 | if (me.sorterFn) { | |
282 | store.sorters.add(Ext.create('Ext.util.Sorter', { | |
01031528 | 283 | sorterFn: me.sorterFn, |
06694509 DM |
284 | })); |
285 | } | |
286 | ||
287 | store.filters.add(Ext.create('Ext.util.Filter', { | |
288 | filterFn: function(item) { | |
289 | if (rows) { | |
05a977a2 | 290 | let rowdef = rows[item.data.key]; |
01031528 | 291 | if (!rowdef || rowdef.visible === false) { |
06694509 DM |
292 | return false; |
293 | } | |
294 | } | |
295 | return true; | |
01031528 | 296 | }, |
06694509 DM |
297 | })); |
298 | ||
299 | Proxmox.Utils.monStoreErrors(me, rstore); | |
300 | ||
301 | Ext.applyIf(me, { | |
302 | store: store, | |
303 | stateful: false, | |
304 | columns: [ | |
305 | { | |
306 | header: gettext('Name'), | |
307 | width: me.cwidth1 || 200, | |
308 | dataIndex: 'key', | |
01031528 | 309 | renderer: me.renderKey, |
06694509 DM |
310 | }, |
311 | { | |
312 | flex: 1, | |
313 | header: gettext('Value'), | |
314 | dataIndex: 'value', | |
01031528 TL |
315 | renderer: me.renderValue, |
316 | }, | |
317 | ], | |
06694509 DM |
318 | }); |
319 | ||
320 | me.callParent(); | |
4297e795 DM |
321 | |
322 | if (me.monStoreErrors) { | |
323 | Proxmox.Utils.monStoreErrors(me, me.store); | |
324 | } | |
01031528 | 325 | }, |
06694509 | 326 | }); |