window/Edit.js

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