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: 10,
 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                         items: tabs,
 144                     }],
 145                 },
 146             ],
 147             fbar: [
 148                 {
 149                     xtype: 'proxmoxHelpButton',
 150                     itemId: 'help',
 151                 },
 152                 '->',
 153                 {
 154                     xtype: 'proxmoxcheckbox',
 155                     boxLabelAlign: 'before',
 156                     boxLabel: gettext('Advanced'),
 157                     value: advancedOn,
 158                     listeners: {
 159                         change: function(_, value) {
 160                             let tp = me.down('#wizcontent');
 161                             tp.query('inputpanel').forEach(function(ip) {
 162                                 ip.setAdvancedVisible(value);
 163                             });
 164                             sp.set('proxmox-advanced-cb', value);
 165                         },
 166                     },
 167                 },
 168                 {
 169                     text: gettext('Back'),
 170                     disabled: true,
 171                     itemId: 'back',
 172                     minWidth: 60,
 173                     handler: function() {
 174                         let tp = me.down('#wizcontent');
 175                         let prev = tp.items.indexOf(tp.getActiveTab()) - 1;
 176                         if (prev < 0) {
 177                             return;
 178                         }
 179                         let ntab = tp.items.getAt(prev);
 180                         if (ntab) {
 181                             tp.setActiveTab(ntab);
 182                         }
 183                     },
 184                 },
 185                 {
 186                     text: gettext('Next'),
 187                     disabled: true,
 188                     itemId: 'next',
 189                     minWidth: 60,
 190                     handler: function() {
 191                         let tp = me.down('#wizcontent');
 192                         let activeTab = tp.getActiveTab();
 193                         if (!check_card(activeTab)) {
 194                             return;
 195                         }
 196                         let next = tp.items.indexOf(activeTab) + 1;
 197                         let ntab = tp.items.getAt(next);
 198                         if (ntab) {
 199                             ntab.enable();
 200                             tp.setActiveTab(ntab);
 201                         }
 202                     },
 203                 },
 204                 {
 205                     text: gettext('Finish'),
 206                     minWidth: 60,
 207                     hidden: true,
 208                     itemId: 'submit',
 209                     handler: function() {
 210                         let tp = me.down('#wizcontent');
 211                         tp.getActiveTab().onSubmit();
 212                     },
 213                 },
 214             ],
 215         });
 216         me.callParent();
 217
 218         Ext.Array.each(me.query('inputpanel'), function(panel) {
 219             panel.setAdvancedVisible(advancedOn);
 220         });
 221
 222         Ext.Array.each(me.query('field'), function(field) {
 223             let validcheck = function() {
 224                 let tp = me.down('#wizcontent');
 225
 226                 // check validity for current to last enabled tab, as local change may affect validity of a later one
 227                 for (let i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
 228                     let tab = tp.items.getAt(i);
 229                     let valid = check_card(tab);
 230
 231                     // only set the buttons on the current panel
 232                     if (i === curidx) {
 233                         me.down('#next').setDisabled(!valid);
 234                         me.down('#submit').setDisabled(!valid);
 235                     }
 236                     // if a panel is invalid, then disable all following, else enable the next tab
 237                     let nextTab = tp.items.getAt(i + 1);
 238                     if (!valid) {
 239                         disableTab(nextTab);
 240                         return;
 241                     } else if (nextTab && !tab.onSubmit) {
 242                         nextTab.enable();
 243                     }
 244                 }
 245             };
 246             field.on('change', validcheck);
 247             field.on('validitychange', validcheck);
 248         });
 249     },
 250 });