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 DF5378116F
 for <pbs-devel@lists.proxmox.com>; Mon, 22 Nov 2021 15:20:57 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id D2AB21FDC0
 for <pbs-devel@lists.proxmox.com>; Mon, 22 Nov 2021 15:20:27 +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 id B74F91FD86
 for <pbs-devel@lists.proxmox.com>; Mon, 22 Nov 2021 15:20: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 8F7B444FF4
 for <pbs-devel@lists.proxmox.com>; Mon, 22 Nov 2021 15:20:25 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Date: Mon, 22 Nov 2021 15:20:22 +0100
Message-Id: <20211122142024.913238-3-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20211122142024.913238-1-d.csapak@proxmox.com>
References: <20211122142024.913238-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.206 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 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
Subject: [pbs-devel] [PATCH proxmox-backup 2/4] ui: add GroupFilter form
 field(container)
X-BeenThere: pbs-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Backup Server development discussion
 <pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Mon, 22 Nov 2021 14:20:57 -0000

this contains a grid + button + hidden field which lets the user
add group filters one by one. the first column is the type selector
(type, group, regex) and the second column shows the relevant
input field (groupselector, kvcombobox for type, and textfield for regex)

i had to hack a little to get access to the widgets of the
fieldcontainer, since we cannot simply access the widget of a column
from another column (which we need to show the correct one when changing
the type), also we cannot traverse the widget hirachy in the usual way,
since extjs seems to build it differently for widgetcolumns.

to solve this, i added references of the widgets to the record, and a
reference of the record to the widgets. since this is now a cyclic
reference, i solve that in 'removeFilter' and in 'beforedestroy' of the grid
by removing the references again

also contains a small css style to remove the padding in the rows

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/Makefile            |   1 +
 www/css/ext6-pbs.css    |   5 +
 www/form/GroupFilter.js | 334 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 340 insertions(+)
 create mode 100644 www/form/GroupFilter.js

diff --git a/www/Makefile b/www/Makefile
index c975387c..455fbeec 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -43,6 +43,7 @@ JSSRC=							\
 	form/CalendarEvent.js				\
 	form/PermissionPathSelector.js			\
 	form/GroupSelector.js				\
+	form/GroupFilter.js				\
 	data/RunningTasksStore.js			\
 	button/TaskButton.js				\
 	config/UserView.js				\
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 88095dd8..f283bf0b 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -280,3 +280,8 @@ span.snapshot-comment-column {
 .info-pointer div.right-aligned {
     cursor: pointer;
 }
+
+.x-fieldcontainer-default-cell > .x-grid-cell-inner {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
diff --git a/www/form/GroupFilter.js b/www/form/GroupFilter.js
new file mode 100644
index 00000000..b36960c7
--- /dev/null
+++ b/www/form/GroupFilter.js
@@ -0,0 +1,334 @@
+Ext.define('PBS.form.GroupFilter', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pbsGroupFilter',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cindData: {},
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	removeReferences: function(record) {
+	    for (const widget of Object.keys(record.widgets || {})) {
+		delete record[widget];
+	    }
+
+	    delete record.widgets;
+	},
+
+	cleanupReferences: function(grid) {
+	    let me = this;
+
+	    // break cyclic reference
+	    grid.getStore().each(me.removeReferences);
+	},
+
+	removeFilter: function(field) {
+	    let me = this;
+	    let record = field.getWidgetRecord();
+	    if (record === undefined) {
+		// this is sometimes called before a record/column is initialized
+		return;
+	    }
+
+	    // break cyclic reference
+	    me.removeReferences(record);
+
+	    me.lookup('grid').getStore().remove(record);
+	    me.updateRealField();
+	},
+
+	addFilter: function() {
+	    let me = this;
+	    me.lookup('grid').getStore().add({});
+	    me.updateRealField();
+	},
+
+	onTypeChange: function(field, value) {
+	    let me = this;
+	    let record = field.getWidgetRecord();
+	    if (record === undefined) {
+		return;
+	    }
+
+	    record.set('type', value);
+	    record.commit();
+	    if (record.widgets) {
+		me.setInputValue(record.widgets, record);
+	    }
+	    me.updateRealField();
+	},
+
+	onInputChange: function(field, value) {
+	    let me = this;
+	    if (value === null) {
+		return;
+	    }
+	    let record = field.record;
+	    if (record === undefined) {
+		// this is sometimes called before a record/column is initialized
+		return;
+	    }
+	    record.set('input', value);
+	    record.commit();
+
+	    me.updateRealField();
+	},
+
+	parseGroupFilter: function(filter) {
+	    let [, type, input] = filter.match(/^(type|group|regex):(.*)$/);
+	    return {
+		type,
+		input,
+	    };
+	},
+
+	onValueChange: function(field, values) {
+	    let me = this;
+	    let grid = me.lookup('grid');
+	    if (!values || values.length === 0) {
+		grid.getStore().removeAll();
+		return;
+	    }
+	    let records = values.map((filter) => me.parseGroupFilter(filter));
+	    grid.getStore().setData(records);
+	},
+
+	setInputValue: function(widgets, rec) {
+	    let { type, regex, group } = widgets;
+
+	    type.setHidden(true);
+	    type.setDisabled(true);
+	    type.setValue(undefined);
+
+	    regex.setHidden(true);
+	    regex.setDisabled(true);
+	    regex.setValue(undefined);
+
+	    group.setHidden(true);
+	    group.setDisabled(true);
+	    group.setValue(undefined);
+
+	    let field;
+	    if (rec.data.type === 'type') {
+		field = type;
+	    } else if (rec.data.type === 'regex') {
+		field = regex;
+	    } else if (rec.data.type === 'group') {
+		field = group;
+	    } else {
+		return;
+	    }
+
+	    field.setHidden(false);
+	    field.setDisabled(false);
+	    field.setValue(rec.data.input);
+	},
+
+	newInputColumn: function(col, widget, rec) {
+	    let me = this;
+
+	    let type = widget.down('pbsGroupTypeSelector');
+	    let regex = widget.down('textfield[type=regex]');
+	    let group = widget.down('pbsGroupSelector');
+
+	    // add a widget reference to the record so we can acces them
+	    // from the other column
+	    rec.widgets = {
+		type,
+		regex,
+		group,
+	    };
+
+	    // add a record reference so we can access the record from
+	    // the change handler
+	    type.record = rec;
+	    regex.record = rec;
+	    group.record = rec;
+
+	    // CAUTION we just created a cyclic reference, we have to delete
+	    // that on filter removal!
+
+	    me.setInputValue(rec.widgets, rec);
+	},
+
+	updateRealField: function() {
+	    let me = this;
+
+	    let filter = [];
+	    me.lookup('grid').getStore().each((rec) => {
+		if (rec.data.type && rec.data.input) {
+		    filter.push(`${rec.data.type}:${rec.data.input}`);
+		}
+	    });
+
+	    let field = me.lookup('realfield');
+	    field.suspendEvent('change');
+	    field.setValue(filter);
+	    field.resumeEvent('change');
+	},
+
+	control: {
+	    'grid pbsGroupFilterTypeSelector': {
+		change: 'onTypeChange',
+	    },
+	    'grid fieldcontainer field': {
+		change: 'onInputChange',
+	    },
+	    'grid button': {
+		click: 'removeFilter',
+	    },
+	    'field[reference=realfield]': {
+		change: 'onValueChange',
+	    },
+	    'grid': {
+		beforedestroy: 'cleanupReferences',
+	    },
+	},
+    },
+
+    updateGroupSelectors: function() {
+	let me = this;
+	me.query('pbsGroupSelector').forEach((selector) => {
+	    if (me.remote) {
+		selector.setRemoteDatastore(me.remote, me.datastore);
+	    } else if (me.datastore) {
+		selector.setLocalDatastore(me.datastore);
+	    }
+	});
+    },
+
+    setLocalDatastore: function(datastore) {
+	let me = this;
+	me.remote = undefined;
+	me.datastore = datastore;
+	me.updateGroupSelectors();
+    },
+
+    setRemoteDatastore: function(remote, datastore) {
+	let me = this;
+	me.remote = remote;
+	me.datastore = datastore;
+	me.updateGroupSelectors();
+    },
+
+    items: [
+	{
+	    xtype: 'grid',
+	    reference: 'grid',
+	    margin: '0 0 5 0',
+	    scrollable: true,
+	    height: 300,
+	    store: {
+		fields: ['type', 'input'],
+	    },
+	    emptyText: gettext('Include all groups'),
+	    viewConfig: {
+		deferEmptyText: false,
+	    },
+	    columns: [
+		{
+		    text: gettext('Type'),
+		    xtype: 'widgetcolumn',
+		    dataIndex: 'type',
+		    flex: 1,
+		    widget: {
+			xtype: 'pbsGroupFilterTypeSelector',
+			isFormField: false,
+		    },
+		},
+		{
+		    text: gettext('Filter'),
+		    xtype: 'widgetcolumn',
+		    flex: 1,
+		    onWidgetAttach: 'newInputColumn',
+		    widget: {
+			padding: 0,
+			bodyPadding: 0,
+			xtype: 'fieldcontainer',
+			layout: 'fit',
+			defaults: {
+			    margin: 0,
+			},
+			items: [
+			    {
+				hidden: true,
+				xtype: 'pbsGroupTypeSelector',
+				isFormField: false,
+			    },
+			    {
+				hidden: true,
+				xtype: 'textfield',
+				type: 'regex',
+				isFormField: false,
+			    },
+			    {
+				hidden: true,
+				xtype: 'pbsGroupSelector',
+				isFormField: false,
+			    },
+			],
+		    },
+		},
+		{
+		    xtype: 'widgetcolumn',
+		    width: 40,
+		    widget: {
+			xtype: 'button',
+			iconCls: 'fa fa-trash-o',
+		    },
+		},
+	    ],
+	},
+	{
+	    xtype: 'hiddenfield',
+	    reference: 'realfield',
+	    setValue: function(value) {
+		let me = this;
+		me.value = value;
+		me.checkChange();
+	    },
+	    getValue: function() {
+		return this.value;
+	    },
+	    getSubmitValue: function() {
+		return this.value;
+	    },
+	    cbind: {
+		name: '{name}',
+	    },
+	},
+	{
+	    xtype: 'button',
+	    text: gettext('Add'),
+	    iconCls: 'fa fa-plus-circle',
+	    handler: 'addFilter',
+	},
+    ],
+});
+
+Ext.define('PBS.form.GroupFilterTypeSelector', {
+    extend: 'Proxmox.form.KVComboBox',
+    alias: 'widget.pbsGroupFilterTypeSelector',
+
+    allowBlank: false,
+
+    comboItems: [
+	['type', gettext('Group Type')],
+	['group', gettext('Group Selection')],
+	['regex', gettext('Regex')],
+    ],
+});
+
+Ext.define('PBS.form.GroupTypeSelector', {
+    extend: 'Proxmox.form.KVComboBox',
+    alias: 'widget.pbsGroupTypeSelector',
+
+    allowBlank: false,
+
+    comboItems: [
+	['vm', gettext('VM')],
+	['ct', gettext('CT')],
+	['host', gettext('Host')],
+    ],
+});
-- 
2.30.2