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 check_card = function(card) {
  57             var valid = true;
  58             var fields = card.query('field, fieldcontainer');
  59             if (card.isXType('fieldcontainer')) {
  60                 fields.unshift(card);
  61             }
  62             Ext.Array.each(fields, function(field) {
  63                 // Note: not all fielcontainer have isValid()
  64                 if (Ext.isFunction(field.isValid) && !field.isValid()) {
  65                     valid = false;
  66                 }
  67             });
  68
  69             if (Ext.isFunction(card.validator)) {
  70                 return card.validator();
  71             }
  72
  73             return valid;
  74         };
  75
  76         var disable_at = function(card) {
  77             var tp = me.down('#wizcontent');
  78             var idx = tp.items.indexOf(card);
  79             for(;idx < tp.items.getCount();idx++) {
  80                 var nc = tp.items.getAt(idx);
  81                 if (nc) {
  82                     nc.disable();
  83                 }
  84             }
  85         };
  86
  87         var tabchange = function(tp, newcard, oldcard) {
  88             if (newcard.onSubmit) {
  89                 me.down('#next').setVisible(false);
  90                 me.down('#submit').setVisible(true);
  91             } else {
  92                 me.down('#next').setVisible(true);
  93                 me.down('#submit').setVisible(false);
  94             }
  95             var valid = check_card(newcard);
  96             me.down('#next').setDisabled(!valid);
  97             me.down('#submit').setDisabled(!valid);
  98             me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
  99
 100             var next = tp.items.indexOf(newcard) + 1;
 101             var ntab = tp.items.getAt(next);
 102             if (valid && ntab && !newcard.onSubmit) {
 103                 ntab.enable();
 104             }
 105         };
 106
 107         if (me.subject && !me.title) {
 108             me.title = Proxmox.Utils.dialog_title(me.subject, true, false);
 109         }
 110
 111         Ext.apply(me, {
 112             items: [
 113                 {
 114                     xtype: 'form',
 115                     region: 'center',
 116                     layout: 'fit',
 117                     border: false,
 118                     margins: '5 5 0 5',
 119                     fieldDefaults: {
 120                         labelWidth: 100,
 121                         anchor: '100%'
 122                     },
 123                     items: [{
 124                         itemId: 'wizcontent',
 125                         xtype: 'tabpanel',
 126                         activeItem: 0,
 127                         bodyPadding: 10,
 128                         listeners: {
 129                             afterrender: function(tp) {
 130                                 var atab = this.getActiveTab();
 131                                 tabchange(tp, atab);
 132                             },
 133                             tabchange: function(tp, newcard, oldcard) {
 134                                 tabchange(tp, newcard, oldcard);
 135                             }
 136                         },
 137                         items: tabs
 138                     }]
 139                 }
 140             ],
 141             fbar: [
 142                 {
 143                     xtype: 'proxmoxHelpButton',
 144                     itemId: 'help'
 145                 },
 146                 '->',
 147                 {
 148                     text: gettext('Back'),
 149                     disabled: true,
 150                     itemId: 'back',
 151                     minWidth: 60,
 152                     handler: function() {
 153                         var tp = me.down('#wizcontent');
 154                         var atab = tp.getActiveTab();
 155                         var prev = tp.items.indexOf(atab) - 1;
 156                         if (prev < 0) {
 157                             return;
 158                         }
 159                         var ntab = tp.items.getAt(prev);
 160                         if (ntab) {
 161                             tp.setActiveTab(ntab);
 162                         }
 163                     }
 164                 },
 165                 {
 166                     text: gettext('Next'),
 167                     disabled: true,
 168                     itemId: 'next',
 169                     minWidth: 60,
 170                     handler: function() {
 171
 172                         var form = me.down('form').getForm();
 173
 174                         var tp = me.down('#wizcontent');
 175                         var atab = tp.getActiveTab();
 176                         if (!check_card(atab)) {
 177                             return;
 178                         }
 179
 180                         var next = tp.items.indexOf(atab) + 1;
 181                         var ntab = tp.items.getAt(next);
 182                         if (ntab) {
 183                             ntab.enable();
 184                             tp.setActiveTab(ntab);
 185                         }
 186
 187                     }
 188                 },
 189                 {
 190                     text: gettext('Finish'),
 191                     minWidth: 60,
 192                     hidden: true,
 193                     itemId: 'submit',
 194                     handler: function() {
 195                         var tp = me.down('#wizcontent');
 196                         var atab = tp.getActiveTab();
 197                         atab.onSubmit();
 198                     }
 199                 }
 200             ]
 201         });
 202         me.callParent();
 203
 204         Ext.Array.each(me.query('field'), function(field) {
 205             var validcheck = function() {
 206                 var tp = me.down('#wizcontent');
 207                 var atab = tp.getActiveTab();
 208                 var valid = check_card(atab);
 209                 me.down('#next').setDisabled(!valid);
 210                 me.down('#submit').setDisabled(!valid);
 211                 var next = tp.items.indexOf(atab) + 1;
 212                 var ntab = tp.items.getAt(next);
 213                 if (!valid) {
 214                     disable_at(ntab);
 215                 } else if (ntab && !atab.onSubmit) {
 216                     ntab.enable();
 217                 }
 218             };
 219             field.on('change', validcheck);
 220             field.on('validitychange', validcheck);
 221         });
 222     }
 223 });