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

[Mira Limbeck <m.limbeck@proxmox.com>]

On 2/13/24 14:28, 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>
> ---
>  js/Makefile            |  1 +
>  js/MyNetworks.js       |  6 ++++++
>  js/ObjectGroup.js      |  6 ++++++
>  js/RelayDomains.js     |  6 ++++++
>  js/Transport.js        |  6 ++++++
>  js/form/FilterField.js | 46 ++++++++++++++++++++++++++++++++++++++++++
>  6 files changed, 71 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..e8b3e19 100644
> --- a/js/MyNetworks.js
> +++ b/js/MyNetworks.js
> @@ -106,6 +106,12 @@ Ext.define('PMG.MyNetworks', {
>  		},
>              },
>  	    remove_btn,
> +	    '->',
> +	    {
> +		xtype: 'pmgFilterField',
> +		store: store,
> +		filteredFields: ['cidr', 'comment'],
> +	    },
>          ];
>  
>  	Proxmox.Utils.monStoreErrors(me, store, true);
> diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
> index 2223ffa..7041084 100644
> --- a/js/ObjectGroup.js
> +++ b/js/ObjectGroup.js
> @@ -199,6 +199,12 @@ Ext.define('PMG.ObjectGroup', {
>  		    handler: run_editor,
>  		},
>  		remove_btn,
> +		'->',
> +		{
> +		    xtype: 'pmgFilterField',
> +		    store: me.store,
> +		    filteredFields: ['otype_text', 'descr'],

This behavior is kind of unexpected, since otype_text doesn't match the
visible text.
When an object group contains a single mail address, and you type
`address` even though none of the visible texts contain it, it still
matches since the otype_text contains address. It only shows `E-Mail`
though in the GUI (English language).

> +		},
>  	    ],
>  	});
>  
> diff --git a/js/RelayDomains.js b/js/RelayDomains.js
> index ec43aa1..19e953a 100644
> --- a/js/RelayDomains.js
> +++ b/js/RelayDomains.js
> @@ -111,6 +111,12 @@ Ext.define('PMG.RelayDomains', {
>  		},
>              },
>  	    remove_btn,
> +	    '->',
> +	    {
> +		xtype: 'pmgFilterField',
> +		store: store,
> +		filteredFields: ['domain', 'comment'],
> +	    },
>          ];
>  
>  	Proxmox.Utils.monStoreErrors(me, store, true);
> diff --git a/js/Transport.js b/js/Transport.js
> index 141fde1..fc3c28c 100644
> --- a/js/Transport.js
> +++ b/js/Transport.js
> @@ -72,6 +72,12 @@ Ext.define('PMG.Transport', {
>  		    callback: reload,
>  		    waitMsgTarget: me,
>  		},
> +		'->',
> +		{
> +		    xtype: 'pmgFilterField',
> +		    store: store,
> +		    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..0593d94
> --- /dev/null
> +++ b/js/form/FilterField.js
> @@ -0,0 +1,46 @@
> +Ext.define('PMG.form.FilterField', {
> +    extend: 'Ext.form.field.Text',
> +    alias: 'widget.pmgFilterField',
> +
> +    // the store to filter
> +    store: undefined,
> +
> +    // a list of fields of the records that will be searched
> +    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;
> +	    if (!me.store) {
> +		return;
> +	    }
> +
> +	    if (value) {
> +		me.store.filterBy((rec) => me.filteredFields.some((fieldname) =>
> +			rec.data[fieldname].toString().toLowerCase().indexOf(value.toLowerCase()) !== -1,
> +		    ),
> +		);
> +		field.triggers.clear.setVisible(true);
> +	    } else {
> +		me.store.clearFilter();
> +		field.triggers.clear.setVisible(false);
> +	    }
> +	},
> +    },
> +
> +});

Other than the unexpected behavior mentioned above, it behaved as expected.