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             // use the onlineHelp property indirection to enforce checking reference validity
 180             let typeToOnlineHelp = {
 181                 'type/lxc': { onlineHelp: 'chapter_pct' },
 182                 'type/node': { onlineHelp: 'chapter_system_administration' },
 183                 'type/pool': { onlineHelp: 'pveum_pools' },
 184                 'type/qemu': { onlineHelp: 'chapter_virtual_machines' },
 185                 'type/sdn': { onlineHelp: 'chapter_pvesdn' },
 186                 'type/storage': { onlineHelp: 'chapter_storage' },
 187             };
 188             me.onlineHelp = typeToOnlineHelp[me.pveSelNode.data.id]?.onlineHelp;
 189         }
 190
 191         if (me.tbarSpacing) {
 192             tbar.unshift('->');
 193         }
 194         tbar.unshift({
 195             xtype: 'tbtext',
 196             text: title,
 197             baseCls: 'x-panel-header-text',
 198         });
 199
 200         me.helpButton = Ext.create('Proxmox.button.Help', {
 201             hidden: false,
 202             listenToGlobalEvent: false,
 203             onlineHelp: me.onlineHelp || undefined,
 204         });
 205
 206         tbar.push(me.helpButton);
 207
 208         me.dockedItems[1].items = tbar;
 209
 210         // include search tab
 211         me.items = me.items || [];
 212         if (me.showSearch) {
 213             me.items.unshift({
 214                 xtype: 'pveResourceGrid',
 215                 itemId: 'search',
 216                 title: gettext('Search'),
 217                 iconCls: 'fa fa-search',
 218                 pveSelNode: me.pveSelNode,
 219             });
 220         }
 221
 222         me.savedItems = {};
 223         if (me.items[0]) {
 224             me.firstItem = me.items[0].itemId;
 225         }
 226
 227         me.store = Ext.create('Ext.data.TreeStore', {
 228             root: {
 229                 expanded: true,
 230             },
 231         });
 232         var root = me.store.getRoot();
 233         me.insertNodes(me.items);
 234
 235         delete me.items;
 236         me.defaults = me.defaults || {};
 237         Ext.apply(me.defaults, {
 238             pveSelNode: me.pveSelNode,
 239             viewFilter: me.viewFilter,
 240             workspace: me.workspace,
 241             border: 0,
 242         });
 243
 244         me.callParent();
 245
 246         var menu = me.down('#menu');
 247         var selection = root.findChild('id', activeTab, true) || root.firstChild;
 248         var node = selection;
 249         while (node !== root) {
 250             node.expand();
 251             node = node.parentNode;
 252         }
 253         menu.setStore(me.store);
 254         menu.setSelection(selection);
 255
 256         // on a state change,
 257         // select the new item
 258         var statechange = function(sp, key, state) {
 259             // it the state change is for this panel
 260             if (stateid && key === stateid && state) {
 261                 // get active item
 262                 var acard = me.getLayout().getActiveItem().itemId;
 263                 // get the itemid of the new value
 264                 var ncard = state.value || me.firstItem;
 265                 if (ncard && acard !== ncard) {
 266                     // select the chosen item
 267                     menu.setSelection(root.findChild('id', ncard, true) || root.firstChild);
 268                 }
 269             }
 270         };
 271
 272         if (stateid) {
 273             me.mon(me.sp, 'statechange', statechange);
 274         }
 275     },
 276
 277     insertNodes: function(items) {
 278         var me = this;
 279         var root = me.store.getRoot();
 280
 281         items.forEach(function(item) {
 282             var treeitem = Ext.create('Ext.data.TreeModel', {
 283                 id: item.itemId,
 284                 text: item.title,
 285                 iconCls: item.iconCls,
 286                 leaf: true,
 287                 expanded: item.expandedOnInit,
 288             });
 289             item.header = false;
 290             if (me.savedItems[item.itemId] !== undefined) {
 291                 throw "itemId already exists, please use another";
 292             }
 293             me.savedItems[item.itemId] = item;
 294
 295             var group;
 296             var curnode = root;
 297
 298             // get/create the group items
 299             while (Ext.isArray(item.groups) && item.groups.length > 0) {
 300                 group = item.groups.shift();
 301
 302                 var child = curnode.findChild('id', group);
 303                 if (child === null) {
 304                     // did not find the group item
 305                     // so add it where we are
 306                     break;
 307                 }
 308                 curnode = child;
 309             }
 310
 311             // insert the item
 312
 313             // lets see if it already exists
 314             var node = curnode.findChild('id', item.itemId);
 315
 316             if (node === null) {
 317                 curnode.appendChild(treeitem);
 318             } else {
 319                 // should not happen!
 320                 throw "id already exists";
 321             }
 322         });
 323     },
 324 });