rules: use tree panel instead of grouping feature of the grid

just in preparation for adding a column for the groups
will look similar (though not identical) to before, but this makes
the groups now real entries in the grid, which means we can have
content in additional columns

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by: Stoiko Ivanov <s.ivanov@proxmox.com>

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4fe0b47a56d279cf751822f4bb5b3b0b41..5d28728e26f543e46c0118376bbaa94f6a0bdb06 100644 (file)
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -263,3 +263,14 @@ a.download {
     color: inherit;
     text-decoration: none;
 }
+
+.pmx-rule-tree .x-tree-icon,
+.pmx-rule-tree .x-tree-elbow,
+.pmx-rule-tree .x-tree-elbow-end {
+    display: none;
+    width: 0px;
+}
+
+.pmx-type-row td {
+    padding: 3px;
+}

diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index 8f39695b774724d7a38d754d8217faedf34c0a22..404c43726953a7481128208ef71147a537025417 100644 (file)
--- a/js/RuleInfo.js
+++ b/js/RuleInfo.js
@@ -88,7 +88,11 @@ Ext.define('PMG.RuleInfo', {
            } else {
                viewmodel.set('selectedRule', ruledata);
 
-               var data = [];
+               let data = {
+                   leaf: false,
+                   expanded: true,
+                   children: [],
+               };
                Ext.Array.each(['from', 'to', 'when', 'what', 'action'], function(oc) {
                    var store = viewmodel.get(oc + 'objects');
                    if (ruledata[oc] === undefined || store === undefined) { return; }
@@ -111,12 +115,25 @@ Ext.define('PMG.RuleInfo', {
                        },
                    });
                    store.load();
+
+                   let group = {
+                       name: oc,
+                       oclass: oc,
+                       type: true,
+                       leaf: false,
+                       expanded: true,
+                       expandable: false,
+                       children: [],
+                   };
                    Ext.Array.each(ruledata[oc], function(og) {
-                       data.push({ oclass: oc, name: og.name, typeid: og.id });
+                       group.children.push({ oclass: oc, name: og.name, typeid: og.id, leaf: true });
                    });
-               });
 
-               viewmodel.get('objects').setData(data);
+                   if (group.children.length) {
+                       data.children.push(group);
+                   }
+               });
+               viewmodel.get('objects').setRoot(data);
            }
        },
 
@@ -146,7 +163,7 @@ Ext.define('PMG.RuleInfo', {
        },
 
        control: {
-           'grid[reference=usedobjects]': {
+           'treepanel[reference=usedobjects]': {
                drop: 'addDrop',
            },
            'tabpanel[reference=availobjects] > grid': {
@@ -162,6 +179,7 @@ Ext.define('PMG.RuleInfo', {
 
        stores: {
            objects: {
+               type: 'tree',
                fields: ['oclass', 'name', 'typeid'],
                groupField: 'oclass',
                sorters: 'name',
@@ -252,23 +270,19 @@ Ext.define('PMG.RuleInfo', {
            ],
        },
        {
-           xtype: 'grid',
+           xtype: 'treepanel',
            reference: 'usedobjects',
            hidden: true,
            emptyText: gettext('No Objects'),
-           features: [{
-               id: 'group',
-               ftype: 'grouping',
-               enableGroupingMenu: false,
-               collapsible: false,
-               groupHeaderTpl: [
-                   '{[PMG.Utils.format_oclass(values.name)]}',
-               ],
-           }],
 
            title: gettext('Used Objects'),
+           rootVisible: false,
+           useArrows: true,
+           rowLines: true,
+           userCls: 'pmx-rule-tree',
 
            viewConfig: {
+               getRowClass: record => record.data.type ? 'pmx-type-row' : '',
                plugins: {
                    ptype: 'gridviewdragdrop',
                    copy: true,
@@ -285,14 +299,17 @@ Ext.define('PMG.RuleInfo', {
            },
 
            columns: [
-               {
-                   header: gettext('Type'),
-                   dataIndex: 'oclass',
-                   hidden: true,
-               },
                {
                    header: gettext('Name'),
                    dataIndex: 'name',
+                   xtype: 'treecolumn',
+                   renderer: PMG.Utils.format_oclass,
+                   sorter: function(a, b) {
+                       if (a.data.type && b.data.type) {
+                           return a.data.oclass.localeCompare(b.data.oclass);
+                       }
+                       return a.data.text.localeCompare(b.data.text);
+                   },
                    flex: 1,
                },
                {
@@ -302,8 +319,9 @@ Ext.define('PMG.RuleInfo', {
                    width: 40,
                    items: [
                        {
-                           iconCls: 'fa fa-fw fa-minus-circle',
                            tooltip: gettext('Remove'),
+                           isActionDisabled: (v, rI, cI, i, rec) => rec.data.type,
+                           getClass: (v, mD, { data }) => data.type ? 'pmx-hidden' : 'fa fa-fw fa-minus-circle',
                            handler: 'removeIconClick',
                        },
                    ],