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