[pve-devel] [PATCH manager 1/1] improve xtermjs settings button behaviour

[Dominik Csapak]

we now put a form around the fields/buttons and can track
the valid/dirty state, and use this for setting the button states

now the buttons are correctly enabled/disabled when the form
is dirty/valid/empty

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/window/Settings.js | 157 ++++++++++++++++++++++------------------
 1 file changed, 88 insertions(+), 69 deletions(-)

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index acffb01b..ef9dc021 100644
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -31,27 +31,40 @@ Ext.define('PVE.window.Settings', {
 	    me.lookupReference('savedUserName').setValue(username);
 
 	    var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
-	    var defaultSettings = true;
 	    settings.forEach(function(setting) {
 		var val = localStorage.getItem('pve-xterm-' + setting);
 		if (val !== undefined && val !== null) {
 		    var field = me.lookup(setting);
 		    field.setValue(val);
-		    defaultSettings = false;
+		    field.resetOriginalValue();
 		}
 	    });
+	},
+
+	set_button_status: function() {
+	    var me = this;
+
+	    var form = me.lookup('xtermform');
+	    var valid = form.isValid();
+	    var dirty = form.isDirty();
 
-	    me.lookup('xtermsave').setDisabled(true);
-	    me.lookup('xtermreset').setDisabled(defaultSettings);
+	    var hasvalues = false;
+	    var values = form.getValues();
+	    Ext.Object.eachValue(values, function(value) {
+		if (value) {
+		    hasvalues = true;
+		    return false;
+		}
+	    });
+
+	    me.lookup('xtermsave').setDisabled(!dirty || !valid);
+	    me.lookup('xtermreset').setDisabled(!hasvalues);
 	},
 
 	control: {
-	    '#xtermjs field': {
-		change: function(field) {
-		    var me = this;
-		    me.lookup('xtermsave').setDisabled(false);
-		    me.lookup('xtermreset').setDisabled(false);
-		}
+	    '#xtermjs form': {
+		dirtychange: 'set_button_status',
+		validitychange: 'set_button_status'
 	    },
 	    '#xtermjs button': {
 		click: function(button) {
@@ -70,8 +83,9 @@ Ext.define('PVE.window.Settings', {
 			    field.setValue(undefined);
 			    localStorage.removeItem('pve-xterm-' + setting);
 			}
+			field.resetOriginalValue();
 		    });
-		    button.setDisabled(true);
+		    me.set_button_status();
 		}
 	    },
 	    'button[name=reset]': {
@@ -231,68 +245,73 @@ Ext.define('PVE.window.Settings', {
 	itemId: 'xtermjs',
 	width: '50%',
 	margin: '5',
-	    title: gettext('xterm.js Settings'),
-	layout: {
-	    type: 'vbox',
-	    algin: 'left'
-	},
-	defaults: {
-	    width: '100%',
-	    margin: '0 0 10 0'
-	},
-	items: [
-	    {
-		xtype: 'textfield',
-		name: 'fontFamily',
-		reference: 'fontFamily',
-		emptyText: Proxmox.Utils.defaultText,
-		fieldLabel: gettext('Font-Family')
-	    },
-	    {
-		xtype: 'proxmoxintegerfield',
-		emptyText: Proxmox.Utils.defaultText,
-		name: 'fontSize',
-		reference: 'fontSize',
-		minValue: 1,
-		fieldLabel: gettext('Font-Size')
-	    },
-	    {
-		xtype: 'numberfield',
-		name: 'letterSpacing',
-		reference: 'letterSpacing',
-		emptyText: Proxmox.Utils.defaultText,
-		fieldLabel: gettext('Letter Spacing')
+	title: gettext('xterm.js Settings'),
+	items: [{
+	    xtype: 'form',
+	    reference: 'xtermform',
+	    border: false,
+	    layout: {
+		type: 'vbox',
+		algin: 'left'
 	    },
-	    {
-		xtype: 'numberfield',
-		name: 'lineHeight',
-		minValue: 0.1,
-		reference: 'lineHeight',
-		emptyText: Proxmox.Utils.defaultText,
-		fieldLabel: gettext('Line Height')
+	    defaults: {
+		width: '100%',
+		margin: '0 0 10 0'
 	    },
-	    {
-		xtype: 'container',
-		layout: {
-		    type: 'hbox',
-		    pack: 'end'
+	    items: [
+		{
+		    xtype: 'textfield',
+		    name: 'fontFamily',
+		    reference: 'fontFamily',
+		    emptyText: Proxmox.Utils.defaultText,
+		    fieldLabel: gettext('Font-Family')
+		},
+		{
+		    xtype: 'proxmoxintegerfield',
+		    emptyText: Proxmox.Utils.defaultText,
+		    name: 'fontSize',
+		    reference: 'fontSize',
+		    minValue: 1,
+		    fieldLabel: gettext('Font-Size')
+		},
+		{
+		    xtype: 'numberfield',
+		    name: 'letterSpacing',
+		    reference: 'letterSpacing',
+		    emptyText: Proxmox.Utils.defaultText,
+		    fieldLabel: gettext('Letter Spacing')
 		},
-		items: [
-		    {
-			xtype: 'button',
-			reference: 'xtermreset',
-			disabled: true,
-			text: gettext('Reset')
+		{
+		    xtype: 'numberfield',
+		    name: 'lineHeight',
+		    minValue: 0.1,
+		    reference: 'lineHeight',
+		    emptyText: Proxmox.Utils.defaultText,
+		    fieldLabel: gettext('Line Height')
+		},
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'hbox',
+			pack: 'end'
 		    },
-		    {
-			xtype: 'button',
-			reference: 'xtermsave',
-			disabled: true,
-			text: gettext('Save')
-		    }
-		]
-	    }
-	]
+		    items: [
+			{
+			    xtype: 'button',
+			    reference: 'xtermreset',
+			    disabled: true,
+			    text: gettext('Reset')
+			},
+			{
+			    xtype: 'button',
+			    reference: 'xtermsave',
+			    disabled: true,
+			    text: gettext('Save')
+			}
+		    ]
+		}
+	    ]
+	}]
     }],
 
     onShow: function() {
-- 
2.11.0