From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits))
 (No client certificate requested)
 by lists.proxmox.com (Postfix) with ESMTPS id 4315993F7E
 for <pmg-devel@lists.proxmox.com>; Wed, 21 Feb 2024 13:24:51 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id 2C90616CA3
 for <pmg-devel@lists.proxmox.com>; Wed, 21 Feb 2024 13:24:51 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
 [94.136.29.106])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits))
 (No client certificate requested)
 by firstgate.proxmox.com (Proxmox) with ESMTPS
 for <pmg-devel@lists.proxmox.com>; Wed, 21 Feb 2024 13:24:46 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
 by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 7450844475
 for <pmg-devel@lists.proxmox.com>; Wed, 21 Feb 2024 13:24:46 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pmg-devel@lists.proxmox.com
Date: Wed, 21 Feb 2024 13:24:38 +0100
Message-Id: <20240221122439.1281024-13-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20240221122439.1281024-1-d.csapak@proxmox.com>
References: <20240221122439.1281024-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.019 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 DMARC_MISSING             0.1 Missing DMARC policy
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
 T_SCC_BODY_TEXT_LINE    -0.01 -
Subject: [pmg-devel] [PATCH pmg-gui v2 1/2] rules: use tree panel instead of
 grouping feature of the grid
X-BeenThere: pmg-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Mail Gateway development discussion
 <pmg-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pmg-devel>, 
 <mailto:pmg-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pmg-devel/>
List-Post: <mailto:pmg-devel@lists.proxmox.com>
List-Help: <mailto:pmg-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel>, 
 <mailto:pmg-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Wed, 21 Feb 2024 12:24:51 -0000

just in preparation for adding a columnf or 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>
---
 css/ext6-pmg.css |  7 ++++++
 js/RuleInfo.js   | 59 +++++++++++++++++++++++++++++++-----------------
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4..1c43b09 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -263,3 +263,10 @@ 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;
+}
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index 8f39695..c29c0ca 100644
--- 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,21 +270,16 @@ 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: {
 		plugins: {
@@ -285,14 +298,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 +318,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',
 			},
 		    ],
-- 
2.30.2