]> git.proxmox.com Git - pve-manager.git/blobdiff - www/manager6/window/Wizard.js
ui: eslint: fix various spacing related issues
[pve-manager.git] / www / manager6 / window / Wizard.js
index fe5f8dd02d1e2621d71c98f062a4a9a69964939d..8b930bbdb52766a1176caf3cd14821a8aa6d1999 100644 (file)
@@ -2,7 +2,19 @@ Ext.define('PVE.window.Wizard', {
     extend: 'Ext.window.Window',
 
     activeTitle: '', // used for automated testing
-    
+
+    width: 700,
+    height: 510,
+
+    modal: true,
+    border: false,
+
+    draggable: true,
+    closable: true,
+    resizable: false,
+
+    layout: 'border',
+
     getValues: function(dirtyOnly) {
        var me = this;
 
@@ -28,8 +40,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,6 +53,9 @@ Ext.define('PVE.window.Wizard', {
        });
        tabs[0].disabled = false;
 
+       var maxidx = 0;
+       var curidx = 0;
+
        var check_card = function(card) {
            var valid = true;
            var fields = card.query('field, fieldcontainer');
@@ -61,88 +76,10 @@ Ext.define('PVE.window.Wizard', {
            return valid;
        };
 
-
-       var tbar = Ext.create('Ext.toolbar.Toolbar', {
-            ui: 'footer',
-           region: 'south',
-           margins: '0 5 5 5',
-           items: [  
-               {
-                   xtype: 'proxmoxHelpButton',
-                   itemId: 'help'
-               },
-               '->', 
-               { 
-                   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();
-                   }
-               }
-           ]
-       });
-
-       var display_header = function(newcard) {
-           me.activeTitle = newcard.title;
-           var html = '<h1>' + newcard.title + '</h1>';
-           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++) {
+           for (;idx < tp.items.getCount(); idx++) {
                var nc = tp.items.getAt(idx);
                if (nc) {
                    nc.disable();
@@ -153,17 +90,23 @@ Ext.define('PVE.window.Wizard', {
        var 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('#next').setDisabled(!valid);
+           me.down('#submit').setDisabled(!valid);
            me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
 
-           var next = tp.items.indexOf(newcard) + 1;
+           var idx = tp.items.indexOf(newcard);
+           if (idx > maxidx) {
+               maxidx = idx;
+           }
+           curidx = idx;
+
+           var next = idx + 1;
            var ntab = tp.items.getAt(next);
            if (valid && ntab && !newcard.onSubmit) {
                ntab.enable();
@@ -174,26 +117,11 @@ 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');
+
        Ext.apply(me, {
-           width: 700,
-           height: 510,
-           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',
@@ -202,7 +130,7 @@ Ext.define('PVE.window.Wizard', {
                    margins: '5 5 0 5',
                    fieldDefaults: {
                        labelWidth: 100,
-                       anchor: '100%'
+                       anchor: '100%',
                    },
                    items: [{
                        itemId: 'wizcontent',
@@ -215,36 +143,124 @@ Ext.define('PVE.window.Wizard', {
                                tabchange(tp, atab);
                            },
                            tabchange: function(tp, newcard, oldcard) {
-                               display_header(newcard);
                                tabchange(tp, newcard, oldcard);
-                           }
+                           },
+                       },
+                       items: tabs,
+                   }],
+               },
+           ],
+           fbar: [
+               {
+                   xtype: 'proxmoxHelpButton',
+                   itemId: 'help',
+               },
+               '->',
+               {
+                   xtype: 'proxmoxcheckbox',
+                   boxLabelAlign: 'before',
+                   boxLabel: gettext('Advanced'),
+                   value: advchecked,
+                   listeners: {
+                       change: function(cb, val) {
+                           var tp = me.down('#wizcontent');
+                           tp.query('inputpanel').forEach(function(ip) {
+                               ip.setAdvancedVisible(val);
+                           });
+
+                           sp.set('proxmox-advanced-cb', val);
                        },
-                       items: tabs
-                   }]
+                   },
+               },
+               {
+                   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();
+                   },
                },
-               tbar
-           ]
+           ],
        });
        me.callParent();
-       display_header(tabs[0]);
+
+       Ext.Array.each(me.query('inputpanel'), function(panel) {
+           panel.setAdvancedVisible(advchecked);
+       });
 
        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();
+
+               // 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);
+
+                   // 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 (!valid) {
+                       disable_at(ntab);
+                       return;
+                   } else if (ntab && !tab.onSubmit) {
+                       ntab.enable();
+                   }
                }
            };
            field.on('change', validcheck);
            field.on('validitychange', validcheck);
        });
-    }
+    },
 });