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