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

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

Am 21/02/2024 um 15:45 schrieb Mira Limbeck:
> On 2/21/24 14:01, 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 v1:
>> * lookup store automatically
>> * add ability to add a renderer so that we can match that what is displayed
>> * add that for the ObjectGroup's otype filter (previously otype_text)
>>
>>  js/Makefile            |  1 +
>>  js/MyNetworks.js       |  5 ++++
>>  js/ObjectGroup.js      | 11 ++++++++
>>  js/RelayDomains.js     |  5 ++++
>>  js/Transport.js        |  5 ++++
>>  js/form/FilterField.js | 58 ++++++++++++++++++++++++++++++++++++++++++
>>  6 files changed, 85 insertions(+)
>>  create mode 100644 js/form/FilterField.js
>>
> 
> The ObjectGroup filter now works on the visible text, as one would expect.
> 
> One thing I found:
> IP: 10.67.0.100
> Filter: 10.67. -> works
> 
> IP: 10.67.0.100
> Filter: 10.67.1 -> no match
> 
> now, when you remove the `1` it should show a match again, but doesn't.
> only clearing the whole filter and adding the `10.67.` again works.

yeah I could reproduce this here too, this is because the filter needs clearing
for any change, as otherwise all those filtered out since the last full clear
won't be considered any more. The following diff on-top fixes this:


diff --git a/js/form/FilterField.js b/js/form/FilterField.js
index 53fdfbf..2c6d4b8 100644
--- a/js/form/FilterField.js
+++ b/js/form/FilterField.js
@@ -34,6 +34,9 @@ Ext.define('PMG.form.FilterField', {
                me.store = grid.getStore();
            }
 
+           me.store.clearFilter();
+           field.triggers.clear.setVisible(value.length > 0);
+
            if (value) {
                me.store.filterBy((rec) => me.filteredFields.some((fieldDef) => {
                    let fieldname, renderer;
@@ -47,10 +50,6 @@ Ext.define('PMG.form.FilterField', {
                    let testedValue = renderer(rec.data[fieldname]);
                    return testedValue.toString().toLowerCase().indexOf(value.toLowerCase()) !== -1;
                }));
-               field.triggers.clear.setVisible(true);
-           } else {
-               me.store.clearFilter();
-               field.triggers.clear.setVisible(false);
            }
        },
     },