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

[Thomas Lamprecht]

On 1/29/19 12:17 PM, Christian Ebner wrote:
> 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, "\\$&");

hmm, bummer, I don't like that we have to do this at all...

So, either we use String.indexOf like the GlobalSearch field does,
we could use the ES6 String.includes, which would be exactly what
we want. Sadly, our oldest supported Browser (IE11) does not knows
ES6 so either we polyfill it [0] or really just use lowercase + indexOf

[0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill


> +			    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;
>