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