[PATCH manager 1/2] ui: vCPU flag selector: replace radio group with segmented button

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

The per-flag state used a radio group of three single-character
options (- force-off, = default, + force-on) alongside a separate
read-only "State" column that re-rendered the same value as Off,
Default, or On. That was a bit cramped and also not the best UX.

Use one segmented button labeled Off/Default/On that both shows and
sets the state, and drop the now-superfluous text column. A segmented
button also reports a plain value to its change listener instead of
the radio group's keyed object, simplifying the dirty-tracking
handler.

The classic Ext.button.Segmented already existed in ExtJS 6.0.1, the
version PVE shipped when I added this selector back in 06064872c
("gui: vm: add CPU flag selector with tri-state awareness"), not
really sure though why I did not favor it over the radio group
approach.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/form/VMCPUFlagSelector.js | 66 +++++++-------------------
 1 file changed, 18 insertions(+), 48 deletions(-)

diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js
index d4adbc0f5..5972ee678 100644
--- a/www/manager6/form/VMCPUFlagSelector.js
+++ b/www/manager6/form/VMCPUFlagSelector.js
@@ -216,68 +216,38 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
         return res;
     },
     columns: [
-        {
-            text: gettext('State'),
-            dataIndex: 'state',
-            renderer: function (v) {
-                switch (v) {
-                    case '=':
-                        return 'Default';
-                    case '-':
-                        return 'Off';
-                    case '+':
-                        return 'On';
-                    default:
-                        return 'Unknown';
-                }
-            },
-            width: 65,
-        },
         {
             text: gettext('Value'),
             xtype: 'widgetcolumn',
             dataIndex: 'state',
-            width: 95,
+            width: 200,
             onWidgetAttach: function (column, widget, record) {
-                let val = record.get('state') || '=';
-                widget.down('[inputValue=' + val + ']').setValue(true);
+                widget.setValue(record.get('state') || '=');
                 // TODO: disable if selected CPU model and flag are incompatible
             },
             widget: {
-                xtype: 'radiogroup',
-                hideLabel: true,
-                layout: 'hbox',
-                validateOnChange: false,
+                xtype: 'segmentedbutton',
+                allowMultiple: false,
+                defaultUI: 'default-toolbar',
                 value: '=',
+                items: [
+                    { text: gettext('Off'), value: '-', width: 50 },
+                    { text: gettext('Default'), value: '=', width: 90 },
+                    { text: gettext('On'), value: '+', width: 50 },
+                ],
                 listeners: {
                     change: function (f, value) {
-                        let v = Object.values(value)[0];
-                        f.getWidgetRecord().set('state', v);
+                        let rec = f.getWidgetRecord();
+                        if (!rec) {
+                            return;
+                        }
+                        rec.set('state', value);
 
-                        let view = this.up('grid');
-                        view.dirty = view.getValue() !== view.originalValue;
-                        view.checkDirty();
-                        //view.checkChange();
+                        let grid = f.up('grid');
+                        grid.dirty = grid.getValue() !== grid.originalValue;
+                        grid.checkDirty();
                     },
                 },
-                items: [
-                    {
-                        boxLabel: '-',
-                        boxLabelAlign: 'before',
-                        inputValue: '-',
-                        isFormField: false,
-                    },
-                    {
-                        checked: true,
-                        inputValue: '=',
-                        isFormField: false,
-                    },
-                    {
-                        boxLabel: '+',
-                        inputValue: '+',
-                        isFormField: false,
-                    },
-                ],
             },
         },
         {
-- 
2.47.3