[pve-devel] applied: [PATCH v2 docs 2/2] apiviewer: add search and collapse/expand tools

[Thomas Lamprecht]

On 12/11/19 12:58 PM, Tim Marx wrote:
> Signed-off-by: Tim Marx <t.marx at proxmox.com>
> ---
>  api-viewer/PVEAPI.js | 75 +++++++++++++++++++++++++++++++++++++++++---
>  1 file changed, 71 insertions(+), 4 deletions(-)
> 

applied, the search thingy could have been a separate patch from the
expand/collapse one, though. Followed up a bit, see in-line.

> diff --git a/api-viewer/PVEAPI.js b/api-viewer/PVEAPI.js
> index dd36fff..9a14156 100644
> --- a/api-viewer/PVEAPI.js
> +++ b/api-viewer/PVEAPI.js
> @@ -22,7 +22,8 @@ Ext.onReady(function() {
>  	]
>      });
>  
> -    var store = Ext.create('Ext.data.TreeStore', {
> +    var store = Ext.define('pve-updated-treestore', {
> +	extend: 'Ext.data.TreeStore',
>  	model: Ext.define('pve-api-doc', {
>              extend: 'Ext.data.Model',
>              fields:  [
> @@ -39,8 +40,33 @@ Ext.onReady(function() {
>          }, {
>              property: 'text',
>              direction: 'ASC'
> -        }]
> -    });
> +	}],
> +	filterer: 'bottomup',
> +	doFilter: function(node) {
> +	    this.filterNodes(node, this.getFilters().getFilterFn(), true);
> +	},
> +
> +	filterNodes: function(node, filterFn, parentVisible) {
> +	    var me = this,
> +		bottomUpFiltering = me.filterer === 'bottomup',
> +		match = filterFn(node) && parentVisible || (node.isRoot() && !me.getRootVisible()),
> +		childNodes = node.childNodes,
> +		len = childNodes && childNodes.length, i, matchingChildren;
> +
> +	    if (len) {
> +		for (i = 0; i < len; ++i) {
> +		    matchingChildren = me.filterNodes(childNodes[i], filterFn, match || bottomUpFiltering) || matchingChildren;
> +		}
> +		if (bottomUpFiltering) {
> +		    match = matchingChildren || match;
> +		}
> +	    }
> +
> +	    node.set("visible", match, me._silentOptions);
> +	    return match;
> +	},
> +
> +    }).create();
>  
>      var render_description = function(value, metaData, record) {
>  	var pdef = record.data;
> @@ -354,8 +380,49 @@ Ext.onReady(function() {
>  	ct.setActiveTab(0);
>      };
>  
> +    Ext.define('Ext.form.SearchField', {
> +	extend: 'Ext.form.field.Text',
> +	alias: 'widget.searchfield',
> +	emptyText: 'Search',
> +	inputType: 'search',

made this flex, so that it uses full-width

> +	listeners: {
> +	    'change': function(){
> +
> +		var value = this.getValue();
> +		if (!Ext.isEmpty(value)) {
> +		    store.filter({
> +			property: 'path',
> +			value: value,
> +			anyMatch: true
> +		    });
> +		} else {
> +		    store.clearFilter();
> +		}
> +	    }
> +	}
> +    });
> +
>      var tree = Ext.create('Ext.tree.Panel', {
> -        title: 'Resource Tree',
> +	title: 'Resource Tree',
> +	tbar: [
> +	    {
> +		xtype: 'searchfield',
> +	    }
> +	],
> +	tools: [
> +	    {
> +		type: 'expand',

added a tooltip

> +		handler: function() {
> +		   tree.expandAll();
> +		},

'handler' was deprecated with 4.2, changed to: callback: (tree) => tree.expandAll(),


> +	    },
> +	    {
> +		type: 'collapse',
> +		handler: function() {
> +		   tree.collapseAll();
> +		}

same as above.

> +	    },
> +	],
>          store: store,
>  	width: 200,
>          region: 'west',
>