[pbs-devel] [PATCH proxmox-backup 5/9] ui: tape backup job: move notification settings to a separate tab

[Lukas Wagner]

For consistency, use the same UI approach as for PVE's backup jobs. Tape
backup jobs now gain a new tab for all notification related settings:

  ( ) Use global notification settings
  (x) Use sendmail to send an email (legacy)
      Recipient: [              ]

'Recipient' is disabled when the first radio control is selected.

The term 'Notification System' is altogether from the UI. It is not
necessarily clear to a user that this refers to the settings in
Configuration > Notifications.

Signed-off-by: Lukas Wagner <l.wagner at proxmox.com>
---
 www/tape/window/TapeBackupJob.js | 109 +++++++++++++++++++------------
 1 file changed, 67 insertions(+), 42 deletions(-)

diff --git a/www/tape/window/TapeBackupJob.js b/www/tape/window/TapeBackupJob.js
index c06311bf..ad03b607 100644
--- a/www/tape/window/TapeBackupJob.js
+++ b/www/tape/window/TapeBackupJob.js
@@ -46,23 +46,6 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
         },
     },
 
-    viewModel: {
-        data: {
-            notificationMode: '__default__',
-        },
-        formulas: {
-            notificationSystemSelected: (get) => get('notificationMode') === 'notification-system',
-        },
-    },
-
-    initComponent: function () {
-        let me = this;
-        // Automatically select the new system for new jobs
-        let mode = me.isCreate ? 'notification-system' : '__default__';
-        me.getViewModel().set('notificationMode', mode);
-        me.callParent();
-    },
-
     items: {
         xtype: 'tabpanel',
         bodyPadding: 10,
@@ -126,31 +109,6 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
                         fieldLabel: gettext('Drive'),
                         name: 'drive',
                     },
-                    {
-                        xtype: 'proxmoxKVComboBox',
-                        comboItems: [
-                            ['__default__', `${Proxmox.Utils.defaultText}  (Email)`],
-                            ['legacy-sendmail', gettext('Email (legacy)')],
-                            ['notification-system', gettext('Notification system')],
-                        ],
-                        fieldLabel: gettext('Notification mode'),
-                        name: 'notification-mode',
-                        bind: {
-                            value: '{notificationMode}',
-                        },
-                    },
-                    {
-                        xtype: 'pmxUserSelector',
-                        name: 'notify-user',
-                        fieldLabel: gettext('Notify User'),
-                        emptyText: 'root at pam',
-                        allowBlank: true,
-                        value: null,
-                        renderer: Ext.String.htmlEncode,
-                        bind: {
-                            disabled: '{notificationSystemSelected}',
-                        },
-                    },
                 ],
 
                 column2: [
@@ -260,6 +218,73 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
                     },
                 ],
             },
+            {
+                xtype: 'inputpanel',
+                title: gettext('Notifications'),
+
+                viewModel: {
+                    data: {
+                        notificationMode: undefined,
+                    },
+                    formulas: {
+                        notificationSystemSelected: (get) =>
+                            get('notificationMode')['notification-mode'] === 'notification-system',
+                    },
+                },
+
+                onSetValues: function (values) {
+                    let me = this;
+
+                    let mode = values['notification-mode'];
+                    me.getViewModel().set('notificationMode', { 'notification-mode': mode });
+
+                    return values;
+                },
+
+                items: [
+                    {
+                        xtype: 'radiogroup',
+                        height: '15px',
+                        layout: {
+                            type: 'vbox',
+                        },
+                        bind: {
+                            value: '{notificationMode}',
+                        },
+                        items: [
+                            {
+                                xtype: 'radiofield',
+                                name: 'notification-mode',
+                                inputValue: 'notification-system',
+                                boxLabel: gettext('Use global notification settings'),
+                                cbind: {
+                                    checked: '{isCreate}',
+                                },
+                            },
+                            {
+                                xtype: 'radiofield',
+                                name: 'notification-mode',
+                                inputValue: 'legacy-sendmail',
+                                boxLabel: gettext('Use sendmail to send an email (legacy)'),
+                            },
+                        ],
+                    },
+                    {
+                        xtype: 'pmxUserSelector',
+                        name: 'notify-user',
+                        fieldLabel: gettext('Recipient'),
+                        emptyText: 'root at pam',
+                        allowBlank: false,
+                        value: null,
+                        renderer: Ext.String.htmlEncode,
+                        padding: '0 0 0 50',
+                        disabled: true,
+                        bind: {
+                            disabled: '{notificationSystemSelected}',
+                        },
+                    },
+                ],
+            },
         ],
     },
 });
-- 
2.39.5