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