[pbs-devel] [PATCH proxmox-backup 3/4] ui: tape/BackupJobEdit: add second tab with group filters

[Dominik Csapak]

adds a second tab and adapts the styling to our usual one (border/padding)

adds a change listener to the datastore selector to change it on the
group filters

remaining changes are mostly indentation changes

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/tape/window/TapeBackupJob.js | 231 +++++++++++++++++--------------
 1 file changed, 128 insertions(+), 103 deletions(-)

diff --git a/www/tape/window/TapeBackupJob.js b/www/tape/window/TapeBackupJob.js
index 72821115..266360ce 100644
--- a/www/tape/window/TapeBackupJob.js
+++ b/www/tape/window/TapeBackupJob.js
@@ -11,6 +11,8 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
 
     fieldDefaults: { labelWidth: 120 },
 
+    bodyPadding: 0,
+
     cbindData: function(initialConfig) {
 	let me = this;
 
@@ -28,117 +30,140 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
     },
 
     items: {
-	xtype: 'inputpanel',
-	onGetValues: function(values) {
-	    let me = this;
-
-	    if (values['export-media-set'] && !me.up('pbsTapeBackupJobEdit').isCreate) {
-		Proxmox.Utils.assemble_field_data(values, { "delete": 'eject-media' });
-	    }
-	    PBS.Utils.delete_if_default(values, 'notify-user');
-	    return values;
-	},
-	column1: [
-	    {
-		xtype: 'pmxDisplayEditField',
-		name: 'id',
-		fieldLabel: gettext('Job ID'),
-		renderer: Ext.htmlEncode,
-		allowBlank: false,
-		cbind: {
-		    editable: '{isCreate}',
-		},
-	    },
-	    {
-		xtype: 'pbsDataStoreSelector',
-		fieldLabel: gettext('Local Datastore'),
-		name: 'store',
-	    },
-	    {
-		xtype: 'pbsMediaPoolSelector',
-		fieldLabel: gettext('Media Pool'),
-		name: 'pool',
-	    },
-	    {
-		xtype: 'pbsDriveSelector',
-		fieldLabel: gettext('Drive'),
-		name: 'drive',
-	    },
+	xtype: 'tabpanel',
+	bodyPadding: 10,
+	border: 0,
+	items: [
 	    {
-		xtype: 'pmxUserSelector',
-		name: 'notify-user',
-		fieldLabel: gettext('Notify User'),
-		emptyText: 'root at pam',
-		allowBlank: true,
-		value: null,
-		renderer: Ext.String.htmlEncode,
-	    },
-	],
+		title: gettext('Options'),
+		xtype: 'inputpanel',
+		onGetValues: function(values) {
+		    let me = this;
 
-	column2: [
-	    {
-		fieldLabel: gettext('Schedule'),
-		xtype: 'pbsCalendarEvent',
-		name: 'schedule',
-		emptyText: gettext('none (disabled)'),
-		cbind: {
-		    deleteEmpty: '{!isCreate}',
-		    value: '{scheduleValue}',
-		},
-	    },
-	    {
-		fieldLabel: gettext('Export Media-Set'),
-		xtype: 'proxmoxcheckbox',
-		name: 'export-media-set',
-		cbind: {
-		    deleteEmpty: '{!isCreate}',
+		    if (values['export-media-set'] && !me.up('pbsTapeBackupJobEdit').isCreate) {
+			Proxmox.Utils.assemble_field_data(values, { "delete": 'eject-media' });
+		    }
+		    PBS.Utils.delete_if_default(values, 'notify-user');
+		    return values;
 		},
-		listeners: {
-		    change: function(cb, value) {
-			let me = this;
-			let eject = me.up('window').down('proxmoxcheckbox[name=eject-media]');
-			if (value) {
-			    eject.setValue(false);
-			}
-			eject.setDisabled(!!value);
+		column1: [
+		    {
+			xtype: 'pmxDisplayEditField',
+			name: 'id',
+			fieldLabel: gettext('Job ID'),
+			renderer: Ext.htmlEncode,
+			allowBlank: false,
+			cbind: {
+			    editable: '{isCreate}',
+			},
 		    },
-		},
-	    },
-	    {
-		fieldLabel: gettext('Eject Media'),
-		xtype: 'proxmoxcheckbox',
-		name: 'eject-media',
-		cbind: {
-		    deleteEmpty: '{!isCreate}',
-		},
-	    },
-	    {
-		fieldLabel: gettext('Latest Only'),
-		xtype: 'proxmoxcheckbox',
-		name: 'latest-only',
-		cbind: {
-		    deleteEmpty: '{!isCreate}',
-		},
-	    },
-	],
+		    {
+			xtype: 'pbsDataStoreSelector',
+			fieldLabel: gettext('Local Datastore'),
+			name: 'store',
+			listeners: {
+			    change: function(field, value) {
+				let me = this;
+				me.up('tabpanel').down('pbsGroupFilter').setLocalDatastore(value);
+			    },
+			},
+		    },
+		    {
+			xtype: 'pbsMediaPoolSelector',
+			fieldLabel: gettext('Media Pool'),
+			name: 'pool',
+		    },
+		    {
+			xtype: 'pbsDriveSelector',
+			fieldLabel: gettext('Drive'),
+			name: 'drive',
+		    },
+		    {
+			xtype: 'pmxUserSelector',
+			name: 'notify-user',
+			fieldLabel: gettext('Notify User'),
+			emptyText: 'root at pam',
+			allowBlank: true,
+			value: null,
+			renderer: Ext.String.htmlEncode,
+		    },
+		],
 
-	columnB: [
-	    {
-		fieldLabel: gettext('Backup Groups'),
-		xtype: 'displayfield',
-		name: 'group-filter',
-		renderer: v => v ? Ext.String.htmlEncode(v) : gettext('All'),
-		cbind: {
-		    hidden: '{isCreate}',
-		},
+		column2: [
+		    {
+			fieldLabel: gettext('Schedule'),
+			xtype: 'pbsCalendarEvent',
+			name: 'schedule',
+			emptyText: gettext('none (disabled)'),
+			cbind: {
+			    deleteEmpty: '{!isCreate}',
+			    value: '{scheduleValue}',
+			},
+		    },
+		    {
+			fieldLabel: gettext('Export Media-Set'),
+			xtype: 'proxmoxcheckbox',
+			name: 'export-media-set',
+			cbind: {
+			    deleteEmpty: '{!isCreate}',
+			},
+			listeners: {
+			    change: function(cb, value) {
+				let me = this;
+				let eject = me.up('window').down('proxmoxcheckbox[name=eject-media]');
+				if (value) {
+				    eject.setValue(false);
+				}
+				eject.setDisabled(!!value);
+			    },
+			},
+		    },
+		    {
+			fieldLabel: gettext('Eject Media'),
+			xtype: 'proxmoxcheckbox',
+			name: 'eject-media',
+			cbind: {
+			    deleteEmpty: '{!isCreate}',
+			},
+		    },
+		    {
+			fieldLabel: gettext('Latest Only'),
+			xtype: 'proxmoxcheckbox',
+			name: 'latest-only',
+			cbind: {
+			    deleteEmpty: '{!isCreate}',
+			},
+		    },
+		],
+
+		columnB: [
+		    {
+			fieldLabel: gettext('Comment'),
+			xtype: 'proxmoxtextfield',
+			name: 'comment',
+			cbind: {
+			    deleteEmpty: '{!isCreate}',
+			},
+		    },
+		],
 	    },
 	    {
-		fieldLabel: gettext('Comment'),
-		xtype: 'proxmoxtextfield',
-		name: 'comment',
-		cbind: {
-		    deleteEmpty: '{!isCreate}',
+		xtype: 'inputpanel',
+		onGetValues: function(values) {
+		    PBS.Utils.delete_if_default(values, 'group-filter');
+		    if (Ext.isArray(values['group-filter']) && values['group-filter'].length === 0) {
+			delete values['group-filter'];
+			values.delete = 'group-filter';
+		    }
+		    return values;
 		},
+		title: gettext('Group Filter'),
+		items: [
+		    {
+			xtype: 'pbsGroupFilter',
+			name: 'group-filter',
+		    },
+		],
 	    },
 	],
     },
-- 
2.30.2