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