* [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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal