From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 4FC17947FA for ; Thu, 22 Feb 2024 10:15:00 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 353604D15 for ; Thu, 22 Feb 2024 10:14:30 +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 ; Thu, 22 Feb 2024 10:14:25 +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 79D21447A7 for ; Thu, 22 Feb 2024 10:14:25 +0100 (CET) From: Dominik Csapak To: pmg-devel@lists.proxmox.com Date: Thu, 22 Feb 2024 10:14:18 +0100 Message-Id: <20240222091420.2732402-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20240222091420.2732402-1-d.csapak@proxmox.com> References: <20240222091420.2732402-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 v3 1/3] 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 22 Feb 2024 09:15:00 -0000 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 --- css/ext6-pmg.css | 11 +++++++++ js/RuleInfo.js | 60 +++++++++++++++++++++++++++++++----------------- 2 files changed, 50 insertions(+), 21 deletions(-) diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css index 2f999f4..5d28728 100644 --- 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 8f39695..404c437 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,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', }, ], -- 2.30.2