www/manager/window/Wizard.js

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