Re: [pve-devel] [PATCH v2 widget-toolkit 1/1] repo view: replace non-clickable checkbox with icons

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

Am 23/01/2023 um 14:17 schrieb Lukas Wagner:
> From a usability view, having a checkbox that is not clickable is pretty
> misleading, especially if the visual style is exactly the same as in
> other places in the UI where the checkbox is functional.
> 
> Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
> ---
>  src/Utils.js                | 6 ++++++
>  src/node/APTRepositories.js | 8 ++++----
>  2 files changed, 10 insertions(+), 4 deletions(-)
> 
> diff --git a/src/Utils.js b/src/Utils.js
> index ef0c2b8..5397fd9 100644
> --- a/src/Utils.js
> +++ b/src/Utils.js
> @@ -100,6 +100,11 @@ utilities: {
>  	return value;
>      },
>  
> +    render_enabled_icon: function(value) {
> +	let icon = value ? 'fa-check' : 'fa-minus';
> +	return `<i class="fa ${icon}"></i>`;
> +    },

I know casing is all over the place, but ExtJS uses camelCase and we interact
with it a lot, so I'd favor adding new stuff as camelCase over, e.g., snake_case.

For this here an arrow function might be worth it, e.g.:

renderEnabledIcon: enabled => `<i class="fa fa-${enabled ? 'check' : 'minus'}"></i>`,

btw. maybe it's really time to start a "Format" or "Render" class and move all
those renderer out from Utils; but the burden of doing so really shouldn't be the
one from this series.

> +
>      language_array: function() {
>  	let data = [['__default__', Proxmox.Utils.render_language('')]];
>  	Ext.Object.each(Proxmox.Utils.language_map, function(key, value) {
> @@ -145,6 +150,7 @@ utilities: {
>  	return value ? Proxmox.Utils.enabledText : Proxmox.Utils.disabledText;
>      },
>  
> +

spurious new line added.

>      format_expire: function(date) {
>  	if (!date) {
>  	    return Proxmox.Utils.neverText;
> diff --git a/src/node/APTRepositories.js b/src/node/APTRepositories.js
> index ce8f718..c6b45a2 100644
> --- a/src/node/APTRepositories.js
> +++ b/src/node/APTRepositories.js
> @@ -239,11 +239,11 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
>  
>      columns: [
>  	{
> -	    xtype: 'checkcolumn',
>  	    header: gettext('Enabled'),
> -	    dataIndex: 'Enabled',
> -	    listeners: {
> -		beforecheckchange: () => false, // veto, we don't want to allow inline change - to subtle
> +	    dataindex: 'Enabled',
> +	    align: 'center',
> +	    renderer: function(enabled, cell, record) {
> +		return Proxmox.Utils.render_enabled_icon(record.data.Enabled);
>  	    },

could be a one liner without losing clarity:

renderer: ({data}) => Proxmox.Utils.renderEnabledIcon(data.Enabled),

>  	    width: 90,
>  	},