activeTitle: '', // used for automated testing
- width: 700,
- height: 510,
+ width: 720,
+ height: 540,
modal: true,
border: false,
layout: 'border',
getValues: function(dirtyOnly) {
- var me = this;
-
- var values = {};
+ let me = this;
- var form = me.down('form').getForm();
+ let values = {};
- form.getFields().each(function(field) {
- if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
- Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
- }
- });
+ me.down('form').getForm().getFields().each(field => {
+ if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
+ Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
+ }
+ });
- Ext.Array.each(me.query('inputpanel'), function(panel) {
+ me.query('inputpanel').forEach(panel => {
Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
});
var tabs = me.items || [];
delete me.items;
-
- /*
+
+ /*
* Items may have the following functions:
* validator(): per tab custom validation
* onSubmit(): submit handler
});
tabs[0].disabled = false;
- var check_card = function(card) {
- var valid = true;
- var fields = card.query('field, fieldcontainer');
+ let maxidx = 0, curidx = 0;
+
+ let check_card = function(card) {
+ let fields = card.query('field, fieldcontainer');
if (card.isXType('fieldcontainer')) {
fields.unshift(card);
}
- Ext.Array.each(fields, function(field) {
+ let valid = true;
+ for (const field of fields) {
// Note: not all fielcontainer have isValid()
if (Ext.isFunction(field.isValid) && !field.isValid()) {
valid = false;
}
- });
-
+ }
if (Ext.isFunction(card.validator)) {
return card.validator();
}
-
return valid;
};
- var disable_at = function(card) {
- var tp = me.down('#wizcontent');
- var idx = tp.items.indexOf(card);
- for(;idx < tp.items.getCount();idx++) {
- var nc = tp.items.getAt(idx);
- if (nc) {
- nc.disable();
+ let disableTab = function(card) {
+ let tp = me.down('#wizcontent');
+ for (let idx = tp.items.indexOf(card); idx < tp.items.getCount(); idx++) {
+ let tab = tp.items.getAt(idx);
+ if (tab) {
+ tab.disable();
}
}
};
- var tabchange = function(tp, newcard, oldcard) {
+ let tabchange = function(tp, newcard, oldcard) {
if (newcard.onSubmit) {
me.down('#next').setVisible(false);
- me.down('#submit').setVisible(true);
+ me.down('#submit').setVisible(true);
} else {
me.down('#next').setVisible(true);
- me.down('#submit').setVisible(false);
+ me.down('#submit').setVisible(false);
}
- var valid = check_card(newcard);
- me.down('#next').setDisabled(!valid);
- me.down('#submit').setDisabled(!valid);
- me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
+ let valid = check_card(newcard);
+ me.down('#next').setDisabled(!valid);
+ me.down('#submit').setDisabled(!valid);
+ me.down('#back').setDisabled(tp.items.indexOf(newcard) === 0);
+
+ let idx = tp.items.indexOf(newcard);
+ if (idx > maxidx) {
+ maxidx = idx;
+ }
+ curidx = idx;
- var next = tp.items.indexOf(newcard) + 1;
- var ntab = tp.items.getAt(next);
+ let ntab = tp.items.getAt(idx + 1);
if (valid && ntab && !newcard.onSubmit) {
ntab.enable();
}
me.title = Proxmox.Utils.dialog_title(me.subject, true, false);
}
+ let sp = Ext.state.Manager.getProvider();
+ let advancedOn = sp.get('proxmox-advanced-cb');
+
Ext.apply(me, {
items: [
{
margins: '5 5 0 5',
fieldDefaults: {
labelWidth: 100,
- anchor: '100%'
+ anchor: '100%',
},
items: [{
itemId: 'wizcontent',
xtype: 'tabpanel',
activeItem: 0,
- bodyPadding: 10,
+ bodyPadding: 0,
listeners: {
afterrender: function(tp) {
- var atab = this.getActiveTab();
- tabchange(tp, atab);
+ tabchange(tp, this.getActiveTab());
},
tabchange: function(tp, newcard, oldcard) {
tabchange(tp, newcard, oldcard);
- }
+ },
},
- items: tabs
- }]
- }
+ defaults: {
+ padding: 10,
+ },
+ items: tabs,
+ }],
+ },
],
fbar: [
{
xtype: 'proxmoxHelpButton',
- itemId: 'help'
+ itemId: 'help',
},
'->',
+ {
+ xtype: 'proxmoxcheckbox',
+ boxLabelAlign: 'before',
+ boxLabel: gettext('Advanced'),
+ value: advancedOn,
+ listeners: {
+ change: function(_, value) {
+ let tp = me.down('#wizcontent');
+ tp.query('inputpanel').forEach(function(ip) {
+ ip.setAdvancedVisible(value);
+ });
+ sp.set('proxmox-advanced-cb', value);
+ },
+ },
+ },
{
text: gettext('Back'),
disabled: true,
itemId: 'back',
minWidth: 60,
handler: function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- var prev = tp.items.indexOf(atab) - 1;
+ let tp = me.down('#wizcontent');
+ let prev = tp.items.indexOf(tp.getActiveTab()) - 1;
if (prev < 0) {
return;
}
- var ntab = tp.items.getAt(prev);
+ let ntab = tp.items.getAt(prev);
if (ntab) {
tp.setActiveTab(ntab);
}
- }
+ },
},
{
text: gettext('Next'),
itemId: 'next',
minWidth: 60,
handler: function() {
-
- var form = me.down('form').getForm();
-
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- if (!check_card(atab)) {
+ let tp = me.down('#wizcontent');
+ let activeTab = tp.getActiveTab();
+ if (!check_card(activeTab)) {
return;
}
-
- var next = tp.items.indexOf(atab) + 1;
- var ntab = tp.items.getAt(next);
+ let next = tp.items.indexOf(activeTab) + 1;
+ let ntab = tp.items.getAt(next);
if (ntab) {
ntab.enable();
tp.setActiveTab(ntab);
}
-
- }
+ },
},
{
text: gettext('Finish'),
hidden: true,
itemId: 'submit',
handler: function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- atab.onSubmit();
- }
- }
- ]
+ let tp = me.down('#wizcontent');
+ tp.getActiveTab().onSubmit();
+ },
+ },
+ ],
});
me.callParent();
+ Ext.Array.each(me.query('inputpanel'), function(panel) {
+ panel.setAdvancedVisible(advancedOn);
+ });
+
Ext.Array.each(me.query('field'), function(field) {
- var validcheck = function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- var valid = check_card(atab);
- me.down('#next').setDisabled(!valid);
- me.down('#submit').setDisabled(!valid);
- var next = tp.items.indexOf(atab) + 1;
- var ntab = tp.items.getAt(next);
- if (!valid) {
- disable_at(ntab);
- } else if (ntab && !atab.onSubmit) {
- ntab.enable();
+ let validcheck = function() {
+ let tp = me.down('#wizcontent');
+
+ // check validity for current to last enabled tab, as local change may affect validity of a later one
+ for (let i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
+ let tab = tp.items.getAt(i);
+ let valid = check_card(tab);
+
+ // only set the buttons on the current panel
+ if (i === curidx) {
+ me.down('#next').setDisabled(!valid);
+ me.down('#submit').setDisabled(!valid);
+ }
+ // if a panel is invalid, then disable all following, else enable the next tab
+ let nextTab = tp.items.getAt(i + 1);
+ if (!valid) {
+ disableTab(nextTab);
+ return;
+ } else if (nextTab && !tab.onSubmit) {
+ nextTab.enable();
+ }
}
};
field.on('change', validcheck);
field.on('validitychange', validcheck);
});
- }
+ },
});
projects / pve-manager.git / blobdiff