]>
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 | ||
1b07a95a DM |
16 | // set create to true if you want a Create button (instead |
17 | // OK and RESET) | |
18 | create: 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 | |
37 | defaultFocus: 'field', | |
38 | ||
06694509 DM |
39 | showProgress: false, |
40 | ||
41 | isValid: function() { | |
42 | var me = this; | |
43 | ||
44 | var form = me.formPanel.getForm(); | |
45 | return form.isValid(); | |
46 | }, | |
47 | ||
48 | getValues: function(dirtyOnly) { | |
49 | var me = this; | |
50 | ||
51 | var values = {}; | |
52 | ||
53 | var form = me.formPanel.getForm(); | |
54 | ||
55 | form.getFields().each(function(field) { | |
56 | if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { | |
57 | Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); | |
58 | } | |
59 | }); | |
60 | ||
61 | Ext.Array.each(me.query('inputpanel'), function(panel) { | |
62 | Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly)); | |
63 | }); | |
64 | ||
65 | return values; | |
66 | }, | |
67 | ||
68 | setValues: function(values) { | |
69 | var me = this; | |
70 | ||
71 | var form = me.formPanel.getForm(); | |
72 | ||
73 | Ext.iterate(values, function(fieldId, val) { | |
74 | var field = form.findField(fieldId); | |
75 | if (field && !field.up('inputpanel')) { | |
76 | field.setValue(val); | |
77 | if (form.trackResetOnLoad) { | |
78 | field.resetOriginalValue(); | |
79 | } | |
80 | } | |
81 | }); | |
1b07a95a | 82 | |
06694509 DM |
83 | Ext.Array.each(me.query('inputpanel'), function(panel) { |
84 | panel.setValues(values); | |
85 | }); | |
86 | }, | |
87 | ||
88 | submit: function() { | |
89 | var me = this; | |
90 | ||
91 | var form = me.formPanel.getForm(); | |
92 | ||
93 | var values = me.getValues(); | |
94 | Ext.Object.each(values, function(name, val) { | |
95 | if (values.hasOwnProperty(name)) { | |
96 | if (Ext.isArray(val) && !val.length) { | |
97 | values[name] = ''; | |
98 | } | |
99 | } | |
100 | }); | |
101 | ||
102 | if (me.digest) { | |
103 | values.digest = me.digest; | |
104 | } | |
105 | ||
106 | if (me.backgroundDelay) { | |
107 | values.background_delay = me.backgroundDelay; | |
108 | } | |
109 | ||
110 | var url = me.url; | |
111 | if (me.method === 'DELETE') { | |
112 | url = url + "?" + Ext.Object.toQueryString(values); | |
113 | values = undefined; | |
114 | } | |
115 | ||
116 | Proxmox.Utils.API2Request({ | |
117 | url: url, | |
118 | waitMsgTarget: me, | |
119 | method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'), | |
120 | params: values, | |
121 | failure: function(response, options) { | |
122 | if (response.result && response.result.errors) { | |
123 | form.markInvalid(response.result.errors); | |
124 | } | |
125 | Ext.Msg.alert(gettext('Error'), response.htmlStatus); | |
126 | }, | |
127 | success: function(response, options) { | |
128 | var hasProgressBar = (me.backgroundDelay || me.showProgress) && | |
129 | response.result.data ? true : false; | |
130 | ||
131 | if (hasProgressBar) { | |
132 | // stay around so we can trigger our close events | |
133 | // when background action is completed | |
134 | me.hide(); | |
135 | ||
136 | var upid = response.result.data; | |
1b07a95a | 137 | var win = Ext.create('PVE.window.TaskProgress', { |
06694509 DM |
138 | upid: upid, |
139 | listeners: { | |
140 | destroy: function () { | |
141 | me.close(); | |
142 | } | |
143 | } | |
144 | }); | |
145 | win.show(); | |
146 | } else { | |
147 | me.close(); | |
148 | } | |
149 | } | |
150 | }); | |
151 | }, | |
152 | ||
153 | load: function(options) { | |
154 | var me = this; | |
155 | ||
156 | var form = me.formPanel.getForm(); | |
157 | ||
158 | options = options || {}; | |
159 | ||
160 | var newopts = Ext.apply({ | |
161 | waitMsgTarget: me | |
162 | }, options); | |
163 | ||
164 | var createWrapper = function(successFn) { | |
165 | Ext.apply(newopts, { | |
166 | url: me.url, | |
167 | method: 'GET', | |
168 | success: function(response, opts) { | |
169 | form.clearInvalid(); | |
170 | me.digest = response.result.data.digest; | |
171 | if (successFn) { | |
172 | successFn(response, opts); | |
173 | } else { | |
174 | me.setValues(response.result.data); | |
175 | } | |
176 | // hack: fix ExtJS bug | |
177 | Ext.Array.each(me.query('radiofield'), function(f) { | |
178 | f.resetOriginalValue(); | |
179 | }); | |
180 | }, | |
181 | failure: function(response, opts) { | |
182 | Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() { | |
183 | me.close(); | |
184 | }); | |
185 | } | |
186 | }); | |
187 | }; | |
188 | ||
189 | createWrapper(options.success); | |
190 | ||
191 | Proxmox.Utils.API2Request(newopts); | |
192 | }, | |
193 | ||
194 | initComponent : function() { | |
195 | var me = this; | |
196 | ||
197 | if (!me.url) { | |
198 | throw "no url specified"; | |
199 | } | |
200 | ||
201 | var items = Ext.isArray(me.items) ? me.items : [ me.items ]; | |
202 | ||
203 | me.items = undefined; | |
204 | ||
205 | me.formPanel = Ext.create('Ext.form.Panel', { | |
206 | url: me.url, | |
207 | method: me.method || 'PUT', | |
208 | trackResetOnLoad: true, | |
209 | bodyPadding: 10, | |
210 | border: false, | |
211 | defaults: { | |
212 | border: false | |
213 | }, | |
214 | fieldDefaults: Ext.apply({}, me.fieldDefaults, { | |
215 | labelWidth: 100, | |
216 | anchor: '100%' | |
217 | }), | |
218 | items: items | |
219 | }); | |
220 | ||
1b07a95a DM |
221 | var inputPanel = me.formPanel.down('inputpanel'); |
222 | ||
06694509 DM |
223 | var form = me.formPanel.getForm(); |
224 | ||
225 | var submitText; | |
226 | if (me.create) { | |
ffea05ec DC |
227 | if (me.submitText) { |
228 | submitText = me.submitText; | |
229 | } else if (me.isAdd) { | |
06694509 DM |
230 | submitText = gettext('Add'); |
231 | } else if (me.isRemove) { | |
232 | submitText = gettext('Remove'); | |
233 | } else { | |
234 | submitText = gettext('Create'); | |
235 | } | |
236 | } else { | |
ffea05ec | 237 | submitText = me.submitText || gettext('OK'); |
06694509 DM |
238 | } |
239 | ||
240 | var submitBtn = Ext.create('Ext.Button', { | |
a7dcbdeb | 241 | reference: 'submitbutton', |
06694509 DM |
242 | text: submitText, |
243 | disabled: !me.create, | |
244 | handler: function() { | |
245 | me.submit(); | |
246 | } | |
247 | }); | |
248 | ||
249 | var resetBtn = Ext.create('Ext.Button', { | |
250 | text: 'Reset', | |
251 | disabled: true, | |
252 | handler: function(){ | |
253 | form.reset(); | |
254 | } | |
255 | }); | |
256 | ||
257 | var set_button_status = function() { | |
258 | var valid = form.isValid(); | |
259 | var dirty = form.isDirty(); | |
260 | submitBtn.setDisabled(!valid || !(dirty || me.create)); | |
261 | resetBtn.setDisabled(!dirty); | |
262 | }; | |
263 | ||
264 | form.on('dirtychange', set_button_status); | |
265 | form.on('validitychange', set_button_status); | |
266 | ||
267 | var colwidth = 300; | |
268 | if (me.fieldDefaults && me.fieldDefaults.labelWidth) { | |
269 | colwidth += me.fieldDefaults.labelWidth - 100; | |
270 | } | |
06694509 | 271 | |
1b07a95a DM |
272 | var twoColumn = inputPanel && |
273 | (inputPanel.column1 || inputPanel.column2); | |
06694509 DM |
274 | |
275 | if (me.subject && !me.title) { | |
276 | me.title = Proxmox.Utils.dialog_title(me.subject, me.create, me.isAdd); | |
277 | } | |
278 | ||
279 | if (me.create) { | |
280 | me.buttons = [ submitBtn ] ; | |
281 | } else { | |
282 | me.buttons = [ submitBtn, resetBtn ]; | |
283 | } | |
284 | ||
c3457485 DM |
285 | var onlineHelp = me.onlineHelp; |
286 | if (!onlineHelp && inputPanel && inputPanel.onlineHelp) { | |
287 | onlineHelp = inputPanel.onlineHelp; | |
288 | } | |
289 | ||
290 | if (onlineHelp) { | |
291 | var helpButton = Ext.create('Proxmox.button.Help'); | |
06694509 | 292 | me.buttons.unshift(helpButton, '->'); |
c3457485 | 293 | Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp); |
06694509 DM |
294 | } |
295 | ||
296 | Ext.applyIf(me, { | |
297 | modal: true, | |
298 | width: twoColumn ? colwidth*2 : colwidth, | |
299 | border: false, | |
300 | items: [ me.formPanel ] | |
301 | }); | |
302 | ||
303 | me.callParent(); | |
304 | ||
305 | // always mark invalid fields | |
306 | me.on('afterlayout', function() { | |
307 | // on touch devices, the isValid function | |
308 | // triggers a layout, which triggers an isValid | |
309 | // and so on | |
310 | // to prevent this we disable the layouting here | |
311 | // and enable it afterwards | |
312 | me.suspendLayout = true; | |
313 | me.isValid(); | |
314 | me.suspendLayout = false; | |
315 | }); | |
a33ba257 DM |
316 | |
317 | if (me.autoLoad) { | |
318 | me.load(); | |
319 | } | |
06694509 DM |
320 | } |
321 | }); |