]>
Commit | Line | Data |
---|---|---|
06694509 DM |
1 | // fixme: how can we avoid those lint errors? |
2 | /*jslint confusion: true */ | |
3 | Ext.define('Proxmox.window.Edit', { | |
4 | extend: 'Ext.window.Window', | |
5 | alias: 'widget.proxmoxWindowEdit', | |
1b07a95a | 6 | |
a33ba257 DM |
7 | // autoLoad trigger a load() after component creation |
8 | autoLoad: false, | |
9 | ||
06694509 DM |
10 | resizable: false, |
11 | ||
12 | // use this tio atimatically generate a title like | |
13 | // Create: <subject> | |
14 | subject: undefined, | |
15 | ||
b33f451f | 16 | // set isCreate to true if you want a Create button (instead |
1b07a95a | 17 | // OK and RESET) |
b33f451f | 18 | isCreate: false, |
06694509 DM |
19 | |
20 | // set to true if you want an Add button (instead of Create) | |
21 | isAdd: false, | |
22 | ||
23 | // set to true if you want an Remove button (instead of Create) | |
24 | isRemove: false, | |
25 | ||
ffea05ec DC |
26 | // custom submitText |
27 | submitText: undefined, | |
28 | ||
06694509 DM |
29 | backgroundDelay: 0, |
30 | ||
a7dcbdeb DM |
31 | // needed for finding the reference to submitbutton |
32 | // because we do not have a controller | |
33 | referenceHolder: true, | |
34 | defaultButton: 'submitbutton', | |
35 | ||
36 | // finds the first form field | |
5d3089cd | 37 | defaultFocus: 'field[disabled=false][hidden=false]', |
a7dcbdeb | 38 | |
06694509 DM |
39 | showProgress: false, |
40 | ||
8d8dbfc5 TL |
41 | showTaskViewer: false, |
42 | ||
fde8e8bb TL |
43 | // gets called if we have a progress bar or taskview and it detected that |
44 | // the task finished. function(success) | |
45 | taskDone: Ext.emptyFn, | |
46 | ||
a498f279 DC |
47 | // gets called when the api call is finished, right at the beginning |
48 | // function(success, response, options) | |
49 | apiCallDone: Ext.emptyFn, | |
50 | ||
42a9df8b DC |
51 | // assign a reference from docs, to add a help button docked to the |
52 | // bottom of the window. If undefined we magically fall back to the | |
53 | // onlineHelp of our first item, if set. | |
54 | onlineHelp: undefined, | |
55 | ||
06694509 DM |
56 | isValid: function() { |
57 | var me = this; | |
58 | ||
59 | var form = me.formPanel.getForm(); | |
60 | return form.isValid(); | |
61 | }, | |
62 | ||
63 | getValues: function(dirtyOnly) { | |
64 | var me = this; | |
65 | ||
66 | var values = {}; | |
67 | ||
68 | var form = me.formPanel.getForm(); | |
69 | ||
70 | form.getFields().each(function(field) { | |
71 | if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { | |
72 | Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); | |
73 | } | |
74 | }); | |
75 | ||
76 | Ext.Array.each(me.query('inputpanel'), function(panel) { | |
77 | Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly)); | |
78 | }); | |
79 | ||
80 | return values; | |
81 | }, | |
82 | ||
83 | setValues: function(values) { | |
84 | var me = this; | |
85 | ||
86 | var form = me.formPanel.getForm(); | |
87 | ||
88 | Ext.iterate(values, function(fieldId, val) { | |
89 | var field = form.findField(fieldId); | |
90 | if (field && !field.up('inputpanel')) { | |
91 | field.setValue(val); | |
92 | if (form.trackResetOnLoad) { | |
93 | field.resetOriginalValue(); | |
94 | } | |
95 | } | |
96 | }); | |
1b07a95a | 97 | |
06694509 DM |
98 | Ext.Array.each(me.query('inputpanel'), function(panel) { |
99 | panel.setValues(values); | |
100 | }); | |
101 | }, | |
102 | ||
103 | submit: function() { | |
104 | var me = this; | |
105 | ||
106 | var form = me.formPanel.getForm(); | |
107 | ||
108 | var values = me.getValues(); | |
109 | Ext.Object.each(values, function(name, val) { | |
110 | if (values.hasOwnProperty(name)) { | |
111 | if (Ext.isArray(val) && !val.length) { | |
112 | values[name] = ''; | |
113 | } | |
114 | } | |
115 | }); | |
116 | ||
117 | if (me.digest) { | |
118 | values.digest = me.digest; | |
119 | } | |
120 | ||
121 | if (me.backgroundDelay) { | |
122 | values.background_delay = me.backgroundDelay; | |
123 | } | |
124 | ||
125 | var url = me.url; | |
126 | if (me.method === 'DELETE') { | |
127 | url = url + "?" + Ext.Object.toQueryString(values); | |
128 | values = undefined; | |
129 | } | |
130 | ||
131 | Proxmox.Utils.API2Request({ | |
132 | url: url, | |
133 | waitMsgTarget: me, | |
134 | method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'), | |
135 | params: values, | |
136 | failure: function(response, options) { | |
a498f279 DC |
137 | me.apiCallDone(false, response, options); |
138 | ||
06694509 DM |
139 | if (response.result && response.result.errors) { |
140 | form.markInvalid(response.result.errors); | |
141 | } | |
142 | Ext.Msg.alert(gettext('Error'), response.htmlStatus); | |
143 | }, | |
144 | success: function(response, options) { | |
8d8dbfc5 | 145 | var hasProgressBar = (me.backgroundDelay || me.showProgress || me.showTaskViewer) && |
06694509 DM |
146 | response.result.data ? true : false; |
147 | ||
a498f279 DC |
148 | me.apiCallDone(true, response, options); |
149 | ||
06694509 DM |
150 | if (hasProgressBar) { |
151 | // stay around so we can trigger our close events | |
152 | // when background action is completed | |
153 | me.hide(); | |
154 | ||
155 | var upid = response.result.data; | |
8d8dbfc5 TL |
156 | var viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress'; |
157 | var win = Ext.create('Proxmox.window.Task' + viewerClass, { | |
06694509 | 158 | upid: upid, |
fde8e8bb | 159 | taskDone: me.taskDone, |
06694509 DM |
160 | listeners: { |
161 | destroy: function () { | |
162 | me.close(); | |
163 | } | |
164 | } | |
165 | }); | |
166 | win.show(); | |
167 | } else { | |
168 | me.close(); | |
169 | } | |
170 | } | |
171 | }); | |
172 | }, | |
173 | ||
174 | load: function(options) { | |
175 | var me = this; | |
176 | ||
177 | var form = me.formPanel.getForm(); | |
178 | ||
179 | options = options || {}; | |
180 | ||
181 | var newopts = Ext.apply({ | |
182 | waitMsgTarget: me | |
183 | }, options); | |
184 | ||
185 | var createWrapper = function(successFn) { | |
186 | Ext.apply(newopts, { | |
187 | url: me.url, | |
188 | method: 'GET', | |
189 | success: function(response, opts) { | |
190 | form.clearInvalid(); | |
191 | me.digest = response.result.data.digest; | |
192 | if (successFn) { | |
193 | successFn(response, opts); | |
194 | } else { | |
195 | me.setValues(response.result.data); | |
196 | } | |
197 | // hack: fix ExtJS bug | |
198 | Ext.Array.each(me.query('radiofield'), function(f) { | |
199 | f.resetOriginalValue(); | |
200 | }); | |
201 | }, | |
202 | failure: function(response, opts) { | |
203 | Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() { | |
204 | me.close(); | |
205 | }); | |
206 | } | |
207 | }); | |
208 | }; | |
209 | ||
210 | createWrapper(options.success); | |
211 | ||
212 | Proxmox.Utils.API2Request(newopts); | |
213 | }, | |
214 | ||
215 | initComponent : function() { | |
216 | var me = this; | |
217 | ||
218 | if (!me.url) { | |
219 | throw "no url specified"; | |
220 | } | |
221 | ||
b33f451f DC |
222 | if (me.create) {throw "deprecated parameter, use isCreate";} |
223 | ||
06694509 DM |
224 | var items = Ext.isArray(me.items) ? me.items : [ me.items ]; |
225 | ||
226 | me.items = undefined; | |
227 | ||
228 | me.formPanel = Ext.create('Ext.form.Panel', { | |
229 | url: me.url, | |
230 | method: me.method || 'PUT', | |
231 | trackResetOnLoad: true, | |
232 | bodyPadding: 10, | |
233 | border: false, | |
31a50251 | 234 | defaults: Ext.apply({}, me.defaults, { |
06694509 | 235 | border: false |
31a50251 | 236 | }), |
06694509 DM |
237 | fieldDefaults: Ext.apply({}, me.fieldDefaults, { |
238 | labelWidth: 100, | |
239 | anchor: '100%' | |
240 | }), | |
241 | items: items | |
242 | }); | |
243 | ||
1b07a95a DM |
244 | var inputPanel = me.formPanel.down('inputpanel'); |
245 | ||
06694509 DM |
246 | var form = me.formPanel.getForm(); |
247 | ||
248 | var submitText; | |
b33f451f | 249 | if (me.isCreate) { |
ffea05ec DC |
250 | if (me.submitText) { |
251 | submitText = me.submitText; | |
252 | } else if (me.isAdd) { | |
06694509 DM |
253 | submitText = gettext('Add'); |
254 | } else if (me.isRemove) { | |
255 | submitText = gettext('Remove'); | |
256 | } else { | |
257 | submitText = gettext('Create'); | |
258 | } | |
259 | } else { | |
ffea05ec | 260 | submitText = me.submitText || gettext('OK'); |
06694509 DM |
261 | } |
262 | ||
263 | var submitBtn = Ext.create('Ext.Button', { | |
a7dcbdeb | 264 | reference: 'submitbutton', |
06694509 | 265 | text: submitText, |
b33f451f | 266 | disabled: !me.isCreate, |
06694509 DM |
267 | handler: function() { |
268 | me.submit(); | |
269 | } | |
270 | }); | |
271 | ||
272 | var resetBtn = Ext.create('Ext.Button', { | |
273 | text: 'Reset', | |
274 | disabled: true, | |
275 | handler: function(){ | |
276 | form.reset(); | |
277 | } | |
278 | }); | |
279 | ||
280 | var set_button_status = function() { | |
281 | var valid = form.isValid(); | |
282 | var dirty = form.isDirty(); | |
b33f451f | 283 | submitBtn.setDisabled(!valid || !(dirty || me.isCreate)); |
06694509 | 284 | resetBtn.setDisabled(!dirty); |
880df5d5 DC |
285 | |
286 | if (inputPanel && inputPanel.hasAdvanced) { | |
287 | // we want to show the advanced options | |
288 | // as soon as some of it is not valid | |
289 | var advancedItems = me.down('#advancedContainer').query('field'); | |
290 | var valid = true; | |
291 | advancedItems.forEach(function(field) { | |
292 | if (!field.isValid()) { | |
293 | valid = false; | |
294 | } | |
295 | }); | |
296 | ||
297 | if (!valid) { | |
298 | inputPanel.setAdvancedVisible(true); | |
299 | me.down('#advancedcb').setValue(true); | |
300 | } | |
301 | } | |
06694509 DM |
302 | }; |
303 | ||
304 | form.on('dirtychange', set_button_status); | |
305 | form.on('validitychange', set_button_status); | |
306 | ||
307 | var colwidth = 300; | |
308 | if (me.fieldDefaults && me.fieldDefaults.labelWidth) { | |
309 | colwidth += me.fieldDefaults.labelWidth - 100; | |
310 | } | |
06694509 | 311 | |
1b07a95a DM |
312 | var twoColumn = inputPanel && |
313 | (inputPanel.column1 || inputPanel.column2); | |
06694509 DM |
314 | |
315 | if (me.subject && !me.title) { | |
b33f451f | 316 | me.title = Proxmox.Utils.dialog_title(me.subject, me.isCreate, me.isAdd); |
06694509 DM |
317 | } |
318 | ||
b33f451f | 319 | if (me.isCreate) { |
06694509 DM |
320 | me.buttons = [ submitBtn ] ; |
321 | } else { | |
322 | me.buttons = [ submitBtn, resetBtn ]; | |
323 | } | |
324 | ||
880df5d5 DC |
325 | if (inputPanel && inputPanel.hasAdvanced) { |
326 | var sp = Ext.state.Manager.getProvider(); | |
327 | var advchecked = sp.get('proxmox-advanced-cb'); | |
328 | inputPanel.setAdvancedVisible(advchecked); | |
329 | me.buttons.unshift( | |
330 | { | |
331 | xtype: 'proxmoxcheckbox', | |
332 | itemId: 'advancedcb', | |
333 | boxLabelAlign: 'before', | |
334 | boxLabel: gettext('Advanced'), | |
335 | stateId: 'proxmox-advanced-cb', | |
336 | value: advchecked, | |
337 | listeners: { | |
338 | change: function(cb, val) { | |
339 | inputPanel.setAdvancedVisible(val); | |
340 | sp.set('proxmox-advanced-cb', val); | |
341 | } | |
342 | } | |
343 | } | |
344 | ); | |
345 | } | |
346 | ||
c3457485 DM |
347 | var onlineHelp = me.onlineHelp; |
348 | if (!onlineHelp && inputPanel && inputPanel.onlineHelp) { | |
349 | onlineHelp = inputPanel.onlineHelp; | |
350 | } | |
351 | ||
352 | if (onlineHelp) { | |
353 | var helpButton = Ext.create('Proxmox.button.Help'); | |
06694509 | 354 | me.buttons.unshift(helpButton, '->'); |
c3457485 | 355 | Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp); |
06694509 DM |
356 | } |
357 | ||
358 | Ext.applyIf(me, { | |
359 | modal: true, | |
360 | width: twoColumn ? colwidth*2 : colwidth, | |
361 | border: false, | |
362 | items: [ me.formPanel ] | |
363 | }); | |
364 | ||
365 | me.callParent(); | |
366 | ||
367 | // always mark invalid fields | |
368 | me.on('afterlayout', function() { | |
369 | // on touch devices, the isValid function | |
370 | // triggers a layout, which triggers an isValid | |
371 | // and so on | |
372 | // to prevent this we disable the layouting here | |
373 | // and enable it afterwards | |
374 | me.suspendLayout = true; | |
375 | me.isValid(); | |
376 | me.suspendLayout = false; | |
377 | }); | |
a33ba257 DM |
378 | |
379 | if (me.autoLoad) { | |
380 | me.load(); | |
381 | } | |
06694509 DM |
382 | } |
383 | }); |