[pbs-devel] [PATCH] ui: datastore: Add basic expand/collapse all button

[pbs-devel] [PATCH] ui: datastore: Add basic expand/collapse all button

[Aaron Lauterer]

The parent component to the tree grid (tab.panel) does not understand
the Ext.panel.Tool class which would usually be used in such a
situation.

As a workaround a simple button (right aligned) in the tbar section has
to do the job for now.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 www/DataStoreContent.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
index a29436fc..cac0b481 100644
--- a/www/DataStoreContent.js
+++ b/www/DataStoreContent.js
@@ -47,6 +47,8 @@ Ext.define('PBS.DataStoreContent', {
 
     title: gettext('Content'),
 
+    isExpanded: false,
+
     controller: {
 	xclass: 'Ext.app.ViewController',
 
@@ -321,7 +323,22 @@ Ext.define('PBS.DataStoreContent', {
 		'backup-time': (time.getTime()/1000).toFixed(0),
 		'backup-type': type,
 	    }).show();
-	}
+	},
+
+	expandCollapseAll: function (button) {
+	    let me = this;
+	    let view = me.getView();
+
+	    if (me.isExpanded) {
+		view.collapseAll();
+		me.isExpanded = false;
+		button.setText(gettext('Expand All'));
+	    } else {
+		view.expandAll();
+		me.isExpanded = true;
+		button.setText(gettext('Collapse All'));
+	    }
+	},
     },
 
     columns: [
@@ -446,6 +463,12 @@ Ext.define('PBS.DataStoreContent', {
 	    enableFn: function(record) {
 		return !!record.data.leaf && record.size !== null && record.data.files.some(el => el.filename.endsWith('pxar.didx'));
 	    },
-	}
+	},
+	'->',
+	{
+	    xtype: "proxmoxButton",
+	    text: gettext('Expand All'),
+	    handler: 'expandCollapseAll',
+	},
     ],
 });
-- 
2.20.1

Re: [pbs-devel] [PATCH] ui: datastore: Add basic expand/collapse all button

[Aaron Lauterer]

ignore this version as it will not handle situations with only some tree 
items expanded very well. v2 is underway.

On 7/13/20 2:03 PM, Aaron Lauterer wrote:
> The parent component to the tree grid (tab.panel) does not understand
> the Ext.panel.Tool class which would usually be used in such a
> situation.
> 
> As a workaround a simple button (right aligned) in the tbar section has
> to do the job for now.
> 
> Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
> ---
>   www/DataStoreContent.js | 27 +++++++++++++++++++++++++--
>   1 file changed, 25 insertions(+), 2 deletions(-)
> 
> diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
> index a29436fc..cac0b481 100644
> --- a/www/DataStoreContent.js
> +++ b/www/DataStoreContent.js
> @@ -47,6 +47,8 @@ Ext.define('PBS.DataStoreContent', {
>   
>       title: gettext('Content'),
>   
> +    isExpanded: false,
> +
>       controller: {
>   	xclass: 'Ext.app.ViewController',
>   
> @@ -321,7 +323,22 @@ Ext.define('PBS.DataStoreContent', {
>   		'backup-time': (time.getTime()/1000).toFixed(0),
>   		'backup-type': type,
>   	    }).show();
> -	}
> +	},
> +
> +	expandCollapseAll: function (button) {
> +	    let me = this;
> +	    let view = me.getView();
> +
> +	    if (me.isExpanded) {
> +		view.collapseAll();
> +		me.isExpanded = false;
> +		button.setText(gettext('Expand All'));
> +	    } else {
> +		view.expandAll();
> +		me.isExpanded = true;
> +		button.setText(gettext('Collapse All'));
> +	    }
> +	},
>       },
>   
>       columns: [
> @@ -446,6 +463,12 @@ Ext.define('PBS.DataStoreContent', {
>   	    enableFn: function(record) {
>   		return !!record.data.leaf && record.size !== null && record.data.files.some(el => el.filename.endsWith('pxar.didx'));
>   	    },
> -	}
> +	},
> +	'->',
> +	{
> +	    xtype: "proxmoxButton",
> +	    text: gettext('Expand All'),
> +	    handler: 'expandCollapseAll',
> +	},
>       ],
>   });
>