www/manager6/window/Wizard.js

   1 Ext.define('PVE.window.Wizard', {
   2     extend: 'Ext.window.Window',
   3
   4     activeTitle: '', // used for automated testing
   5
   6     width: 700,
   7     height: 510,
   8
   9     modal: true,
  10     border: false,
  11
  12     draggable: true,
  13     closable: true,
  14     resizable: false,
  15
  16     layout: 'border',
  17
  18     getValues: function(dirtyOnly) {
  19         var me = this;
  20
  21         var values = {};
  22
  23         var form = me.down('form').getForm();
  24
  25         form.getFields().each(function(field) {
  26             if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
  27                 Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
  28             }
  29         });
  30
  31         Ext.Array.each(me.query('inputpanel'), function(panel) {
  32             Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
  33         });
  34
  35         return values;
  36     },
  37
  38     initComponent: function() {
  39         var me = this;
  40
  41         var tabs = me.items || [];
  42         delete me.items;
  43
  44         /*
  45          * Items may have the following functions:
  46          * validator(): per tab custom validation
  47          * onSubmit(): submit handler
  48          * onGetValues(): overwrite getValues results
  49          */
  50
  51         Ext.Array.each(tabs, function(tab) {
  52             tab.disabled = true;
  53         });
  54         tabs[0].disabled = false;
  55
  56         var maxidx = 0;
  57         var curidx = 0;
  58
  59         var check_card = function(card) {
  60             var valid = true;
  61             var fields = card.query('field, fieldcontainer');
  62             if (card.isXType('fieldcontainer')) {
  63                 fields.unshift(card);
  64             }
  65             Ext.Array.each(fields, function(field) {
  66                 // Note: not all fielcontainer have isValid()
  67                 if (Ext.isFunction(field.isValid) && !field.isValid()) {
  68                     valid = false;
  69                 }
  70             });
  71
  72             if (Ext.isFunction(card.validator)) {
  73                 return card.validator();
  74             }
  75
  76             return valid;
  77         };
  78
  79         var disable_at = function(card) {
  80             var tp = me.down('#wizcontent');
  81             var idx = tp.items.indexOf(card);
  82             for (;idx < tp.items.getCount(); idx++) {
  83                 var nc = tp.items.getAt(idx);
  84                 if (nc) {
  85                     nc.disable();
  86                 }
  87             }
  88         };
  89
  90         var tabchange = function(tp, newcard, oldcard) {
  91             if (newcard.onSubmit) {
  92                 me.down('#next').setVisible(false);
  93                 me.down('#submit').setVisible(true);
  94             } else {
  95                 me.down('#next').setVisible(true);
  96                 me.down('#submit').setVisible(false);
  97             }
  98             var valid = check_card(newcard);
  99             me.down('#next').setDisabled(!valid);
 100             me.down('#submit').setDisabled(!valid);
 101             me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
 102
 103             var idx = tp.items.indexOf(newcard);
 104             if (idx > maxidx) {
 105                 maxidx = idx;
 106             }
 107             curidx = idx;
 108
 109             var next = idx + 1;
 110             var ntab = tp.items.getAt(next);
 111             if (valid && ntab && !newcard.onSubmit) {
 112                 ntab.enable();
 113             }
 114         };
 115
 116         if (me.subject && !me.title) {
 117             me.title = Proxmox.Utils.dialog_title(me.subject, true, false);
 118         }
 119
 120         var sp = Ext.state.Manager.getProvider();
 121         var advchecked = sp.get('proxmox-advanced-cb');
 122
 123         Ext.apply(me, {
 124             items: [
 125                 {
 126                     xtype: 'form',
 127                     region: 'center',
 128                     layout: 'fit',
 129                     border: false,
 130                     margins: '5 5 0 5',
 131                     fieldDefaults: {
 132                         labelWidth: 100,
 133                         anchor: '100%',
 134                     },
 135                     items: [{
 136                         itemId: 'wizcontent',
 137                         xtype: 'tabpanel',
 138                         activeItem: 0,
 139                         bodyPadding: 10,
 140                         listeners: {
 141                             afterrender: function(tp) {
 142                                 var atab = this.getActiveTab();
 143                                 tabchange(tp, atab);
 144                             },
 145                             tabchange: function(tp, newcard, oldcard) {
 146                                 tabchange(tp, newcard, oldcard);
 147                             },
 148                         },
 149                         items: tabs,
 150                     }],
 151                 },
 152             ],
 153             fbar: [
 154                 {
 155                     xtype: 'proxmoxHelpButton',
 156                     itemId: 'help',
 157                 },
 158                 '->',
 159                 {
 160                     xtype: 'proxmoxcheckbox',
 161                     boxLabelAlign: 'before',
 162                     boxLabel: gettext('Advanced'),
 163                     value: advchecked,
 164                     listeners: {
 165                         change: function(cb, val) {
 166                             var tp = me.down('#wizcontent');
 167                             tp.query('inputpanel').forEach(function(ip) {
 168                                 ip.setAdvancedVisible(val);
 169                             });
 170
 171                             sp.set('proxmox-advanced-cb', val);
 172                         },
 173                     },
 174                 },
 175                 {
 176                     text: gettext('Back'),
 177                     disabled: true,
 178                     itemId: 'back',
 179                     minWidth: 60,
 180                     handler: function() {
 181                         var tp = me.down('#wizcontent');
 182                         var atab = tp.getActiveTab();
 183                         var prev = tp.items.indexOf(atab) - 1;
 184                         if (prev < 0) {
 185                             return;
 186                         }
 187                         var ntab = tp.items.getAt(prev);
 188                         if (ntab) {
 189                             tp.setActiveTab(ntab);
 190                         }
 191                     },
 192                 },
 193                 {
 194                     text: gettext('Next'),
 195                     disabled: true,
 196                     itemId: 'next',
 197                     minWidth: 60,
 198                     handler: function() {
 199                         var form = me.down('form').getForm();
 200
 201                         var tp = me.down('#wizcontent');
 202                         var atab = tp.getActiveTab();
 203                         if (!check_card(atab)) {
 204                             return;
 205                         }
 206
 207                         var next = tp.items.indexOf(atab) + 1;
 208                         var ntab = tp.items.getAt(next);
 209                         if (ntab) {
 210                             ntab.enable();
 211                             tp.setActiveTab(ntab);
 212                         }
 213                     },
 214                 },
 215                 {
 216                     text: gettext('Finish'),
 217                     minWidth: 60,
 218                     hidden: true,
 219                     itemId: 'submit',
 220                     handler: function() {
 221                         var tp = me.down('#wizcontent');
 222                         var atab = tp.getActiveTab();
 223                         atab.onSubmit();
 224                     },
 225                 },
 226             ],
 227         });
 228         me.callParent();
 229
 230         Ext.Array.each(me.query('inputpanel'), function(panel) {
 231             panel.setAdvancedVisible(advchecked);
 232         });
 233
 234         Ext.Array.each(me.query('field'), function(field) {
 235             var validcheck = function() {
 236                 var tp = me.down('#wizcontent');
 237
 238                 // check tabs from current to the last enabled for validity
 239                 // since we might have changed a validity on a later one
 240                 var i;
 241                 for (i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
 242                     var tab = tp.items.getAt(i);
 243                     var valid = check_card(tab);
 244
 245                     // only set the buttons on the current panel
 246                     if (i === curidx) {
 247                         me.down('#next').setDisabled(!valid);
 248                         me.down('#submit').setDisabled(!valid);
 249                     }
 250
 251                     // if a panel is invalid, then disable it and all following,
 252                     // else enable it and go to the next
 253                     var ntab = tp.items.getAt(i + 1);
 254                     if (!valid) {
 255                         disable_at(ntab);
 256                         return;
 257                     } else if (ntab && !tab.onSubmit) {
 258                         ntab.enable();
 259                     }
 260                 }
 261             };
 262             field.on('change', validcheck);
 263             field.on('validitychange', validcheck);
 264         });
 265     },
 266 });