src/window/Edit.js

   1 Ext.define('Proxmox.window.Edit', {
   2     extend: 'Ext.window.Window',
   3     alias: 'widget.proxmoxWindowEdit',
   4
   5     // autoLoad trigger a load() after component creation
   6     autoLoad: false,
   7     // set extra options like params for the load request
   8     autoLoadOptions: undefined,
   9
  10     // to submit extra params on load and submit, useful, e.g., if not all ID
  11     // parameters are included in the URL
  12     extraRequestParams: {},
  13
  14     resizable: false,
  15
  16     // use this to atimatically generate a title like `Create: <subject>`
  17     subject: undefined,
  18
  19     // set isCreate to true if you want a Create button (instead OK and RESET)
  20     isCreate: false,
  21
  22     // set to true if you want an Add button (instead of Create)
  23     isAdd: false,
  24
  25     // set to true if you want an Remove button (instead of Create)
  26     isRemove: false,
  27
  28     // custom submitText
  29     submitText: undefined,
  30
  31     backgroundDelay: 0,
  32
  33     // string or function, called as (url, values) - useful if the ID of the
  34     // new object is part of the URL, or that URL differs from GET/PUT URL
  35     submitUrl: Ext.identityFn,
  36
  37     // string or function, called as (url, initialConfig) - mostly for
  38     // consistency with submitUrl existing. If both are set `url` gets optional
  39     loadUrl: Ext.identityFn,
  40
  41     // needed for finding the reference to submitbutton
  42     // because we do not have a controller
  43     referenceHolder: true,
  44     defaultButton: 'submitbutton',
  45
  46     // finds the first form field
  47     defaultFocus: 'field:focusable[disabled=false][hidden=false]',
  48
  49     showProgress: false,
  50
  51     showTaskViewer: false,
  52
  53     // gets called if we have a progress bar or taskview and it detected that
  54     // the task finished. function(success)
  55     taskDone: Ext.emptyFn,
  56
  57     // gets called when the api call is finished, right at the beginning
  58     // function(success, response, options)
  59     apiCallDone: Ext.emptyFn,
  60
  61     // assign a reference from docs, to add a help button docked to the
  62     // bottom of the window. If undefined we magically fall back to the
  63     // onlineHelp of our first item, if set.
  64     onlineHelp: undefined,
  65
  66     isValid: function() {
  67         let me = this;
  68
  69         let form = me.formPanel.getForm();
  70         return form.isValid();
  71     },
  72
  73     getValues: function(dirtyOnly) {
  74         let me = this;
  75
  76         let values = {};
  77         Ext.apply(values, me.extraRequestParams);
  78
  79         let form = me.formPanel.getForm();
  80
  81         form.getFields().each(function(field) {
  82             if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
  83                 Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
  84             }
  85         });
  86
  87         Ext.Array.each(me.query('inputpanel'), function(panel) {
  88             Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
  89         });
  90
  91         return values;
  92     },
  93
  94     setValues: function(values) {
  95         let me = this;
  96
  97         let form = me.formPanel.getForm();
  98         let formfields = form.getFields();
  99
 100         Ext.iterate(values, function(id, val) {
 101             let fields = formfields.filterBy((f) =>
 102                 (f.id === id || f.name === id || f.dataIndex === id) && !f.up('inputpanel'),
 103             );
 104             fields.each((field) => {
 105                 field.setValue(val);
 106                 if (form.trackResetOnLoad) {
 107                     field.resetOriginalValue();
 108                 }
 109             });
 110         });
 111
 112         Ext.Array.each(me.query('inputpanel'), function(panel) {
 113             panel.setValues(values);
 114         });
 115     },
 116
 117     setSubmitText: function(text) {
 118         this.lookup('submitbutton').setText(text);
 119     },
 120
 121     submit: function() {
 122         let me = this;
 123
 124         let form = me.formPanel.getForm();
 125
 126         let values = me.getValues();
 127         Ext.Object.each(values, function(name, val) {
 128             if (Object.prototype.hasOwnProperty.call(values, name)) {
 129                 if (Ext.isArray(val) && !val.length) {
 130                     values[name] = '';
 131                 }
 132             }
 133         });
 134
 135         if (me.digest) {
 136             values.digest = me.digest;
 137         }
 138
 139         if (me.backgroundDelay) {
 140             values.background_delay = me.backgroundDelay;
 141         }
 142
 143         let url = Ext.isFunction(me.submitUrl)
 144             ? me.submitUrl(me.url, values)
 145             : me.submitUrl || me.url;
 146         if (me.method === 'DELETE') {
 147             url = url + "?" + Ext.Object.toQueryString(values);
 148             values = undefined;
 149         }
 150
 151         Proxmox.Utils.API2Request({
 152             url: url,
 153             waitMsgTarget: me,
 154             method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'),
 155             params: values,
 156             failure: function(response, options) {
 157                 me.apiCallDone(false, response, options);
 158
 159                 if (response.result && response.result.errors) {
 160                     form.markInvalid(response.result.errors);
 161                 }
 162                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 163             },
 164             success: function(response, options) {
 165                 let hasProgressBar =
 166                     (me.backgroundDelay || me.showProgress || me.showTaskViewer) &&
 167                     response.result.data;
 168
 169                 me.apiCallDone(true, response, options);
 170
 171                 if (hasProgressBar) {
 172                     // stay around so we can trigger our close events
 173                     // when background action is completed
 174                     me.hide();
 175
 176                     let upid = response.result.data;
 177                     let viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress';
 178                     Ext.create('Proxmox.window.Task' + viewerClass, {
 179                         autoShow: true,
 180                         upid: upid,
 181                         taskDone: me.taskDone,
 182                         listeners: {
 183                             destroy: function() {
 184                                 me.close();
 185                             },
 186                         },
 187                     });
 188                 } else {
 189                     me.close();
 190                 }
 191             },
 192         });
 193     },
 194
 195     load: function(options) {
 196         let me = this;
 197
 198         let form = me.formPanel.getForm();
 199
 200         options = options || {};
 201
 202         let newopts = Ext.apply({
 203             waitMsgTarget: me,
 204         }, options);
 205
 206         if (Object.keys(me.extraRequestParams).length > 0) {
 207             let params = newopts.params || {};
 208             Ext.applyIf(params, me.extraRequestParams);
 209             newopts.params = params;
 210         }
 211
 212         let url = Ext.isFunction(me.loadUrl)
 213             ? me.loadUrl(me.url, me.initialConfig)
 214             : me.loadUrl || me.url;
 215
 216         let createWrapper = function(successFn) {
 217             Ext.apply(newopts, {
 218                 url: url,
 219                 method: 'GET',
 220                 success: function(response, opts) {
 221                     form.clearInvalid();
 222                     me.digest = response.result.digest || response.result.data.digest;
 223                     if (successFn) {
 224                         successFn(response, opts);
 225                     } else {
 226                         me.setValues(response.result.data);
 227                     }
 228                     // hack: fix ExtJS bug
 229                     Ext.Array.each(me.query('radiofield'), function(f) {
 230                         f.resetOriginalValue();
 231                     });
 232                 },
 233                 failure: function(response, opts) {
 234                     Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() {
 235                         me.close();
 236                     });
 237                 },
 238             });
 239         };
 240
 241         createWrapper(options.success);
 242
 243         Proxmox.Utils.API2Request(newopts);
 244     },
 245
 246     initComponent: function() {
 247         let me = this;
 248
 249         if (!me.url && (
 250                 !me.submitUrl || !me.loadUrl || me.submitUrl === Ext.identityFn ||
 251                 me.loadUrl === Ext.identityFn
 252             )
 253         ) {
 254             throw "neither 'url' nor both, submitUrl and loadUrl specified";
 255         }
 256
 257         if (me.create) {throw "deprecated parameter, use isCreate";}
 258
 259         let items = Ext.isArray(me.items) ? me.items : [me.items];
 260
 261         me.items = undefined;
 262
 263         me.formPanel = Ext.create('Ext.form.Panel', {
 264             url: me.url, // FIXME: not in 'form' class, safe to remove??
 265             method: me.method || 'PUT',
 266             trackResetOnLoad: true,
 267             bodyPadding: me.bodyPadding !== undefined ? me.bodyPadding : 10,
 268             border: false,
 269             defaults: Ext.apply({}, me.defaults, {
 270                 border: false,
 271             }),
 272             fieldDefaults: Ext.apply({}, me.fieldDefaults, {
 273                 labelWidth: 100,
 274                 anchor: '100%',
 275             }),
 276             items: items,
 277         });
 278
 279         let inputPanel = me.formPanel.down('inputpanel');
 280
 281         let form = me.formPanel.getForm();
 282
 283         let submitText;
 284         if (me.isCreate) {
 285             if (me.submitText) {
 286                 submitText = me.submitText;
 287             } else if (me.isAdd) {
 288                 submitText = gettext('Add');
 289             } else if (me.isRemove) {
 290                 submitText = gettext('Remove');
 291             } else {
 292                 submitText = gettext('Create');
 293             }
 294         } else {
 295             submitText = me.submitText || gettext('OK');
 296         }
 297
 298         let submitBtn = Ext.create('Ext.Button', {
 299             reference: 'submitbutton',
 300             text: submitText,
 301             disabled: !me.isCreate,
 302             handler: function() {
 303                 me.submit();
 304             },
 305         });
 306
 307         let resetBtn = Ext.create('Ext.Button', {
 308             text: 'Reset',
 309             disabled: true,
 310             handler: function() {
 311                 form.reset();
 312             },
 313         });
 314
 315         let set_button_status = function() {
 316             let valid = form.isValid();
 317             let dirty = form.isDirty();
 318             submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
 319             resetBtn.setDisabled(!dirty);
 320
 321             if (inputPanel && inputPanel.hasAdvanced) {
 322                 // we want to show the advanced options
 323                 // as soon as some of it is not valid
 324                 let advancedItems = me.down('#advancedContainer').query('field');
 325                 let allAdvancedValid = true;
 326                 advancedItems.forEach(function(field) {
 327                     if (!field.isValid()) {
 328                         allAdvancedValid = false;
 329                     }
 330                 });
 331
 332                 if (!allAdvancedValid) {
 333                     inputPanel.setAdvancedVisible(true);
 334                     me.down('#advancedcb').setValue(true);
 335                 }
 336             }
 337         };
 338
 339         form.on('dirtychange', set_button_status);
 340         form.on('validitychange', set_button_status);
 341
 342         let colwidth = 300;
 343         if (me.fieldDefaults && me.fieldDefaults.labelWidth) {
 344             colwidth += me.fieldDefaults.labelWidth - 100;
 345         }
 346
 347         let twoColumn = inputPanel && (inputPanel.column1 || inputPanel.column2);
 348
 349         if (me.subject && !me.title) {
 350             me.title = Proxmox.Utils.dialog_title(me.subject, me.isCreate, me.isAdd);
 351         }
 352
 353         if (me.isCreate) {
 354                 me.buttons = [submitBtn];
 355         } else {
 356                 me.buttons = [submitBtn, resetBtn];
 357         }
 358
 359         if (inputPanel && inputPanel.hasAdvanced) {
 360             let sp = Ext.state.Manager.getProvider();
 361             let advchecked = sp.get('proxmox-advanced-cb');
 362             inputPanel.setAdvancedVisible(advchecked);
 363             me.buttons.unshift(
 364                {
 365                    xtype: 'proxmoxcheckbox',
 366                    itemId: 'advancedcb',
 367                    boxLabelAlign: 'before',
 368                    boxLabel: gettext('Advanced'),
 369                    stateId: 'proxmox-advanced-cb',
 370                    value: advchecked,
 371                    listeners: {
 372                        change: function(cb, val) {
 373                            inputPanel.setAdvancedVisible(val);
 374                            sp.set('proxmox-advanced-cb', val);
 375                        },
 376                    },
 377                },
 378             );
 379         }
 380
 381         let onlineHelp = me.onlineHelp;
 382         if (!onlineHelp && inputPanel && inputPanel.onlineHelp) {
 383             onlineHelp = inputPanel.onlineHelp;
 384         }
 385
 386         if (onlineHelp) {
 387             let helpButton = Ext.create('Proxmox.button.Help');
 388             me.buttons.unshift(helpButton, '->');
 389             Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp);
 390         }
 391
 392         Ext.applyIf(me, {
 393             modal: true,
 394             width: twoColumn ? colwidth*2 : colwidth,
 395             border: false,
 396             items: [me.formPanel],
 397         });
 398
 399         me.callParent();
 400
 401         // always mark invalid fields
 402         me.on('afterlayout', function() {
 403             // on touch devices, the isValid function
 404             // triggers a layout, which triggers an isValid
 405             // and so on
 406             // to prevent this we disable the layouting here
 407             // and enable it afterwards
 408             me.suspendLayout = true;
 409             me.isValid();
 410             me.suspendLayout = false;
 411         });
 412
 413         if (me.autoLoad) {
 414             me.load(me.autoLoadOptions);
 415         }
 416     },
 417 });