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
 200                         var form = me.down('form').getForm();
 201
 202                         var tp = me.down('#wizcontent');
 203                         var atab = tp.getActiveTab();
 204                         if (!check_card(atab)) {
 205                             return;
 206                         }
 207
 208                         var next = tp.items.indexOf(atab) + 1;
 209                         var ntab = tp.items.getAt(next);
 210                         if (ntab) {
 211                             ntab.enable();
 212                             tp.setActiveTab(ntab);
 213                         }
 214
 215                     }
 216                 },
 217                 {
 218                     text: gettext('Finish'),
 219                     minWidth: 60,
 220                     hidden: true,
 221                     itemId: 'submit',
 222                     handler: function() {
 223                         var tp = me.down('#wizcontent');
 224                         var atab = tp.getActiveTab();
 225                         atab.onSubmit();
 226                     }
 227                 }
 228             ]
 229         });
 230         me.callParent();
 231
 232         Ext.Array.each(me.query('inputpanel'), function(panel) {
 233             panel.setAdvancedVisible(advchecked);
 234         });
 235
 236         Ext.Array.each(me.query('field'), function(field) {
 237             var validcheck = function() {
 238                 var tp = me.down('#wizcontent');
 239
 240                 // check tabs from current to the last enabled for validity
 241                 // since we might have changed a validity on a later one
 242                 var i;
 243                 for (i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
 244                     var tab = tp.items.getAt(i);
 245                     var valid = check_card(tab);
 246
 247                     // only set the buttons on the current panel
 248                     if (i === curidx) {
 249                         me.down('#next').setDisabled(!valid);
 250                         me.down('#submit').setDisabled(!valid);
 251                     }
 252
 253                     // if a panel is invalid, then disable it and all following,
 254                     // else enable it and go to the next
 255                     var ntab = tp.items.getAt(i + 1);
 256                     if (!valid) {
 257                         disable_at(ntab);
 258                         return;
 259                     } else if (ntab && !tab.onSubmit) {
 260                         ntab.enable();
 261                     }
 262                 }
 263             };
 264             field.on('change', validcheck);
 265             field.on('validitychange', validcheck);
 266         });
 267     }
 268 });