ui: guest import: add config tab

that shows the current config. Recalculates whenever one changes to its
tab

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/window/GuestImport.js b/www/manager6/window/GuestImport.js
index d2bde82d4e8054e61029957ce1d4acd4d40597a8..ec04e8c05f75b4fc7e0cefe3437f559e162f86a8 100644 (file)
--- a/www/manager6/window/GuestImport.js
+++ b/www/manager6/window/GuestImport.js
@@ -84,6 +84,14 @@ Ext.define('PVE.window.GuestImport', {
            }
        },
 
+       calculateConfig: function() {
+           let me = this;
+           let inputPanel = me.lookup('mainInputPanel');
+           let summaryGrid = me.lookup('summaryGrid');
+           let values = inputPanel.getValues();
+           summaryGrid.getStore().setData(Object.entries(values).map(([key, value]) => ({ key, value })));
+       },
+
        control: {
            'grid field': {
                // update records from widgetcolumns
@@ -102,6 +110,9 @@ Ext.define('PVE.window.GuestImport', {
            'field[name=osbase]': {
                change: 'onOSBaseChange',
            },
+           'panel[reference=summaryTab]': {
+               activate: 'calculateConfig',
+           },
        },
     },
 
@@ -563,6 +574,29 @@ Ext.define('PVE.window.GuestImport', {
                        },
                    ],
                },
+               {
+                   title: gettext('Resulting Config'),
+                   reference: 'summaryTab',
+                   items: [
+                       {
+                           xtype: 'grid',
+                           reference: 'summaryGrid',
+                           maxHeight: 400,
+                           scrollable: true,
+                           store: {
+                               model: 'KeyValue',
+                               sorters: [{
+                                   property: 'key',
+                                   direction: 'ASC',
+                               }],
+                           },
+                           columns: [
+                               { header: 'Key', width: 150, dataIndex: 'key' },
+                               { header: 'Value', flex: 1, dataIndex: 'value' },
+                           ],
+                       },
+                   ],
+               },
            ],
        },
     ],