From: Dominik Csapak <d.csapak@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui v3 1/3] rules: use tree panel instead of grouping feature of the grid
Date: Thu, 22 Feb 2024 10:14:18 +0100 [thread overview]
Message-ID: <20240222091420.2732402-2-d.csapak@proxmox.com> (raw)
In-Reply-To: <20240222091420.2732402-1-d.csapak@proxmox.com>
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>
---
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
next prev parent reply other threads:[~2024-02-22 9:15 UTC|newest]
Thread overview: 8+ messages / expand[flat|nested] mbox.gz Atom feed top
2024-02-22 9:14 [pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects Dominik Csapak
2024-02-22 9:14 ` Dominik Csapak [this message]
2024-02-22 9:14 ` [pmg-devel] [PATCH pmg-gui v3 2/3] rules/objects: add mode selector dropdown Dominik Csapak
2024-02-22 9:14 ` [pmg-devel] [PATCH pmg-gui v3 3/3] objects: don't reload on match mode change Dominik Csapak
2024-02-22 13:19 ` [pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects Stoiko Ivanov
2024-02-22 13:26 ` Thomas Lamprecht
2024-02-22 13:51 ` Stoiko Ivanov
2024-02-22 14:24 ` [pmg-devel] applied: " Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20240222091420.2732402-2-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pmg-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox