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