[pve-devel] [PATCH manager 1/2] ui: refactor iso selector out of the cd input panel

[Dominik Csapak]

and make it into a proper field
it's intended to be used like a single field and exactly as before

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Makefile            |   1 +
 www/manager6/form/IsoSelector.js | 107 +++++++++++++++++++++++++++++++
 www/manager6/qemu/CDEdit.js      |  38 ++---------
 3 files changed, 115 insertions(+), 31 deletions(-)
 create mode 100644 www/manager6/form/IsoSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index dccd2ba1..56dce790 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -88,6 +88,7 @@ JSSRC= 							\
 	form/TagEdit.js					\
 	form/MultiFileButton.js				\
 	form/TagFieldSet.js				\
+	form/IsoSelector.js				\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/IsoSelector.js b/www/manager6/form/IsoSelector.js
new file mode 100644
index 00000000..632ee7f0
--- /dev/null
+++ b/www/manager6/form/IsoSelector.js
@@ -0,0 +1,107 @@
+Ext.define('PVE.form.IsoSelector', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveIsoSelector',
+    mixins: [
+	'Ext.form.field.Field',
+	'Proxmox.Mixin.CBind',
+    ],
+
+    nodename: undefined,
+    insideWizard: false,
+
+    cbindData: function() {
+	let me = this;
+	return {
+	    nodename: me.nodename,
+	    insideWizard: me.insideWizard,
+	};
+    },
+
+    getValue: function() {
+	return this.lookup('file').getValue();
+    },
+
+    setValue: function(value) {
+	let me = this;
+	if (!value) {
+	    me.lookup('file').reset();
+	    return;
+	}
+	var match = value.match(/^([^:]+):/);
+	if (match) {
+	    me.lookup('storage').setValue(match[1]);
+	    me.lookup('file').setValue(value);
+	}
+    },
+
+    getErrors: function() {
+	let me = this;
+	me.lookup('storage').validate();
+	let file = me.lookup('file');
+	file.validate();
+	let value = file.getValue();
+	if (!value || !value.length) {
+	    return [""]; // for validation
+	}
+	return [];
+    },
+
+    setNodename: function(nodename) {
+	let me = this;
+	me.lookup('storage').setNodename(nodename);
+	me.lookup('file').setStorage(undefined, nodename);
+    },
+
+    setDisabled: function(disabled) {
+	let me = this;
+	me.lookup('storage').setDisabled(disabled);
+	me.lookup('file').setDisabled(disabled);
+	me.callParent();
+    },
+
+    referenceHolder: true,
+
+    items: [
+	{
+	    xtype: 'pveStorageSelector',
+	    reference: 'storage',
+	    isFormField: false,
+	    fieldLabel: gettext('Storage'),
+	    labelAlign: 'right',
+	    storageContent: 'iso',
+	    allowBlank: false,
+	    cbind: {
+		nodename: '{nodename}',
+		autoSelect: '{insideWizard}',
+		insideWizard: '{insideWizard}',
+		disabled: '{disabled}',
+	    },
+	    listeners: {
+		change: function(f, value) {
+		    let me = this;
+		    let selector = me.up('pveIsoSelector');
+		    selector.lookup('file').setStorage(value);
+		    selector.checkChange();
+		},
+	    },
+	},
+	{
+	    xtype: 'pveFileSelector',
+	    reference: 'file',
+	    isFormField: false,
+	    storageContent: 'iso',
+	    fieldLabel: gettext('ISO image'),
+	    labelAlign: 'right',
+	    cbind: {
+		nodename: '{nodename}',
+		disabled: '{disabled}',
+	    },
+	    allowBlank: false,
+	    listeners: {
+		change: function() {
+		    this.up('pveIsoSelector').checkChange();
+		},
+	    },
+	},
+    ],
+});
diff --git a/www/manager6/qemu/CDEdit.js b/www/manager6/qemu/CDEdit.js
index fc7a59cc..3cc16205 100644
--- a/www/manager6/qemu/CDEdit.js
+++ b/www/manager6/qemu/CDEdit.js
@@ -43,11 +43,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
 	    values.mediaType = 'none';
 	} else {
 	    values.mediaType = 'iso';
-	    var match = drive.file.match(/^([^:]+):/);
-	    if (match) {
-		values.cdstorage = match[1];
-		values.cdimage = drive.file;
-	    }
+	    values.cdimage = drive.file;
 	}
 
 	me.drive = drive;
@@ -58,8 +54,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
     setNodename: function(nodename) {
 	var me = this;
 
-	me.cdstoragesel.setNodename(nodename);
-	me.cdfilesel.setStorage(undefined, nodename);
+	me.isosel.setNodename(nodename);
     },
 
     initComponent: function() {
@@ -87,8 +82,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
 		    if (!me.rendered) {
 			return;
 		    }
-		    me.down('field[name=cdstorage]').setDisabled(!value);
-		    var cdImageField = me.down('field[name=cdimage]');
+		    var cdImageField = me.down('pveIsoSelector');
 		    cdImageField.setDisabled(!value);
 		    if (value) {
 			cdImageField.validate();
@@ -99,32 +93,14 @@ Ext.define('PVE.qemu.CDInputPanel', {
 	    },
 	});
 
-	me.cdfilesel = Ext.create('PVE.form.FileSelector', {
-	    name: 'cdimage',
-	    nodename: me.nodename,
-	    storageContent: 'iso',
-	    fieldLabel: gettext('ISO image'),
-	    labelAlign: 'right',
-	    allowBlank: false,
-	});
 
-	me.cdstoragesel = Ext.create('PVE.form.StorageSelector', {
-	    name: 'cdstorage',
+	me.isosel = Ext.create('PVE.form.IsoSelector', {
 	    nodename: me.nodename,
-	    fieldLabel: gettext('Storage'),
-	    labelAlign: 'right',
-	    storageContent: 'iso',
-	    allowBlank: false,
-	    autoSelect: me.insideWizard,
-	    listeners: {
-		change: function(f, value) {
-		    me.cdfilesel.setStorage(value);
-		},
-	    },
+	    insideWizard: me.insideWizard,
+	    name: 'cdimage',
 	});
 
-	items.push(me.cdstoragesel);
-	items.push(me.cdfilesel);
+	items.push(me.isosel);
 
 	items.push({
 	    xtype: 'radiofield',
-- 
2.30.2