window/Edit.js

   1 // fixme: how can we avoid those lint errors?
   2 /*jslint confusion: true */
   3 Ext.define('Proxmox.window.Edit', {
   4     extend: 'Ext.window.Window',
   5     alias: 'widget.proxmoxWindowEdit',
   6
   7     // autoLoad trigger a load() after component creation
   8     autoLoad: false,
   9
  10     resizable: false,
  11
  12     // use this tio atimatically generate a title like
  13     // Create: <subject>
  14     subject: undefined,
  15
  16     // set create to true if you want a Create button (instead
  17     // OK and RESET)
  18     create: false,
  19
  20     // set to true if you want an Add button (instead of Create)
  21     isAdd: false,
  22
  23     // set to true if you want an Remove button (instead of Create)
  24     isRemove: false,
  25
  26     // custom submitText
  27     submitText: undefined,
  28
  29     backgroundDelay: 0,
  30
  31     // needed for finding the reference to submitbutton
  32     // because we do not have a controller
  33     referenceHolder: true,
  34     defaultButton: 'submitbutton',
  35
  36     // finds the first form field
  37     defaultFocus: 'field',
  38
  39     showProgress: false,
  40
  41     isValid: function() {
  42         var me = this;
  43
  44         var form = me.formPanel.getForm();
  45         return form.isValid();
  46     },
  47
  48     getValues: function(dirtyOnly) {
  49         var me = this;
  50
  51         var values = {};
  52
  53         var form = me.formPanel.getForm();
  54
  55         form.getFields().each(function(field) {
  56             if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
  57                 Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
  58             }
  59         });
  60
  61         Ext.Array.each(me.query('inputpanel'), function(panel) {
  62             Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
  63         });
  64
  65         return values;
  66     },
  67
  68     setValues: function(values) {
  69         var me = this;
  70
  71         var form = me.formPanel.getForm();
  72
  73         Ext.iterate(values, function(fieldId, val) {
  74             var field = form.findField(fieldId);
  75             if (field && !field.up('inputpanel')) {
  76                field.setValue(val);
  77                 if (form.trackResetOnLoad) {
  78                     field.resetOriginalValue();
  79                 }
  80             }
  81         });
  82
  83         Ext.Array.each(me.query('inputpanel'), function(panel) {
  84             panel.setValues(values);
  85         });
  86     },
  87
  88     submit: function() {
  89         var me = this;
  90
  91         var form = me.formPanel.getForm();
  92
  93         var values = me.getValues();
  94         Ext.Object.each(values, function(name, val) {
  95             if (values.hasOwnProperty(name)) {
  96                 if (Ext.isArray(val) && !val.length) {
  97                     values[name] = '';
  98                 }
  99             }
 100         });
 101
 102         if (me.digest) {
 103             values.digest = me.digest;
 104         }
 105
 106         if (me.backgroundDelay) {
 107             values.background_delay = me.backgroundDelay;
 108         }
 109
 110         var url =  me.url;
 111         if (me.method === 'DELETE') {
 112             url = url + "?" + Ext.Object.toQueryString(values);
 113             values = undefined;
 114         }
 115
 116         Proxmox.Utils.API2Request({
 117             url: url,
 118             waitMsgTarget: me,
 119             method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'),
 120             params: values,
 121             failure: function(response, options) {
 122                 if (response.result && response.result.errors) {
 123                     form.markInvalid(response.result.errors);
 124                 }
 125                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 126             },
 127             success: function(response, options) {
 128                 var hasProgressBar = (me.backgroundDelay || me.showProgress) &&
 129                     response.result.data ? true : false;
 130
 131                 if (hasProgressBar) {
 132                     // stay around so we can trigger our close events
 133                     // when background action is completed
 134                     me.hide();
 135
 136                     var upid = response.result.data;
 137                     var win = Ext.create('PVE.window.TaskProgress', {
 138                         upid: upid,
 139                         listeners: {
 140                             destroy: function () {
 141                                 me.close();
 142                             }
 143                         }
 144                     });
 145                     win.show();
 146                 } else {
 147                     me.close();
 148                 }
 149             }
 150         });
 151     },
 152
 153     load: function(options) {
 154         var me = this;
 155
 156         var form = me.formPanel.getForm();
 157
 158         options = options || {};
 159
 160         var newopts = Ext.apply({
 161             waitMsgTarget: me
 162         }, options);
 163
 164         var createWrapper = function(successFn) {
 165             Ext.apply(newopts, {
 166                 url: me.url,
 167                 method: 'GET',
 168                 success: function(response, opts) {
 169                     form.clearInvalid();
 170                     me.digest = response.result.data.digest;
 171                     if (successFn) {
 172                         successFn(response, opts);
 173                     } else {
 174                         me.setValues(response.result.data);
 175                     }
 176                     // hack: fix ExtJS bug
 177                     Ext.Array.each(me.query('radiofield'), function(f) {
 178                         f.resetOriginalValue();
 179                     });
 180                 },
 181                 failure: function(response, opts) {
 182                     Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() {
 183                         me.close();
 184                     });
 185                 }
 186             });
 187         };
 188
 189         createWrapper(options.success);
 190
 191         Proxmox.Utils.API2Request(newopts);
 192     },
 193
 194     initComponent : function() {
 195         var me = this;
 196
 197         if (!me.url) {
 198             throw "no url specified";
 199         }
 200
 201         var items = Ext.isArray(me.items) ? me.items : [ me.items ];
 202
 203         me.items = undefined;
 204
 205         me.formPanel = Ext.create('Ext.form.Panel', {
 206             url: me.url,
 207             method: me.method || 'PUT',
 208             trackResetOnLoad: true,
 209             bodyPadding: 10,
 210             border: false,
 211             defaults: {
 212                 border: false
 213             },
 214             fieldDefaults: Ext.apply({}, me.fieldDefaults, {
 215                 labelWidth: 100,
 216                 anchor: '100%'
 217             }),
 218             items: items
 219         });
 220
 221         var inputPanel = me.formPanel.down('inputpanel');
 222
 223         var form = me.formPanel.getForm();
 224
 225         var submitText;
 226         if (me.create) {
 227             if (me.submitText) {
 228                 submitText = me.submitText;
 229             } else if (me.isAdd) {
 230                 submitText = gettext('Add');
 231             } else if (me.isRemove) {
 232                 submitText = gettext('Remove');
 233             } else {
 234                 submitText = gettext('Create');
 235             }
 236         } else {
 237             submitText = me.submitText || gettext('OK');
 238         }
 239
 240         var submitBtn = Ext.create('Ext.Button', {
 241             reference: 'submitbutton',
 242             text: submitText,
 243             disabled: !me.create,
 244             handler: function() {
 245                 me.submit();
 246             }
 247         });
 248
 249         var resetBtn = Ext.create('Ext.Button', {
 250             text: 'Reset',
 251             disabled: true,
 252             handler: function(){
 253                 form.reset();
 254             }
 255         });
 256
 257         var set_button_status = function() {
 258             var valid = form.isValid();
 259             var dirty = form.isDirty();
 260             submitBtn.setDisabled(!valid || !(dirty || me.create));
 261             resetBtn.setDisabled(!dirty);
 262         };
 263
 264         form.on('dirtychange', set_button_status);
 265         form.on('validitychange', set_button_status);
 266
 267         var colwidth = 300;
 268         if (me.fieldDefaults && me.fieldDefaults.labelWidth) {
 269             colwidth += me.fieldDefaults.labelWidth - 100;
 270         }
 271
 272         var twoColumn = inputPanel &&
 273             (inputPanel.column1 || inputPanel.column2);
 274
 275         if (me.subject && !me.title) {
 276             me.title = Proxmox.Utils.dialog_title(me.subject, me.create, me.isAdd);
 277         }
 278
 279         if (me.create) {
 280                 me.buttons = [ submitBtn ] ;
 281         } else {
 282                 me.buttons = [ submitBtn, resetBtn ];
 283         }
 284
 285         var onlineHelp = me.onlineHelp;
 286         if (!onlineHelp && inputPanel && inputPanel.onlineHelp) {
 287             onlineHelp = inputPanel.onlineHelp;
 288         }
 289
 290         if (onlineHelp) {
 291             var helpButton = Ext.create('Proxmox.button.Help');
 292             me.buttons.unshift(helpButton, '->');
 293             Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp);
 294         }
 295
 296         Ext.applyIf(me, {
 297             modal: true,
 298             width: twoColumn ? colwidth*2 : colwidth,
 299             border: false,
 300             items: [ me.formPanel ]
 301         });
 302
 303         me.callParent();
 304
 305         // always mark invalid fields
 306         me.on('afterlayout', function() {
 307             // on touch devices, the isValid function
 308             // triggers a layout, which triggers an isValid
 309             // and so on
 310             // to prevent this we disable the layouting here
 311             // and enable it afterwards
 312             me.suspendLayout = true;
 313             me.isValid();
 314             me.suspendLayout = false;
 315         });
 316
 317         if (me.autoLoad) {
 318             me.load();
 319         }
 320     }
 321 });