[ADD] Enable multiselect

[IMP] Prevent flickering

[IMP] Fixed headers

[ADD] Create new record by date range selection

Remove roadmap item from readme

[FIX] minimal height

web_timeline/README.rst

@@ -116,6 +116,8 @@ 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.
+By holding the Ctrl key and dragging left to right, you can create a new record
+with the dragged start and end date.
 
 
 .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
@@ -125,8 +127,6 @@ new record with the group and start date linked to the area you clicked in.
 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

web_timeline/__manifest__.py

@@ -4,7 +4,7 @@
 {
     'name': "Web timeline",
     'summary': "Interactive visualization chart to show events in time",
-    "version": "11.0.1.3.0",
+    "version": "11.0.1.4.0",
     'author': 'ACSONE SA/NV, '
               'Tecnativa, '
               'Monk Software, '

web_timeline/static/src/js/timeline_controller.js

@@ -25,6 +25,8 @@ var CalendarController = AbstractController.extend({
         this.date_stop = params.date_stop;
         this.date_delay = params.date_delay;
         this.context = params.actionContext;
+        this.moveQueue = [];
+        this.debouncedInternalMove = _.debounce(this.internalMove, 0);
     },
 
     update: function(params, options) {
@@ -111,7 +113,6 @@ var CalendarController = AbstractController.extend({
     },
 
     _onMove: function(event) {
-        var self = this;
         var item = event.data.item;
         var view = this.renderer.view;
         var fields = view.fields;
@@ -139,16 +140,35 @@ var CalendarController = AbstractController.extend({
         if (this.renderer.last_group_bys && this.renderer.last_group_bys instanceof Array) {
             data[this.renderer.last_group_bys[0]] = group;
         }
-        self._rpc({
+
+        this.moveQueue.push({
+            id: event.data.item.id,
+            data: data,
+            event: event
+        });
+
+        this.debouncedInternalMove();
+    },
+
+    internalMove: function() {
+        var self = this;
+        var queue = this.moveQueue.slice();
+        this.moveQueue = [];
+        var defers = [];
+        _.each(queue, function(item) {
+            defers.push(self._rpc({
                 model: self.model.modelName,
                 method: 'write',
                 args: [
-                [event.data.item.id],
-                data,
+                    [item.event.data.item.id],
+                    item.data,
                 ],
                 context: self.getSession().user_context,
             }).then(function() {
-            event.data.callback(event.data.item);
+                item.event.data.callback(item.event.data.item);
+            }));
+        });
+        return $.when.apply($, defers).done(function() {
             self.write_completed({
                 adjust_window: false
             });
@@ -203,8 +223,11 @@ var CalendarController = AbstractController.extend({
         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 (this.date_start) {
+            default_context['default_'.concat(this.date_start)] = moment(item.start).add(1, 'hours').toDate();
+        }
+        if (this.date_stop && item.end) {
+            default_context['default_'.concat(this.date_stop)] = moment(item.end).add(1, 'hours').toDate();
         }
         if (item.group > 0) {
             default_context['default_'.concat(this.renderer.last_group_bys[0])] = item.group;
@@ -218,7 +241,10 @@ var CalendarController = AbstractController.extend({
             on_saved: function (record) {
                 self.create_completed([record.res_id]);
             },
-        }).open();
+        }).open().on('closed', this, function() {
+            event.data.callback();
+        });
+
         return false;
     },
 

web_timeline/static/src/js/timeline_renderer.js

@@ -25,6 +25,7 @@ var CalendarRenderer = AbstractRenderer.extend({
         this.options = params.options;
         this.permissions = params.permissions;
         this.timeline = params.timeline;
+        this.min_height = params.min_height;
         this.date_start = params.date_start;
         this.date_stop = params.date_stop;
         this.date_delay = params.date_delay;
@@ -52,6 +53,15 @@ var CalendarRenderer = AbstractRenderer.extend({
         this._super.apply(this, self);
     },
 
+    on_attach_callback: function() {
+        var height = this.$el.parent().height() - this.$el.find('.oe_timeline_buttons').height();
+        if (height > this.min_height) {
+            this.timeline.setOptions({
+                height: height
+            });
+        }
+    },
+
     _render: function () {
         this.add_events();
         var self = this;
@@ -161,7 +171,7 @@ var CalendarRenderer = AbstractRenderer.extend({
             onAdd: self.on_add,
             onMove: self.on_move,
             onUpdate: self.on_update,
-            onRemove: self.on_remove,
+            onRemove: self.on_remove
         });
         this.qweb = new QWeb(session.debug, {_s: session.origin}, false);
         if (this.arch.children.length) {
@@ -188,6 +198,10 @@ var CalendarRenderer = AbstractRenderer.extend({
         this.canvas.appendTo(this.$centerContainer);
         this.timeline.on('changed', function() {
             self.draw_canvas();
+            self.canvas.$el.attr(
+                'style',
+                self.$el.find('.vis-content').attr('style') + self.$el.find('.vis-itemset').attr('style')
+            );
         });
     },
 
@@ -202,6 +216,9 @@ var CalendarRenderer = AbstractRenderer.extend({
         var self = this;
         var items = this.timeline.itemSet.items;
         _.each(items, function(item) {
+            if (!item.data.evt) {
+                return;
+            }
             _.each(item.data.evt[self.dependency_arrow], function(id) {
                 if (id in items) {
                     self.draw_dependency(item, items[id]);

web_timeline/static/src/js/timeline_view.js

@@ -98,6 +98,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
             this.no_period = this.date_start === this.date_stop;
             this.zoomKey = attrs.zoomKey || '';
             this.mode = attrs.mode || attrs.default_window || 'fit';
+            this.min_height = attrs.min_height || 300;
 
             this.current_window = {
                 start: new moment(),
@@ -110,6 +111,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
                 groupOrder: this.group_order,
                 orientation: 'both',
                 selectable: true,
+                multiselect: true,
                 showCurrentTime: true,
                 zoomKey: this.zoomKey
             };
@@ -130,6 +132,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
             this.rendererParams.colors = this.colors;
             this.rendererParams.fieldNames = fieldNames;
             this.rendererParams.view = this;
+            this.rendererParams.min_height = this.min_height;
             this.rendererParams.dependency_arrow = this.dependency_arrow;
             this.loadParams.modelName = this.modelName;
             this.loadParams.fieldNames = fieldNames;