fix #4510: add filter box to many grids

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>

diff --git a/js/Makefile b/js/Makefile
index 78f2b575cb558160667dcd2b870c642d88025a58..5f57e0d720e3935e3fe6714cd9108ee770d2b7bd 100644 (file)
--- 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 22a857700c12678445c70b7465e561e09764a19b..9976e6e736a2706d17d44142a359a9f12e4a1943 100644 (file)
--- 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 2223ffa3e26a0e3b6e5bd69a03889449679d0298..387fd5461c2c846341a926e21e8c765d31a02cf4 100644 (file)
--- 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 ec43aa15ea3d1b2a46ed61d5d0c4cb5dd31908f7..68395db0577457c3cc49ad3776bed0440b005b6c 100644 (file)
--- 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 141fde1d2840412801b57fb918a31eb875de93b4..2758918f13595a4213b2677b429ba552ad652f22 100644 (file)
--- 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 (file)
index 0000000..ee804c5
--- /dev/null
+++ b/js/form/FilterField.js
@@ -0,0 +1,57 @@
+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();
+           }
+
+           me.store.clearFilter();
+           field.triggers.clear.setVisible(false);
+           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);
+           }
+       },
+    },
+
+});