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