[pve-devel] [PATCH widget-toolkit 1/1] inputpanel: improve validitychange check for advanced fields

[pve-devel] [PATCH widget-toolkit 1/1] inputpanel: improve validitychange check for advanced fields

[Dominik Csapak]

instead of only checking the validity of the advanced items when
the form validity changed as a whole, add a validitychange listener
to each field in the advanced section.

This improves the behaviour such that everytime an advanced field gets
invalid the items are show, not only when the form was valid before.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
we need this for the next patch for manager to work correctly,
but i guess this can happen on other panels too, just harder to trigger

 src/window/Edit.js | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/window/Edit.js b/src/window/Edit.js
index 51ebfa5..7f94e30 100644
--- a/src/window/Edit.js
+++ b/src/window/Edit.js
@@ -318,21 +318,6 @@ Ext.define('Proxmox.window.Edit', {
 	    let dirty = form.isDirty();
 	    submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
 	    resetBtn.setDisabled(!dirty);
-
-	    if (inputPanel && inputPanel.hasAdvanced) {
-		// we want to show the advanced options as soon as some of it is not valid
-		let advancedItems = me.down('#advancedContainer').query('field');
-		let allAdvancedValid = true;
-		advancedItems.forEach(function(field) {
-		    if (!field.isValid()) {
-			allAdvancedValid = false;
-		    }
-		});
-
-		if (!allAdvancedValid) {
-		    inputPanel.setAdvancedVisible(true);
-		}
-	    }
 	};
 
 	form.on('dirtychange', set_button_status);
@@ -395,6 +380,18 @@ Ext.define('Proxmox.window.Edit', {
 
 	me.callParent();
 
+
+	if (inputPanel?.hasAdvanced) {
+	    let advancedItems = inputPanel.down('#advancedContainer').query('field');
+	    advancedItems.forEach(function(field) {
+		me.mon(field, 'validitychange', (f, valid) => {
+		    if (!valid) {
+			f.up('inputpanel').setAdvancedVisible(true);
+		    }
+		});
+	    });
+	}
+
 	// always mark invalid fields
 	me.on('afterlayout', function() {
 	    // on touch devices, the isValid function
-- 
2.30.2

[pve-devel] [PATCH manager 1/1] ui: ceph: pool: don't always show advanced fields on create

[Dominik Csapak]

since the ruleselector is not allowed to be empty, but the loading of
the rules is not instant, the validity change will trigger before the
load was finished. Since it is in the advanced section, it will be
opened everytime instead of only when there is an invalid value.

This patch fixes that by temporarily setting 'allowBlank' to true
until the store is loaded, and then it revalidates the field.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
note: this patch requires the previous widget-toolkit one to work
 www/manager6/ceph/Pool.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/www/manager6/ceph/Pool.js b/www/manager6/ceph/Pool.js
index a1f008d1a..f7a4d9bae 100644
--- a/www/manager6/ceph/Pool.js
+++ b/www/manager6/ceph/Pool.js
@@ -484,6 +484,10 @@ Ext.define('PVE.form.CephRuleSelector', {
 	if (!me.nodename) {
 	    throw "no nodename given";
 	}
+
+	me.originalAllowBlank = me.allowBlank;
+	me.allowBlank = true;
+
 	Ext.apply(me, {
 	    store: {
 		fields: ['name'],
@@ -492,13 +496,17 @@ Ext.define('PVE.form.CephRuleSelector', {
 		    type: 'proxmox',
 		    url: `/api2/json/nodes/${me.nodename}/ceph/rules`,
 		},
-		autoLoad: me.isCreate ? {
+		autoLoad: {
 		    callback: (records, op, success) => {
-			if (success && records.length > 0) {
+			if (me.isCreate && success && records.length > 0) {
 			    me.select(records[0]);
 			}
+
+			me.allowBlank = me.originalAllowBlank;
+			delete me.originalAllowBlank;
+			me.validate();
 		    },
-		} : true,
+		},
 	    },
 	});
 
-- 
2.30.2

Re: [pve-devel] [PATCH widget-toolkit 1/1] inputpanel: improve validitychange check for advanced fields

[Aaron Lauterer]

nice. now the advanced part doesn't open on create or edit anymore :)

for both patches:

Tested-By: Aaron Lauterer <a.lauterer@proxmox.com>

[pve-devel] applied: [PATCH widget-toolkit 1/1] inputpanel: improve validitychange check for advanced fields

[Thomas Lamprecht]

Am 10/03/2023 um 15:08 schrieb Dominik Csapak:
> instead of only checking the validity of the advanced items when
> the form validity changed as a whole, add a validitychange listener
> to each field in the advanced section.
> 
> This improves the behaviour such that everytime an advanced field gets
> invalid the items are show, not only when the form was valid before.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> we need this for the next patch for manager to work correctly,
> but i guess this can happen on other panels too, just harder to trigger
> 
>  src/window/Edit.js | 27 ++++++++++++---------------
>  1 file changed, 12 insertions(+), 15 deletions(-)
> 
>

applied, with Aaron's T-b, thanks!

[pve-devel] applied: [PATCH manager 1/1] ui: ceph: pool: don't always show advanced fields on create

[Thomas Lamprecht]

Am 10/03/2023 um 15:08 schrieb Dominik Csapak:
> since the ruleselector is not allowed to be empty, but the loading of
> the rules is not instant, the validity change will trigger before the
> load was finished. Since it is in the advanced section, it will be
> opened everytime instead of only when there is an invalid value.
> 
> This patch fixes that by temporarily setting 'allowBlank' to true
> until the store is loaded, and then it revalidates the field.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> note: this patch requires the previous widget-toolkit one to work
>  www/manager6/ceph/Pool.js | 14 +++++++++++---
>  1 file changed, 11 insertions(+), 3 deletions(-)
> 
>

applied, thanks!