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.csa...@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'));
+    },
+
+});


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Reply via email to