[PATCH manager v3] ui: pool create: allow selecting parent pool via selector

[Dominik Csapak <d.csapak@proxmox.com>]

instead of having to type out the full path, e.g. 'foo/bar/baz',
show a 'pool selector' to select the parent pool.

Forbid using slashes in the name field so it's not possible to specify
the structure with both the name and parent pool field.

This makes creating nested pools more obvious and easier.

Only allow selecting pools up to level 2 as parent, otherwise show a
sensible error on the parent field.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v2:
* disallow pools that are nested too deeply (level >=3)
  still show them, since it would be too subtle why some are missing

 www/manager6/dc/PoolEdit.js       | 53 +++++++++++++++++++++++--------
 www/manager6/form/PoolSelector.js | 19 +++++++++++
 2 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/www/manager6/dc/PoolEdit.js b/www/manager6/dc/PoolEdit.js
index 72a084ac..3fc17960 100644
--- a/www/manager6/dc/PoolEdit.js
+++ b/www/manager6/dc/PoolEdit.js
@@ -17,20 +17,47 @@ Ext.define('PVE.dc.PoolEdit', {
 
     items: [
         {
-            xtype: 'pmxDisplayEditField',
-            fieldLabel: gettext('Name'),
-            cbind: {
-                editable: '{isCreate}',
-                value: '{poolid}',
+            xtype: 'inputpanel',
+            onGetValues: function (values) {
+                if (Ext.isString(values.parentPool) && values.parentPool.length > 0) {
+                    values.poolid = values.parentPool + '/' + values.poolid;
+                }
+                delete values.parentPool;
+                return values;
             },
-            name: 'poolid',
-            allowBlank: false,
-        },
-        {
-            xtype: 'textfield',
-            fieldLabel: gettext('Comment'),
-            name: 'comment',
-            allowBlank: true,
+            items: [
+                {
+                    xtype: 'pmxDisplayEditField',
+                    fieldLabel: gettext('Name'),
+                    cbind: {
+                        editable: '{isCreate}',
+                        value: '{poolid}',
+                    },
+                    editConfig: {
+                        regex: /^[^/]+$/,
+                    },
+                    name: 'poolid',
+                    allowBlank: false,
+                },
+                {
+                    xtype: 'pvePoolSelector',
+                    name: 'parentPool',
+                    fieldLabel: gettext('Parent Pool'),
+                    allowBlank: true,
+                    maxLevel: 2,
+                    emptyText: Proxmox.Utils.NoneText,
+                    cbind: {
+                        disabled: '{!isCreate}',
+                        hidden: '{!isCreate}',
+                    },
+                },
+                {
+                    xtype: 'textfield',
+                    fieldLabel: gettext('Comment'),
+                    name: 'comment',
+                    allowBlank: true,
+                },
+            ],
         },
     ],
 
diff --git a/www/manager6/form/PoolSelector.js b/www/manager6/form/PoolSelector.js
index d4f45622..d265184f 100644
--- a/www/manager6/form/PoolSelector.js
+++ b/www/manager6/form/PoolSelector.js
@@ -8,6 +8,25 @@ Ext.define(
         valueField: 'poolid',
         displayField: 'poolid',
 
+        // only allow pools nested up to this level, undefined means allow all
+        maxLevel: undefined,
+
+        validator: function (value) {
+            let me = this;
+
+            if (value && me.maxLevel) {
+                let level = value.split('/').length;
+                if (level > me.maxLevel) {
+                    return Ext.String.format(
+                        gettext('Selected pool is nested too deep (max level = {0})'),
+                        me.maxLevel,
+                    );
+                }
+            }
+
+            return Proxmox.form.ComboGrid.prototype.validator.call(me, value);
+        },
+
         initComponent: function () {
             var me = this;
 
-- 
2.47.3