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                     // stay around so we can trigger our close events
 176                     // when background action is completed
 177                     me.hide();
 178
 179                     let upid = response.result.data;
 180                     let viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress';
 181                     Ext.create('Proxmox.window.Task' + viewerClass, {
 182                         autoShow: true,
 183                         upid: upid,
 184                         taskDone: me.taskDone,
 185                         listeners: {
 186                             destroy: function() {
 187                                 me.close();
 188                             },
 189                         },
 190                     });
 191                 } else {
 192                     me.close();
 193                 }
 194             },
 195         });
 196     },
 197
 198     load: function(options) {
 199         let me = this;
 200
 201         let form = me.formPanel.getForm();
 202
 203         options = options || {};
 204
 205         let newopts = Ext.apply({
 206             waitMsgTarget: me,
 207         }, options);
 208
 209         if (Object.keys(me.extraRequestParams).length > 0) {
 210             let params = newopts.params || {};
 211             Ext.applyIf(params, me.extraRequestParams);
 212             newopts.params = params;
 213         }
 214
 215         let url = Ext.isFunction(me.loadUrl)
 216             ? me.loadUrl(me.url, me.initialConfig)
 217             : me.loadUrl || me.url;
 218
 219         let createWrapper = function(successFn) {
 220             Ext.apply(newopts, {
 221                 url: url,
 222                 method: 'GET',
 223                 success: function(response, opts) {
 224                     form.clearInvalid();
 225                     me.digest = response.result?.digest || response.result?.data?.digest;
 226                     if (successFn) {
 227                         successFn(response, opts);
 228                     } else {
 229                         me.setValues(response.result.data);
 230                     }
 231                     // hack: fix ExtJS bug
 232                     Ext.Array.each(me.query('radiofield'), f => f.resetOriginalValue());
 233                 },
 234                 failure: function(response, opts) {
 235                     Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() {
 236                         me.close();
 237                     });
 238                 },
 239             });
 240         };
 241
 242         createWrapper(options.success);
 243
 244         Proxmox.Utils.API2Request(newopts);
 245     },
 246
 247     initComponent: function() {
 248         let me = this;
 249
 250         if (!me.url && (
 251                 !me.submitUrl || !me.loadUrl || me.submitUrl === Ext.identityFn ||
 252                 me.loadUrl === Ext.identityFn
 253             )
 254         ) {
 255             throw "neither 'url' nor both, submitUrl and loadUrl specified";
 256         }
 257         if (me.create) {
 258             throw "deprecated parameter, use isCreate";
 259         }
 260
 261         let items = Ext.isArray(me.items) ? me.items : [me.items];
 262
 263         me.items = undefined;
 264
 265         me.formPanel = Ext.create('Ext.form.Panel', {
 266             url: me.url, // FIXME: not in 'form' class, safe to remove??
 267             method: me.method || 'PUT',
 268             trackResetOnLoad: true,
 269             bodyPadding: me.bodyPadding !== undefined ? me.bodyPadding : 10,
 270             border: false,
 271             defaults: Ext.apply({}, me.defaults, {
 272                 border: false,
 273             }),
 274             fieldDefaults: Ext.apply({}, me.fieldDefaults, {
 275                 labelWidth: 100,
 276                 anchor: '100%',
 277             }),
 278             items: items,
 279         });
 280
 281         let inputPanel = me.formPanel.down('inputpanel');
 282
 283         let form = me.formPanel.getForm();
 284
 285         let submitText;
 286         if (me.isCreate) {
 287             if (me.submitText) {
 288                 submitText = me.submitText;
 289             } else if (me.isAdd) {
 290                 submitText = gettext('Add');
 291             } else if (me.isRemove) {
 292                 submitText = gettext('Remove');
 293             } else {
 294                 submitText = gettext('Create');
 295             }
 296         } else {
 297             submitText = me.submitText || gettext('OK');
 298         }
 299
 300         let submitBtn = Ext.create('Ext.Button', {
 301             reference: 'submitbutton',
 302             text: submitText,
 303             disabled: !me.isCreate,
 304             handler: function() {
 305                 me.submit();
 306             },
 307         });
 308
 309         let resetBtn = Ext.create('Ext.Button', {
 310             text: 'Reset',
 311             disabled: true,
 312             handler: function() {
 313                 form.reset();
 314             },
 315         });
 316
 317         let set_button_status = function() {
 318             let valid = form.isValid();
 319             let dirty = form.isDirty();
 320             submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
 321             resetBtn.setDisabled(!dirty);
 322
 323             if (inputPanel && inputPanel.hasAdvanced) {
 324                 // we want to show the advanced options as soon as some of it is not valid
 325                 let advancedItems = me.down('#advancedContainer').query('field');
 326                 let allAdvancedValid = true;
 327                 advancedItems.forEach(function(field) {
 328                     if (!field.isValid()) {
 329                         allAdvancedValid = false;
 330                     }
 331                 });
 332
 333                 if (!allAdvancedValid) {
 334                     inputPanel.setAdvancedVisible(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 || !me.showReset) {
 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                 xtype: 'proxmoxcheckbox',
 365                 itemId: 'advancedcb',
 366                 boxLabelAlign: 'before',
 367                 boxLabel: gettext('Advanced'),
 368                 stateId: 'proxmox-advanced-cb',
 369                 value: advchecked,
 370                 listeners: {
 371                     change: function(cb, val) {
 372                         inputPanel.setAdvancedVisible(val);
 373                         sp.set('proxmox-advanced-cb', val);
 374                     },
 375                 },
 376             });
 377         }
 378
 379         let onlineHelp = me.onlineHelp;
 380         if (!onlineHelp && inputPanel && inputPanel.onlineHelp) {
 381             onlineHelp = inputPanel.onlineHelp;
 382         }
 383
 384         if (onlineHelp) {
 385             let helpButton = Ext.create('Proxmox.button.Help');
 386             me.buttons.unshift(helpButton, '->');
 387             Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp);
 388         }
 389
 390         Ext.applyIf(me, {
 391             modal: true,
 392             width: twoColumn ? colwidth*2 : colwidth,
 393             border: false,
 394             items: [me.formPanel],
 395         });
 396
 397         me.callParent();
 398
 399         // always mark invalid fields
 400         me.on('afterlayout', function() {
 401             // on touch devices, the isValid function
 402             // triggers a layout, which triggers an isValid
 403             // and so on
 404             // to prevent this we disable the layouting here
 405             // and enable it afterwards
 406             me.suspendLayout = true;
 407             me.isValid();
 408             me.suspendLayout = false;
 409         });
 410
 411         if (me.autoLoad) {
 412             me.load(me.autoLoadOptions);
 413         }
 414     },
 415 });