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