ui: SyncJobEdit: add second tab with group filters

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

adds a change listener to the remote datastore selector to change the
remote + datastore on the group filters

remaining changes are mostly indentation changes

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/window/SyncJobEdit.js

@@ -98,6 +98,8 @@ Ext.define('PBS.window.SyncJobEdit', {
 
     subject: gettext('SyncJob'),
 
+    bodyPadding: 0,
+
     fieldDefaults: { labelWidth: 120 },
     defaultFocus: 'proxmoxtextfield[name=comment]',
 
@@ -118,6 +120,12 @@ Ext.define('PBS.window.SyncJobEdit', {
     },
 
     items: {
+	xtype: 'tabpanel',
+	bodyPadding: 10,
+	border: 0,
+	items: [
+	    {
+		title: 'Options',
 		xtype: 'inputpanel',
 		onGetValues: function(values) {
 		    let me = this;
@@ -191,6 +199,14 @@ Ext.define('PBS.window.SyncJobEdit', {
 			autoSelect: false,
 			name: 'remote-store',
 			disabled: true,
+			listeners: {
+			    change: function(field, value) {
+				let me = this;
+				let remoteField = me.up('pbsSyncJobEdit').down('field[name=remote]');
+				let remote = remoteField.getValue();
+				me.up('tabpanel').down('pbsGroupFilter').setRemoteDatastore(remote, value);
+			    },
+			},
 		    },
 		    {
 			fieldLabel: gettext('Sync Schedule'),
@@ -213,15 +229,6 @@ Ext.define('PBS.window.SyncJobEdit', {
 		],
 
 		columnB: [
-	    {
-		fieldLabel: gettext('Backup Groups'),
-		xtype: 'displayfield',
-		name: 'group-filter',
-		renderer: v => v ? Ext.String.htmlEncode(v) : gettext('All'),
-		cbind: {
-		    hidden: '{isCreate}',
-		},
-	    },
 		    {
 			fieldLabel: gettext('Comment'),
 			xtype: 'proxmoxtextfield',
@@ -232,4 +239,24 @@ Ext.define('PBS.window.SyncJobEdit', {
 		    },
 		],
 	    },
+	    {
+		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',
+		    },
+		],
+	    },
+	],
+    },
 });