Merge pull request #333 from hbrunn/8.0-web_widget_one2many_tags-refactor

[RFR] in order to work properly, we need to use FieldOne2Many's caching logic

web_widget_one2many_tags/README.rst

@@ -29,6 +29,16 @@ In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed feedback
 `here <https://github.com/OCA/web/issues/new?body=module:%20web_widget_one2many_tags%0Aversion:%208.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
+Known issues / Roadmap
+======================
+
+* as one2many fields are cached on the client side until the user hits `Save`
+  on the main form, no ``name_get`` can be called on those records, which is
+  why changes that update the display name are not reflected until saving, and
+  new records are displayed as `New record` until then. If you don't like this,
+  add the field `display_name` to your form and have it recomputed in an
+  @onchange handler.
+
 Credits
 =======
 

web_widget_one2many_tags/__openerp__.py

@@ -15,4 +15,7 @@
     "data": [
         'views/templates.xml',
     ],
+    "qweb": [
+        'static/src/xml/web_widget_one2many_tags.xml',
+    ],
 }

web_widget_one2many_tags/static/src/js/web_widget_one2many_tags.js

@@ -4,73 +4,142 @@
 
 openerp.web_widget_one2many_tags = function(instance)
 {
-    openerp.web_widget_one2many_tags.FieldOne2ManyTags =
-    instance.web.form.FieldMany2ManyTags.extend({
+    instance.web_widget_one2many_tags.FieldOne2ManyTags =
+    instance.web.form.FieldOne2Many.extend(instance.web.form.ReinitializeFieldMixin, {
+        template: "FieldOne2ManyTags",
+        tag_template: "FieldOne2ManyTag",
+        disable_utility_classes: false,
         initialize_texttext: function()
         {
-            var self = this,
-                result = this._super.apply(this, arguments),
-                removeTag = result.ext.tags.removeTag;
-            result.plugins = 'tags arrow filter';
-            result.ext.core.onSetInputData = function(e, data)
-            {
-                this.input().val(data);
-            };
-            result.filter = {
-                items: []
-            };
-            result.ext.arrow = {
-                onArrowClick: function(e)
-                {
-                    var context = self.build_context(),
-                        key = _.str.sprintf(
-                            'default_%s', self.field.relation_field)
-                    context.add({[key]: self.field_manager.datarecord.id});
-                    self._search_create_popup('form', undefined, context);
+            var self = this;
+            return {
+                plugins: 'tags arrow filter',
+                ext: {
+                    itemManager: {
+                        itemToString: function(item) {
+                            return item.name;
+                        },
+                    },
+                    arrow: {
+                        onArrowClick: function(e)
+                        {
+                            var list_view = new instance.web.form.One2ManyListView(
+                                self, self.dataset);
+                            list_view.o2m = self;
+                            list_view.editable = function() { return false };
+                            list_view.do_add_record();
+                        },
+                    },
+                    tags: {
+                        isTagAllowed: function(tag) {
+                            return tag.name;
+                        },
+                        removeTag: function(tag)
+                        {
+                            self.dataset.unlink([tag.data('id')]);
+                            return $.fn.textext.TextExtTags.prototype.removeTag
+                                .call(this, tag);
+                        },
+                        renderTag: function(tag) {
+                            return $.fn.textext.TextExtTags.prototype.renderTag
+                                .call(this, tag).data("id", tag.id);
+                        },
+                    },
+                },
+                filter: {
+                    items: []
                 },
-            }
-            result.ext.tags.removeTag = function(tag)
-            {
-                var id = tag.data("id"),
-                    dataset = new instance.web.DataSet(
-                        self, self.field.relation, self.build_context());
-                dataset.unlink([id]);
-                return removeTag(tag);
             };
-            return result;
         },
-        initialize_content: function()
+        build_context: function()
         {
-            var self = this,
-                result = this._super.apply(this, arguments);
-            if(!this.$text)
+            var context = this._super.apply(this, arguments),
+                key = _.str.sprintf('default_%s', this.field.relation_field);
+            if(this.field_manager.datarecord.id)
             {
-                return result;
+                context.add({[key]: this.field_manager.datarecord.id});
             }
-            this.$text.bind('tagClick', function(e, tag, value, callback)
+            return context;
+        },
+        reload_current_view: function()
+        {
+            var self = this;
+            if(!self.$el.length)
             {
-                var popup = new instance.web.form.FormOpenPopup(self);
-                popup.show_element(
-                    self.field.relation, value.id, self.build_context(),
+                return jQuery.when();
+            }
+            if(!self.get("effective_readonly"))
+            {
+                self.ignore_blur = false;
+                if(self.tags)
+                {
+                    self.tags.tagElements().remove();
+                }
+                if(!self.$text || !self.$text.length)
+                {
+                    self.$text = this.$("textarea");
+                    self.$text.textext(self.initialize_texttext());
+                    self.$text.bind('tagClick', function(e, tag, value, callback)
                     {
-                        title: instance.web._t("Open: ") + value.name,
-                        readonly: self.get("effective_readonly"),
+                        var list_view = new instance.web.form.One2ManyViewManager(
+                            self, self.dataset);
+                        list_view.o2m = self;
+                        self.dataset.select_id(value.id);
+                        list_view.switch_mode('form');
                     });
-                popup.on('write_completed', self, function()
+                }
+                if(self.$text.textext().length)
                 {
-                    popup.dataset.name_get(popup.dataset.ids)
-                    .then(function(names)
-                    {
-                        _(names).each(function(name)
+                    self.tags = self.$text.textext()[0].tags();
+                }
+            }
+            else
+            {
+                self.tags = null;
+                self.$text = null;
+            }
+            return self.dataset.read_ids(self.dataset.ids, ['display_name'])
+            .then(function(names)
+            {
+                if(self.get("effective_readonly"))
+                {
+                    self.$el.html(instance.web.qweb.render(
+                        self.tag_template,
                         {
-                            value.name = name[1];
-                            callback(value, true);
-                        })
-                    });
-                });
+                            elements: _(names).map(function(name)
+                            {
+                                return [name.id, name.display_name];
+                            })
+                        }
+                    ));
+                }
+                else if(self.$text.textext().length)
+                {
+                    self.tags.addTags(_(names).map(function(name)
+                    {
+                        return {
+                            name: name.display_name || instance.web._t('New record'),
+                            id: name.id,
+                        }
+                    }));
+                }
             });
+        },
+        reinitialize: function()
+        {
+            var result = instance.web.form.ReinitializeFieldMixin.reinitialize.call(this);
+            this.reload_current_view();
             return result;
         },
+        // defuse some functions we don't need
+        get_active_view: function()
+        {
+            return false;
+        },
+        load_views: function()
+        {
+            return jQuery.when();
+        },
     });
 
     instance.web.form.widgets.add(
@@ -78,23 +147,65 @@ openerp.web_widget_one2many_tags = function(instance)
         'instance.web_widget_one2many_tags.FieldOne2ManyTags'
     );
 
-    instance.web.list.One2ManyTags = instance.web.list.Many2Many.extend({
-        init: function () {
-            this._super.apply(this, arguments);
-            // Treat it as many2many to trick odoo into populating '__display'.
-            // note: this has been fixed in core OCB recently
-            this.type = 'many2many';
-        },
-        _format: function (row_data, options) {
-            if (_.isEmpty(row_data[this.id].value)) {
-                row_data[this.id] = {'value': false};
+    instance.web.list.One2ManyTags = instance.web.list.Column.extend({
+        _format: function (row_data, options)
+        {
+            if(!_.isEmpty(row_data[this.id].value) && row_data[this.id + '__display'])
+            {
+                row_data[this.id] = row_data[this.id + '__display'];
             }
             return this._super(row_data, options);
-        }
+        },
     });
 
     instance.web.list.columns.add(
         'field.one2many_tags',
         'instance.web.list.One2ManyTags'
     );
+
+    instance.web.ListView.List.include({
+        render_cell: function (record, column)
+        {
+            if(column.widget == 'one2many_tags')
+            {
+                var dataset = new instance.web.form.One2ManyDataSet(
+                        this, column.relation),
+                    fake_widget = {
+                        dataset: dataset,
+                        trigger_on_change: function() {},
+                        get_active_view: function () {},
+                        _super: function() {},
+                        set: function() {},
+                        build_context: function()
+                        {
+                            return column.context;
+                        },
+                    },
+                    value = record.get(column.id);
+                dataset.o2m = fake_widget;
+                openerp.web_widget_one2many_tags.FieldOne2ManyTags
+                    .prototype.set_value.apply(fake_widget, [value])
+                dataset.read_ids(dataset.ids, ['display_name'])
+                .then(function(names) {
+                    if(!names.length)
+                    {
+                        return;
+                    }
+                    record.set(
+                        column.id + '__display',
+                        _(names)
+                            .map(function(name)
+                            {
+                                return name.display_name ||
+                                    instance.web._t('New record');
+                            })
+                            .join(', ')
+                    );
+                    console.log(record.get(column.id + '__display'));
+                });
+                column = _(column).extend({type: 'one2many_tags'});
+            }
+            return this._super(record, column);
+        },
+    });
 }

web_widget_one2many_tags/static/src/xml/web_widget_one2many_tags.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="FieldOne2ManyTags" t-extend="FieldMany2ManyTags" />
+    <t t-name="FieldOne2ManyTag" t-extend="FieldMany2ManyTag" />
+</templates>