[pve-devel] [PATCH manager] ui: update tree settings live when fields change

[Dominik Csapak]

by updating them on every change, but if the window is closed
without pressing ok, revert to the original settings

moves the fireUIConfigChanged call inside the window, since we
have to call it from inside too

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
one weird 'feature': if one changes a value and then reloads, the change
is not reverted (since there is no chance to call javascript anymore)
we could do what we do in novnc and prevent the simple closing without
confirmation, but imho that would be annoying

also alternatively we could (like @thomas suggested offline), add an
'apply' button in addition to/instead of the OK button

 www/manager6/Workspace.js               |  1 -
 www/manager6/window/TreeSettingsEdit.js | 47 +++++++++++++++++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 0c8869a74..85dba9dea 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -466,7 +466,6 @@ Ext.define('PVE.StdWorkspace', {
 				    handler: () => {
 					Ext.create('PVE.window.TreeSettingsEdit', {
 					    autoShow: true,
-					    apiCallDone: () => PVE.UIOptions.fireUIConfigChanged(),
 					});
 				    },
 				},
diff --git a/www/manager6/window/TreeSettingsEdit.js b/www/manager6/window/TreeSettingsEdit.js
index ed8b7aded..20d27762a 100644
--- a/www/manager6/window/TreeSettingsEdit.js
+++ b/www/manager6/window/TreeSettingsEdit.js
@@ -12,9 +12,40 @@ Ext.define('PVE.window.TreeSettingsEdit', {
 	labelWidth: 150,
     },
 
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	updateUi: function(settings) {
+	    let localStorage = Ext.state.Manager.getProvider();
+	    localStorage.set('pve-tree-sorting', settings || null);
+	    PVE.UIOptions.fireUIConfigChanged();
+	},
+
+	onChange: function() {
+	    let me = this;
+	    let view = me.getView();
+	    me.updateUi(view.lookup('inputpanel').getValues());
+	},
+
+	onClose: function() {
+	    let me = this;
+	    let view = me.getView();
+	    if (view.originalSettings) {
+		me.updateUi(view.originalSettings);
+	    }
+	},
+
+	control: {
+	    'field': {
+		change: 'onChange',
+	    },
+	},
+    },
+
     items: [
 	{
 	    xtype: 'inputpanel',
+	    reference: 'inputpanel',
 	    items: [
 		{
 		    xtype: 'proxmoxKVComboBox',
@@ -64,23 +95,27 @@ Ext.define('PVE.window.TreeSettingsEdit', {
 	},
     ],
 
-    submit: function() {
-	let me = this;
 
-	let localStorage = Ext.state.Manager.getProvider();
-	localStorage.set('pve-tree-sorting', me.down('inputpanel').getValues() || null);
 
-	me.apiCallDone();
+    submit: function() {
+	let me = this;
+	delete me.originalSettings;
 	me.close();
     },
 
+    listeners: {
+	'close': 'onClose'
+    },
+
     initComponent: function() {
 	let me = this;
 
 	me.callParent();
 
 	let localStorage = Ext.state.Manager.getProvider();
-	me.down('inputpanel').setValues(localStorage.get('pve-tree-sorting'));
+	let settings = localStorage.get('pve-tree-sorting');
+	me.originalSettings = settings;
+	me.lookup('inputpanel').setValues(settings);
     },
 
 });
-- 
2.30.2