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