[FIX] web: many2many2tags if no color field

If there is no field 'color' on tag model, the colorpicker should not be displayed.

3 files changed, 40 insertions, 21 deletions

diff --git a/addons/web/static/src/js/views/form_relational_widgets.js b/addons/web/static/src/js/views/form_relational_widgets.js
index 5788b3b333e..e4f48e398b0 100644
--- a/addons/web/static/src/js/views/form_relational_widgets.js
+++ b/addons/web/static/src/js/views/form_relational_widgets.js
@@ -1359,7 +1359,7 @@ var FieldMany2ManyTags = AbstractManyField.extend(common.CompletionFieldMixin, c
             this.remove_id($(e.target).parent().data('id'));
         },
         'click .badge': 'open_color_picker',
-        'mousedown .o_colorpicker a': 'update_color',
+        'mousedown .o_colorpicker span': 'update_color',
         'focusout .o_colorpicker': 'close_color_picker',
     },
 
@@ -1368,6 +1368,12 @@ var FieldMany2ManyTags = AbstractManyField.extend(common.CompletionFieldMixin, c
         common.CompletionFieldMixin.init.call(this);
         this.set({"value": []});
         this._display_orderer = new utils.DropMisordered();
+
+        var self = this;
+        // We need to know if the field 'color' exists on the model
+        this.dataset.call('fields_get', []).then(function(fields) {
+            self.fields = fields;
+        });
     },
     initialize_content: function() {
         if(!this.get("effective_readonly")) {
@@ -1401,7 +1407,8 @@ var FieldMany2ManyTags = AbstractManyField.extend(common.CompletionFieldMixin, c
         }
     },
     get_render_data: function(ids){
-        return this.dataset.read_ids(ids, ['name', 'color']);
+        var fields = this.fields.color ? ['name', 'color'] : ['name'];
+        return this.dataset.read_ids(ids, fields);
     },
     render_tag: function(data) {
         this.$('.badge').remove();
@@ -1446,29 +1453,34 @@ var FieldMany2ManyTags = AbstractManyField.extend(common.CompletionFieldMixin, c
         }
     },
     open_color_picker: function(ev){
-        var self = this;
 
-        this.$color_picker = $(QWeb.render('FieldMany2ManyTag.colorpicker', {
-            'widget': this,
-            'tag_id': $(ev.currentTarget).data('id'),
-        }));
+        if (this.fields.color) {
+            this.$color_picker = $(QWeb.render('FieldMany2ManyTag.colorpicker', {
+                'widget': this,
+                'tag_id': $(ev.currentTarget).data('id'),
+            }));
 
-        $(ev.currentTarget).append(this.$color_picker);
-        this.$color_picker.dropdown('toggle');
-        this.$color_picker.attr("tabindex", 1).focus();
+            $(ev.currentTarget).append(this.$color_picker);
+            this.$color_picker.dropdown('toggle');
+            this.$color_picker.attr("tabindex", 1).focus();
+        }
     },
     close_color_picker: function(){
         this.$color_picker.remove();
     },
     update_color: function(ev) {
         ev.preventDefault();
-        var self = this;
 
         var color = $(ev.currentTarget).data('color');
         var id = $(ev.currentTarget).data('id');
 
+        var self = this;
         this.dataset._model.call('write', [id, {'color': color}]).done(function(){
-            self.view.reload();
+            var tag = self.$el.find("span.badge[data-id='" + id + "']");
+            var old_color = tag.data('color');
+            tag.removeClass('o_tag_color_' + old_color);
+            tag.data('color', color);
+            tag.addClass('o_tag_color_' + color);
         });
     },
 
diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less
index 05c5706c11d..710587bb92b 100644
--- a/addons/web/static/src/less/enterprise_compatibility.less
+++ b/addons/web/static/src/less/enterprise_compatibility.less
@@ -278,23 +278,30 @@ div.o_checkbox {
             .o_delete {
                 cursor: pointer;
             }
-            ul {
-                min-width: 230px;
-                li {
+            > ul {
+                @colored-tag-width: 45px;
+                width: 5*@colored-tag-width + 2px;
+                > li {
                     float: left;
                     color: black;
-                    a {
+                    > span {
                         border-radius: 6px;
-                        width: 28px;
+                        width: @colored-tag-width;
                         height: 30px;
                         display: inline-block;
                         border: 2px solid white;
+                        cursor: pointer;
+                        padding: 0;
 
                         &:hover {
                             opacity: 0.8;
                         }
                     }
                 }
+                > li:last-child {
+                    margin-top: 7px;
+                    cursor: auto;
+                }
             }
         }
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 4d95b0e81a0..131e42c4042 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -840,7 +840,7 @@
 <t t-name="FieldMany2ManyTag">
     <t t-set="i" t-value="0"/>
     <t t-foreach="elements" t-as="el">
-        <span t-attf-class="badge dropdown #{'o_tag_color_' + el['color']}" t-att-data-index="i" t-att-data-id="el['id']">
+        <span t-attf-class="badge dropdown #{'o_tag_color_' + (el['color'] || 0)}" t-att-data-color="(el['color'] || 0)" t-att-data-index="i" t-att-data-id="el['id']">
             <t t-esc="el['name']"/>
             <span t-if="!readonly" class="fa fa-times o_delete"/>
         </span>
@@ -850,12 +850,12 @@
 <t t-name="FieldMany2ManyTag.colorpicker">
     <ul class="o_colorpicker dropdown-menu" role="menu">
         <li t-foreach="10" t-as="color">
-            <a href="#" t-att-data-id="tag_id" t-att-data-color="color_index + 1" t-attf-class="o_tag_color_#{color + 1}"/>
+            <span href="#" t-att-data-id="tag_id" t-att-data-color="color_index + 1" t-attf-class="o_tag_color_#{color + 1}"/>
         </li>
         <li>
-            <a href="#" t-att-data-id="tag_id" t-att-data-color="0" class="o_tag_color_0"/>
+            <span t-att-data-id="tag_id" t-att-data-color="0" class="o_tag_color_0"/>
         </li>
-        <li style="margin-top: 7px">
+        <li>
             No color (hidden in kanban)
         </li>
     </ul>