X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=www%2Fmanager6%2Fwindow%2FWizard.js;h=6afadc79aada3bdbd1e9f170d183f3a378fb0c0c;hb=911a62c5923227c0e71303d7ce0cf2b17fb3d85e;hp=d6e22c1bc60ffef2fdad72dcfc7caea5f9e51a2e;hpb=dd8988e8a05f4d573ce3fa465b5418e077dd97ed;p=pve-manager.git
diff --git a/www/manager6/window/Wizard.js b/www/manager6/window/Wizard.js
index d6e22c1b..6afadc79 100644
--- a/www/manager6/window/Wizard.js
+++ b/www/manager6/window/Wizard.js
@@ -1,21 +1,33 @@
Ext.define('PVE.window.Wizard', {
extend: 'Ext.window.Window',
-
- getValues: function(dirtyOnly) {
- var me = this;
- var values = {};
+ activeTitle: '', // used for automated testing
- var form = me.down('form').getForm();
+ width: 720,
+ height: 540,
- form.getFields().each(function(field) {
- if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
- PVE.Utils.assemble_field_data(values, field.getSubmitData());
- }
- });
+ modal: true,
+ border: false,
- Ext.Array.each(me.query('inputpanel'), function(panel) {
- PVE.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
+ draggable: true,
+ closable: true,
+ resizable: false,
+
+ layout: 'border',
+
+ getValues: function(dirtyOnly) {
+ let me = this;
+
+ let values = {};
+
+ me.down('form').getForm().getFields().each(field => {
+ if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
+ Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
+ }
+ });
+
+ me.query('inputpanel').forEach(panel => {
+ Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
});
return values;
@@ -26,8 +38,8 @@ Ext.define('PVE.window.Wizard', {
var tabs = me.items || [];
delete me.items;
-
- /*
+
+ /*
* Items may have the following functions:
* validator(): per tab custom validation
* onSubmit(): submit handler
@@ -39,154 +51,70 @@ Ext.define('PVE.window.Wizard', {
});
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 tbar = Ext.create('Ext.toolbar.Toolbar', {
- ui: 'footer',
- region: 'south',
- margins: '0 5 5 5',
- items: [
- '->',
- {
- 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;
- if (prev < 0) {
- return;
- }
- var ntab = tp.items.getAt(prev);
- if (ntab) {
- tp.setActiveTab(ntab);
- }
-
-
- }
- },
- {
- text: gettext('Next'),
- disabled: true,
- 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)) {
- return;
- }
-
- var next = tp.items.indexOf(atab) + 1;
- var ntab = tp.items.getAt(next);
- if (ntab) {
- ntab.enable();
- tp.setActiveTab(ntab);
- }
-
- }
- },
- {
- text: gettext('Finish'),
- minWidth: 60,
- hidden: true,
- itemId: 'submit',
- handler: function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- atab.onSubmit();
- }
+ 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 display_header = function(newcard) {
- var html = '
' + newcard.title + '
';
- if (newcard.descr) {
- html += newcard.descr;
}
- me.down('#header').update(html);
};
- 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();
- }
- }
- };
-
- 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();
}
};
if (me.subject && !me.title) {
- me.title = PVE.Utils.dialog_title(me.subject, true, false);
+ 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, {
- width: 620,
- height: 450,
- modal: true,
- border: false,
- draggable: true,
- closable: true,
- resizable: false,
- layout: 'border',
items: [
- {
- // disabled for now - not really needed
- hidden: true,
- region: 'north',
- itemId: 'header',
- layout: 'fit',
- margins: '5 5 0 5',
- bodyPadding: 10,
- html: ''
- },
{
xtype: 'form',
region: 'center',
@@ -195,47 +123,129 @@ Ext.define('PVE.window.Wizard', {
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) {
- display_header(newcard);
tabchange(tp, newcard, oldcard);
- }
+ },
+ },
+ defaults: {
+ padding: 10,
+ },
+ items: tabs,
+ }],
+ },
+ ],
+ fbar: [
+ {
+ xtype: 'proxmoxHelpButton',
+ 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);
},
- items: tabs
- }]
+ },
+ },
+ {
+ text: gettext('Back'),
+ disabled: true,
+ itemId: 'back',
+ minWidth: 60,
+ handler: function() {
+ let tp = me.down('#wizcontent');
+ let prev = tp.items.indexOf(tp.getActiveTab()) - 1;
+ if (prev < 0) {
+ return;
+ }
+ let ntab = tp.items.getAt(prev);
+ if (ntab) {
+ tp.setActiveTab(ntab);
+ }
+ },
+ },
+ {
+ text: gettext('Next'),
+ disabled: true,
+ itemId: 'next',
+ minWidth: 60,
+ handler: function() {
+ let tp = me.down('#wizcontent');
+ let activeTab = tp.getActiveTab();
+ if (!check_card(activeTab)) {
+ return;
+ }
+ let next = tp.items.indexOf(activeTab) + 1;
+ let ntab = tp.items.getAt(next);
+ if (ntab) {
+ ntab.enable();
+ tp.setActiveTab(ntab);
+ }
+ },
},
- tbar
- ]
+ {
+ text: gettext('Finish'),
+ minWidth: 60,
+ hidden: true,
+ itemId: 'submit',
+ handler: function() {
+ let tp = me.down('#wizcontent');
+ tp.getActiveTab().onSubmit();
+ },
+ },
+ ],
});
me.callParent();
- display_header(tabs[0]);
+
+ Ext.Array.each(me.query('inputpanel'), function(panel) {
+ panel.setAdvancedVisible(advancedOn);
+ });
Ext.Array.each(me.query('field'), function(field) {
- field.on('change', function(f) {
- 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);
});
- }
+ },
});