]>
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 | |
ee93ce96 DM |
5 | |
6 | getValues: function(dirtyOnly) { | |
7 | var me = this; | |
8 | ||
9 | var values = {}; | |
10 | ||
11 | var form = me.down('form').getForm(); | |
12 | ||
13 | form.getFields().each(function(field) { | |
14 | if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { | |
e7ade592 | 15 | Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); |
ee93ce96 DM |
16 | } |
17 | }); | |
18 | ||
19 | Ext.Array.each(me.query('inputpanel'), function(panel) { | |
e7ade592 | 20 | Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly)); |
ee93ce96 DM |
21 | }); |
22 | ||
23 | return values; | |
24 | }, | |
25 | ||
26 | initComponent: function() { | |
27 | var me = this; | |
28 | ||
29 | var tabs = me.items || []; | |
30 | delete me.items; | |
31 | ||
32 | /* | |
33 | * Items may have the following functions: | |
34 | * validator(): per tab custom validation | |
35 | * onSubmit(): submit handler | |
36 | * onGetValues(): overwrite getValues results | |
37 | */ | |
38 | ||
39 | Ext.Array.each(tabs, function(tab) { | |
40 | tab.disabled = true; | |
41 | }); | |
42 | tabs[0].disabled = false; | |
43 | ||
44 | var check_card = function(card) { | |
45 | var valid = true; | |
46 | var fields = card.query('field, fieldcontainer'); | |
47 | if (card.isXType('fieldcontainer')) { | |
48 | fields.unshift(card); | |
49 | } | |
50 | Ext.Array.each(fields, function(field) { | |
51 | // Note: not all fielcontainer have isValid() | |
52 | if (Ext.isFunction(field.isValid) && !field.isValid()) { | |
53 | valid = false; | |
54 | } | |
55 | }); | |
56 | ||
57 | if (Ext.isFunction(card.validator)) { | |
58 | return card.validator(); | |
59 | } | |
60 | ||
61 | return valid; | |
62 | }; | |
63 | ||
64 | ||
65 | var tbar = Ext.create('Ext.toolbar.Toolbar', { | |
66 | ui: 'footer', | |
67 | region: 'south', | |
68 | margins: '0 5 5 5', | |
69 | items: [ | |
84bfba3e | 70 | { |
672a6270 | 71 | xtype: 'proxmoxHelpButton', |
84bfba3e EK |
72 | itemId: 'help' |
73 | }, | |
ee93ce96 DM |
74 | '->', |
75 | { | |
76 | text: gettext('Back'), | |
77 | disabled: true, | |
78 | itemId: 'back', | |
79 | minWidth: 60, | |
80 | handler: function() { | |
81 | var tp = me.down('#wizcontent'); | |
82 | var atab = tp.getActiveTab(); | |
83 | var prev = tp.items.indexOf(atab) - 1; | |
84 | if (prev < 0) { | |
85 | return; | |
86 | } | |
87 | var ntab = tp.items.getAt(prev); | |
88 | if (ntab) { | |
89 | tp.setActiveTab(ntab); | |
90 | } | |
91 | ||
92 | ||
93 | } | |
94 | }, | |
95 | { | |
96 | text: gettext('Next'), | |
97 | disabled: true, | |
98 | itemId: 'next', | |
99 | minWidth: 60, | |
100 | handler: function() { | |
101 | ||
102 | var form = me.down('form').getForm(); | |
103 | ||
104 | var tp = me.down('#wizcontent'); | |
105 | var atab = tp.getActiveTab(); | |
106 | if (!check_card(atab)) { | |
107 | return; | |
108 | } | |
109 | ||
110 | var next = tp.items.indexOf(atab) + 1; | |
111 | var ntab = tp.items.getAt(next); | |
112 | if (ntab) { | |
113 | ntab.enable(); | |
114 | tp.setActiveTab(ntab); | |
115 | } | |
116 | ||
117 | } | |
118 | }, | |
119 | { | |
120 | text: gettext('Finish'), | |
121 | minWidth: 60, | |
122 | hidden: true, | |
123 | itemId: 'submit', | |
124 | handler: function() { | |
125 | var tp = me.down('#wizcontent'); | |
126 | var atab = tp.getActiveTab(); | |
127 | atab.onSubmit(); | |
128 | } | |
129 | } | |
130 | ] | |
131 | }); | |
132 | ||
ee93ce96 DM |
133 | var disable_at = function(card) { |
134 | var tp = me.down('#wizcontent'); | |
135 | var idx = tp.items.indexOf(card); | |
136 | for(;idx < tp.items.getCount();idx++) { | |
137 | var nc = tp.items.getAt(idx); | |
138 | if (nc) { | |
139 | nc.disable(); | |
140 | } | |
141 | } | |
142 | }; | |
143 | ||
144 | var tabchange = function(tp, newcard, oldcard) { | |
145 | if (newcard.onSubmit) { | |
146 | me.down('#next').setVisible(false); | |
147 | me.down('#submit').setVisible(true); | |
148 | } else { | |
149 | me.down('#next').setVisible(true); | |
150 | me.down('#submit').setVisible(false); | |
151 | } | |
152 | var valid = check_card(newcard); | |
153 | me.down('#next').setDisabled(!valid); | |
154 | me.down('#submit').setDisabled(!valid); | |
155 | me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0); | |
156 | ||
ee93ce96 DM |
157 | var next = tp.items.indexOf(newcard) + 1; |
158 | var ntab = tp.items.getAt(next); | |
159 | if (valid && ntab && !newcard.onSubmit) { | |
160 | ntab.enable(); | |
161 | } | |
162 | }; | |
163 | ||
164 | if (me.subject && !me.title) { | |
e7ade592 | 165 | me.title = Proxmox.Utils.dialog_title(me.subject, true, false); |
ee93ce96 DM |
166 | } |
167 | ||
60575f19 | 168 | Ext.apply(me, { |
8c054099 TL |
169 | width: 700, |
170 | height: 510, | |
ee93ce96 DM |
171 | modal: true, |
172 | border: false, | |
173 | draggable: true, | |
174 | closable: true, | |
175 | resizable: false, | |
176 | layout: 'border', | |
177 | items: [ | |
ee93ce96 DM |
178 | { |
179 | xtype: 'form', | |
180 | region: 'center', | |
181 | layout: 'fit', | |
182 | border: false, | |
183 | margins: '5 5 0 5', | |
184 | fieldDefaults: { | |
185 | labelWidth: 100, | |
186 | anchor: '100%' | |
187 | }, | |
188 | items: [{ | |
189 | itemId: 'wizcontent', | |
190 | xtype: 'tabpanel', | |
191 | activeItem: 0, | |
192 | bodyPadding: 10, | |
193 | listeners: { | |
194 | afterrender: function(tp) { | |
195 | var atab = this.getActiveTab(); | |
196 | tabchange(tp, atab); | |
197 | }, | |
198 | tabchange: function(tp, newcard, oldcard) { | |
ee93ce96 DM |
199 | tabchange(tp, newcard, oldcard); |
200 | } | |
201 | }, | |
202 | items: tabs | |
203 | }] | |
204 | }, | |
205 | tbar | |
206 | ] | |
207 | }); | |
208 | me.callParent(); | |
ee93ce96 DM |
209 | |
210 | Ext.Array.each(me.query('field'), function(field) { | |
a1304e1e | 211 | var validcheck = function() { |
ee93ce96 DM |
212 | var tp = me.down('#wizcontent'); |
213 | var atab = tp.getActiveTab(); | |
214 | var valid = check_card(atab); | |
215 | me.down('#next').setDisabled(!valid); | |
216 | me.down('#submit').setDisabled(!valid); | |
217 | var next = tp.items.indexOf(atab) + 1; | |
218 | var ntab = tp.items.getAt(next); | |
219 | if (!valid) { | |
220 | disable_at(ntab); | |
221 | } else if (ntab && !atab.onSubmit) { | |
222 | ntab.enable(); | |
223 | } | |
a1304e1e DC |
224 | }; |
225 | field.on('change', validcheck); | |
226 | field.on('validitychange', validcheck); | |
ee93ce96 DM |
227 | }); |
228 | } | |
229 | }); |