* [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids
@ 2024-02-21 13:01 Dominik Csapak
2024-02-21 14:45 ` Mira Limbeck
0 siblings, 1 reply; 4+ messages in thread
From: Dominik Csapak @ 2024-02-21 13:01 UTC (permalink / raw)
To: pmg-devel
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
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..53fdfbf
--- /dev/null
+++ b/js/form/FilterField.js
@@ -0,0 +1,58 @@
+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();
+ }
+
+ 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);
+ } else {
+ me.store.clearFilter();
+ field.triggers.clear.setVisible(false);
+ }
+ },
+ },
+
+});
--
2.30.2
^ permalink raw reply [flat|nested] 4+ messages in thread
* Re: [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids
2024-02-21 13:01 [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids Dominik Csapak
@ 2024-02-21 14:45 ` Mira Limbeck
2024-02-21 16:55 ` Thomas Lamprecht
0 siblings, 1 reply; 4+ messages in thread
From: Mira Limbeck @ 2024-02-21 14:45 UTC (permalink / raw)
To: pmg-devel
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.
^ permalink raw reply [flat|nested] 4+ messages in thread
* Re: [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids
2024-02-21 14:45 ` Mira Limbeck
@ 2024-02-21 16:55 ` Thomas Lamprecht
2024-02-21 16:57 ` Thomas Lamprecht
0 siblings, 1 reply; 4+ messages in thread
From: Thomas Lamprecht @ 2024-02-21 16:55 UTC (permalink / raw)
To: Mira Limbeck, pmg-devel
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);
}
},
},
^ permalink raw reply [flat|nested] 4+ messages in thread
* Re: [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids
2024-02-21 16:55 ` Thomas Lamprecht
@ 2024-02-21 16:57 ` Thomas Lamprecht
0 siblings, 0 replies; 4+ messages in thread
From: Thomas Lamprecht @ 2024-02-21 16:57 UTC (permalink / raw)
To: Mira Limbeck, pmg-devel
Am 21/02/2024 um 17:55 schrieb Thomas Lamprecht:
> 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);
> }
> },
> },
>
>
I missed the v3...
^ permalink raw reply [flat|nested] 4+ messages in thread
end of thread, other threads:[~2024-02-21 16:57 UTC | newest]
Thread overview: 4+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-02-21 13:01 [pmg-devel] [PATCH pmg-gui v2] fix #4510: add filter box to many grids Dominik Csapak
2024-02-21 14:45 ` Mira Limbeck
2024-02-21 16:55 ` Thomas Lamprecht
2024-02-21 16:57 ` Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox