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