]>
Commit | Line | Data |
---|---|---|
ee93ce96 DM |
1 | Ext.define('PVE.window.Wizard', { |
2 | extend: 'Ext.window.Window', | |
f677074b DM |
3 | |
4 | activeTitle: '', // used for automated testing | |
bd2118c6 TL |
5 | |
6 | width: 700, | |
7 | height: 510, | |
8 | ||
9 | modal: true, | |
10 | border: false, | |
11 | ||
12 | draggable: true, | |
13 | closable: true, | |
14 | resizable: false, | |
15 | ||
16 | layout: 'border', | |
17 | ||
ee93ce96 DM |
18 | getValues: function(dirtyOnly) { |
19 | var me = this; | |
20 | ||
21 | var values = {}; | |
22 | ||
23 | var form = me.down('form').getForm(); | |
24 | ||
25 | form.getFields().each(function(field) { | |
26 | if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { | |
e7ade592 | 27 | Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); |
ee93ce96 DM |
28 | } |
29 | }); | |
30 | ||
31 | Ext.Array.each(me.query('inputpanel'), function(panel) { | |
e7ade592 | 32 | Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly)); |
ee93ce96 DM |
33 | }); |
34 | ||
35 | return values; | |
36 | }, | |
37 | ||
38 | initComponent: function() { | |
39 | var me = this; | |
40 | ||
41 | var tabs = me.items || []; | |
42 | delete me.items; | |
43 | ||
44 | /* | |
45 | * Items may have the following functions: | |
46 | * validator(): per tab custom validation | |
47 | * onSubmit(): submit handler | |
48 | * onGetValues(): overwrite getValues results | |
49 | */ | |
50 | ||
51 | Ext.Array.each(tabs, function(tab) { | |
52 | tab.disabled = true; | |
53 | }); | |
54 | tabs[0].disabled = false; | |
55 | ||
373d7ea4 DC |
56 | var maxidx = 0; |
57 | var curidx = 0; | |
58 | ||
ee93ce96 DM |
59 | var check_card = function(card) { |
60 | var valid = true; | |
61 | var fields = card.query('field, fieldcontainer'); | |
62 | if (card.isXType('fieldcontainer')) { | |
63 | fields.unshift(card); | |
64 | } | |
65 | Ext.Array.each(fields, function(field) { | |
66 | // Note: not all fielcontainer have isValid() | |
67 | if (Ext.isFunction(field.isValid) && !field.isValid()) { | |
68 | valid = false; | |
69 | } | |
70 | }); | |
71 | ||
72 | if (Ext.isFunction(card.validator)) { | |
73 | return card.validator(); | |
74 | } | |
75 | ||
76 | return valid; | |
77 | }; | |
78 | ||
ee93ce96 DM |
79 | var disable_at = function(card) { |
80 | var tp = me.down('#wizcontent'); | |
81 | var idx = tp.items.indexOf(card); | |
82 | for(;idx < tp.items.getCount();idx++) { | |
83 | var nc = tp.items.getAt(idx); | |
84 | if (nc) { | |
85 | nc.disable(); | |
86 | } | |
87 | } | |
88 | }; | |
89 | ||
90 | var tabchange = function(tp, newcard, oldcard) { | |
91 | if (newcard.onSubmit) { | |
92 | me.down('#next').setVisible(false); | |
93 | me.down('#submit').setVisible(true); | |
94 | } else { | |
95 | me.down('#next').setVisible(true); | |
96 | me.down('#submit').setVisible(false); | |
97 | } | |
98 | var valid = check_card(newcard); | |
99 | me.down('#next').setDisabled(!valid); | |
100 | me.down('#submit').setDisabled(!valid); | |
101 | me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0); | |
102 | ||
373d7ea4 DC |
103 | var idx = tp.items.indexOf(newcard); |
104 | if (idx > maxidx) { | |
105 | maxidx = idx; | |
106 | } | |
107 | curidx = idx; | |
108 | ||
109 | var next = idx + 1; | |
ee93ce96 DM |
110 | var ntab = tp.items.getAt(next); |
111 | if (valid && ntab && !newcard.onSubmit) { | |
112 | ntab.enable(); | |
113 | } | |
114 | }; | |
115 | ||
116 | if (me.subject && !me.title) { | |
e7ade592 | 117 | me.title = Proxmox.Utils.dialog_title(me.subject, true, false); |
ee93ce96 DM |
118 | } |
119 | ||
3e0ea404 DC |
120 | var sp = Ext.state.Manager.getProvider(); |
121 | var advchecked = sp.get('proxmox-advanced-cb'); | |
122 | ||
60575f19 | 123 | Ext.apply(me, { |
ee93ce96 | 124 | items: [ |
ee93ce96 DM |
125 | { |
126 | xtype: 'form', | |
127 | region: 'center', | |
128 | layout: 'fit', | |
129 | border: false, | |
130 | margins: '5 5 0 5', | |
131 | fieldDefaults: { | |
132 | labelWidth: 100, | |
133 | anchor: '100%' | |
134 | }, | |
135 | items: [{ | |
136 | itemId: 'wizcontent', | |
137 | xtype: 'tabpanel', | |
138 | activeItem: 0, | |
139 | bodyPadding: 10, | |
140 | listeners: { | |
141 | afterrender: function(tp) { | |
142 | var atab = this.getActiveTab(); | |
143 | tabchange(tp, atab); | |
144 | }, | |
145 | tabchange: function(tp, newcard, oldcard) { | |
ee93ce96 DM |
146 | tabchange(tp, newcard, oldcard); |
147 | } | |
148 | }, | |
149 | items: tabs | |
150 | }] | |
18f4718f TL |
151 | } |
152 | ], | |
153 | fbar: [ | |
154 | { | |
155 | xtype: 'proxmoxHelpButton', | |
156 | itemId: 'help' | |
157 | }, | |
158 | '->', | |
3e0ea404 DC |
159 | { |
160 | xtype: 'proxmoxcheckbox', | |
161 | boxLabelAlign: 'before', | |
162 | boxLabel: gettext('Advanced'), | |
163 | value: advchecked, | |
164 | listeners: { | |
165 | change: function(cb, val) { | |
166 | var tp = me.down('#wizcontent'); | |
167 | tp.query('inputpanel').forEach(function(ip) { | |
168 | ip.setAdvancedVisible(val); | |
169 | }); | |
170 | ||
171 | sp.set('proxmox-advanced-cb', val); | |
172 | } | |
173 | } | |
174 | }, | |
18f4718f TL |
175 | { |
176 | text: gettext('Back'), | |
177 | disabled: true, | |
178 | itemId: 'back', | |
179 | minWidth: 60, | |
180 | handler: function() { | |
181 | var tp = me.down('#wizcontent'); | |
182 | var atab = tp.getActiveTab(); | |
183 | var prev = tp.items.indexOf(atab) - 1; | |
184 | if (prev < 0) { | |
185 | return; | |
186 | } | |
187 | var ntab = tp.items.getAt(prev); | |
188 | if (ntab) { | |
189 | tp.setActiveTab(ntab); | |
190 | } | |
191 | } | |
192 | }, | |
193 | { | |
194 | text: gettext('Next'), | |
195 | disabled: true, | |
196 | itemId: 'next', | |
197 | minWidth: 60, | |
198 | handler: function() { | |
199 | ||
200 | var form = me.down('form').getForm(); | |
201 | ||
202 | var tp = me.down('#wizcontent'); | |
203 | var atab = tp.getActiveTab(); | |
204 | if (!check_card(atab)) { | |
205 | return; | |
206 | } | |
207 | ||
208 | var next = tp.items.indexOf(atab) + 1; | |
209 | var ntab = tp.items.getAt(next); | |
210 | if (ntab) { | |
211 | ntab.enable(); | |
212 | tp.setActiveTab(ntab); | |
213 | } | |
214 | ||
215 | } | |
ee93ce96 | 216 | }, |
18f4718f TL |
217 | { |
218 | text: gettext('Finish'), | |
219 | minWidth: 60, | |
220 | hidden: true, | |
221 | itemId: 'submit', | |
222 | handler: function() { | |
223 | var tp = me.down('#wizcontent'); | |
224 | var atab = tp.getActiveTab(); | |
225 | atab.onSubmit(); | |
226 | } | |
227 | } | |
ee93ce96 DM |
228 | ] |
229 | }); | |
230 | me.callParent(); | |
ee93ce96 | 231 | |
3e0ea404 DC |
232 | Ext.Array.each(me.query('inputpanel'), function(panel) { |
233 | panel.setAdvancedVisible(advchecked); | |
234 | }); | |
235 | ||
ee93ce96 | 236 | Ext.Array.each(me.query('field'), function(field) { |
a1304e1e | 237 | var validcheck = function() { |
ee93ce96 | 238 | var tp = me.down('#wizcontent'); |
373d7ea4 DC |
239 | |
240 | // check tabs from current to the last enabled for validity | |
241 | // since we might have changed a validity on a later one | |
242 | var i; | |
243 | for (i = curidx; i <= maxidx && i < tp.items.getCount(); i++) { | |
244 | var tab = tp.items.getAt(i); | |
245 | var valid = check_card(tab); | |
246 | ||
247 | // only set the buttons on the current panel | |
248 | if (i === curidx) { | |
249 | me.down('#next').setDisabled(!valid); | |
250 | me.down('#submit').setDisabled(!valid); | |
251 | } | |
252 | ||
253 | // if a panel is invalid, then disable it and all following, | |
254 | // else enable it and go to the next | |
255 | var ntab = tp.items.getAt(i + 1); | |
256 | if (!valid) { | |
257 | disable_at(ntab); | |
258 | return; | |
259 | } else if (ntab && !tab.onSubmit) { | |
260 | ntab.enable(); | |
261 | } | |
ee93ce96 | 262 | } |
a1304e1e DC |
263 | }; |
264 | field.on('change', validcheck); | |
265 | field.on('validitychange', validcheck); | |
ee93ce96 DM |
266 | }); |
267 | } | |
268 | }); |