ui: MainView/NavigationTree: improve tree selection handling

this fixes some bugs related to selection handling in the treelist:
* datastores were not selected after a reload
* reloading when in a tabpanel on any tab but the first, would
  not select a treenode
* changing between datastores on any tab but the first would
  not select the same tab on the new datastore

fixed those by mostly rewriting the changePath handling for
datastores and tabpanels in general

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/MainView.js b/www/MainView.js
index cfd190585115af542a29c9e11dca700a0e743571..7998e53509cb93bb43a64ec142bab010cd619c92 100644 (file)
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -67,46 +67,48 @@ Ext.define('PBS.MainView', {
            var contentpanel = me.lookupReference('contentpanel');
            var lastpanel = contentpanel.getLayout().getActiveItem();
 
-           var obj;
-           if (PBS.Utils.isDataStorePath(path)) {
-               let datastore = PBS.Utils.getDataStoreFromPath(path);
-               obj = contentpanel.add({
-                   xtype: 'pbsDataStorePanel',
-                   nodename: 'localhost',
-                   datastore,
-               });
-           } else {
-               obj = contentpanel.add({
-                   xtype: path,
-                   nodename: 'localhost',
-                   border: false,
-               });
-           }
+           let tabChangeListener = function(tp, newc, oldc) {
+               let newpath = path;
 
-           var treelist = me.lookupReference('navtree');
-
-           treelist.suspendEvents();
-           if (subpath === undefined) {
-               treelist.select(path);
-           } else {
-               treelist.select(path + ':' + subpath);
-           }
-           treelist.resumeEvents();
+               // only add the subpath part for the
+               // non-default tabs
+               if (tp.items.findIndex('id', newc.id) !== 0) {
+                   newpath += `:${newc.getItemId()}`;
+               }
 
-           if (Ext.isFunction(obj.setActiveTab)) {
-               obj.setActiveTab(subpath || 0);
-               obj.addListener('tabchange', function(tabpanel, newc, oldc) {
-                   var newpath = path;
+               me.redirectTo(newpath);
+           };
 
-                   // only add the subpath part for the
-                   // non-default tabs
-                   if (tabpanel.items.findIndex('id', newc.id) !== 0) {
-                       newpath += ":" + newc.getItemId();
+           let xtype = path;
+           var obj;
+           let datastore;
+           if (PBS.Utils.isDataStorePath(path)) {
+               datastore = PBS.Utils.getDataStoreFromPath(path);
+               if (lastpanel && lastpanel.xtype === 'pbsDataStorePanel' && !subpath) {
+                   let activeTab = lastpanel.getActiveTab();
+                   let newpath = path;
+                   if (lastpanel.items.indexOf(activeTab) !== 0) {
+                       subpath = activeTab.getItemId();
+                       newpath += `:${subpath}`;
                    }
-
                    me.redirectTo(newpath);
-               });
+               }
+               xtype = 'pbsDataStorePanel';
            }
+           obj = contentpanel.add({
+               xtype,
+               datastore,
+               nodename: 'localhost',
+               border: false,
+               activeTab: subpath || 0,
+               listeners: {
+                   tabchange: tabChangeListener,
+               },
+           });
+
+           var treelist = me.lookupReference('navtree');
+
+           treelist.select(path, true);
 
            contentpanel.setActiveItem(obj);
 

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 54e0adeb64f96c35702f3e7bedac7b5c733a2ce0..6524a5c39612ce03eebed196c9b5c10041d91bfd 100644 (file)
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -163,6 +163,12 @@ Ext.define('PBS.view.main.NavigationTree', {
            });
 
            Ext.Array.forEach(erase_list, function(node) { list.removeChild(node, true); });
+
+           if (view.pathToSelect !== undefined) {
+               let path = view.pathToSelect;
+               delete view.pathToSelect;
+               view.select(path, true);
+           }
        },
     },
 
@@ -186,10 +192,20 @@ Ext.define('PBS.view.main.NavigationTree', {
        },
     },
 
-    select: function(path) {
+    select: function(path, silent) {
        var me = this;
-       var item = me.getStore().findRecord('path', path, 0, false, true, true);
-       me.setSelection(item);
+       if (me.rstore.isLoaded()) {
+           if (silent) {
+               me.suspendEvents(false);
+           }
+           var item = me.getStore().findRecord('path', path, 0, false, true, true);
+           me.setSelection(item);
+           if (silent) {
+               me.resumeEvents(true);
+           }
+       } else {
+           me.pathToSelect = path;
+       }
     },
 
     animation: false,