[pmg-devel] [PATCH pmg-gui v2 2/2] rules/objects: add mode selector dropdown

[Dominik Csapak <d.csapak@proxmox.com>]

for objects and object types in rules. We add a simple dropdown for the
'and' and 'invert' flags, to be somewhat consistent with the
notification matchers from pve and to make the wording more clear than
simple and/invert.

For What matches add a special warning hint, since that behaves a bit
special because of the mail parts.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/Makefile                    |  1 +
 js/ObjectGroup.js              | 64 ++++++++++++++++++++++++++++++++--
 js/ObjectGroupConfiguration.js |  4 +++
 js/RuleInfo.js                 | 44 +++++++++++++++++++++++
 js/form/ModeSelector.js        | 11 ++++++
 5 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 js/form/ModeSelector.js

diff --git a/js/Makefile b/js/Makefile
index 78f2b57..4267092 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -2,6 +2,7 @@ include ../defines.mk
 
 JSSRC=							\
 	Utils.js					\
+	form/ModeSelector.js				\
 	FilterProxy.js					\
 	LoginView.js					\
 	RoleSelector.js					\
diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index 2223ffa..b91bf97 100644
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -10,6 +10,7 @@ Ext.define('PMG.ObjectGroup', {
     showDirection: false, // only important for SMTP Whitelist
 
     ogdata: undefined,
+    oclass: undefined,
 
     emptyText: gettext('Please select an object.'),
 
@@ -32,10 +33,14 @@ Ext.define('PMG.ObjectGroup', {
     setObjectInfo: function(ogdata) {
 	let me = this;
 
+	let mode = ogdata.invert ? 'not' : '';
+	mode += ogdata.and ? 'all' : 'any';
+
 	me.ogdata = ogdata;
 
 	if (me.ogdata === undefined) {
 	    me.down('#oginfo').update(me.emptyText);
+	    me.down('#modeBox').setHidden(true);
 	} else {
 	    let html = '<b>' + Ext.String.htmlEncode(me.ogdata.name) + '</b>';
 	    html += "<br><br>";
@@ -43,6 +48,12 @@ Ext.define('PMG.ObjectGroup', {
 
 	    me.down('#oginfo').update(html);
 	    me.down('#ogdata').setHidden(false);
+	    let modeSelector = me.down('#modeSelector');
+	    modeSelector.suspendEvents();
+	    me.down('#modeSelector').setValue(mode);
+	    modeSelector.resumeEvents();
+	    me.down('#modeBox').setHidden(false);
+	    me.down('#whatWarning').setHidden(me.oclass !== 'what');
 	}
     },
 
@@ -205,13 +216,62 @@ Ext.define('PMG.ObjectGroup', {
 	me.dockedItems.push({
 	    dock: 'top',
 	    border: 1,
-	    layout: 'anchor',
+	    layout: 'hbox',
 	    hidden: !!me.hideGroupInfo,
 	    itemId: 'ogdata',
 	    items: [
+		{
+		    xtype: 'container',
+		    itemId: 'modeBox',
+		    hidden: true,
+		    width: 220,
+		    padding: 10,
+		    layout: {
+			type: 'vbox',
+			align: 'stretch',
+		    },
+		    items: [
+			{
+			    xtype: 'box',
+			    html: `<b>${gettext("Match if")}</b>`,
+			},
+			{
+			    xtype: 'pmgModeSelector',
+			    itemId: 'modeSelector',
+			    padding: '10 0 0 0',
+			    listeners: {
+				change: function(_field, value) {
+				    let invert = value.startsWith('not');
+				    let and = value.endsWith('all');
+
+				    let url = `${me.baseurl}/config`;
+
+				    Proxmox.Utils.API2Request({
+					url,
+					method: 'PUT',
+					params: {
+					    and: and ? 1 : 0,
+					    invert: invert ? 1 : 0,
+					},
+					success: function() {
+					    me.fireEvent('modeUpdate', me);
+					},
+				    });
+				},
+			    },
+			},
+			{
+			    xtype: 'displayfield',
+			    itemId: 'whatWarning',
+			    hidden: true,
+			    value: gettext("Caution: What Objects match per mail part, so be careful with any option besides 'Any matches'."),
+			    userCls: 'pmx-hint',
+			},
+		    ],
+		},
 		{
 		    xtype: 'component',
-		    anchor: '100%',
+		    flex: 1,
 		    itemId: 'oginfo',
 		    style: { 'white-space': 'pre' },
 		    padding: 10,
diff --git a/js/ObjectGroupConfiguration.js b/js/ObjectGroupConfiguration.js
index 1d72851..f59f5ed 100644
--- a/js/ObjectGroupConfiguration.js
+++ b/js/ObjectGroupConfiguration.js
@@ -30,6 +30,7 @@ Ext.define('PMG.ObjectGroupConfiguration', {
 
 	var right = Ext.create('PMG.ObjectGroup', {
 	    otype_list: me.otype_list,
+	    oclass: me.ogclass,
 	    border: false,
 	    region: 'center',
 	    listeners: {
@@ -40,6 +41,9 @@ Ext.define('PMG.ObjectGroupConfiguration', {
 			left.run_editor();
 		    }
 		},
+		modeUpdate: function() {
+		    left.reload();
+		},
 	    },
 	});
 
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index c29c0ca..d53c1c5 100644
--- a/js/RuleInfo.js
+++ b/js/RuleInfo.js
@@ -120,6 +120,8 @@ Ext.define('PMG.RuleInfo', {
 			name: oc,
 			oclass: oc,
 			type: true,
+			invert: ruledata[`${oc}-invert`],
+			and: ruledata[`${oc}-and`],
 			leaf: false,
 			expanded: true,
 			expandable: false,
@@ -162,6 +164,25 @@ Ext.define('PMG.RuleInfo', {
 	    return true;
 	},
 
+	updateMode: function(field, value) {
+	    let me = this;
+	    let vm = me.getViewModel();
+	    let oclass = field.getWidgetRecord().data.oclass;
+
+	    let params = {};
+	    params[`${oclass}-invert`] = value.startsWith('not') ? 1 : 0;
+	    params[`${oclass}-and`] = value.endsWith('all') ? 1 : 0;
+
+	    Proxmox.Utils.API2Request({
+		url: `${vm.get('baseurl')}/config`,
+		method: 'PUT',
+		params,
+		success: function() {
+		    me.reload();
+		},
+	    });
+	},
+
 	control: {
 	    'treepanel[reference=usedobjects]': {
 		drop: 'addDrop',
@@ -169,6 +190,9 @@ Ext.define('PMG.RuleInfo', {
 	    'tabpanel[reference=availobjects] > grid': {
 		drop: 'removeDrop',
 	    },
+	    'pmgModeSelector': {
+		change: 'updateMode',
+	    },
 	},
     },
 
@@ -311,6 +335,26 @@ Ext.define('PMG.RuleInfo', {
 		    },
 		    flex: 1,
 		},
+		{
+		    header: gettext('Match if'),
+		    xtype: 'widgetcolumn',
+		    width: 200,
+		    widget: {
+			xtype: 'pmgModeSelector',
+		    },
+		    onWidgetAttach: function(col, widget, rec) {
+			if (rec.data.type && rec.data.oclass !== 'action') {
+			    let mode = rec.data.invert ? 'not' : '';
+			    mode += rec.data.and ? 'all' : 'any';
+			    widget.suspendEvents();
+			    widget.setValue(mode);
+			    widget.resumeEvents();
+			    widget.setHidden(false);
+			} else {
+			    widget.setHidden(true);
+			}
+		    },
+		},
 		{
 		    text: '',
 		    xtype: 'actioncolumn',
diff --git a/js/form/ModeSelector.js b/js/form/ModeSelector.js
new file mode 100644
index 0000000..9c9275b
--- /dev/null
+++ b/js/form/ModeSelector.js
@@ -0,0 +1,11 @@
+Ext.define('PMG.ModeSelector', {
+    extend: 'Proxmox.form.KVComboBox',
+    alias: 'widget.pmgModeSelector',
+
+    comboItems: [
+	['all', gettext('All match')],
+	['any', gettext('Any matches')],
+	['notall', gettext('At least one does not match')],
+	['notany', gettext('None matches')],
+    ],
+});
-- 
2.30.2