[pve-devel] [PATCH manager v2 5/6] ui: add window for changing tree related options

[Dominik Csapak <d.csapak@proxmox.com>]

such as the sorting/grouping of guests. saves them in the browser local
storage under 'pve-tree-sorting'

adds a button for it next to the the view selector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile                   |  1 +
 www/manager6/Workspace.js               | 26 +++++++-
 www/manager6/window/TreeSettingsEdit.js | 87 +++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 www/manager6/window/TreeSettingsEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2c487655f..b73b729ad 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -119,6 +119,7 @@ JSSRC= 							\
 	window/ScheduleSimulator.js			\
 	window/Wizard.js				\
 	window/GuestDiskReassign.js				\
+	window/TreeSettingsEdit.js			\
 	ha/Fencing.js					\
 	ha/GroupEdit.js					\
 	ha/GroupSelector.js				\
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index a3872b560..b80a4a2f6 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -223,7 +223,9 @@ Ext.define('PVE.StdWorkspace', {
 	let appState = Ext.create('PVE.StateProvider');
 	Ext.state.Manager.setProvider(appState);
 
-	let selview = Ext.create('PVE.form.ViewSelector');
+	let selview = Ext.create('PVE.form.ViewSelector', {
+	    flex: 1,
+	});
 
 	let rtree = Ext.createWidget('pveResourceTree', {
 	    viewFilter: selview.getViewFilter(),
@@ -449,7 +451,27 @@ Ext.define('PVE.StdWorkspace', {
 		    margin: '0 0 0 5',
 		    split: true,
 		    width: 300,
-		    items: [selview, rtree],
+		    items: [
+			{
+			    xtype: 'container',
+			    layout: 'hbox',
+			    padding: '0 0 5 0',
+			    items: [
+				selview,
+				{
+				    xtype: 'button',
+				    iconCls: 'fa fa-fw fa-gear',
+				    handler: () => {
+					Ext.create('PVE.window.TreeSettingsEdit', {
+					    autoShow: true,
+					    apiCallDone: () => PVE.UIOptions.fireUIConfigChanged(),
+					});
+				    },
+				},
+			    ],
+			},
+			rtree,
+		    ],
 		    listeners: {
 			resize: function(panel, width, height) {
 			    var viewWidth = me.getSize().width;
diff --git a/www/manager6/window/TreeSettingsEdit.js b/www/manager6/window/TreeSettingsEdit.js
new file mode 100644
index 000000000..058980dc1
--- /dev/null
+++ b/www/manager6/window/TreeSettingsEdit.js
@@ -0,0 +1,87 @@
+Ext.define('PVE.window.TreeSettingsEdit', {
+    extend: 'Proxmox.window.Edit',
+    alias: 'widget.pveTreeSettingsEdit',
+
+    title: gettext('Tree Settings'),
+
+    isCreate: false,
+
+    // we don't want an url, we override submit(), but it is needed by the parent class
+    url: 'bogus',
+
+    fieldDefaults: {
+	labelWidth: 120,
+    },
+
+    items: [
+	{
+	    xtype: 'inputpanel',
+	    items: [
+		{
+		    xtype: 'proxmoxKVComboBox',
+		    name: 'sort-field',
+		    fieldLabel: gettext('Sort Field'),
+		    comboItems: [
+			['__default__', `${Proxmox.Utils.defaultText} (VMID)`],
+			['vmid', 'VMID'],
+			['name', gettext('Name')],
+		    ],
+		    defaultValue: '__default__',
+		    value: '__default__',
+		    deleteEmpty: false,
+		},
+		{
+		    xtype: 'proxmoxKVComboBox',
+		    name: 'group-templates',
+		    fieldLabel: gettext('Group Templates'),
+		    comboItems: [
+			['__default__', `${Proxmox.Utils.defaultText} (${gettext("Yes")})`],
+			[1, gettext('Yes')],
+			[0, gettext('No')],
+		    ],
+		    defaultValue: '__default__',
+		    value: '__default__',
+		    deleteEmpty: false,
+		},
+		{
+		    xtype: 'proxmoxKVComboBox',
+		    name: 'group-guest-types',
+		    fieldLabel: gettext('Group Types'),
+		    comboItems: [
+			['__default__', `${Proxmox.Utils.defaultText} (${gettext("Yes")})`],
+			[1, gettext('Yes')],
+			[0, gettext('No')],
+		    ],
+		    defaultValue: '__default__',
+		    value: '__default__',
+		    deleteEmpty: false,
+		},
+		{
+		    xtype: 'displayfield',
+		    userCls: 'pmx-hint',
+		    value: gettext('Settings are saved in the browser local storage'),
+		},
+	    ],
+	},
+    ],
+
+    submit: function() {
+	let me = this;
+
+	let localStorage = Ext.state.Manager.getProvider();
+	localStorage.set('pve-tree-sorting', me.down('inputpanel').getValues() || null);
+
+	me.apiCallDone();
+	me.close();
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	me.callParent();
+
+	let localStorage = Ext.state.Manager.getProvider();
+	me.down('inputpanel').setValues(localStorage.get('pve-tree-sorting'));
+    },
+
+});
-- 
2.30.2