www/manager6/panel/ConfigPanel.js

   1 /*
   2  * Base class for all the multitab config panels
   3  *
   4  * How to use this:
   5  *
   6  * You create a subclass of this, and then define your wanted tabs
   7  * as items like this:
   8  *
   9  * items: [{
  10  *  title: "myTitle",
  11  *  xytpe: "somextype",
  12  *  iconCls: 'fa fa-icon',
  13  *  groups: ['somegroup'],
  14  *  expandedOnInit: true,
  15  *  itemId: 'someId'
  16  * }]
  17  *
  18  * this has to be in the declarative syntax, else we
  19  * cannot save them for later
  20  * (so no Ext.create or Ext.apply of an item in the subclass)
  21  *
  22  * the groups array expects the itemids of the items
  23  * which are the parents, which have to come before they
  24  * are used
  25  *
  26  * if you want following the tree:
  27  *
  28  * Option1
  29  * Option2
  30  *   -> SubOption1
  31  *      -> SubSubOption1
  32  *
  33  * the suboption1 group array has to look like this:
  34  * groups: ['itemid-of-option2']
  35  *
  36  * and of subsuboption1:
  37  * groups: ['itemid-of-option2', 'itemid-of-suboption1']
  38  *
  39  * setting the expandedOnInit determines if the item/group is expanded
  40  * initially (false by default)
  41  */
  42 Ext.define('PVE.panel.Config', {
  43     extend: 'Ext.panel.Panel',
  44     alias: 'widget.pvePanelConfig',
  45
  46     showSearch: true, // add a resource grid with a search button as first tab
  47     viewFilter: undefined, // a filter to pass to that resource grid
  48
  49     tbarSpacing: true, // if true, adds a spacer after the title in tbar
  50
  51     dockedItems: [{
  52         // this is needed for the overflow handler
  53         xtype: 'toolbar',
  54         overflowHandler: 'scroller',
  55         dock: 'left',
  56         style: {
  57             padding: 0,
  58             margin: 0,
  59         },
  60         cls: 'pve-toolbar-bg',
  61         items: {
  62             xtype: 'treelist',
  63             itemId: 'menu',
  64             ui: 'pve-nav',
  65             expanderOnly: true,
  66             expanderFirst: false,
  67             animation: false,
  68             singleExpand: false,
  69             listeners: {
  70                 selectionchange: function(treeList, selection) {
  71                     if (!selection) {
  72                         return;
  73                     }
  74                     let view = this.up('panel');
  75                     view.suspendLayout = true;
  76                     view.activateCard(selection.data.id);
  77                     view.suspendLayout = false;
  78                     view.updateLayout();
  79                 },
  80                 itemclick: function(treelist, info) {
  81                     var olditem = treelist.getSelection();
  82                     var newitem = info.node;
  83
  84                     // when clicking on the expand arrow, we don't select items, but still want the original behaviour
  85                     if (info.select === false) {
  86                         return;
  87                     }
  88
  89                     // click on a different, open item then leave it open, else toggle the clicked item
  90                     if (olditem.data.id !== newitem.data.id &&
  91                         newitem.data.expanded === true) {
  92                         info.toggle = false;
  93                     } else {
  94                         info.toggle = true;
  95                     }
  96                 },
  97             },
  98         },
  99     },
 100     {
 101         xtype: 'toolbar',
 102         itemId: 'toolbar',
 103         dock: 'top',
 104         height: 36,
 105         overflowHandler: 'scroller',
 106     }],
 107
 108     firstItem: '',
 109     layout: 'card',
 110     border: 0,
 111
 112     // used for automated test
 113     selectById: function(cardid) {
 114         var me = this;
 115
 116         var root = me.store.getRoot();
 117         var selection = root.findChild('id', cardid, true);
 118
 119         if (selection) {
 120             selection.expand();
 121             var menu = me.down('#menu');
 122             menu.setSelection(selection);
 123             return cardid;
 124         }
 125         return '';
 126     },
 127
 128     activateCard: function(cardid) {
 129         var me = this;
 130         if (me.savedItems[cardid]) {
 131             var curcard = me.getLayout().getActiveItem();
 132             var newcard = me.add(me.savedItems[cardid]);
 133             me.helpButton.setOnlineHelp(newcard.onlineHelp || me.onlineHelp);
 134             if (curcard) {
 135                 me.setActiveItem(cardid);
 136                 me.remove(curcard, true);
 137
 138                 // trigger state change
 139
 140                 var ncard = cardid;
 141                 // Note: '' is alias for first tab.
 142                 // First tab can be 'search' or something else
 143                 if (cardid === me.firstItem) {
 144                     ncard = '';
 145                 }
 146                 if (me.hstateid) {
 147                    me.sp.set(me.hstateid, { value: ncard });
 148                 }
 149             }
 150         }
 151     },
 152
 153     initComponent: function() {
 154         var me = this;
 155
 156         var stateid = me.hstateid;
 157
 158         me.sp = Ext.state.Manager.getProvider();
 159
 160         var activeTab; // leaving this undefined means items[0] will be the default tab
 161
 162         if (stateid) {
 163             let state = me.sp.get(stateid);
 164             if (state && state.value) {
 165                 // if this tab does not exist, it chooses the first
 166                 activeTab = state.value;
 167             }
 168         }
 169
 170         // get title
 171         var title = me.title || me.pveSelNode.data.text;
 172         me.title = undefined;
 173
 174         // create toolbar
 175         var tbar = me.tbar || [];
 176         me.tbar = undefined;
 177
 178         if (!me.onlineHelp) {
 179             switch (me.pveSelNode.data.id) {
 180                 case 'type/storage': me.onlineHelp = 'chapter-pvesm.html'; break;
 181                 case 'type/qemu': me.onlineHelp = 'chapter-qm.html'; break;
 182                 case 'type/lxc': me.onlineHelp = 'chapter-pct.html'; break;
 183                 case 'type/pool': me.onlineHelp = 'chapter-pveum.html#_pools'; break;
 184                 case 'type/node': me.onlineHelp = 'chapter-sysadmin.html'; break;
 185             }
 186         }
 187
 188         if (me.tbarSpacing) {
 189             tbar.unshift('->');
 190         }
 191         tbar.unshift({
 192             xtype: 'tbtext',
 193             text: title,
 194             baseCls: 'x-panel-header-text',
 195         });
 196
 197         me.helpButton = Ext.create('Proxmox.button.Help', {
 198             hidden: false,
 199             listenToGlobalEvent: false,
 200             onlineHelp: me.onlineHelp || undefined,
 201         });
 202
 203         tbar.push(me.helpButton);
 204
 205         me.dockedItems[1].items = tbar;
 206
 207         // include search tab
 208         me.items = me.items || [];
 209         if (me.showSearch) {
 210             me.items.unshift({
 211                 itemId: 'search',
 212                 title: gettext('Search'),
 213                 iconCls: 'fa fa-search',
 214                 xtype: 'pveResourceGrid',
 215                 pveSelNode: me.pveSelNode,
 216             });
 217         }
 218
 219         me.savedItems = {};
 220         if (me.items[0]) {
 221             me.firstItem = me.items[0].itemId;
 222         }
 223
 224         me.store = Ext.create('Ext.data.TreeStore', {
 225             root: {
 226                 expanded: true,
 227             },
 228         });
 229         var root = me.store.getRoot();
 230         me.insertNodes(me.items);
 231
 232         delete me.items;
 233         me.defaults = me.defaults || {};
 234         Ext.apply(me.defaults, {
 235             pveSelNode: me.pveSelNode,
 236             viewFilter: me.viewFilter,
 237             workspace: me.workspace,
 238             border: 0,
 239         });
 240
 241         me.callParent();
 242
 243         var menu = me.down('#menu');
 244         var selection = root.findChild('id', activeTab, true) || root.firstChild;
 245         var node = selection;
 246         while (node !== root) {
 247             node.expand();
 248             node = node.parentNode;
 249         }
 250         menu.setStore(me.store);
 251         menu.setSelection(selection);
 252
 253         // on a state change,
 254         // select the new item
 255         var statechange = function(sp, key, state) {
 256             // it the state change is for this panel
 257             if (stateid && key === stateid && state) {
 258                 // get active item
 259                 var acard = me.getLayout().getActiveItem().itemId;
 260                 // get the itemid of the new value
 261                 var ncard = state.value || me.firstItem;
 262                 if (ncard && acard !== ncard) {
 263                     // select the chosen item
 264                     menu.setSelection(root.findChild('id', ncard, true) || root.firstChild);
 265                 }
 266             }
 267         };
 268
 269         if (stateid) {
 270             me.mon(me.sp, 'statechange', statechange);
 271         }
 272     },
 273
 274     insertNodes: function(items) {
 275         var me = this;
 276         var root = me.store.getRoot();
 277
 278         items.forEach(function(item) {
 279             var treeitem = Ext.create('Ext.data.TreeModel', {
 280                 id: item.itemId,
 281                 text: item.title,
 282                 iconCls: item.iconCls,
 283                 leaf: true,
 284                 expanded: item.expandedOnInit,
 285             });
 286             item.header = false;
 287             if (me.savedItems[item.itemId] !== undefined) {
 288                 throw "itemId already exists, please use another";
 289             }
 290             me.savedItems[item.itemId] = item;
 291
 292             var group;
 293             var curnode = root;
 294
 295             // get/create the group items
 296             while (Ext.isArray(item.groups) && item.groups.length > 0) {
 297                 group = item.groups.shift();
 298
 299                 var child = curnode.findChild('id', group);
 300                 if (child === null) {
 301                     // did not find the group item
 302                     // so add it where we are
 303                     break;
 304                 }
 305                 curnode = child;
 306             }
 307
 308             // insert the item
 309
 310             // lets see if it already exists
 311             var node = curnode.findChild('id', item.itemId);
 312
 313             if (node === null) {
 314                 curnode.appendChild(treeitem);
 315             } else {
 316                 // should not happen!
 317                 throw "id already exists";
 318             }
 319         });
 320     },
 321 });