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