[pve-devel] [PATCH v2 manager] Fix #1831: Add filter to CT template/appliances download window

Christian Ebner c.ebner at proxmox.com
Tue Jan 29 12:17:13 CET 2019


This adds the posibility to filter CT template/appliances by package as well as
description in the CT template/appliances download window.

Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---

Version 2: changes made according to off-list discussions
    * Renamed textfield label from 'Search' to 'Filter' as this makes more sense
      in this context
    * filtering is now performed on both, package and description
    * regex input is escaped to avoid strange behaviour
    * window is resized by 50 percent to look better on screen
    
 www/manager6/storage/ContentView.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index 6b73f437..b61798de 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -35,11 +35,33 @@ Ext.define('PVE.grid.TemplateSelector', {
 	    store.load();
 	};
 
+	var reFilter = function(rec) {
+	    return me.re.exec(rec.data['package']) || me.re.exec(rec.data.headline);
+	};
+
 	Proxmox.Utils.monStoreErrors(me, store);
 
 	Ext.apply(me, {
 	    store: store,
 	    selModel: sm,
+	    tbar: [
+		'->',
+		gettext('Filter: '),
+		{
+		    xtype: 'textfield',
+		    width: 200,
+		    enableKeyEvents: true,
+		    listeners: {
+			buffer: 500,
+			keyup: function(field) {
+			    var input = field.getValue().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+			    me.re = new RegExp(input, "i");
+			    store.clearFilter(true);
+			    store.filterBy(reFilter);
+			}
+		    }
+		}
+	    ],
 	    features: [ groupingFeature ],
 	    columns: [
 		{
@@ -92,8 +114,8 @@ Ext.define('PVE.storage.TemplateDownload', {
     modal: true,
     title: gettext('Templates'),
     layout: 'fit',
-    width: 600,
-    height: 400,
+    width: 900,
+    height: 600,
     initComponent : function() {
 	/*jslint confusion: true */
         var me = this;
-- 
2.11.0




More information about the pve-devel mailing list