[pve-devel] [PATCH manager v16 1/2] ui: qemu: change DisplayEdit logic to use ViewModel instead of listener function

[Dominik Csapak]

one minor nit inline, otherwise

Reviewed-by: Dominik Csapak <d.csapak at proxmox.com>
Tested-by: Dominik Csapak <d.csapak at proxmox.com>

On 4/8/24 12:33, Markus Frank wrote:
> Signed-off-by: Markus Frank <m.frank at proxmox.com>
> ---
>   www/manager6/qemu/DisplayEdit.js | 57 ++++++++++++++++++--------------
>   1 file changed, 33 insertions(+), 24 deletions(-)
> 
> diff --git a/www/manager6/qemu/DisplayEdit.js b/www/manager6/qemu/DisplayEdit.js
> index 9bb1763e..17b02ee4 100644
> --- a/www/manager6/qemu/DisplayEdit.js
> +++ b/www/manager6/qemu/DisplayEdit.js
> @@ -11,6 +11,33 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	return { vga: ret };
>       },
>   
> +    viewModel: {
> +	data: {
> +	    type: '__default__',
> +	    nonGUIOptionRegex: /^(serial\d|none)$/,
> +	},
> +	formulas: {
> +	    matchNonGUIOption: function(get) {
> +		return get('type').match(get('nonGUIOptionRegex'));

since this regex is only used once, i'd inline it where it's used

> +	    },
> +	    memoryEmptyText: function(get) {
> +		let val = get('type');
> +		if (val === "cirrus") {
> +		    return "4";
> +		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
> +		    return "16";
> +		} else if (val.match(/^virtio/)) {
> +		    return "256";
> +		} else if (get('matchNonGUIOption')) {
> +		    return "N/A";
> +		} else {
> +		    console.debug("unexpected display type", val);
> +		    return Proxmox.Utils.defaultText;
> +		}
> +	    },
> +	},
> +    },
> +
>       items: [{
>   	name: 'type',
>   	xtype: 'proxmoxKVComboBox',
> @@ -27,39 +54,21 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	    }
>   	    return true;
>   	},
> -	listeners: {
> -	    change: function(cb, val) {
> -		if (!val) {
> -		    return;
> -		}
> -		let memoryfield = this.up('panel').down('field[name=memory]');
> -		let disableMemoryField = false;
> -
> -		if (val === "cirrus") {
> -		    memoryfield.setEmptyText("4");
> -		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
> -		    memoryfield.setEmptyText("16");
> -		} else if (val.match(/^virtio/)) {
> -		    memoryfield.setEmptyText("256");
> -		} else if (val.match(/^(serial\d|none)$/)) {
> -		    memoryfield.setEmptyText("N/A");
> -		    disableMemoryField = true;
> -		} else {
> -		    console.debug("unexpected display type", val);
> -		    memoryfield.setEmptyText(Proxmox.Utils.defaultText);
> -		}
> -		memoryfield.setDisabled(disableMemoryField);
> -	    },
> +	bind: {
> +	    value: '{type}',
>   	},
>       },
>       {
>   	xtype: 'proxmoxintegerfield',
> -	emptyText: Proxmox.Utils.defaultText,
>   	fieldLabel: gettext('Memory') + ' (MiB)',
>   	minValue: 4,
>   	maxValue: 512,
>   	step: 4,
>   	name: 'memory',
> +	bind: {
> +	    emptyText: '{memoryEmptyText}',
> +	    disabled: '{matchNonGUIOption}',
> +	},
>       }],
>   });
>