ui: refactor iso-selector out of the cd input panel

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

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index ee09f0b80cbed81aa91dd899cb7c8e1279cf24a8..c63361c306f174432215820b841e811bc5602da2 100644 (file)
--- 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 (file)
index 0000000..632ee7f
--- /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 fc7a59cc7807344029f04ce2a5789b20ddb6b516..3cc16205e067d4395a59ede248db3d26cb7eeaff 100644 (file)
--- 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',