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

[Aaron Lauterer <a.lauterer@proxmox.com>]

two small nits inline

On 2/2/23 15:41, Dominik Csapak wrote:
> 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',

It currently looks a bit cramped.
Can we add a
margin: '0 0 0 5',
here? This way we leave the same space to the drop down menu to the left as 
everywhere else in that part of the UI.

> +				    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'),

s/browser/browser's/  to indicate possession. Or we could rephrase it to 
"Settings are saved in the local storage of the browser".

> +		},
> +	    ],
> +	},
> +    ],
> +
> +    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'));
> +    },
> +
> +});