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         let maxidx = 0, curidx = 0;
  57
  58         let check_card = function(card) {
  59             let fields = card.query('field, fieldcontainer');
  60             if (card.isXType('fieldcontainer')) {
  61                 fields.unshift(card);
  62             }
  63             let valid = true;
  64             for (const field of fields) {
  65                 // Note: not all fielcontainer have isValid()
  66                 if (Ext.isFunction(field.isValid) && !field.isValid()) {
  67                     valid = false;
  68                 }
  69             }
  70             if (Ext.isFunction(card.validator)) {
  71                 return card.validator();
  72             }
  73             return valid;
  74         };
  75
  76         let disableTab = function(card) {
  77             let tp = me.down('#wizcontent');
  78             for (let idx = tp.items.indexOf(card); idx < tp.items.getCount(); idx++) {
  79                 let tab = tp.items.getAt(idx);
  80                 if (tab) {
  81                     tab.disable();
  82                 }
  83             }
  84         };
  85
  86         let tabchange = function(tp, newcard, oldcard) {
  87             if (newcard.onSubmit) {
  88                 me.down('#next').setVisible(false);
  89                 me.down('#submit').setVisible(true);
  90             } else {
  91                 me.down('#next').setVisible(true);
  92                 me.down('#submit').setVisible(false);
  93             }
  94             let valid = check_card(newcard);
  95             me.down('#next').setDisabled(!valid);
  96             me.down('#submit').setDisabled(!valid);
  97             me.down('#back').setDisabled(tp.items.indexOf(newcard) === 0);
  98
  99             let idx = tp.items.indexOf(newcard);
 100             if (idx > maxidx) {
 101                 maxidx = idx;
 102             }
 103             curidx = idx;
 104
 105             let ntab = tp.items.getAt(idx + 1);
 106             if (valid && ntab && !newcard.onSubmit) {
 107                 ntab.enable();
 108             }
 109         };
 110
 111         if (me.subject && !me.title) {
 112             me.title = Proxmox.Utils.dialog_title(me.subject, true, false);
 113         }
 114
 115         let sp = Ext.state.Manager.getProvider();
 116         let advancedOn = sp.get('proxmox-advanced-cb');
 117
 118         Ext.apply(me, {
 119             items: [
 120                 {
 121                     xtype: 'form',
 122                     region: 'center',
 123                     layout: 'fit',
 124                     border: false,
 125                     margins: '5 5 0 5',
 126                     fieldDefaults: {
 127                         labelWidth: 100,
 128                         anchor: '100%',
 129                     },
 130                     items: [{
 131                         itemId: 'wizcontent',
 132                         xtype: 'tabpanel',
 133                         activeItem: 0,
 134                         bodyPadding: 0,
 135                         listeners: {
 136                             afterrender: function(tp) {
 137                                 tabchange(tp, this.getActiveTab());
 138                             },
 139                             tabchange: function(tp, newcard, oldcard) {
 140                                 tabchange(tp, newcard, oldcard);
 141                             },
 142                         },
 143                         defaults: {
 144                             padding: 10,
 145                         },
 146                         items: tabs,
 147                     }],
 148                 },
 149             ],
 150             fbar: [
 151                 {
 152                     xtype: 'proxmoxHelpButton',
 153                     itemId: 'help',
 154                 },
 155                 '->',
 156                 {
 157                     xtype: 'proxmoxcheckbox',
 158                     boxLabelAlign: 'before',
 159                     boxLabel: gettext('Advanced'),
 160                     value: advancedOn,
 161                     listeners: {
 162                         change: function(_, value) {
 163                             let tp = me.down('#wizcontent');
 164                             tp.query('inputpanel').forEach(function(ip) {
 165                                 ip.setAdvancedVisible(value);
 166                             });
 167                             sp.set('proxmox-advanced-cb', value);
 168                         },
 169                     },
 170                 },
 171                 {
 172                     text: gettext('Back'),
 173                     disabled: true,
 174                     itemId: 'back',
 175                     minWidth: 60,
 176                     handler: function() {
 177                         let tp = me.down('#wizcontent');
 178                         let prev = tp.items.indexOf(tp.getActiveTab()) - 1;
 179                         if (prev < 0) {
 180                             return;
 181                         }
 182                         let ntab = tp.items.getAt(prev);
 183                         if (ntab) {
 184                             tp.setActiveTab(ntab);
 185                         }
 186                     },
 187                 },
 188                 {
 189                     text: gettext('Next'),
 190                     disabled: true,
 191                     itemId: 'next',
 192                     minWidth: 60,
 193                     handler: function() {
 194                         let tp = me.down('#wizcontent');
 195                         let activeTab = tp.getActiveTab();
 196                         if (!check_card(activeTab)) {
 197                             return;
 198                         }
 199                         let next = tp.items.indexOf(activeTab) + 1;
 200                         let ntab = tp.items.getAt(next);
 201                         if (ntab) {
 202                             ntab.enable();
 203                             tp.setActiveTab(ntab);
 204                         }
 205                     },
 206                 },
 207                 {
 208                     text: gettext('Finish'),
 209                     minWidth: 60,
 210                     hidden: true,
 211                     itemId: 'submit',
 212                     handler: function() {
 213                         let tp = me.down('#wizcontent');
 214                         tp.getActiveTab().onSubmit();
 215                     },
 216                 },
 217             ],
 218         });
 219         me.callParent();
 220
 221         Ext.Array.each(me.query('inputpanel'), function(panel) {
 222             panel.setAdvancedVisible(advancedOn);
 223         });
 224
 225         Ext.Array.each(me.query('field'), function(field) {
 226             let validcheck = function() {
 227                 let tp = me.down('#wizcontent');
 228
 229                 // check validity for current to last enabled tab, as local change may affect validity of a later one
 230                 for (let i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
 231                     let tab = tp.items.getAt(i);
 232                     let valid = check_card(tab);
 233
 234                     // only set the buttons on the current panel
 235                     if (i === curidx) {
 236                         me.down('#next').setDisabled(!valid);
 237                         me.down('#submit').setDisabled(!valid);
 238                     }
 239                     // if a panel is invalid, then disable all following, else enable the next tab
 240                     let nextTab = tp.items.getAt(i + 1);
 241                     if (!valid) {
 242                         disableTab(nextTab);
 243                         return;
 244                     } else if (nextTab && !tab.onSubmit) {
 245                         nextTab.enable();
 246                     }
 247                 }
 248             };
 249             field.on('change', validcheck);
 250             field.on('validitychange', validcheck);
 251         });
 252     },
 253 });