Add multiselection widget for many2many

review3951002
issue3634

src/common.js

@@ -235,6 +235,7 @@
         this._last_domain = null;
         this._values2selection = {};
         this._domain_cache = {};
+        this.nullable_widget = true;
     };
     Sao.common.selection_mixin.init_selection = function(key, callback) {
         if (!key) {
@@ -323,7 +324,9 @@
                 result.forEach(function(x) {
                     selection.push([x.id, x.rec_name]);
                 });
-                selection.push([null, '']);
+                if (this.nullable_widget) {
+                    selection.push([null, '']);
+                }
                 this._last_domain = domain;
                 this._domain_cache[jdomain] = selection;
                 this.selection = jQuery.extend([], selection);

src/model.js

@@ -1565,7 +1565,7 @@
                 });
             }
             this._set_value(record, value);
-            if (!Sao.common.compare(previous_ids, value)) {
+            if (!Sao.common.compare(previous_ids.sort(), value.sort())) {
                 record._changed[this.name] = true;
                 this.changed(record).done(function() {
                     // TODO parent

src/sao.less

@@ -137,6 +137,14 @@ body {
             margin-top: 8px;
         }
     }
+    & .form-multiselection {
+        & .form-multiselection-string {
+            display: block;
+        }
+        & .form-multiselection-select {
+            width: 100%;
+        }
+    }
 }
 
 button {

src/view.js

@@ -1456,6 +1456,8 @@
                 return Sao.View.Form.Many2Many;
             case 'binary':
                 return Sao.View.Form.Binary;
+            case 'multiselection':
+                return Sao.View.Form.MultiSelection;
         }
     };
 
@@ -3001,4 +3003,84 @@
             }
         }
     });
+
+    Sao.View.Form.MultiSelection = Sao.class_(Sao.View.Form.Widget, {
+        class_: 'form-multiselection',
+        init: function(field_name, model, attributes) {
+            Sao.View.Form.MultiSelection._super.init.call(this, field_name,
+                model, attributes);
+            this.el = jQuery('<div/>', {
+                'class': this.class_
+            });
+            var label = jQuery('<span/>', {
+                'class': this.class_ + '-string',
+                'text': attributes.string
+            });
+            this.el.append(label);
+            this.select = jQuery('<select/>', {
+                'class': this.class_ + '-select',
+                'multiple': true
+            });
+            this.select.change(this.focus_out.bind(this));
+            this.el.append(this.select);
+
+            Sao.common.selection_mixin.init.call(this);
+            this.nullable_widget = false;
+            this.init_selection();
+        },
+        _get_color_el: function() {
+            return this.select;
+        },
+        init_selection: function(key) {
+            Sao.common.selection_mixin.init_selection.call(this, key,
+                this.set_selection.bind(this));
+        },
+        update_selection: function(record, field, callbak) {
+            Sao.common.selection_mixin.update_selection.call(this, record,
+                field, function(selection) {
+                    this.set_selection(selection);
+                    if (callbak) {
+                        callbak();
+                    }
+                }.bind(this));
+        },
+        set_selection: function(selection) {
+            this.select.empty();
+            selection.forEach(function(e) {
+                this.select.append(jQuery('<option/>', {
+                    'value': e[0],
+                    'text': e[1]
+                }));
+            }.bind(this));
+        },
+        display: function(record, field) {
+            var i, len, element;
+            this.update_selection(record, field, function() {
+                if (!field) {
+                    return;
+                }
+                var value = [];
+                var group = record.field_get_client(this.field_name);
+                for (i = 0, len = group.length; i < len; i++) {
+                    element = group[i];
+                    if (!~group.record_removed.indexOf(element) &&
+                        !~group.record_deleted.indexOf(element)) {
+                            value.push(element.id);
+                    }
+                }
+                this.select.val(value);
+            }.bind(this));
+            Sao.View.Form.MultiSelection._super.display.call(this, record,
+                field);
+        },
+        set_value: function(record, field) {
+            var value = this.select.val();
+            if (value) {
+                value = value.map(function(e) { return parseInt(e, 10); });
+            } else {
+                value = [];
+            }
+            field.set_client(record, value);
+        }
+    });
 }());