[pve-devel] [PATCH manager 2/2] gui: BackupView: improve filtering of backups

[Dominik Csapak]

use 'gridfilter' plugin to filter by vmid (returned from the api),
but leave the 'search' textbox (so that the user can still search
for e.g. a year)

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/grid/BackupView.js | 54 +++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
index 2f814d3f..8ad7a367 100644
--- a/www/manager6/grid/BackupView.js
+++ b/www/manager6/grid/BackupView.js
@@ -8,6 +8,8 @@ Ext.define('PVE.grid.BackupView', {
     stateful: true,
     stateId: 'grid-guest-backup',
 
+    plugins: 'gridfilters',
+
     initComponent : function() {
 	var me = this;
 
@@ -26,38 +28,45 @@ Ext.define('PVE.grid.BackupView', {
 	    throw "no VM type specified";
 	}
 
-	var vmtypeFilter;
+	var vmtypeFilterFn;
 	if (vmtype === 'lxc' || vmtype === 'openvz') {
-	    vmtypeFilter = function(item) {
+	    vmtypeFilterFn = function(item) {
 		return PVE.Utils.volume_is_lxc_backup(item.data.volid, item.data.format);
 	    };
 	} else if (vmtype === 'qemu') {
-	    vmtypeFilter = function(item) {
+	    vmtypeFilterFn = function(item) {
 		return PVE.Utils.volume_is_qemu_backup(item.data.volid, item.data.format);
 	    };
 	} else {
 	    throw "unsupported VM type '" + vmtype + "'";
 	}
 
-	var searchFilter = {
+	let searchfilter = new Ext.util.Filter({
 	    property: 'volid',
-	// on initial store display only our vmid backups
-	// surround with minus sign to prevent the 2016 VMID bug
-	    value: vmtype + '-' + vmid + '-',
+	    value: '',
 	    anyMatch: true,
-	    caseSensitive: false
-	};
+	    caseSensitive: false,
+	});
 
 	me.store = Ext.create('Ext.data.Store', {
+	    statefulFilters: false,
 	    model: 'pve-storage-content',
-	    sorters: { 
-		property: 'volid', 
-		order: 'DESC' 
+	    sorters: {
+		property: 'volid',
+		order: 'DESC'
 	    },
 	    filters: [
-	        vmtypeFilter,
-		searchFilter
-		]
+		{
+		    id: 'vmtype',
+		    filterFn: vmtypeFilterFn
+		},
+		searchfilter,
+	    ]
+	});
+
+	me.store.getFilters().on('endupdate', () => {
+	    // gridfilter plugin sets this to true but we do not want it
+	    me.store.setStatefulFilters(false);
 	});
 
 	var reload = Ext.Function.createBuffered(function() {
@@ -96,16 +105,11 @@ Ext.define('PVE.grid.BackupView', {
 	    labelWidth: 50,
 	    labelAlign: 'right',
 	    enableKeyEvents: true,
-	    value: searchFilter.value,
 	    listeners: {
 		buffer: 500,
 		keyup: function(field) {
-		    me.store.clearFilter(true);
-		    searchFilter.value = field.getValue();
-		    me.store.filter([
-			vmtypeFilter,
-			searchFilter
-		    ]);
+		    searchfilter.setValue(field.getValue());
+		    me.store.addFilter(searchfilter);
 		}
 	    }
 	});
@@ -208,6 +212,12 @@ Ext.define('PVE.grid.BackupView', {
 		{
 		    header: 'VMID',
 		    width: 100,
+		    filter: {
+			type: 'number',
+			value: {
+			    eq: vmid
+			},
+		    },
 		    dataIndex: 'vmid'
 		},
 		{
-- 
2.20.1