[pve-devel] [PATCH manager v2] ui: storage backup view: Update remove button on protection change

[Christoph Heiss]

Currently this works in the backup view for containers/VMs, but not in
the storage backup view. Implement that for the latter part too.

Uses the callback functionality of the load() method of the store to
properly update the UI as soon as the loading has finished.
While at it, refactor the same thing in the grid backup view as well,
removing the current hack in the process.

Signed-off-by: Christoph Heiss <c.heiss at proxmox.com>

---
 FWIW, using me.store.load({..}) directly in the grid backup view works
 perfectly fine too (as I would expect). But I opted to reuse reload()
 there for now, to keep consistency with the rest of the file. Thus the
 added `options` parameter.

 Based on the suggestion in regard to the `var` -> `const`
 transformation, I also converted the callback from an anon-fn to an
 arrow-fn, to further modernize it.

 Changes v1 -> v2:
   * Transformed reload() declaration from `var` to `const`
   * Transformed reload() callback to arrow function
   * Renamed `args` parameter to `options`
   * Slightly reworded commit message

 v1: https://lists.proxmox.com/pipermail/pve-devel/2023-January/055470.html

 www/manager6/grid/BackupView.js    | 16 +++++++---------
 www/manager6/storage/BackupView.js |  6 +++++-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
index 7f7e1b62..65340dcb 100644
--- a/www/manager6/grid/BackupView.js
+++ b/www/manager6/grid/BackupView.js
@@ -79,9 +79,9 @@ Ext.define('PVE.grid.BackupView', {
 	    ]);
 	};

-	var reload = Ext.Function.createBuffered(function() {
+	const reload = Ext.Function.createBuffered((options) => {
 	    if (me.store) {
-		me.store.load();
+		me.store.load(options);
 	    }
 	}, 100);

@@ -300,20 +300,18 @@ Ext.define('PVE.grid.BackupView', {
 			handler: function(button, event, record) {
 			    let volid = record.data.volid, storage = storagesel.getValue();
 			    let url = `/api2/extjs/nodes/${nodename}/storage/${storage}/content/${volid}`;
-			    let newProtection = record.data.protected ? 0 : 1;
 			    Proxmox.Utils.API2Request({
 				url: url,
 				method: 'PUT',
 				waitMsgTarget: me,
 				params: {
-				    'protected': newProtection,
+				    'protected': record.data.protected ? 0 : 1,
 				},
 				failure: (response) => Ext.Msg.alert('Error', response.htmlStatus),
-				success: (response) => {
-				    reload();
-				    // propagate to remove button, fake for event as reload is to slow
-				    record.data.protected = newProtection; // TODO: check if writing is OK!
-				    sm.fireEvent('selectionchange', sm, [record]);
+				success: () => {
+				    reload({
+					callback: () => sm.fireEvent('selectionchange', sm, [record]),
+				    });
 				},
 			    });
 			},
diff --git a/www/manager6/storage/BackupView.js b/www/manager6/storage/BackupView.js
index b8dc8f11..fbdf573d 100644
--- a/www/manager6/storage/BackupView.js
+++ b/www/manager6/storage/BackupView.js
@@ -183,7 +183,11 @@ Ext.define('PVE.storage.BackupView', {
 			waitMsgTarget: me,
 			params: { 'protected': record.data.protected ? 0 : 1 },
 			failure: response => Ext.Msg.alert('Error', response.htmlStatus),
-			success: () => me.store.load(),
+			success: () => {
+			    me.store.load({
+				callback: () => sm.fireEvent('selectionchange', sm, [record]),
+			    });
+			},
 		    });
 		},
 	    },
--
2.34.1