[FIX] web: support readonly attribute on toggle_button widget

before this commit: applying readonly attribute on toggle_button doesn't work,
toggle_button still clickable and value is still changed even though widget is
readonly, there is no effect of readonly attribute on toggle_button widget.

after this commit: if toggle_button widget has readonly attribute then it will
not be clickable, button of toggle_button will be disabled so that user can
easily understand that element is not clickable.

task-2339995

closes odoo/odoo#79012

X-original-commit: 74d42d4a328c517d0ced56d9e437fb40b00a14d0
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/legacy/js/fields/basic_fields.js

@@ -3313,6 +3313,10 @@ var FieldToggleBoolean = AbstractField.extend({
         this.$('i')
             .toggleClass('o_toggle_button_success', !!this.value)
             .toggleClass('text-muted', !this.value);
+        const isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly;
+        if (isReadonly) {
+            this.el.setAttribute('disabled', isReadonly);
+        }
         var title = this.value ? this.attrs.options.active : this.attrs.options.inactive;
         this.$el.attr('title', title);
         this.$el.attr('aria-pressed', this.value);

addons/web/static/tests/legacy/fields/basic_fields_tests.js

@@ -531,6 +531,39 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('toggle_button in form view with readonly modifiers', async function (assert) {
+        assert.expect(3);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `<form>
+                    <field name="bar" widget="toggle_button" options="{'active': 'Active value', 'inactive': 'Inactive value'}" readonly="True"/>
+                </form>`,
+            mockRPC: function (route, args) {
+                if (args.method === 'write') {
+                    throw new Error("Should not do a write RPC with readonly toggle_button");
+                }
+                return this._super.apply(this, arguments);
+            },
+            res_id: 2,
+        });
+
+        assert.strictEqual(form.$('.o_field_widget[name=bar] i.o_toggle_button_success:not(.text-muted)').length,
+            1, "should be green");
+        assert.ok(form.$('.o_field_widget[name=bar]').prop('disabled'),
+            "button should be disabled when readonly attribute is given");
+
+        // click on the button to check click doesn't call write as we throw error in write call
+        await testUtils.dom.click(form.$('.o_field_widget[name=bar]'));
+
+        assert.strictEqual(form.$('.o_field_widget[name=bar] i.o_toggle_button_success:not(.text-muted)').length,
+            1, "should be green even after click");
+
+        form.destroy();
+    });
+
     QUnit.module('FieldNumeric');
 
     QUnit.test('numeric field: fields with keydown on numpad decimal key', async function (assert) {