ui: storage/PBSEdit: add port to server field

this gives users the chance to supply the port nr in the gui,
without having to add a extra new field to the panel.

using the same implementation as in RemoteEdit.js in PBS.

Signed-off-by: Lorenz Stechauner <l.stechauner@proxmox.com>

diff --git a/www/manager6/storage/PBSEdit.js b/www/manager6/storage/PBSEdit.js
index fcbc9548e254943c4e884e3d33048d3cd86935d7..b273a46560dd90cc0572a8eb23c37d2c7fc93562 100644 (file)
--- a/www/manager6/storage/PBSEdit.js
+++ b/www/manager6/storage/PBSEdit.js
@@ -453,17 +453,67 @@ Ext.define('PVE.storage.PBSInputPanel', {
        },
     ],
 
+    setValues: function(values) {
+       let me = this;
+
+       let server = values.server;
+       if (values.port !== undefined) {
+           if (Proxmox.Utils.IP6_match.test(server)) {
+               server = `[${server}]`;
+           }
+           server += `:${values.port}`;
+       }
+       values.hostport = server;
+
+       return me.callParent([values]);
+    },
+
     initComponent: function() {
        var me = this;
 
        me.column1 = [
            {
-               xtype: me.isCreate ? 'textfield' : 'displayfield',
-               name: 'server',
-               value: '',
-               vtype: 'DnsOrIp',
+               xtype: me.isCreate ? 'proxmoxtextfield' : 'displayfield',
                fieldLabel: gettext('Server'),
                allowBlank: false,
+               name: 'hostport',
+               submitValue: false,
+               vtype: 'HostPort',
+               listeners: {
+                   change: function(field, newvalue) {
+                       let server = newvalue;
+                       let port;
+
+                       let match = Proxmox.Utils.HostPort_match.exec(newvalue);
+                       if (match === null) {
+                           match = Proxmox.Utils.HostPortBrackets_match.exec(newvalue);
+                           if (match === null) {
+                               match = Proxmox.Utils.IP6_dotnotation_match.exec(newvalue);
+                           }
+                       }
+
+                       if (match !== null) {
+                           server = match[1];
+                           if (match[2] !== undefined) {
+                               port = match[2];
+                           }
+                       }
+
+                       field.up('inputpanel').down('field[name=server]').setValue(server);
+                       field.up('inputpanel').down('field[name=port]').setValue(port);
+                   },
+               },
+           },
+           {
+               xtype: 'proxmoxtextfield',
+               hidden: true,
+               name: 'server',
+           },
+           {
+               xtype: 'proxmoxtextfield',
+               hidden: true,
+               deleteEmpty: !me.isCreate,
+               name: 'port',
            },
            {
                xtype: me.isCreate ? 'textfield' : 'displayfield',