Merge pull request #912 from Maartincm/11.0-mig-web_timeline

11.0 mig web_timeline

web_timeline/README.rst

@@ -0,0 +1,154 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+=============
+Timeline view
+=============
+
+Define a new view displaying events in an interactive visualization chart.
+
+The widget is based on the external library 
+http://visjs.org/timeline_examples.html
+
+Configuration
+=============
+
+You need to define a view with the tag <timeline> as base element. These are
+the possible attributes for the tag:
+
+* date_start (required): it defines the name of the field of type date that
+  contains the start of the event.
+* date_end (optional): it defines the name of the field of type date that
+  contains the end of the event. The date_end can be equal to the attribute
+  date_start to display events has 'point' on the Timeline (instantaneous event)
+* date_delay (optional): it defines the name of the field of type float/integer
+  that contain the duration in hours of the event, default = 1
+* default_group_by (required): it defines the name of the field that will be
+  taken as default group by when accessing the view or when no other group by
+  is selected.
+* zoomKey (optional): Specifies whether the Timeline is only zoomed when an
+  additional key is down. Available values are '' (does not apply), 'altKey',
+  'ctrlKey', or 'metaKey'. Set this option if you want to be able to use the
+  scroll to navigate vertically on views with a lot of events.
+* mode (optional): Specifies the initial visible window. Available values are:
+  'day' to display the current day, 'week', 'month' and 'fit'.
+  Default value is 'fit' to adjust the visible window such that it fits all items
+* event_open_popup (optional): when set to true, it allows to edit the events
+  in a popup. If not (default value), the record is edited changing to form
+  view.
+* colors (optional): it allows to set certain specific colors if the expressed
+  condition (JS syntax) is met.
+
+You also need to declare the view in an action window of the involved model.
+
+Example:
+
+.. code-block:: xml
+
+    <?xml version="1.0" encoding="utf-8"?>
+    <odoo>
+        <record id="view_task_timeline" model="ir.ui.view">
+            <field name="model">project.task</field>
+            <field name="type">timeline</field>
+            <field name="arch" type="xml">
+                <timeline date_start="date_start"
+                          date_stop="date_end"
+                          string="Tasks"
+                          default_group_by="user_id"
+                          event_open_popup="true"
+                          zoomKey="ctrlKey"
+                          colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
+                </timeline>
+            </field>
+        </record>
+
+        <record id="project.action_view_task" model="ir.actions.act_window">
+            <field name="view_mode">kanban,tree,form,calendar,gantt,timeline,graph</field>
+        </record>
+    </odoo>
+
+Usage
+=====
+
+For accessing the timeline view, you have to click on the button with the clock
+icon in the view switcher. The first time you access to it, the timeline window
+is zoomed to fit all the current elements, the same as when you perform a
+search, filter or group by operation.
+
+You can use the mouse scroll to zoom in or out in the timeline, and click on
+any free area and drag for panning the view in that direction.
+
+The records of your model will be shown as rectangles whose widths are the
+duration of the event according our definition. You can select them clicking
+on this rectangle. You can also use Ctrl or Shift keys for adding discrete
+or range selections. Selected records are hightlighted with a different color
+(but the difference will be more noticeable depending on the background color).
+Once selected, you can drag and move the selected records across the timeline.
+
+When a record is selected, a red cross button appears on the upper left corner
+that allows to remove that record. This doesn't work for multiple records
+although they were selected.
+
+Records are grouped in different blocks depending on the group by criteria
+selected (if none is specified, then the default group by is applied).
+Dragging a record from one block to another change the corresponding field to
+the value that represents the block. You can also click on the group name to
+edit the involved record directly.
+
+Double-click on the record to edit it. Double-click in open area to create a
+new record with the group and start date linked to the area you clicked in.
+
+
+.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
+   :alt: Try me on Runbot
+   :target: https://runbot.odoo-community.org/runbot/162/11.0
+
+Known issues / Roadmap
+======================
+
+* Implement support for vis.js timeline range item addition (with Ctrl key
+  pressed).
+* Implement a more efficient way of refreshing timeline after a record update.
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+<https://github.com/OCA/web/issues>`_. 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.
+
+Credits
+=======
+
+Images
+------
+
+* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
+
+Contributors
+------------
+
+* Laurent Mignon <laurent.mignon@acsone.eu>
+* Adrien Peiffer <adrien.peiffer@acsone.eu>
+* Pedro M. Baeza <pedro.baeza@tecnativa.com>
+* Leonardo Donelli <donelli@webmonks.it>
+* Adrien Didenot <adrien.didenot@horanet.com>
+
+Do not contact contributors directly about support or help with technical issues.
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit https://odoo-community.org.

web_timeline/__init__.py

@@ -0,0 +1,4 @@
+# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from . import models

web_timeline/__manifest__.py

@@ -0,0 +1,26 @@
+# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+{
+    'name': "Web timeline",
+    'summary': "Interactive visualization chart to show events in time",
+    "version": "11.0.1.0.0",
+    'author': 'ACSONE SA/NV, '
+              'Tecnativa, '
+              'Monk Software, '
+              'Odoo Community Association (OCA)',
+    "category": "web",
+    "license": "AGPL-3",
+    "application": False,
+    "installable": True,
+    "website": "http://acsone.eu",
+    'depends': [
+        'web',
+    ],
+    'qweb': [
+        'static/src/xml/web_timeline.xml',
+    ],
+    'data': [
+        'views/web_timeline.xml',
+    ],
+}

web_timeline/i18n/es.po

@@ -0,0 +1,81 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_timeline
+# 
+# Translators:
+# Pedro M. Baeza <pedro.baeza@gmail.com>, 2017
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-01-03 03:50+0000\n"
+"PO-Revision-Date: 2018-01-03 03:50+0000\n"
+"Last-Translator: Pedro M. Baeza <pedro.baeza@gmail.com>, 2017\n"
+"Language-Team: Spanish (https://www.transifex.com/oca/teams/23907/es/)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Language: es\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:481
+#, python-format
+msgid "Are you sure you want to delete this record ?"
+msgstr "¿Está seguro que desea eliminar este registro?"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:8
+#, python-format
+msgid "Day"
+msgstr "Día"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:10
+#, python-format
+msgid "Month"
+msgstr "Mes"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:33
+#, python-format
+msgid "Timeline"
+msgstr "Línea de tiempo"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:99
+#, python-format
+msgid "Timeline view has not defined 'date_start' attribute."
+msgstr ""
+"La vista de línea de tiempo no tiene definido el atributo 'date_start'."
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:5
+#, python-format
+msgid "Today"
+msgstr "Hoy"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:9
+#, python-format
+msgid "Week"
+msgstr "Semana"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:11
+#, python-format
+msgid "Year"
+msgstr "Año"
+
+#. module: web_timeline
+#: model:ir.model,name:web_timeline.model_ir_ui_view
+msgid "ir.ui.view"
+msgstr "ir.ui.view"

web_timeline/i18n/fr.po

@@ -0,0 +1,81 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_timeline
+# 
+# Translators:
+# leemannd <denis.leemann@camptocamp.com>, 2017
+# OCA Transbot <transbot@odoo-community.org>, 2017
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-01-03 03:50+0000\n"
+"PO-Revision-Date: 2018-01-03 03:50+0000\n"
+"Last-Translator: OCA Transbot <transbot@odoo-community.org>, 2017\n"
+"Language-Team: French (https://www.transifex.com/oca/teams/23907/fr/)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Language: fr\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:481
+#, python-format
+msgid "Are you sure you want to delete this record ?"
+msgstr "Êtes vous sûr de vouloir supprimer cet enregistrement ?"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:8
+#, python-format
+msgid "Day"
+msgstr "Jour"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:10
+#, python-format
+msgid "Month"
+msgstr "Mois"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:33
+#, python-format
+msgid "Timeline"
+msgstr "Chronologie"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:99
+#, python-format
+msgid "Timeline view has not defined 'date_start' attribute."
+msgstr "La vue chronologique n'a pas défini l'attribut 'date_start'."
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:5
+#, python-format
+msgid "Today"
+msgstr "Aujourd'hui"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:9
+#, python-format
+msgid "Week"
+msgstr "Semaine"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:11
+#, python-format
+msgid "Year"
+msgstr "Année"
+
+#. module: web_timeline
+#: model:ir.model,name:web_timeline.model_ir_ui_view
+msgid "ir.ui.view"
+msgstr "ir.ui.view"

web_timeline/i18n/hr.po

@@ -0,0 +1,80 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_timeline
+# 
+# Translators:
+# Bole <bole@dajmi5.com>, 2017
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-01-03 03:50+0000\n"
+"PO-Revision-Date: 2018-01-03 03:50+0000\n"
+"Last-Translator: Bole <bole@dajmi5.com>, 2017\n"
+"Language-Team: Croatian (https://www.transifex.com/oca/teams/23907/hr/)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Language: hr\n"
+"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2;\n"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:481
+#, python-format
+msgid "Are you sure you want to delete this record ?"
+msgstr "Jeste li sigurni da želite brisati ovaj zapis?"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:8
+#, python-format
+msgid "Day"
+msgstr "Dan"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:10
+#, python-format
+msgid "Month"
+msgstr "Mjesec"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:33
+#, python-format
+msgid "Timeline"
+msgstr "Vremenska crta"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:99
+#, python-format
+msgid "Timeline view has not defined 'date_start' attribute."
+msgstr "Pogled vremenske crte nema definiran atribut 'date_start'."
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:5
+#, python-format
+msgid "Today"
+msgstr "Danas"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:9
+#, python-format
+msgid "Week"
+msgstr "Tjedan"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:11
+#, python-format
+msgid "Year"
+msgstr "Godina"
+
+#. module: web_timeline
+#: model:ir.model,name:web_timeline.model_ir_ui_view
+msgid "ir.ui.view"
+msgstr "ir.ui.view"

web_timeline/i18n/nl_NL.po

@@ -0,0 +1,80 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_timeline
+# 
+# Translators:
+# Peter Hageman <hageman.p@gmail.com>, 2017
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-01-03 03:50+0000\n"
+"PO-Revision-Date: 2018-01-03 03:50+0000\n"
+"Last-Translator: Peter Hageman <hageman.p@gmail.com>, 2017\n"
+"Language-Team: Dutch (Netherlands) (https://www.transifex.com/oca/teams/23907/nl_NL/)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Language: nl_NL\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:481
+#, python-format
+msgid "Are you sure you want to delete this record ?"
+msgstr "Weet je zeker dat je dit record wil verwijderen?"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:8
+#, python-format
+msgid "Day"
+msgstr "Dag"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:10
+#, python-format
+msgid "Month"
+msgstr "Maand"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:33
+#, python-format
+msgid "Timeline"
+msgstr "Tijdlijn"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:99
+#, python-format
+msgid "Timeline view has not defined 'date_start' attribute."
+msgstr "Tijdlijn heeft geen 'date_start' eigenschap."
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:5
+#, python-format
+msgid "Today"
+msgstr "Vandaag"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:9
+#, python-format
+msgid "Week"
+msgstr "Week"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:11
+#, python-format
+msgid "Year"
+msgstr "Jaar"
+
+#. module: web_timeline
+#: model:ir.model,name:web_timeline.model_ir_ui_view
+msgid "ir.ui.view"
+msgstr "ir.ui.view"

web_timeline/models/__init__.py

@@ -0,0 +1,4 @@
+# © 2016 ACSONE SA/NV (<http://acsone.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from . import ir_view

web_timeline/models/ir_view.py

@@ -0,0 +1,13 @@
+# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from openerp import fields, models
+
+
+TIMELINE_VIEW = ('timeline', 'Timeline')
+
+
+class IrUIView(models.Model):
+    _inherit = 'ir.ui.view'
+
+    type = fields.Selection(selection_add=[TIMELINE_VIEW])

web_timeline/static/src/css/web_timeline.css

@@ -0,0 +1,22 @@
+/* Button style */
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_timeline:after {
+    content: "N";
+}
+
+/* very light gray background in weekends */
+.vis-timeline .vis-grid.vis-saturday,
+.vis-timeline .vis-grid.vis-sunday {
+    background: #DCDCDC;
+}
+
+.vis-item .vis-item-overflow {
+    overflow: visible;
+}
+
+.oe_chatter_toggle {
+    padding: 15px;
+}
+
+.oe_timeline_view .vlabel .inner:hover{
+    cursor: pointer;
+}

web_timeline/static/src/js/timeline_controller.js

@@ -0,0 +1,240 @@
+odoo.define('web_timeline.TimelineController', function (require) {
+"use strict";
+
+var AbstractController = require('web.AbstractController');
+var dialogs = require('web.view_dialogs');
+var core = require('web.core');
+var time = require('web.time');
+
+var _t = core._t;
+
+var CalendarController = AbstractController.extend({
+    custom_events: _.extend({}, AbstractController.prototype.custom_events, {
+        onGroupClick: '_onGroupClick',
+        onUpdate: '_onUpdate',
+        onRemove: '_onRemove',
+        onMove: '_onMove',
+        onAdd: '_onAdd',
+    }),
+
+    init: function (parent, model, renderer, params) {
+        this._super.apply(this, arguments);
+        this.open_popup_action = params.open_popup_action;
+        this.date_start = params.date_start;
+        this.date_stop = params.date_stop;
+        this.date_delay = params.date_delay;
+        this.context = params.actionContext;
+    },
+
+    update: function(params, options) {
+        this._super.apply(this, arguments);
+        if (_.isEmpty(params)){
+            return;
+        }
+        var self = this;
+        var domains = params.domain;
+        var contexts = params.context;
+        var group_bys = params.groupBy;
+        this.last_domains = domains;
+        this.last_contexts = contexts;
+        // select the group by
+        var n_group_bys = [];
+        if (this.renderer.arch.attrs.default_group_by) {
+            n_group_bys = this.renderer.arch.attrs.default_group_by.split(',');
+        }
+        if (group_bys.length) {
+            n_group_bys = group_bys;
+        }
+        this.renderer.last_group_bys = n_group_bys;
+        this.renderer.last_domains = domains;
+
+        var fields = this.renderer.fieldNames;
+        fields = _.uniq(fields.concat(n_group_bys));
+        self._rpc({
+            model: self.model.modelName,
+            method: 'search_read',
+            kwargs: {
+                fields: fields,
+                domain: domains,
+            },
+            context: self.getSession().user_context,
+        }).then(function(data) {
+            return self.renderer.on_data_loaded(data, n_group_bys);
+        });
+    },
+
+    _onGroupClick: function (event) {
+        var groupField = this.renderer.last_group_bys[0];
+        return this.do_action({
+            type: 'ir.actions.act_window',
+            res_model: this.renderer.view.fields[groupField].relation,
+            res_id: event.data.item.group,
+            target: 'new',
+            views: [[false, 'form']]
+        });
+    },
+
+    _onUpdate: function(event) {
+        var self = this;
+        this.renderer = event.data.renderer;
+        var rights = event.data.rights;
+        var item = event.data.item;
+        var id = item.evt.id;
+        var title = item.evt.__name;
+        if (this.open_popup_action) {
+            var dialog = new dialogs.FormViewDialog(this, {
+                res_model: this.model.modelName,
+                res_id: parseInt(id).toString() == id ? parseInt(id) : id,
+                context: this.getSession().user_context,
+                title: title,
+                view_id: +this.open_popup_action,
+                on_saved: function (record) {
+                    self.write_completed();
+                },
+            }).open();
+        } else {
+            var mode = 'readonly';
+            if (rights.write) {
+                mode = 'edit';
+            }
+            this.trigger_up('switch_view', {
+                view_type: 'form',
+                res_id: parseInt(id).toString() == id ? parseInt(id) : id,
+                mode: mode,
+                model: this.model.modelName,
+            });
+        }
+    },
+
+    _onMove: function(event) {
+        var self = this;
+        var item = event.data.item;
+        var view = this.renderer.view;
+        var fields = view.fields;
+        var event_start = item.start;
+        var event_end = item.end;
+        var group = false;
+        if (item.group != -1) {
+            group = item.group;
+        }
+        var data = {};
+        // In case of a move event, the date_delay stay the same, only date_start and stop must be updated
+        data[this.date_start] = time.auto_date_to_str(event_start, fields[this.date_start].type);
+        if (this.date_stop) {
+            // In case of instantaneous event, item.end is not defined
+            if (event_end) {
+                data[this.date_stop] = time.auto_date_to_str(event_end, fields[this.date_stop].type);
+            } else {
+                data[this.date_stop] = data[this.date_start];
+            }
+        }
+        if (this.date_delay && event_end) {
+            var diff_seconds = Math.round((event_end.getTime() - event_start.getTime()) / 1000);
+            data[this.date_delay] = diff_seconds / 3600;
+        }
+        if (this.renderer.last_group_bys && this.renderer.last_group_bys instanceof Array) {
+            data[this.renderer.last_group_bys[0]] = group;
+        }
+        self._rpc({
+            model: self.model.modelName,
+            method: 'write',
+            args: [
+                [event.data.item.id],
+                data,
+            ],
+            context: self.getSession().user_context,
+        }).then(function() {
+            event.data.callback(event.data.item);
+        });
+    },
+
+    _onRemove: function(event) {
+        var self = this;
+
+        function do_it(event) {
+            return self._rpc({
+                model: self.model.modelName,
+                method: 'unlink',
+                args: [
+                    [event.data.item.id],
+                ],
+                context: self.getSession().user_context,
+            }).then(function() {
+                var unlink_index = false;
+                for (var i=0; i<self.model.data.data.length; i++) {
+                    if (self.model.data.data[i].id == event.data.item.id)
+                        unlink_index = i;
+                }
+                if (!isNaN(unlink_index)) {
+                    self.model.data.data.splice(unlink_index, 1);
+                }
+
+                event.data.callback(event.data.item);
+            });
+        }
+
+        if (confirm(_t("Are you sure you want to delete this record ?"))) {
+            return do_it(event);
+        }
+    },
+
+    _onAdd: function(event) {
+        var self = this;
+        var item = event.data.item;
+        // Initialize default values for creation
+        var default_context = {};
+        default_context['default_'.concat(this.date_start)] = item.start;
+        if (this.date_delay) {
+            default_context['default_'.concat(this.date_delay)] = 1;
+        }
+        if (this.date_stop) {
+            default_context['default_'.concat(this.date_stop)] = moment(item.start).add(1, 'hours').toDate();
+        }
+        if (item.group > 0) {
+            default_context['default_'.concat(this.renderer.last_group_bys[0])] = item.group;
+        }
+        // Show popup
+        var dialog = new dialogs.FormViewDialog(this, {
+            res_model: this.model.modelName,
+            res_id: null,
+            context: _.extend(default_context, this.context),
+            view_id: +this.open_popup_action,
+            on_saved: function (record) {
+                self.create_completed([record.res_id]);
+            },
+        }).open();
+        return false;
+    },
+
+    create_completed: function (id) {
+        var self = this;
+        return this._rpc({
+                model: this.model.modelName,
+                method: 'read',
+                args: [
+                    id,
+                    this.model.fieldNames,
+                ],
+                context: this.context,
+        })
+        .then(function (records) {
+            var new_event = self.renderer.event_data_transform(records[0]);
+            var items = self.renderer.timeline.itemsData;
+            items.add(new_event);
+            self.renderer.timeline.setItems(items);
+            self.reload();
+        });
+    },
+
+    write_completed: function () {
+        var params = {
+            domain: this.renderer.last_domains,
+            context: this.context,
+            groupBy: this.renderer.last_group_bys,
+        };
+        this.update(params, null);
+    },
+});
+
+return CalendarController;
+});

web_timeline/static/src/js/timeline_model.js

@@ -0,0 +1,58 @@
+odoo.define('web_timeline.TimelineModel', function (require) {
+"use strict";
+
+var AbstractModel = require('web.AbstractModel');
+
+var TimelineModel = AbstractModel.extend({
+    init: function () {
+        this._super.apply(this, arguments);
+    },
+
+    load: function (params) {
+        var self = this;
+        this.modelName = params.modelName;
+        this.fieldNames = params.fieldNames;
+        if (!this.preload_def) {
+            this.preload_def = $.Deferred();
+            $.when(
+                this._rpc({model: this.modelName, method: 'check_access_rights', args: ["write", false]}),
+                this._rpc({model: this.modelName, method: 'check_access_rights', args: ["unlink", false]}),
+                this._rpc({model: this.modelName, method: 'check_access_rights', args: ["create", false]}))
+            .then(function (write, unlink, create) {
+                self.write_right = write;
+                self.unlink_right = unlink;
+                self.create_right = create;
+                self.preload_def.resolve();
+            });
+        }
+
+        this.data = {
+            domain: params.domain,
+            context: params.context,
+        };
+
+        return this.preload_def.then(this._loadTimeline.bind(this));
+    },
+
+    _loadTimeline: function () {
+        var self = this;
+        return self._rpc({
+                model: self.modelName,
+                method: 'search_read',
+                context: self.data.context,
+                fields: self.fieldNames,
+                domain: self.data.domain,
+        })
+        .then(function (events) {
+            self.data.data = events;
+            self.data.rights = {
+                'unlink': self.unlink_right,
+                'create': self.create_right,
+                'write': self.write_right,
+            };
+        });
+    },
+});
+
+return TimelineModel;
+});

web_timeline/static/src/js/timeline_renderer.js

@@ -0,0 +1,318 @@
+odoo.define('web_timeline.TimelineRenderer', function (require) {
+"use strict";
+
+var AbstractRenderer = require('web.AbstractRenderer');
+var core = require('web.core');
+var time = require('web.time');
+
+var _t = core._t;
+
+var CalendarRenderer = AbstractRenderer.extend({
+    template: "TimelineView",
+    events: _.extend({}, AbstractRenderer.prototype.events, {
+    }),
+
+    init: function (parent, state, params) {
+        this._super.apply(this, arguments);
+        this.modelName = params.model;
+        this.mode = params.mode;
+        this.options = params.options;
+        this.permissions = params.permissions;
+        this.timeline = params.timeline;
+        this.date_start = params.date_start;
+        this.date_stop = params.date_stop;
+        this.date_delay = params.date_delay;
+        this.colors = params.colors;
+        this.fieldNames = params.fieldNames;
+        this.view = params.view;
+        this.modelClass = this.view.model;
+    },
+
+    start: function () {
+        var self = this;
+        var attrs = this.arch.attrs;
+        this.current_window = {
+            start: new moment(),
+            end: new moment().add(24, 'hours')
+        };
+
+        this.$el.addClass(attrs.class);
+        this.$timeline = this.$el.find(".oe_timeline_widget");
+
+        if (!this.date_start) {
+            throw new Error(_t("Timeline view has not defined 'date_start' attribute."));
+        }
+        this._super.apply(this, self);
+    },
+
+    _render: function () {
+        this.add_events();
+        var self = this;
+        return $.when().then(function () {
+            // Prevent Double Rendering on Updates
+            if (!self.timeline) {
+                self.init_timeline();
+                $(window).trigger('resize');
+            }
+        });
+    },
+
+    add_events: function() {
+        var self = this;
+        this.$(".oe_timeline_button_today").click(function(){
+            self._onTodayClicked();});
+        this.$(".oe_timeline_button_scale_day").click(function(){
+            self._onScaleDayClicked();});
+        this.$(".oe_timeline_button_scale_week").click(function(){
+            self._onScaleWeekClicked();});
+        this.$(".oe_timeline_button_scale_month").click(function(){
+            self._onScaleMonthClicked();});
+        this.$(".oe_timeline_button_scale_year").click(function(){
+            self._onScaleYearClicked();});
+    },
+
+    _onTodayClicked: function () {
+        this.current_window = {
+            start: new moment(),
+            end: new moment().add(24, 'hours')
+        };
+
+        if (this.timeline) {
+            this.timeline.setWindow(this.current_window);
+        }
+    },
+
+    _onScaleDayClicked: function () {
+        this._scaleCurrentWindow(24);
+    },
+
+    _onScaleWeekClicked: function () {
+        this._scaleCurrentWindow(24 * 7);
+    },
+
+    _onScaleMonthClicked: function () {
+        this._scaleCurrentWindow(24 * 30);
+    },
+
+    _onScaleYearClicked: function () {
+        this._scaleCurrentWindow(24 * 365);
+    },
+
+    _scaleCurrentWindow: function (factor) {
+        if (this.timeline) {
+            this.current_window = this.timeline.getWindow();
+            this.current_window.end = moment(this.current_window.start).add(factor, 'hours');
+            this.timeline.setWindow(this.current_window);
+        }
+    },
+
+    _computeMode: function() {
+        if (this.mode) {
+            var start = false, end = false;
+            switch (this.mode) {
+                case 'day':
+                    start = new moment().startOf('day');
+                    end = new moment().endOf('day');
+                    break;
+                case 'week':
+                    start = new moment().startOf('week');
+                    end = new moment().endOf('week');
+                    break;
+                case 'month':
+                    start = new moment().startOf('month');
+                    end = new moment().endOf('month');
+                    break;
+            }
+            if (end && start) {
+                this.options.start = start;
+                this.options.end = end;
+            } else {
+               this.mode = 'fit';
+            }
+        }
+    },
+
+    init_timeline: function () {
+        var self = this;
+        this._computeMode();
+        this.options.editable = {
+            // add new items by double tapping
+            add: this.modelClass.data.rights.create,
+            // drag items horizontally
+            updateTime: this.modelClass.data.rights.write,
+            // drag items from one group to another
+            updateGroup: this.modelClass.data.rights.write,
+            // delete an item by tapping the delete button top right
+            remove: this.modelClass.data.rights.unlink,
+        };
+        $.extend(this.options, {
+            onAdd: self.on_add,
+            onMove: self.on_move,
+            onUpdate: self.on_update,
+            onRemove: self.on_remove,
+        });
+        this.timeline = new vis.Timeline(self.$timeline.empty().get(0));
+        this.timeline.setOptions(this.options);
+        if (self.mode && self['on_scale_' + self.mode + '_clicked']) {
+            self['on_scale_' + self.mode + '_clicked']();
+        }
+        this.timeline.on('click', self.on_group_click);
+        var group_bys = this.arch.attrs.default_group_by.split(',');
+        this.last_group_bys = group_bys;
+        this.last_domains = this.modelClass.data.domain;
+        this.on_data_loaded(this.modelClass.data.data, group_bys);
+    },
+
+    on_data_loaded: function (events, group_bys) {
+        var self = this;
+        var ids = _.pluck(events, "id");
+        return this._rpc({
+            model: this.modelName,
+            method: 'name_get',
+            args: [
+                ids,
+            ],
+            context: this.getSession().user_context,
+        }).then(function(names) {
+            var nevents = _.map(events, function (event) {
+                return _.extend({
+                    __name: _.detect(names, function (name) {
+                        return name[0] === event.id;
+                    })[1]
+                }, event);
+            });
+            return self.on_data_loaded_2(nevents, group_bys);
+        });
+    },
+
+    on_data_loaded_2: function (events, group_bys) {
+        var self = this;
+        var data = [];
+        var groups = [];
+        this.grouped_by = group_bys;
+        _.each(events, function (event) {
+            if (event[self.date_start]) {
+                data.push(self.event_data_transform(event));
+            }
+        });
+        groups = this.split_groups(events, group_bys);
+        this.timeline.setGroups(groups);
+        this.timeline.setItems(data);
+        if (!this.mode || this.mode == 'fit'){
+            this.timeline.fit();
+        }
+    },
+
+    // get the groups
+    split_groups: function (events, group_bys) {
+        if (group_bys.length === 0) {
+            return events;
+        }
+        var groups = [];
+        groups.push({id: -1, content: _t('-')});
+        _.each(events, function (event) {
+            var group_name = event[_.first(group_bys)];
+            if (group_name) {
+                if (group_name instanceof Array) {
+                    var group = _.find(groups, function (group) {
+                        return _.isEqual(group.id, group_name[0]);
+                    });
+                    if (group == null) {
+                        group = {id: group_name[0], content: group_name[1]};
+                        groups.push(group);
+                    }
+                }
+            }
+        });
+        return groups;
+    },
+
+    /* Transform Odoo event object to timeline event object */
+    event_data_transform: function (evt) {
+        var self = this;
+        var date_start = new moment();
+        var date_stop = null;
+
+        var date_delay = evt[this.date_delay] || false,
+            all_day = this.all_day ? evt[this.all_day] : false;
+
+        if (all_day) {
+            date_start = time.auto_str_to_date(evt[this.date_start].split(' ')[0], 'start');
+            if (this.no_period) {
+                date_stop = date_start;
+            } else {
+                date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop].split(' ')[0], 'stop') : null;
+            }
+        } else {
+            date_start = time.auto_str_to_date(evt[this.date_start]);
+            date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop]) : null;
+        }
+        if (date_start) {
+        }
+        if (!date_stop && date_delay) {
+            date_stop = moment(date_start).add(date_delay, 'hours').toDate();
+        }
+
+        var group = evt[self.last_group_bys[0]];
+        if (group && group instanceof Array) {
+            group = _.first(group);
+        } else {
+            group = -1;
+        }
+        _.each(self.colors, function (color) {
+            if (eval("'" + evt[color.field] + "' " + color.opt + " '" + color.value + "'")) {
+                self.color = color.color;
+            }
+        });
+        var r = {
+            'start': date_start,
+            'content': evt.__name != undefined ? evt.__name : evt.display_name,
+            'id': evt.id,
+            'group': group,
+            'evt': evt,
+            'style': 'background-color: ' + self.color + ';'
+        };
+        // Check if the event is instantaneous, if so, display it with a point on the timeline (no 'end')
+        if (date_stop && !moment(date_start).isSame(date_stop)) {
+            r.end = date_stop;
+        }
+        self.color = null;
+        return r;
+    },
+
+    on_group_click: function (e) {
+        // handle a click on a group header
+        if (e.what === 'group-label' && e.group != -1) {
+            this._trigger(e, function(){}, 'onGroupClick');
+        }
+    },
+
+    on_update: function (item, callback) {
+        this._trigger(item, callback, 'onUpdate');
+    },
+
+    on_move: function (item, callback) {
+        this._trigger(item, callback, 'onMove');
+    },
+
+    on_remove: function (item, callback) {
+        this._trigger(item, callback, 'onRemove');
+    },
+
+    on_add: function (item, callback) {
+        this._trigger(item, callback, 'onAdd');
+    },
+
+    _trigger: function (item, callback, trigger) {
+        this.trigger_up(trigger, {
+            'item': item,
+            'callback': callback,
+            'rights': this.modelClass.data.rights,
+            'renderer': this,
+        });
+    },
+
+});
+
+return CalendarRenderer;
+});

web_timeline/static/src/js/timeline_view.js

@@ -0,0 +1,158 @@
+/* Odoo web_timeline
+ * Copyright 2015 ACSONE SA/NV
+ * Copyright 2016 Pedro M. Baeza <pedro.baeza@tecnativa.com>
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
+
+_.str.toBoolElse = function (str, elseValues, trueValues, falseValues) {
+    var ret = _.str.toBool(str, trueValues, falseValues);
+    if (_.isUndefined(ret)) {
+        return elseValues;
+    }
+    return ret;
+};
+
+
+odoo.define('web_timeline.TimelineView', function (require) {
+    "use strict";
+
+    var core = require('web.core');
+    var view_registry = require('web.view_registry');
+    var AbstractView = require('web.AbstractView');
+    var TimelineRenderer = require('web_timeline.TimelineRenderer');
+    var TimelineController = require('web_timeline.TimelineController');
+    var TimelineModel = require('web_timeline.TimelineModel');
+
+    var _lt = core._lt;
+
+    function isNullOrUndef(value) {
+        return _.isUndefined(value) || _.isNull(value);
+    }
+
+    var TimelineView = AbstractView.extend({
+        display_name: _lt('Timeline'),
+        icon: 'fa-clock-o',
+        jsLibs: ['/web_timeline/static/lib/vis/vis-timeline-graph2d.min.js'],
+        cssLibs: ['/web_timeline/static/lib/vis/vis-timeline-graph2d.min.css'],
+        config: {
+            Model: TimelineModel,
+            Controller: TimelineController,
+            Renderer: TimelineRenderer,
+        },
+
+        init: function (viewInfo, params) {
+            this._super.apply(this, arguments);
+            var self = this;
+            this.timeline = false;
+            this.arch = viewInfo.arch;
+            var attrs = this.arch.attrs;
+            this.fields = viewInfo.fields;
+            this.modelName = this.controllerParams.modelName;
+            this.action = params.action;
+
+            var fieldNames = this.fields.display_name ? ['display_name'] : [];
+            var mapping = {};
+            var fieldsToGather = [
+                "date_start",
+                "date_stop",
+                "default_group_by",
+                "progress",
+                "date_delay",
+            ];
+
+            fieldsToGather.push(attrs.default_group_by);
+
+            _.each(fieldsToGather, function (field) {
+                if (attrs[field]) {
+                    var fieldName = attrs[field];
+                    mapping[field] = fieldName;
+                    fieldNames.push(fieldName);
+                }
+            });
+            this.parse_colors();
+            for (var i=0; i<this.colors.length; i++) {
+                fieldNames.push(this.colors[i].field);
+            }
+
+            this.permissions = {};
+            this.grouped_by = false;
+            this.date_start = attrs.date_start;
+            this.date_stop = attrs.date_stop;
+            this.date_delay = attrs.date_delay;
+
+            this.no_period = this.date_start === this.date_stop;
+            this.zoomKey = attrs.zoomKey || '';
+            this.mode = attrs.mode || attrs.default_window || 'fit';
+
+            this.current_window = {
+                start: new moment(),
+                end: new moment().add(24, 'hours')
+            };
+            if (!isNullOrUndef(attrs.quick_create_instance)) {
+                self.quick_create_instance = 'instance.' + attrs.quick_create_instance;
+            }
+            this.options = {
+                groupOrder: this.group_order,
+                orientation: 'both',
+                selectable: true,
+                showCurrentTime: true,
+                zoomKey: this.zoomKey
+            };
+            if (isNullOrUndef(attrs.event_open_popup) || !_.str.toBoolElse(attrs.event_open_popup, true)) {
+                this.open_popup_action = false;
+            } else {
+                this.open_popup_action = attrs.event_open_popup;
+            }
+            this.rendererParams.mode = this.mode;
+            this.rendererParams.model = this.modelName;
+            this.rendererParams.options = this.options;
+            this.rendererParams.permissions = this.permissions;
+            this.rendererParams.current_window = this.current_window;
+            this.rendererParams.timeline = this.timeline;
+            this.rendererParams.date_start = this.date_start;
+            this.rendererParams.date_stop = this.date_stop;
+            this.rendererParams.date_delay = this.date_delay;
+            this.rendererParams.colors = this.colors;
+            this.rendererParams.fieldNames = fieldNames;
+            this.rendererParams.view = this;
+            this.loadParams.modelName = this.modelName;
+            this.loadParams.fieldNames = fieldNames;
+            this.controllerParams.open_popup_action = this.open_popup_action;
+            this.controllerParams.date_start = this.date_start;
+            this.controllerParams.date_stop = this.date_stop;
+            this.controllerParams.date_delay = this.date_delay;
+            this.controllerParams.actionContext = this.action.context;
+            return this;
+        },
+
+        group_order: function (grp1, grp2) {
+            // display non grouped elements first
+            if (grp1.id === -1) {
+                return -1;
+            }
+            if (grp2.id === -1) {
+                return +1;
+            }
+            return grp1.content - grp2.content;
+
+        },
+
+        parse_colors: function () {
+            if (this.arch.attrs.colors) {
+                this.colors = _(this.arch.attrs.colors.split(';')).chain().compact().map(function (color_pair) {
+                    var pair = color_pair.split(':'), color = pair[0], expr = pair[1];
+                    var temp = py.parse(py.tokenize(expr));
+                    return {
+                        'color': color,
+                        'field': temp.expressions[0].value,
+                        'opt': temp.operators[0],
+                        'value': temp.expressions[1].value
+                    };
+                }).value();
+            }
+        },
+
+    });
+
+    view_registry.add('timeline', TimelineView);
+    return TimelineView;
+});

web_timeline/static/src/xml/web_timeline.xml

@@ -0,0 +1,17 @@
+<template>
+  <t t-name="TimelineView">
+    <div class="oe_timeline_view">
+        <div class="oe_timeline_buttons">
+          <button class="btn btn-default btn-sm oe_timeline_button_today">Today</button>
+          
+          <div class="btn-group btn-sm">
+                <button class="btn btn-default oe_timeline_button_scale_day">Day</button>
+                <button class="btn btn-default oe_timeline_button_scale_week">Week</button>
+                <button class="btn btn-default oe_timeline_button_scale_month">Month</button>
+                <button class="btn btn-default oe_timeline_button_scale_year">Year</button>
+            </div>
+      </div>
+      <div class="oe_timeline_widget" />
+    </div>
+  </t>
+</template>

web_timeline/views/web_timeline.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <template id="assets_backend" name="web_timeline assets" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" href="/web_timeline/static/lib/vis/vis-timeline-graph2d.min.css"/>
+            <link rel="stylesheet" href="/web_timeline/static/src/css/web_timeline.css"/>
+
+            <script type="text/javascript" src="/web_timeline/static/lib/vis/vis-timeline-graph2d.min.js"/>
+            <script type="text/javascript" src="/web_timeline/static/src/js/timeline_view.js"/>
+            <script type="text/javascript" src="/web_timeline/static/src/js/timeline_renderer.js"/>
+            <script type="text/javascript" src="/web_timeline/static/src/js/timeline_controller.js"/>
+            <script type="text/javascript" src="/web_timeline/static/src/js/timeline_model.js"/>
+        </xpath>
+    </template>
+
+</odoo>