* [pmg-devel] [PATCH pmg-gui] fix #4510: add filter box to many grids
@ 2024-02-13 13:28 Dominik Csapak
2024-02-21 9:49 ` Mira Limbeck
0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2024-02-13 13:28 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>
---
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'],
+ },
],
});
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);
+ }
+ },
+ },
+
+});
--
2.30.2
^ permalink raw reply [flat|nested] 2+ messages in thread
* Re: [pmg-devel] [PATCH pmg-gui] fix #4510: add filter box to many grids
2024-02-13 13:28 [pmg-devel] [PATCH pmg-gui] fix #4510: add filter box to many grids Dominik Csapak
@ 2024-02-21 9:49 ` Mira Limbeck
0 siblings, 0 replies; 2+ messages in thread
From: Mira Limbeck @ 2024-02-21 9:49 UTC (permalink / raw)
To: pmg-devel
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.
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2024-02-21 9:49 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-02-13 13:28 [pmg-devel] [PATCH pmg-gui] fix #4510: add filter box to many grids Dominik Csapak
2024-02-21 9:49 ` Mira Limbeck
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox