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) { |
|||
"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, |
|||
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, |
|||
}; |
|||
}); |
|||
}, |
|||
}); |
|||
}) |
|||
.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) { |
|||
"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 { |
|||
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