X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=www%2Fmanager6%2Fwindow%2FWizard.js;h=6afadc79aada3bdbd1e9f170d183f3a378fb0c0c;hb=911a62c5923227c0e71303d7ce0cf2b17fb3d85e;hp=c9a695b90b9143f07df7a15342175edf28b869f8;hpb=18f4718ffd80b5a802cb00d4291ef58930a43a63;p=pve-manager.git diff --git a/www/manager6/window/Wizard.js b/www/manager6/window/Wizard.js index c9a695b9..6afadc79 100644 --- a/www/manager6/window/Wizard.js +++ b/www/manager6/window/Wizard.js @@ -2,21 +2,31 @@ Ext.define('PVE.window.Wizard', { extend: 'Ext.window.Window', activeTitle: '', // used for automated testing - - getValues: function(dirtyOnly) { - var me = this; - var values = {}; + width: 720, + height: 540, - var form = me.down('form').getForm(); + modal: true, + border: false, - form.getFields().each(function(field) { - if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { - Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); - } - }); + draggable: true, + closable: true, + resizable: false, - Ext.Array.each(me.query('inputpanel'), function(panel) { + 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)); }); @@ -28,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 @@ -41,52 +51,56 @@ 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 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); + } + 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; } - var valid = check_card(newcard); - me.down('#next').setDisabled(!valid); - me.down('#submit').setDisabled(!valid); - me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0); + 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(); } @@ -96,15 +110,10 @@ Ext.define('PVE.window.Wizard', { 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: 700, - height: 510, - modal: true, - border: false, - draggable: true, - closable: true, - resizable: false, - layout: 'border', items: [ { xtype: 'form', @@ -114,49 +123,65 @@ 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) { 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'), @@ -164,23 +189,18 @@ Ext.define('PVE.window.Wizard', { 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'), @@ -188,32 +208,44 @@ Ext.define('PVE.window.Wizard', { 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); }); - } + }, });