[pve-devel] [PATCH manager] ui: resource tree: add collapse/expand all button

[Dominik Csapak <d.csapak@proxmox.com>]

which defaults to expand all, and only if all expanded, collapse all.

Changes icon dynamically when nodes expand/collapse.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
if we'd find an icon that would fit for both cases, we could omit the
event bubbling probably. If there are many nodes, the 'hasCollapsed'
check will trigger more often, iterating over all tree nodes..


 www/manager6/Workspace.js         | 20 ++++++++++++++++++++
 www/manager6/tree/ResourceTree.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 922e01df..7bc2aeea 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -260,6 +260,15 @@ Ext.define('PVE.StdWorkspace', {
 		    },
 		},
 	    },
+	    listeners: {
+		expansionchange: function(tree) {
+		    if (tree.hasCollapsed()) {
+			me.down('#collapseButton').setIconCls('fa fa-fw fa-plus-square-o x-btn-icon-el-default-toolbar-small');
+		    } else {
+			me.down('#collapseButton').setIconCls('fa fa-fw fa-minus-square-o x-btn-icon-el-default-toolbar-small');
+		    }
+		},
+	    },
 	});
 
 	selview.on('select', function(combo, records) {
@@ -470,6 +479,17 @@ Ext.define('PVE.StdWorkspace', {
 			    padding: '0 0 5 0',
 			    items: [
 				selview,
+				{
+				    xtype: 'button',
+				    cls: 'x-btn-default-toolbar-small',
+				    itemId: 'collapseButton',
+				    tooltip: gettext('Expand/Collapse Tree'),
+				    iconCls: 'fa fa-fw fa-plus-square-o x-btn-icon-el-default-toolbar-small',
+				    handler: () => {
+					let rt = me.down('pveResourceTree');
+					rt.toggleExpansion();
+				    },
+				},
 				{
 				    xtype: 'button',
 				    cls: 'x-btn-default-toolbar-small',
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 8b7c2521..cef869f7 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -255,6 +255,30 @@ Ext.define('PVE.tree.ResourceTree', {
 	return changed;
     },
 
+    hasCollapsed: function() {
+	let me = this;
+	let root = me.store.getRootNode();
+	let collapsed = false;
+	root.cascade(function(rec) {
+	    if (!rec.isExpanded() && !rec.isLeaf()) {
+		collapsed = true;
+		return false;
+	    }
+	    return true;
+	});
+	return collapsed;
+    },
+
+    toggleExpansion: function() {
+	let me = this;
+	let root = me.store.getRootNode();
+	if (me.hasCollapsed()) {
+	    root.expandChildren(true);
+	} else {
+	    root.collapseChildren(false);
+	}
+    },
+
     initComponent: function() {
 	let me = this;
 	me.saveSortingOptions();
@@ -562,6 +586,13 @@ Ext.define('PVE.tree.ResourceTree', {
 	rstore.on("load", updateTree);
 	rstore.startUpdate();
 
+	store.on('nodeexpand', function() {
+	    me.fireEvent('expansionchange', me);
+	});
+	store.on('nodecollapse', function() {
+	    me.fireEvent('expansionchange', me);
+	});
+
 	me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
 	    me.store.getRootNode().cascadeBy({
 		before: function(node) {
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel