]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - window/Edit.js
use eslint and execute as check target
[proxmox-widget-toolkit.git] / window / Edit.js
index b736a85c1fe3c71bc59a13ef55b826183339afdd..c165141129f7e725d18a04a17a0b02ed8f683be8 100644 (file)
@@ -1,5 +1,4 @@
 // fixme: how can we avoid those lint errors?
-/*jslint confusion: true */
 Ext.define('Proxmox.window.Edit', {
     extend: 'Ext.window.Window',
     alias: 'widget.proxmoxWindowEdit',
@@ -34,28 +33,38 @@ Ext.define('Proxmox.window.Edit', {
     defaultButton: 'submitbutton',
 
     // finds the first form field
-    defaultFocus: 'field',
+    defaultFocus: 'field[disabled=false][hidden=false]',
 
     showProgress: false,
 
+    showTaskViewer: false,
+
+    // gets called if we have a progress bar or taskview and it detected that
+    // the task finished. function(success)
+    taskDone: Ext.emptyFn,
+
+    // gets called when the api call is finished, right at the beginning
+    // function(success, response, options)
+    apiCallDone: Ext.emptyFn,
+
     // assign a reference from docs, to add a help button docked to the
     // bottom of the window. If undefined we magically fall back to the
     // onlineHelp of our first item, if set.
     onlineHelp: undefined,
 
     isValid: function() {
-       var me = this;
+       let me = this;
 
-       var form = me.formPanel.getForm();
+       let form = me.formPanel.getForm();
        return form.isValid();
     },
 
     getValues: function(dirtyOnly) {
-       var me = this;
+       let me = this;
 
-        var values = {};
+        let values = {};
 
-       var form = me.formPanel.getForm();
+       let form = me.formPanel.getForm();
 
         form.getFields().each(function(field) {
             if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
@@ -71,18 +80,21 @@ Ext.define('Proxmox.window.Edit', {
     },
 
     setValues: function(values) {
-       var me = this;
-
-       var form = me.formPanel.getForm();
-
-       Ext.iterate(values, function(fieldId, val) {
-           var field = form.findField(fieldId);
-           if (field && !field.up('inputpanel')) {
-               field.setValue(val);
-                if (form.trackResetOnLoad) {
-                    field.resetOriginalValue();
-                }
-            }
+       let me = this;
+
+       let form = me.formPanel.getForm();
+       let formfields = form.getFields();
+
+       Ext.iterate(values, function(id, val) {
+           let fields = formfields.filterBy((f) =>
+               (f.id === id || f.name === id || f.dataIndex === id) && !f.up('inputpanel'),
+           );
+           fields.each((field) => {
+               field.setValue(val);
+               if (form.trackResetOnLoad) {
+                   field.resetOriginalValue();
+               }
+           });
        });
 
        Ext.Array.each(me.query('inputpanel'), function(panel) {
@@ -90,15 +102,19 @@ Ext.define('Proxmox.window.Edit', {
        });
     },
 
+    setSubmitText: function(text) {
+       this.lookup('submitbutton').setText(text);
+    },
+
     submit: function() {
-       var me = this;
+       let me = this;
 
-       var form = me.formPanel.getForm();
+       let form = me.formPanel.getForm();
 
-       var values = me.getValues();
+       let values = me.getValues();
        Ext.Object.each(values, function(name, val) {
-           if (values.hasOwnProperty(name)) {
-                if (Ext.isArray(val) && !val.length) {
+           if (Object.prototype.hasOwnProperty.call(values, name)) {
+               if (Ext.isArray(val) && !val.length) {
                    values[name] = '';
                }
            }
@@ -112,7 +128,7 @@ Ext.define('Proxmox.window.Edit', {
            values.background_delay = me.backgroundDelay;
        }
 
-       var url =  me.url;
+       let url = me.url;
        if (me.method === 'DELETE') {
            url = url + "?" + Ext.Object.toQueryString(values);
            values = undefined;
@@ -124,55 +140,62 @@ Ext.define('Proxmox.window.Edit', {
            method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'),
            params: values,
            failure: function(response, options) {
+               me.apiCallDone(false, response, options);
+
                if (response.result && response.result.errors) {
                    form.markInvalid(response.result.errors);
                }
                Ext.Msg.alert(gettext('Error'), response.htmlStatus);
            },
            success: function(response, options) {
-               var hasProgressBar = (me.backgroundDelay || me.showProgress) &&
-                   response.result.data ? true : false;
+               let hasProgressBar =
+                   (me.backgroundDelay || me.showProgress || me.showTaskViewer) &&
+                   response.result.data;
+
+               me.apiCallDone(true, response, options);
 
                if (hasProgressBar) {
                    // stay around so we can trigger our close events
                    // when background action is completed
                    me.hide();
 
-                   var upid = response.result.data;
-                   var win = Ext.create('Proxmox.window.TaskProgress', {
+                   let upid = response.result.data;
+                   let viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress';
+                   Ext.create('Proxmox.window.Task' + viewerClass, {
+                       autoShow: true,
                        upid: upid,
+                       taskDone: me.taskDone,
                        listeners: {
-                           destroy: function () {
+                           destroy: function() {
                                me.close();
-                           }
-                       }
+                           },
+                       },
                    });
-                   win.show();
                } else {
                    me.close();
                }
-           }
+           },
        });
     },
 
     load: function(options) {
-       var me = this;
+       let me = this;
 
-       var form = me.formPanel.getForm();
+       let form = me.formPanel.getForm();
 
        options = options || {};
 
-       var newopts = Ext.apply({
-           waitMsgTarget: me
+       let newopts = Ext.apply({
+           waitMsgTarget: me,
        }, options);
 
-       var createWrapper = function(successFn) {
+       let createWrapper = function(successFn) {
            Ext.apply(newopts, {
                url: me.url,
                method: 'GET',
                success: function(response, opts) {
                    form.clearInvalid();
-                   me.digest = response.result.data.digest;
+                   me.digest = response.result.digest || response.result.data.digest;
                    if (successFn) {
                        successFn(response, opts);
                    } else {
@@ -187,7 +210,7 @@ Ext.define('Proxmox.window.Edit', {
                    Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() {
                        me.close();
                    });
-               }
+               },
            });
        };
 
@@ -196,8 +219,8 @@ Ext.define('Proxmox.window.Edit', {
        Proxmox.Utils.API2Request(newopts);
     },
 
-    initComponent : function() {
-       var me = this;
+    initComponent: function() {
+       let me = this;
 
        if (!me.url) {
            throw "no url specified";
@@ -205,7 +228,7 @@ Ext.define('Proxmox.window.Edit', {
 
        if (me.create) {throw "deprecated parameter, use isCreate";}
 
-       var items = Ext.isArray(me.items) ? me.items : [ me.items ];
+       let items = Ext.isArray(me.items) ? me.items : [me.items];
 
        me.items = undefined;
 
@@ -213,23 +236,23 @@ Ext.define('Proxmox.window.Edit', {
            url: me.url,
            method: me.method || 'PUT',
            trackResetOnLoad: true,
-           bodyPadding: 10,
+           bodyPadding: me.bodyPadding !== undefined ? me.bodyPadding : 10,
            border: false,
-           defaults: {
-               border: false
-           },
+           defaults: Ext.apply({}, me.defaults, {
+               border: false,
+           }),
            fieldDefaults: Ext.apply({}, me.fieldDefaults, {
                labelWidth: 100,
-               anchor: '100%'
+               anchor: '100%',
             }),
-           items: items
+           items: items,
        });
 
-       var inputPanel = me.formPanel.down('inputpanel');
+       let inputPanel = me.formPanel.down('inputpanel');
 
-       var form = me.formPanel.getForm();
+       let form = me.formPanel.getForm();
 
-       var submitText;
+       let submitText;
        if (me.isCreate) {
            if (me.submitText) {
                submitText = me.submitText;
@@ -244,58 +267,96 @@ Ext.define('Proxmox.window.Edit', {
            submitText = me.submitText || gettext('OK');
        }
 
-       var submitBtn = Ext.create('Ext.Button', {
+       let submitBtn = Ext.create('Ext.Button', {
            reference: 'submitbutton',
            text: submitText,
            disabled: !me.isCreate,
            handler: function() {
                me.submit();
-           }
+           },
        });
 
-       var resetBtn = Ext.create('Ext.Button', {
+       let resetBtn = Ext.create('Ext.Button', {
            text: 'Reset',
            disabled: true,
-           handler: function(){
+           handler: function() {
                form.reset();
-           }
+           },
        });
 
-       var set_button_status = function() {
-           var valid = form.isValid();
-           var dirty = form.isDirty();
+       let set_button_status = function() {
+           let valid = form.isValid();
+           let dirty = form.isDirty();
            submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
            resetBtn.setDisabled(!dirty);
+
+           if (inputPanel && inputPanel.hasAdvanced) {
+               // we want to show the advanced options
+               // as soon as some of it is not valid
+               let advancedItems = me.down('#advancedContainer').query('field');
+               let allAdvancedValid = true;
+               advancedItems.forEach(function(field) {
+                   if (!field.isValid()) {
+                       allAdvancedValid = false;
+                   }
+               });
+
+               if (!allAdvancedValid) {
+                   inputPanel.setAdvancedVisible(true);
+                   me.down('#advancedcb').setValue(true);
+               }
+           }
        };
 
        form.on('dirtychange', set_button_status);
        form.on('validitychange', set_button_status);
 
-       var colwidth = 300;
+       let colwidth = 300;
        if (me.fieldDefaults && me.fieldDefaults.labelWidth) {
            colwidth += me.fieldDefaults.labelWidth - 100;
        }
 
-       var twoColumn = inputPanel &&
-           (inputPanel.column1 || inputPanel.column2);
+       let twoColumn = inputPanel && (inputPanel.column1 || inputPanel.column2);
 
        if (me.subject && !me.title) {
            me.title = Proxmox.Utils.dialog_title(me.subject, me.isCreate, me.isAdd);
        }
 
        if (me.isCreate) {
-               me.buttons = [ submitBtn ] ;
+               me.buttons = [submitBtn];
        } else {
-               me.buttons = [ submitBtn, resetBtn ];
+               me.buttons = [submitBtn, resetBtn];
        }
 
-       var onlineHelp = me.onlineHelp;
+       if (inputPanel && inputPanel.hasAdvanced) {
+           let sp = Ext.state.Manager.getProvider();
+           let advchecked = sp.get('proxmox-advanced-cb');
+           inputPanel.setAdvancedVisible(advchecked);
+           me.buttons.unshift(
+              {
+                  xtype: 'proxmoxcheckbox',
+                  itemId: 'advancedcb',
+                  boxLabelAlign: 'before',
+                  boxLabel: gettext('Advanced'),
+                  stateId: 'proxmox-advanced-cb',
+                  value: advchecked,
+                  listeners: {
+                      change: function(cb, val) {
+                          inputPanel.setAdvancedVisible(val);
+                          sp.set('proxmox-advanced-cb', val);
+                      },
+                  },
+              },
+           );
+       }
+
+       let onlineHelp = me.onlineHelp;
        if (!onlineHelp && inputPanel && inputPanel.onlineHelp) {
            onlineHelp = inputPanel.onlineHelp;
        }
 
        if (onlineHelp) {
-           var helpButton = Ext.create('Proxmox.button.Help');
+           let helpButton = Ext.create('Proxmox.button.Help');
            me.buttons.unshift(helpButton, '->');
            Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp);
        }
@@ -304,7 +365,7 @@ Ext.define('Proxmox.window.Edit', {
            modal: true,
            width: twoColumn ? colwidth*2 : colwidth,
            border: false,
-           items: [ me.formPanel ]
+           items: [me.formPanel],
        });
 
        me.callParent();
@@ -324,5 +385,5 @@ Ext.define('Proxmox.window.Edit', {
        if (me.autoLoad) {
            me.load();
        }
-    }
+    },
 });