Merge pull request #996 from tarteo/11-imp-web-timeline-template

[11.0][IMP] web_timeline templates like kanban view

web_timeline/README.rst

@@ -59,6 +59,14 @@ Example:
                           event_open_popup="true"
                           zoomKey="ctrlKey"
                           colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
+                    <field name="user_id"/>
+                    <templates>
+                        <div t-name="timeline-item">
+                            <div t-esc="record.display_name"/>
+                            Assigned to:
+                            <span t-esc="record.user_id[1]"/>
+                        </div>
+                    </templates>
                 </timeline>
             </field>
         </record>
@@ -135,6 +143,7 @@ Contributors
 * Pedro M. Baeza <pedro.baeza@tecnativa.com>
 * Leonardo Donelli <donelli@webmonks.it>
 * Adrien Didenot <adrien.didenot@horanet.com>
+* Dennis Sluijk <d.sluijk@onestein.nl>
 
 Do not contact contributors directly about support or help with technical issues.
 

web_timeline/__manifest__.py

@@ -4,10 +4,11 @@
 {
     'name': "Web timeline",
     'summary': "Interactive visualization chart to show events in time",
-    "version": "11.0.1.0.1",
+    "version": "11.0.1.1.1",
     'author': 'ACSONE SA/NV, '
               'Tecnativa, '
               'Monk Software, '
+              'Onestein, '
               'Odoo Community Association (OCA)',
     "category": "web",
     "license": "AGPL-3",

web_timeline/static/src/js/timeline_renderer.js

@@ -4,6 +4,9 @@ odoo.define('web_timeline.TimelineRenderer', function (require) {
 var AbstractRenderer = require('web.AbstractRenderer');
 var core = require('web.core');
 var time = require('web.time');
+var utils = require('web.utils');
+var session = require('web.session');
+var QWeb = require('web.QWeb');
 
 var _t = core._t;
 
@@ -151,6 +154,16 @@ var CalendarRenderer = AbstractRenderer.extend({
             onUpdate: self.on_update,
             onRemove: self.on_remove,
         });
+        if (this.arch.children.length) {
+            this.qweb = new QWeb(session.debug, {_s: session.origin}, false);
+            var tmpl = utils.json_node_to_xml(
+                _.filter(this.arch.children, function(item) {
+                    return item.tag === 'templates';
+                })[0]
+            );
+            this.qweb.add_template(tmpl);
+        }
+
         this.timeline = new vis.Timeline(self.$timeline.empty().get(0));
         this.timeline.setOptions(this.options);
         if (self.mode && self['on_scale_' + self.mode + '_clicked']) {
@@ -264,9 +277,21 @@ var CalendarRenderer = AbstractRenderer.extend({
                 self.color = color.color;
             }
         });
+
+        var content = evt.__name != undefined ? evt.__name : evt.display_name;
+        if (this.arch.children.length) {
+            if(this.qweb.has_template('timeline-item')) {
+                content = this.qweb.render('timeline-item', {
+                    'record': evt
+                });
+            } else {
+                console.error(_t('Template "timeline-item" not present in timeline view definition.'));
+            }
+        }
+
         var r = {
             'start': date_start,
-            'content': evt.__name != undefined ? evt.__name : evt.display_name,
+            'content': content,
             'id': evt.id,
             'group': group,
             'evt': evt,

web_timeline/static/src/js/timeline_view.js

@@ -68,6 +68,17 @@ odoo.define('web_timeline.TimelineView', function (require) {
                     fieldNames.push(fieldName);
                 }
             });
+
+            var archFieldNames = _.map(_.filter(this.arch.children, function(item) {
+                return item.tag === 'field';
+            }), function(item) {
+                return item.attrs.name;
+            });
+            fieldNames = _.union(
+                fieldNames,
+                archFieldNames
+            );
+
             this.parse_colors();
             for (var i=0; i<this.colors.length; i++) {
                 fieldNames.push(this.colors[i].field);