tarteo
6 years ago
13 changed files with 1129 additions and 734 deletions
-
90web_timeline/README.rst
-
6web_timeline/__manifest__.py
-
71web_timeline/readme/CONFIGURE.rst
-
6web_timeline/readme/CONTRIBUTORS.rst
-
4web_timeline/readme/CREDITS.rst
-
4web_timeline/readme/DESCRIPTION.rst
-
1web_timeline/readme/ROADMAP.rst
-
29web_timeline/readme/USAGE.rst
-
63web_timeline/static/src/js/timeline_canvas.js
-
550web_timeline/static/src/js/timeline_controller.js
-
107web_timeline/static/src/js/timeline_model.js
-
918web_timeline/static/src/js/timeline_renderer.js
-
14web_timeline/static/src/js/timeline_view.js
@ -0,0 +1,71 @@ |
|||||
|
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_stop (optional): it defines the name of the field of type date that |
||||
|
contains the end of the event. The date_stop 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. |
||||
|
* dependency_arrow (optional): set this attribute to a x2many field to draw |
||||
|
arrows between the records referenced in the x2many field. |
||||
|
|
||||
|
Optionally you can declare a custom template, which will be used to render the |
||||
|
timeline items. You have to name the template 'timeline-item'. |
||||
|
These are the variables available in template rendering: |
||||
|
|
||||
|
* ``record``: to access the fields values selected in the timeline definition. |
||||
|
* ``field_utils``: used to format and parse values (see available functions in ``web.field_utils``). |
||||
|
|
||||
|
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';" |
||||
|
dependency_arrow="task_dependency_ids"> |
||||
|
<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> |
||||
|
|
||||
|
<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> |
||||
@ -0,0 +1,6 @@ |
|||||
|
* 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> |
||||
|
* Dennis Sluijk <d.sluijk@onestein.nl> |
||||
@ -0,0 +1,4 @@ |
|||||
|
Images |
||||
|
------ |
||||
|
|
||||
|
* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_. |
||||
@ -0,0 +1,4 @@ |
|||||
|
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 |
||||
@ -0,0 +1 @@ |
|||||
|
* Implement a more efficient way of refreshing timeline after a record update. |
||||
@ -0,0 +1,29 @@ |
|||||
|
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. |
||||
|
By holding the Ctrl key and dragging left to right, you can create a new record |
||||
|
with the dragged start and end date. |
||||
@ -1,58 +1,71 @@ |
|||||
odoo.define('web_timeline.TimelineModel', function (require) { |
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(); |
|
||||
}); |
|
||||
} |
|
||||
|
"use strict"; |
||||
|
|
||||
|
var AbstractModel = require('web.AbstractModel'); |
||||
|
|
||||
|
var TimelineModel = AbstractModel.extend({ |
||||
|
|
||||
this.data = { |
|
||||
domain: params.domain, |
|
||||
context: params.context, |
|
||||
}; |
|
||||
|
/** |
||||
|
* @constructor |
||||
|
*/ |
||||
|
init: function () { |
||||
|
this._super.apply(this, arguments); |
||||
|
}, |
||||
|
|
||||
return this.preload_def.then(this._loadTimeline.bind(this)); |
|
||||
}, |
|
||||
|
/** |
||||
|
* @override |
||||
|
*/ |
||||
|
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, |
||||
|
}; |
||||
|
|
||||
_loadTimeline: function () { |
|
||||
var self = this; |
|
||||
return self._rpc({ |
|
||||
|
return this.preload_def.then(this._loadTimeline.bind(this)); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Read the records for the timeline. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {jQuery.Deferred} |
||||
|
*/ |
||||
|
_loadTimeline: function () { |
||||
|
var self = this; |
||||
|
return self._rpc({ |
||||
model: self.modelName, |
model: self.modelName, |
||||
method: 'search_read', |
method: 'search_read', |
||||
context: self.data.context, |
context: self.data.context, |
||||
fields: self.fieldNames, |
fields: self.fieldNames, |
||||
domain: self.data.domain, |
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, |
|
||||
}; |
|
||||
}); |
|
||||
}, |
|
||||
}); |
|
||||
|
}) |
||||
|
.then(function (events) { |
||||
|
self.data.data = events; |
||||
|
self.data.rights = { |
||||
|
'unlink': self.unlink_right, |
||||
|
'create': self.create_right, |
||||
|
'write': self.write_right, |
||||
|
}; |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
return TimelineModel; |
|
||||
|
return TimelineModel; |
||||
}); |
}); |
||||
@ -1,421 +1,537 @@ |
|||||
odoo.define('web_timeline.TimelineRenderer', function (require) { |
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 utils = require('web.utils'); |
|
||||
var session = require('web.session'); |
|
||||
var QWeb = require('web.QWeb'); |
|
||||
var field_utils = require('web.field_utils'); |
|
||||
var TimelineCanvas = require('web_timeline.TimelineCanvas'); |
|
||||
|
|
||||
|
|
||||
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.min_height = params.min_height; |
|
||||
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.dependency_arrow = params.dependency_arrow; |
|
||||
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); |
|
||||
}, |
|
||||
|
|
||||
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 |
|
||||
|
"use strict"; |
||||
|
|
||||
|
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 field_utils = require('web.field_utils'); |
||||
|
var TimelineCanvas = require('web_timeline.TimelineCanvas'); |
||||
|
|
||||
|
|
||||
|
var _t = core._t; |
||||
|
|
||||
|
var TimelineRenderer = AbstractRenderer.extend({ |
||||
|
template: "TimelineView", |
||||
|
|
||||
|
events: _.extend({}, AbstractRenderer.prototype.events, { |
||||
|
'click .oe_timeline_button_today': '_onTodayClicked', |
||||
|
'click .oe_timeline_button_scale_day': '_onScaleDayClicked', |
||||
|
'click .oe_timeline_button_scale_week': '_onScaleWeekClicked', |
||||
|
'click .oe_timeline_button_scale_month': '_onScaleMonthClicked', |
||||
|
'click .oe_timeline_button_scale_year': '_onScaleYearClicked', |
||||
|
}), |
||||
|
|
||||
|
/** |
||||
|
* @constructor |
||||
|
*/ |
||||
|
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.min_height = params.min_height; |
||||
|
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.dependency_arrow = params.dependency_arrow; |
||||
|
this.view = params.view; |
||||
|
this.modelClass = this.view.model; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
*/ |
||||
|
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); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Triggered when the timeline is attached to the DOM. |
||||
|
*/ |
||||
|
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 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
*/ |
||||
|
_render: function () { |
||||
|
var self = this; |
||||
|
return $.when().then(function () { |
||||
|
// Prevent Double Rendering on Updates
|
||||
|
if (!self.timeline) { |
||||
|
self.init_timeline(); |
||||
|
$(window).trigger('resize'); |
||||
|
} |
||||
}); |
}); |
||||
} |
|
||||
}, |
|
||||
|
|
||||
_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'); |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Set the timeline window to today (day). |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_onTodayClicked: function () { |
||||
|
this.current_window = { |
||||
|
start: new moment(), |
||||
|
end: new moment().add(24, 'hours') |
||||
|
}; |
||||
|
|
||||
|
if (this.timeline) { |
||||
|
this.timeline.setWindow(this.current_window); |
||||
} |
} |
||||
}); |
|
||||
}, |
|
||||
|
|
||||
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; |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scale the timeline window to a day. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_onScaleDayClicked: function () { |
||||
|
this._scaleCurrentWindow(24); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scale the timeline window to a week. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_onScaleWeekClicked: function () { |
||||
|
this._scaleCurrentWindow(24 * 7); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scale the timeline window to a month. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_onScaleMonthClicked: function () { |
||||
|
this._scaleCurrentWindow(24 * 30); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scale the timeline window to a year. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_onScaleYearClicked: function () { |
||||
|
this._scaleCurrentWindow(24 * 365); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scales the timeline window based on the current window. |
||||
|
* |
||||
|
* @param {Integer} factor The timespan (in hours) the window must be scaled to. |
||||
|
* @private |
||||
|
*/ |
||||
|
_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); |
||||
} |
} |
||||
if (end && start) { |
|
||||
this.options.start = start; |
|
||||
this.options.end = end; |
|
||||
} else { |
|
||||
this.mode = 'fit'; |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Computes the initial visible window. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_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.qweb = new QWeb(session.debug, {_s: session.origin}, false); |
|
||||
if (this.arch.children.length) { |
|
||||
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']) { |
|
||||
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); |
|
||||
this.$centerContainer = $(this.timeline.dom.centerContainer); |
|
||||
this.canvas = new TimelineCanvas(this); |
|
||||
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') |
|
||||
); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
draw_canvas: function() { |
|
||||
this.canvas.clear(); |
|
||||
if (this.dependency_arrow) { |
|
||||
this.draw_dependencies(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
draw_dependencies: function() { |
|
||||
var self = this; |
|
||||
var items = this.timeline.itemSet.items; |
|
||||
_.each(items, function(item) { |
|
||||
if (!item.data.evt) { |
|
||||
return; |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Initializes the timeline (http://visjs.org/docs/timeline/).
|
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
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.qweb = new QWeb(session.debug, {_s: session.origin}, false); |
||||
|
if (this.arch.children.length) { |
||||
|
var tmpl = utils.json_node_to_xml( |
||||
|
_.filter(this.arch.children, function(item) { |
||||
|
return item.tag === 'templates'; |
||||
|
})[0] |
||||
|
); |
||||
|
this.qweb.add_template(tmpl); |
||||
} |
} |
||||
_.each(item.data.evt[self.dependency_arrow], function(id) { |
|
||||
if (id in items) { |
|
||||
self.draw_dependency(item, items[id]); |
|
||||
|
|
||||
|
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); |
||||
|
this.$centerContainer = $(this.timeline.dom.centerContainer); |
||||
|
this.canvas = new TimelineCanvas(this); |
||||
|
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') |
||||
|
); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Clears and draws the canvas items. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
draw_canvas: function () { |
||||
|
this.canvas.clear(); |
||||
|
if (this.dependency_arrow) { |
||||
|
this.draw_dependencies(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Draw item dependencies on canvas. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
draw_dependencies: function () { |
||||
|
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]); |
||||
|
} |
||||
|
}); |
||||
}); |
}); |
||||
}); |
|
||||
}, |
|
||||
|
|
||||
draw_dependency: function(from, to, options) { |
|
||||
if (!from.displayed || !to.displayed) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
var defaults = _.defaults({}, options, { |
|
||||
line_color: 'black', |
|
||||
line_width: 1 |
|
||||
}); |
|
||||
|
|
||||
this.canvas.draw_arrow(from.dom.box, to.dom.box, defaults.line_color, defaults.line_width); |
|
||||
}, |
|
||||
|
|
||||
on_data_loaded: function (events, group_bys, adjust_window) { |
|
||||
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); |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Draws a dependency arrow between 2 timeline items. |
||||
|
* |
||||
|
* @param {Object} from Start timeline item |
||||
|
* @param {Object} to Destination timeline item |
||||
|
* @param {Object} options |
||||
|
* @param {Object} options.line_color Color of the line |
||||
|
* @param {Object} options.line_width The width of the line |
||||
|
* @private |
||||
|
*/ |
||||
|
draw_dependency: function (from, to, options) { |
||||
|
if (!from.displayed || !to.displayed) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
var defaults = _.defaults({}, options, { |
||||
|
line_color: 'black', |
||||
|
line_width: 1 |
||||
|
}); |
||||
|
|
||||
|
this.canvas.draw_arrow(from.dom.box, to.dom.box, defaults.line_color, defaults.line_width); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Load display_name of records. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {jQuery.Deferred} |
||||
|
*/ |
||||
|
on_data_loaded: function (events, group_bys, adjust_window) { |
||||
|
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, adjust_window); |
||||
}); |
}); |
||||
return self.on_data_loaded_2(nevents, group_bys, adjust_window); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
on_data_loaded_2: function (events, group_bys, adjust_window) { |
|
||||
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)); |
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Set groups and events. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_data_loaded_2: function (events, group_bys, adjust_window) { |
||||
|
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); |
||||
|
var mode = !this.mode || this.mode === 'fit'; |
||||
|
var adjust = _.isUndefined(adjust_window) || adjust_window; |
||||
|
if (mode && adjust) { |
||||
|
this.timeline.fit(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get the groups. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {Array} |
||||
|
*/ |
||||
|
split_groups: function (events, group_bys) { |
||||
|
if (group_bys.length === 0) { |
||||
|
return events; |
||||
} |
} |
||||
}); |
|
||||
groups = this.split_groups(events, group_bys); |
|
||||
this.timeline.setGroups(groups); |
|
||||
this.timeline.setItems(data); |
|
||||
var mode = !this.mode || this.mode === 'fit'; |
|
||||
var adjust = _.isUndefined(adjust_window) || adjust_window; |
|
||||
if (mode && adjust) { |
|
||||
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 (existing_group) { |
|
||||
return _.isEqual(existing_group.id, group_name[0]); |
|
||||
}); |
|
||||
|
|
||||
if (_.isUndefined(group)) { |
|
||||
group = { |
|
||||
id: group_name[0], |
|
||||
content: group_name[1] |
|
||||
}; |
|
||||
groups.push(group); |
|
||||
|
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 (existing_group) { |
||||
|
return _.isEqual(existing_group.id, group_name[0]); |
||||
|
}); |
||||
|
|
||||
|
if (_.isUndefined(group)) { |
||||
|
group = { |
||||
|
id: group_name[0], |
||||
|
content: group_name[1] |
||||
|
}; |
||||
|
groups.push(group); |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
|
}); |
||||
|
return groups; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Transform Odoo event object to timeline event object. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {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_stop && date_delay) { |
||||
|
date_stop = moment(date_start).add(date_delay, 'hours').toDate(); |
||||
} |
} |
||||
}); |
|
||||
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; |
|
||||
|
|
||||
|
var group = evt[self.last_group_bys[0]]; |
||||
|
if (group && group instanceof Array) { |
||||
|
group = _.first(group); |
||||
} else { |
} else { |
||||
date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop].split(' ')[0], 'stop') : null; |
|
||||
|
group = -1; |
||||
} |
} |
||||
} 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_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; |
|
||||
|
_.each(self.colors, function (color) { |
||||
|
if (eval("'" + evt[color.field] + "' " + color.opt + " '" + color.value + "'")) { |
||||
|
self.color = color.color; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
var content = _.isUndefined(evt.__name) ? evt.display_name : evt.__name; |
||||
|
if (this.arch.children.length) { |
||||
|
content = this.render_timeline_item(evt); |
||||
|
} |
||||
|
|
||||
|
var r = { |
||||
|
'start': date_start, |
||||
|
'content': content, |
||||
|
'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; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Render timeline item template. |
||||
|
* |
||||
|
* @param {Object} evt Record |
||||
|
* @private |
||||
|
* @returns {String} Rendered template |
||||
|
*/ |
||||
|
render_timeline_item: function (evt) { |
||||
|
if(this.qweb.has_template('timeline-item')) { |
||||
|
return this.qweb.render('timeline-item', { |
||||
|
'record': evt, |
||||
|
'field_utils': field_utils |
||||
|
}); |
||||
} |
} |
||||
}); |
|
||||
|
|
||||
var content = _.isUndefined(evt.__name) ? evt.display_name : evt.__name; |
|
||||
if (this.arch.children.length) { |
|
||||
content = this.render_timeline_item(evt); |
|
||||
} |
|
||||
|
|
||||
var r = { |
|
||||
'start': date_start, |
|
||||
'content': content, |
|
||||
'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; |
|
||||
}, |
|
||||
|
|
||||
render_timeline_item: function(evt) { |
|
||||
if(this.qweb.has_template('timeline-item')) { |
|
||||
return this.qweb.render('timeline-item', { |
|
||||
'record': evt, |
|
||||
'field_utils': field_utils |
|
||||
|
|
||||
|
console.error( |
||||
|
_t('Template "timeline-item" not present in timeline view definition.') |
||||
|
); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Handle a click on a group header. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_group_click: function (e) { |
||||
|
if (e.what === 'group-label' && e.group !== -1) { |
||||
|
this._trigger(e, function() { |
||||
|
// Do nothing
|
||||
|
}, 'onGroupClick'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Trigger onUpdate. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_update: function (item, callback) { |
||||
|
this._trigger(item, callback, 'onUpdate'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Trigger onMove. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_move: function (item, callback) { |
||||
|
this._trigger(item, callback, 'onMove'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Trigger onRemove. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_remove: function (item, callback) { |
||||
|
this._trigger(item, callback, 'onRemove'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Trigger onAdd. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
on_add: function (item, callback) { |
||||
|
this._trigger(item, callback, 'onAdd'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* trigger_up encapsulation adds by default the rights, and the renderer. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_trigger: function (item, callback, trigger) { |
||||
|
this.trigger_up(trigger, { |
||||
|
'item': item, |
||||
|
'callback': callback, |
||||
|
'rights': this.modelClass.data.rights, |
||||
|
'renderer': this, |
||||
}); |
}); |
||||
} |
|
||||
|
|
||||
console.error( |
|
||||
_t('Template "timeline-item" not present in timeline view definition.') |
|
||||
); |
|
||||
}, |
|
||||
|
|
||||
on_group_click: function (e) { |
|
||||
// handle a click on a group header
|
|
||||
if (e.what === 'group-label' && e.group !== -1) { |
|
||||
this._trigger(e, function() { |
|
||||
// Do nothing
|
|
||||
}, '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; |
|
||||
|
return TimelineRenderer; |
||||
}); |
}); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue