X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=www%2Fmanager6%2Fwindow%2FWizard.js;h=4aacb8a33c9a9376516263c819eb843e29a9329a;hb=b61d079afca72b6d17fac1ab4c9507be097ae80e;hp=87e4bf0a0de31208839159fb2b2365b165ab431e;hpb=3e0ea4041476520996a0a44274284512ab661af0;p=pve-manager.git diff --git a/www/manager6/window/Wizard.js b/www/manager6/window/Wizard.js index 87e4bf0a..4aacb8a3 100644 --- a/www/manager6/window/Wizard.js +++ b/www/manager6/window/Wizard.js @@ -3,7 +3,7 @@ Ext.define('PVE.window.Wizard', { activeTitle: '', // used for automated testing - width: 700, + width: 720, height: 510, modal: true, @@ -16,19 +16,17 @@ Ext.define('PVE.window.Wizard', { 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)); }); @@ -40,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 @@ -53,61 +51,56 @@ Ext.define('PVE.window.Wizard', { }); tabs[0].disabled = false; - var maxidx = 0; - var curidx = 0; + let maxidx = 0, curidx = 0; - var check_card = function(card) { - var valid = true; - var fields = card.query('field, fieldcontainer'); + 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); - var idx = tp.items.indexOf(newcard); + let idx = tp.items.indexOf(newcard); if (idx > maxidx) { maxidx = idx; } curidx = idx; - var next = idx + 1; - var ntab = tp.items.getAt(next); + let ntab = tp.items.getAt(idx + 1); if (valid && ntab && !newcard.onSubmit) { ntab.enable(); } @@ -117,8 +110,8 @@ Ext.define('PVE.window.Wizard', { me.title = Proxmox.Utils.dialog_title(me.subject, true, false); } - var sp = Ext.state.Manager.getProvider(); - var advchecked = sp.get('proxmox-advanced-cb'); + let sp = Ext.state.Manager.getProvider(); + let advancedOn = sp.get('proxmox-advanced-cb'); Ext.apply(me, { items: [ @@ -130,47 +123,48 @@ 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: advchecked, + value: advancedOn, listeners: { - change: function(cb, val) { - var tp = me.down('#wizcontent'); + change: function(_, value) { + let tp = me.down('#wizcontent'); tp.query('inputpanel').forEach(function(ip) { - ip.setAdvancedVisible(val); + ip.setAdvancedVisible(value); }); - - sp.set('proxmox-advanced-cb', val); - } - } + sp.set('proxmox-advanced-cb', value); + }, + }, }, { text: gettext('Back'), @@ -178,17 +172,16 @@ Ext.define('PVE.window.Wizard', { 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'), @@ -196,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'), @@ -220,49 +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(advchecked); + panel.setAdvancedVisible(advancedOn); }); Ext.Array.each(me.query('field'), function(field) { - var validcheck = function() { - var tp = me.down('#wizcontent'); + let validcheck = function() { + let tp = me.down('#wizcontent'); - // check tabs from current to the last enabled for validity - // since we might have changed a validity on a later one - var i; - for (i = curidx; i <= maxidx && i < tp.items.getCount(); i++) { - var tab = tp.items.getAt(i); - var valid = check_card(tab); + // 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 it and all following, - // else enable it and go to the next - var ntab = tp.items.getAt(i + 1); + // if a panel is invalid, then disable all following, else enable the next tab + let nextTab = tp.items.getAt(i + 1); if (!valid) { - disable_at(ntab); + disableTab(nextTab); return; - } else if (ntab && !tab.onSubmit) { - ntab.enable(); + } else if (nextTab && !tab.onSubmit) { + nextTab.enable(); } } }; field.on('change', validcheck); field.on('validitychange', validcheck); }); - } + }, });