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