[pmg-devel] [PATCH pmg-gui v3] fix #4510: add filter box to many grids

[pmg-devel] [PATCH pmg-gui v3] fix #4510: add filter box to many grids

[Dominik Csapak]

namely relay domains, transports, trusted networks, smtp whitelist +
when/what/who object grids.

Adds a new 'FilterField', that takes a store and a list of columns to
filter, and filters on every change.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v3:
* always clear the old filters on the store when the value changes
  otherwise we only add filter but never remove them

 js/Makefile            |  1 +
 js/MyNetworks.js       |  5 ++++
 js/ObjectGroup.js      | 11 ++++++++
 js/RelayDomains.js     |  5 ++++
 js/Transport.js        |  5 ++++
 js/form/FilterField.js | 57 ++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 84 insertions(+)
 create mode 100644 js/form/FilterField.js

diff --git a/js/Makefile b/js/Makefile
index 78f2b57..5f57e0d 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -2,6 +2,7 @@ include ../defines.mk
 
 JSSRC=							\
 	Utils.js					\
+	form/FilterField.js				\
 	FilterProxy.js					\
 	LoginView.js					\
 	RoleSelector.js					\
diff --git a/js/MyNetworks.js b/js/MyNetworks.js
index 22a8577..9976e6e 100644
--- a/js/MyNetworks.js
+++ b/js/MyNetworks.js
@@ -106,6 +106,11 @@ Ext.define('PMG.MyNetworks', {
 		},
             },
 	    remove_btn,
+	    '->',
+	    {
+		xtype: 'pmgFilterField',
+		filteredFields: ['cidr', 'comment'],
+	    },
         ];
 
 	Proxmox.Utils.monStoreErrors(me, store, true);
diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index 2223ffa..387fd54 100644
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -199,6 +199,17 @@ Ext.define('PMG.ObjectGroup', {
 		    handler: run_editor,
 		},
 		remove_btn,
+		'->',
+		{
+		    xtype: 'pmgFilterField',
+		    filteredFields: [
+			{
+			    name: 'otype',
+			    renderer: (otype) => PMG.Utils.object_editors[otype].subject,
+			},
+			'descr',
+		    ],
+		},
 	    ],
 	});
 
diff --git a/js/RelayDomains.js b/js/RelayDomains.js
index ec43aa1..68395db 100644
--- a/js/RelayDomains.js
+++ b/js/RelayDomains.js
@@ -111,6 +111,11 @@ Ext.define('PMG.RelayDomains', {
 		},
             },
 	    remove_btn,
+	    '->',
+	    {
+		xtype: 'pmgFilterField',
+		filteredFields: ['domain', 'comment'],
+	    },
         ];
 
 	Proxmox.Utils.monStoreErrors(me, store, true);
diff --git a/js/Transport.js b/js/Transport.js
index 141fde1..2758918 100644
--- a/js/Transport.js
+++ b/js/Transport.js
@@ -72,6 +72,11 @@ Ext.define('PMG.Transport', {
 		    callback: reload,
 		    waitMsgTarget: me,
 		},
+		'->',
+		{
+		    xtype: 'pmgFilterField',
+		    filteredFields: ['domain', 'host', 'port', 'protocol', 'comment'],
+		},
 	    ],
 	    viewConfig: {
 		trackOver: false,
diff --git a/js/form/FilterField.js b/js/form/FilterField.js
new file mode 100644
index 0000000..ee804c5
--- /dev/null
+++ b/js/form/FilterField.js
@@ -0,0 +1,57 @@
+Ext.define('PMG.form.FilterField', {
+    extend: 'Ext.form.field.Text',
+    alias: 'widget.pmgFilterField',
+
+    // the store to filter
+    // optional, if not given the first parent grids store will be used
+    store: undefined,
+
+    // a list of fields of the records that will be searched
+    // a field can be a string (dataIndex) or an object with 'name' and 'renderer'
+    // the renderer will be used before testing the field
+    filteredFields: [],
+
+    fieldLabel: gettext('Filter'),
+    labelAlign: 'right',
+
+    triggers: {
+	clear: {
+	    cls: 'pmx-clear-trigger',
+	    hidden: true,
+	    handler: function() {
+		let me = this;
+		me.setValue('');
+		me.triggers.clear.setVisible(false);
+	    },
+	},
+    },
+
+    listeners: {
+	change: function(field, value) {
+	    let me = this;
+	    let grid = me.up('grid');
+	    if (!me.store) {
+		me.store = grid.getStore();
+	    }
+
+	    me.store.clearFilter();
+	    field.triggers.clear.setVisible(false);
+	    if (value) {
+		me.store.filterBy((rec) => me.filteredFields.some((fieldDef) => {
+		    let fieldname, renderer;
+		    if (Ext.isObject(fieldDef)) {
+			fieldname = fieldDef.name;
+			renderer = fieldDef.renderer;
+		    } else {
+			fieldname = fieldDef;
+			renderer = Ext.identityFn;
+		    }
+		    let testedValue = renderer(rec.data[fieldname]);
+		    return testedValue.toString().toLowerCase().indexOf(value.toLowerCase()) !== -1;
+		}));
+		field.triggers.clear.setVisible(true);
+	    }
+	},
+    },
+
+});
-- 
2.30.2

Re: [pmg-devel] [PATCH pmg-gui v3] fix #4510: add filter box to many grids

[Mira Limbeck]

On 2/21/24 15:47, Dominik Csapak wrote:
> namely relay domains, transports, trusted networks, smtp whitelist +
> when/what/who object grids.
> 
> Adds a new 'FilterField', that takes a store and a list of columns to
> filter, and filters on every change.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> changes from v3:
> * always clear the old filters on the store when the value changes
>   otherwise we only add filter but never remove them
> 
>  js/Makefile            |  1 +
>  js/MyNetworks.js       |  5 ++++
>  js/ObjectGroup.js      | 11 ++++++++
>  js/RelayDomains.js     |  5 ++++
>  js/Transport.js        |  5 ++++
>  js/form/FilterField.js | 57 ++++++++++++++++++++++++++++++++++++++++++
>  6 files changed, 84 insertions(+)
>  create mode 100644 js/form/FilterField.js
> 

lgtm

Tested-by: Mira Limbeck <m.limbeck@proxmox.com>

[pmg-devel] applied: [PATCH pmg-gui v3] fix #4510: add filter box to many grids

[Thomas Lamprecht]

Am 21/02/2024 um 15:47 schrieb Dominik Csapak:
> namely relay domains, transports, trusted networks, smtp whitelist +
> when/what/who object grids.
> 
> Adds a new 'FilterField', that takes a store and a list of columns to
> filter, and filters on every change.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> changes from v3:
> * always clear the old filters on the store when the value changes
>   otherwise we only add filter but never remove them
> 
>  js/Makefile            |  1 +
>  js/MyNetworks.js       |  5 ++++
>  js/ObjectGroup.js      | 11 ++++++++
>  js/RelayDomains.js     |  5 ++++
>  js/Transport.js        |  5 ++++
>  js/form/FilterField.js | 57 ++++++++++++++++++++++++++++++++++++++++++
>  6 files changed, 84 insertions(+)
>  create mode 100644 js/form/FilterField.js
> 
>

applied, thanks!

One could argue though that having these for action object might be good
for consistency w.r.t. the other object types.
And even though most setups probably has not _that_ many of those, it has
almost no cost and might be even nice on to find stuff when one has low
count of actions.

Similar for the mail filter rule grid, but no hard feelings for either.