[MERGE] radio-many2one: clean code and allow to apply radio button on many2one field

bzr revid: chm@openerp.com-20130415121608-gmis1l6djbudyez5

addons/web/static/src/css/base.css

@@ -2315,24 +2315,26 @@
 .openerp .oe_form_field_radio.oe_horizontal {
   white-space: nowrap;
 }
-.openerp .oe_form_field_radio.oe_horizontal .oe_radio_header {
+.openerp .oe_form_field_radio.oe_form_required .oe_radio_input {
+  border: 1px solid transparent;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  vertical-align: bottom;
+  border-radius: 10px;
+  margin: 1px 0;
+}
+.openerp .oe_form_field_radio.oe_form_required.oe_form_invalid .oe_radio_input {
+  border-color: red;
+}
+.openerp .oe_form_field_radio.oe_horizontal label,
+.openerp .oe_form_field_radio.oe_horizontal div {
   display: inline-block;
   text-align: center;
+  height: 16px;
 }
-.openerp .oe_form_field_radio.oe_vertical .oe_radio_header {
-  cursor: pointer;
-}
-.openerp .oe_form_field_radio .oe_radio_input {
-  cursor: pointer;
-  display: inline-block;
-  width: 20px;
-  background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center;
-}
-.openerp .oe_form_field_radio .oe_radio_input_on {
-  background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center;
-}
-.openerp .oe_form_field_radio .oe_radio_label {
-  cursor: default;
+.openerp .oe_form_field_radio.oe_vertical label {
+  margin-left: 4px;
 }
 .openerp .oe_form_field_progressbar.ui-progressbar {
   height: 22px;

addons/web/static/src/css/base.sass

@@ -483,21 +483,25 @@ $sheet-padding: 16px
     .oe_form_field_radio
         &.oe_horizontal
             white-space: nowrap
-            .oe_radio_header
+            label
                 display: inline-block
                 text-align: center
+                height: 16px
         &.oe_vertical
-            .oe_radio_header
-                cursor: pointer
-        .oe_radio_input
-            cursor: pointer
-            display: inline-block
-            width: 20px
-            background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center
-        .oe_radio_input_on
-            background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center
-        .oe_radio_label
-            cursor: default
+            label
+                margin-left: 4px
+        &.oe_form_required
+            .oe_radio_input
+                border: 2px solid transparent
+                display: inline-block
+                height: 12px
+                width: 12px
+                vertical-align: bottom
+                border-radius: 10px
+                margin: 1px 0
+            &.oe_form_invalid
+                .oe_radio_input
+                    border-color: red
     .oe_tags
         &.oe_inline
             min-width: 250px

addons/web/static/src/js/view_form.js

@@ -2806,35 +2806,94 @@ instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instan
 
 instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
     template: 'FieldRadio',
+    events: {
+        'click input': 'click_change_value'
+    },
     init: function(field_manager, node) {
         /* Radio button widget: Attributes options:
         * - "horizontal" to display in column
         * - "no_radiolabel" don't display text values
-        * - "display_readonly" to display radio button (not clickable) in read only mode
         */
-        var self = this;
         this._super(field_manager, node);
-        this.horizontal = +this.options.horizontal;
-        this.no_radiolabel = +this.options.no_radiolabel;
-        this.display_readonly = +this.options.display_readonly;
+        this.selection = _.clone(this.field.selection) || [];
+        this.domain = false;
     },
     initialize_content: function () {
+        this.uniqueId = _.uniqueId("radio");
+        this.on("change:effective_readonly", this, this.render_value);
+        this.field_manager.on("view_content_has_changed", this, this.get_selection);
+        this.get_selection();
+    },
+    click_change_value: function (event) {
+        var val = $(event.target).val();
+        val = this.field.type == "selection" ? val : +val;
+        if (val == this.get_value()) {
+            this.set_value(false);
+        } else {
+            this.set_value(val);
+        }
+    },
+    /** Get the selection and render it
+     *  selection: [[identifier, value_to_display], ...]
+     *  For selection fields: this is directly given by this.field.selection
+     *  For many2one fields:  perform a search on the relation of the many2one field
+     */
+    get_selection: function() {
         var self = this;
-        this.$el.on('click', '.oe_radio_input,.oe_radio_header', function (event) {
-            var id = $(event.target).data("id");
-            id = isNaN(+id) ? id : +id;
-            if (id && !self.get("effective_readonly")) {
-                if (!self.field.required && id == self.get_value()) {
-                    self.set_value(false);
-                } else {
-                    self.set_value(id);
-                }
+        var selection = [];
+        var def = $.Deferred();
+        if (self.field.type == "many2one") {
+            var domain = instance.web.pyeval.eval('domain', this.build_domain()) || [];
+            if (! _.isEqual(self.domain, domain)) {
+                self.domain = domain;
+                var ds = new instance.web.DataSet(self, self.field.relation);
+                ds.call('search', [self.domain])
+                    .then(function (records) {
+                        ds.name_get(records).then(function (records) {
+                            selection = records;
+                            def.resolve();
+                        });
+                    });
+            } else {
+                selection = self.selection;
+                def.resolve();
+            }
+        }
+        else if (self.field.type == "selection") {
+            selection = self.field.selection || [];
+            def.resolve();
+        }
+        return def.then(function () {
+            if (! _.isEqual(selection, self.selection)) {
+                self.selection = _.clone(selection);
+                self.renderElement();
+                self.render_value();
             }
         });
     },
+    set_value: function (value_) {
+        if (value_) {
+            if (this.field.type == "selection") {
+                value_ = _.find(this.field.selection, function (sel) { return sel[0] == value_});
+            }
+            else if (!this.selection.length) {
+                this.selection = [value_];
+            }
+        }
+        this._super(value_);
+    },
+    get_value: function () {
+        var value = this.get('value');
+        return value instanceof Array ? value[0] : value;
+    },
     render_value: function () {
-        this.$(".oe_radio_input_on").removeClass("oe_radio_input_on");
-        this.$(".oe_radio_input[data-id='" + this.get_value() + "'], .oe_radio_header[data-id='" + this.get_value() + "'] .oe_radio_input").addClass("oe_radio_input_on");
+        var self = this;
+        this.$el.toggleClass("oe_readonly", this.get('effective_readonly'));
+        this.$("input:checked").prop("checked", false);
+        if (this.get_value()) {
+            this.$("input").filter(function () {return this.value == self.get_value()}).prop("checked", true);
+            this.$(".oe_radio_readonly").text(this.get('value') ? this.get('value')[1] : "");
+        }
     }
 });
 

addons/web/static/src/xml/base.xml

@@ -1112,26 +1112,31 @@
     </span>
 </t>
 <t t-name="FieldRadio">
-    <span t-attf-class="oe_form_field oe_form_field_radio #{widget.horizontal ? 'oe_horizontal' : 'oe_vertical'}" t-att-style="widget.node.attrs.style">
-        <t t-if="widget.horizontal">
-            <t t-set="width" t-value="Math.floor(100 / widget.field.selection.length)"/>
-            <t t-if="!widget.no_radiolabel">
-                <t t-foreach="widget.field.selection" t-as="selection">
-                    <div class="oe_radio_header" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></div>
+    <span t-attf-class="oe_form_field oe_form_field_radio #{widget.options.horizontal ? 'oe_horizontal' : 'oe_vertical'}" t-att-style="widget.node.attrs.style">
+        <span t-if="!widget.get('effective_readonly')">
+            <t t-if="widget.options.horizontal">
+                <t t-set="width" t-value="Math.floor(100 / widget.selection.length)"/>
+                <t t-if="!widget.options.no_radiolabel">
+                    <t t-foreach="widget.selection" t-as="selection">
+                        <label t-att-for="widget.uniqueId + '_' + selection[0]" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></label>
+                    </t>
+                    <br/>
+                </t>
+                <t t-foreach="widget.selection" t-as="selection">
+                    <div t-att-style="'width: ' + width + '%;'">
+                        <span class="oe_radio_input"><input type="radio" t-att-name="widget.uniqueId" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-value="selection[0]"/></span>
+                    </div>
                 </t>
-                <br/>
             </t>
-            <t t-foreach="widget.field.selection" t-as="selection">
-                <div class="oe_radio_input" t-att-style="'width: ' + width + '%;'" t-att-data-id="selection[0]">&amp;nbsp;</div>
+            <t t-if="!widget.options.horizontal">
+                <t t-foreach="widget.selection" t-as="selection">
+                    <div>
+                        <span class="oe_radio_input"><input type="radio" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-name="widget.uniqueId" t-att-value="selection[0]"/></span><label t-if="!widget.options.no_radiolabel" t-att-for="widget.uniqueId + '_' + selection[0]"><t t-esc="selection[1]"/></label>
+                    </div>
+                </t>
             </t>
-        </t>
-        <t t-if="!widget.horizontal">
-            <t t-foreach="widget.field.selection" t-as="selection">
-                <div class="oe_radio_header" t-att-style="'width: ' + width + '%;'" t-att-data-id="selection[0]">
-                    <div class="oe_radio_input">&amp;nbsp;</div><t t-if="!widget.no_radiolabel" t-esc="selection[1]"/>
-                </div>
-            </t>
-        </t>
+        </span>
+        <span t-if="widget.get('effective_readonly')" class="oe_radio_readonly"><t t-esc="widget.get('value')[1]"/></span>
     </span>
 </t>
 <t t-name="FieldMany2One">