From df60e210d70a1d9e357d2fdf223d4120e471f3e2 Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Wed, 18 Jan 2023 14:13:01 +0100
Subject: [PATCH] ui: storage: iSCSI panel: modernize, cleanup & improve UX

using cbind + pmxDisplayEditField, getting rid of initComponent

Disables the target selector until a portal is entered. For this, we
currently cannot use the pmxDisplayEditField, since that
disabled/enables the fields automatically based on 'editable'.

Also setting buffer for the portal entry change handler to 500ms (so that
we don't query the backend that often)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/storage/IScsiEdit.js | 90 +++++++++++++++++--------------
 1 file changed, 51 insertions(+), 39 deletions(-)

diff --git a/www/manager6/storage/IScsiEdit.js b/www/manager6/storage/IScsiEdit.js
index 6a1e4aeb5..314882b44 100644
--- a/www/manager6/storage/IScsiEdit.js
+++ b/www/manager6/storage/IScsiEdit.js
@@ -71,6 +71,7 @@ Ext.define('PVE.storage.IScsiScan', {
 
 Ext.define('PVE.storage.IScsiInputPanel', {
     extend: 'PVE.panel.StorageBase',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     onlineHelp: 'storage_open_iscsi',
 
@@ -88,50 +89,61 @@ Ext.define('PVE.storage.IScsiInputPanel', {
 	this.callParent([values]);
     },
 
-    initComponent: function() {
-	let me = this;
+    column1: [
+	{
+	    xtype: 'pmxDisplayEditField',
+	    cbind: {
+		editable: '{isCreate}',
+	    },
 
-	me.column1 = [
-	    {
-		xtype: me.isCreate ? 'textfield' : 'displayfield',
-		name: 'portal',
-		value: '',
-		fieldLabel: 'Portal',
-		allowBlank: false,
+	    name: 'portal',
+	    value: '',
+	    fieldLabel: 'Portal',
+	    allowBlank: false,
+
+	    editConfig: {
 		listeners: {
-		    change: function(f, value) {
-			if (me.isCreate) {
-			    let exportField = me.down('field[name=target]');
-			    exportField.setPortal(value);
-			    exportField.setValue('');
-			}
+		    change: {
+			fn: function(f, value) {
+			    let panel = this.up('inputpanel');
+			    let exportField = panel.lookup('iScsiTargetScan');
+			    if (exportField) {
+				exportField.setDisabled(!value);
+				exportField.setPortal(value);
+				exportField.setValue('');
+			    }
+			},
+			buffer: 500,
 		    },
 		},
 	    },
-	    Ext.createWidget(me.isCreate ? 'pveIScsiScan' : 'displayfield', {
-		readOnly: !me.isCreate,
-		name: 'target',
-		value: '',
-		fieldLabel: gettext('Target'),
-		allowBlank: false,
-		reference: 'iScsiTargetScan',
-		listeners: {
-		    nodechanged: function(value) {
-			me.lookup('storageNodeRestriction').setValue(value);
-		    },
-		},
-	    }),
-	];
-
-	me.column2 = [
-	    {
-		xtype: 'checkbox',
-		name: 'luns',
-		checked: true,
-		fieldLabel: gettext('Use LUNs directly'),
+	},
+	{
+	    cbind: {
+		xtype: (get) => get('isCreate') ? 'pveIScsiScan' : 'displayfield',
+		readOnly: '{!isCreate}',
+		disabled: '{isCreate}',
 	    },
-	];
 
-	me.callParent();
-    },
+	    name: 'target',
+	    value: '',
+	    fieldLabel: gettext('Target'),
+	    allowBlank: false,
+	    reference: 'iScsiTargetScan',
+	    listeners: {
+		nodechanged: function(value) {
+		    this.up('inputpanel').lookup('storageNodeRestriction').setValue(value);
+		},
+	    },
+	},
+    ],
+
+    column2: [
+	{
+	    xtype: 'checkbox',
+	    name: 'luns',
+	    checked: true,
+	    fieldLabel: gettext('Use LUNs directly'),
+	},
+    ],
 });