ui: MainView/NavigationTree: improve tree selection handling

[proxmox-backup.git] / www / NavigationTree.js

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 3fa782e119d29ea9b17a72a98db2608e6f4f01ad..6524a5c39612ce03eebed196c9b5c10041d91bfd 100644 (file)
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -1,3 +1,13 @@
+Ext.define('pbs-datastore-list', {
+    extend: 'Ext.data.Model',
+    fields: ['name', 'comment'],
+    proxy: {
+        type: 'proxmox',
+        url: "/api2/json/admin/datastore",
+    },
+    idProperty: 'store',
+});
+
 Ext.define('PBS.store.NavigationStore', {
     extend: 'Ext.data.TreeStore',
 
@@ -36,12 +46,6 @@ Ext.define('PBS.store.NavigationStore', {
                        path: 'pbsRemoteView',
                        leaf: true,
                    },
-                   {
-                       text: gettext('Sync Jobs'),
-                       iconCls: 'fa fa-refresh',
-                       path: 'pbsSyncJobView',
-                       leaf: true,
-                   },
                    {
                        text: gettext('Subscription'),
                        iconCls: 'fa fa-support',
@@ -82,9 +86,18 @@ Ext.define('PBS.store.NavigationStore', {
            {
                text: gettext('Datastore'),
                iconCls: 'fa fa-archive',
-               path: 'pbsDataStoreConfig',
+               id: 'datastores',
                expanded: true,
+               expandable: false,
                leaf: false,
+               children: [
+                   {
+                       text: gettext('Add Datastore'),
+                       iconCls: 'fa fa-plus-circle',
+                       leaf: true,
+                       id: 'addbutton',
+                   },
+               ],
            },
        ],
     },
@@ -116,21 +129,23 @@ Ext.define('PBS.view.main.NavigationTree', {
 
            let root = view.getStore().getRoot();
 
-           // FIXME: newly added always get appended to the end..
-           records.sort((a, b) => {
-               if (a.id > b.id) return 1;
-               if (a.id < b.id) return -1;
-               return 0;
-           });
+           records.sort((a, b) => a.id.localeCompare(b.id));
 
-           var list = root.findChild('path', 'pbsDataStoreConfig', false);
+           var list = root.findChild('id', 'datastores', false);
            var length = records.length;
            var lookup_hash = {};
-           for (var i = 0; i < length; i++) {
+           let j = 0;
+           for (let i = 0; i < length; i++) {
                let name = records[i].id;
                lookup_hash[name] = true;
-               if (!list.findChild('text', name, false)) {
-                   list.appendChild({
+
+               while (name.localeCompare(list.getChildAt(j).data.text) > 0 &&
+                      (j + 1) < list.childNodes.length) {
+                   j++;
+               }
+
+               if (list.getChildAt(j).data.text.localeCompare(name) !== 0) {
+                   list.insertChild(j, {
                        text: name,
                        path: `DataStore-${name}`,
                        iconCls: 'fa fa-database',
@@ -142,19 +157,55 @@ Ext.define('PBS.view.main.NavigationTree', {
            var erase_list = [];
            list.eachChild(function(node) {
                let name = node.data.text;
-               if (!lookup_hash[name]) {
+               if (!lookup_hash[name] && node.data.id !== 'addbutton') {
                    erase_list.push(node);
                }
            });
 
-           Ext.Array.forEach(erase_list, function(node) { node.erase(); });
+           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);
+           }
+       },
+    },
+
+    listeners: {
+       itemclick: function(tl, info) {
+           if (info.node.data.id === 'datastores') {
+               return false;
+           }
+           if (info.node.data.id === 'addbutton') {
+               let me = this;
+               Ext.create('PBS.DataStoreEdit', {
+                   listeners: {
+                       destroy: function() {
+                           me.rstore.reload();
+                       },
+                   },
+               }).show();
+               return false;
+           }
+           return true;
        },
     },
 
-    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,