From 025fe7be6427197ff53ce021c84b86e0e38457b8 Mon Sep 17 00:00:00 2001 From: "Pedro M. Baeza" Date: Tue, 2 Aug 2016 00:59:05 +0200 Subject: [PATCH] [MIG] web_timeline: Migration to 9.0 --- web_timeline/README.rst | 117 +++++-- web_timeline/__openerp__.py | 11 +- web_timeline/static/src/js/web_timeline.js | 338 +++++++++------------ web_timeline/views/web_timeline.xml | 26 +- 4 files changed, 249 insertions(+), 243 deletions(-) diff --git a/web_timeline/README.rst b/web_timeline/README.rst index e634fd9c1bca..3abcd27b75d6 100755 --- a/web_timeline/README.rst +++ b/web_timeline/README.rst @@ -2,48 +2,107 @@ :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html :alt: License: AGPL-3 -=============== -Timeline Widget -=============== +============= +Timeline view +============= -Define a new widget displaying events in an interactive visualization chart. +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 -Usage -===== +Configuration +============= + +You need to define a view with the tag 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. +* date_delay (optional): it defines the name of the field of type date that + contains the end of the event. +* 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. +* 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 + - - - - - project.task.timeline - project.task - timeline - - - - - - - - - kanban,tree,form,calendar,gantt,timeline,graph - - - + + + project.task + timeline + + + + + + + + kanban,tree,form,calendar,gantt,timeline,graph + + + +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 it or out in the timeline, and make 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. + +Making double click on the selected record, you would be able to edit it. +Making double click on a free area, you will create a record taking the group +and the start date where you click as initial data. + .. 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/8.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 =========== diff --git a/web_timeline/__openerp__.py b/web_timeline/__openerp__.py index 57ee01b07a47..5ed4ad647c44 100644 --- a/web_timeline/__openerp__.py +++ b/web_timeline/__openerp__.py @@ -4,16 +4,15 @@ { 'name': "Web timeline", - 'summary': """ - Interactive visualization chart to visualize events in time - """, - "version": "8.0.1.0.0", + 'summary': "Interactive visualization chart to show events in time", + "version": "9.0.1.0.0", 'author': 'ACSONE SA/NV,' + 'Tecnativa,' 'Odoo Community Association (OCA)', - "category": "Tools", + "category": "web", "website": "http://acsone.eu", 'depends': [ - 'web' + 'web', ], 'qweb': [ 'static/src/xml/web_timeline.xml', diff --git a/web_timeline/static/src/js/web_timeline.js b/web_timeline/static/src/js/web_timeline.js index 6d63c6ea4aa9..456367dd5209 100644 --- a/web_timeline/static/src/js/web_timeline.js +++ b/web_timeline/static/src/js/web_timeline.js @@ -1,6 +1,7 @@ /*--------------------------------------------------------- * Odoo web_timeline * Copyright 2015 ACSONE SA/NV + * Copyright 2016 Pedro M. Baeza *---------------------------------------------------------*/ _.str.toBoolElse = function (str, elseValues, trueValues, falseValues) { @@ -11,21 +12,30 @@ _.str.toBoolElse = function (str, elseValues, trueValues, falseValues) { return ret; }; -openerp.web_timeline = function(instance) { - var _t = instance.web._t, - _lt = instance.web._lt, - QWeb = instance.web.qweb; +odoo.define('web_timeline.TimelineView', function (require) { + "use strict"; + + var core = require('web.core'); + var form_common = require('web.form_common'); + var Model = require('web.DataModel'); + var time = require('web.time'); + var View = require('web.View'); + var widgets = require('web_calendar.widgets'); + + var _t = core._t; + var _lt = core._lt; + var QWeb = core.qweb; function isNullOrUndef(value) { return _.isUndefined(value) || _.isNull(value); } - instance.web.views.add('timeline', 'instance.web_timeline.TimelineView'); - - instance.web_timeline.TimelineView = instance.web.View.extend({ + var TimelineView = View.extend({ template: "TimelineView", display_name: _lt('Timeline'), - quick_create_instance: 'instance.web_timeline.QuickCreate', + icon: 'fa-clock-o', + quick_create_instance: widgets.QuickCreate, + init: function (parent, dataset, view_id, options) { this._super(parent); this.ready = $.Deferred(); @@ -48,7 +58,7 @@ openerp.web_timeline = function(instance) { var promise = self.permissions[name]; if(!promise) { var defer = $.Deferred(); - new instance.web.Model(this.dataset.model) + new Model(this.dataset.model) .call("check_access_rights", [name, false]) .then(function (value) { self.permissions[name] = value; @@ -90,8 +100,8 @@ openerp.web_timeline = function(instance) { this.$el.find(".oe_timeline_button_scale_month").click(self.on_scale_month_clicked); this.$el.find(".oe_timeline_button_scale_year").click(self.on_scale_year_clicked); this.current_window = { - start: new Date(), - end : new Date().addHours(24), + start: new moment(), + end : new moment().add(24, 'hours'), } this.info_fields = []; @@ -104,45 +114,45 @@ openerp.web_timeline = function(instance) { this.name = fv.name || attrs.string; this.view_id = fv.view_id; - this.start = py.eval(attrs.start || 'None', instance.web.pyeval.context()); + //this.start = py.evaluate(attrs.start || 'None', {}); this.mode = attrs.mode; // one of month, week or day this.date_start = attrs.date_start; // Field name of starting // date field this.date_stop = attrs.date_stop; - + if (!isNullOrUndef(attrs.quick_create_instance)) { self.quick_create_instance = 'instance.' + attrs.quick_create_instance; } - // If this field is set ot true, we don't open the event in form + // If this field is set ot true, we don't open the event in form // view, but in a popup with the view_id passed by this parameter 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.fields = fv.fields; for (var fld = 0; fld < fv.arch.children.length; fld++) { this.info_fields.push(fv.arch.children[fld].attrs.name); } - var fields_get = new instance.web.Model(this.dataset.model) + var fields_get = new Model(this.dataset.model) .call('fields_get') .then(function (fields) { self.fields = fields; }); - var unlink_check = new instance.web.Model(this.dataset.model) + var unlink_check = new Model(this.dataset.model) .call("check_access_rights", ["unlink", false]) .then(function (unlink_right) { self.unlink_right = unlink_right; }); - var edit_check = new instance.web.Model(this.dataset.model) + var edit_check = new Model(this.dataset.model) .call("check_access_rights", ["write", false]) .then(function (write_right) { self.write_right = write_right; - + }); var init = function () { self.init_timeline().then(function() { @@ -151,7 +161,7 @@ openerp.web_timeline = function(instance) { self.ready.resolve(); }); }; - + var test = $.when(self.fields_get, self.get_perm('unlink'), self.get_perm('write'), self.get_perm('create')); return $.when(test).then(init); }, @@ -161,10 +171,14 @@ openerp.web_timeline = function(instance) { var options = { groupOrder: self.group_order, editable: { - add: self.permissions['create'], // add new items by double tapping - updateTime: self.permissions['write'], // drag items horizontally - updateGroup: self.permissions['write'], // drag items from one group to another - remove: self.permissions['unlink'], // delete an item by tapping the delete button top right + // add new items by double tapping + add: self.permissions['create'], + // drag items horizontally + updateTime: self.permissions['write'], + // drag items from one group to another + updateGroup: self.permissions['write'], + // delete an item by tapping the delete button top right + remove: self.permissions['unlink'], }, orientation: 'both', selectable: true, @@ -174,7 +188,7 @@ openerp.web_timeline = function(instance) { onUpdate: self.on_update, onRemove: self.on_remove, orientation: 'both', - start: self.start, + //start: self.start, }; self.timeline = new vis.Timeline(self.$timeline.empty().get(0)); self.timeline.setOptions(options); @@ -195,14 +209,14 @@ openerp.web_timeline = function(instance) { return +1; } return grp1.content - grp2.content; - + }, - /** - * Transform OpenERP event object to timeline event object - */ + /* Transform Odoo event object to timeline event object */ event_data_transform: function(evt) { var self = this; + var date_start = new moment(); + var date_stop = new moment(); var date_delay = evt[this.date_delay] || 1.0, all_day = this.all_day ? evt[this.all_day] : false, @@ -211,19 +225,19 @@ openerp.web_timeline = function(instance) { attendees = []; if (!all_day) { - date_start = instance.web.auto_str_to_date(evt[this.date_start]); - date_stop = this.date_stop ? instance.web.auto_str_to_date(evt[this.date_stop]) : null; + 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; } else { - date_start = instance.web.auto_str_to_date(evt[this.date_start].split(' ')[0],'start'); - date_stop = this.date_stop ? instance.web.auto_str_to_date(evt[this.date_stop].split(' ')[0],'stop') : null; + date_start = time.auto_str_to_date(evt[this.date_start].split(' ')[0],'start'); + date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop].split(' ')[0],'stop') : null; } - + if (!date_start){ - date_start = new Date(); + date_start = new moment(); } if(!date_stop) { - date_stop = date_start.clone().addHours(date_delay); + date_stop = moment(date_start).add(date_delay, 'hours').toDate(); } var group = evt[self.last_group_bys[0]]; if (group){ @@ -238,17 +252,16 @@ openerp.web_timeline = function(instance) { var r = { 'start': date_start, 'end': date_stop, - 'content': evt.__name, + 'content': evt.__name != undefined ? evt.__name : evt.display_name, 'id': evt.id, 'group': group, 'evt': evt, 'style': 'background-color: ' + self.color + ';', - + }; self.color = undefined; return r; }, - do_search: function (domains, contexts, group_bys) { var self = this; @@ -279,7 +292,6 @@ openerp.web_timeline = function(instance) { }); }, - reload: function() { var self = this; if (this.last_domains !== undefined){ @@ -288,34 +300,34 @@ openerp.web_timeline = function(instance) { } }, - on_data_loaded: function(tasks, group_bys) { + on_data_loaded: function(events, group_bys) { var self = this; - var ids = _.pluck(tasks, "id"); + var ids = _.pluck(events, "id"); return this.dataset.name_get(ids).then(function(names) { - var ntasks = _.map(tasks, function(task) { - return _.extend({__name: _.detect(names, function(name) { return name[0] == task.id; })[1]}, task); + 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(ntasks, group_bys); + return self.on_data_loaded_2(nevents, group_bys); }); }, - on_data_loaded_2: function(tasks, group_bys) { + on_data_loaded_2: function(events, group_bys) { var self = this; var data = []; var groups = []; - _.each(tasks, function(event) { + _.each(events, function(event) { if (event[self.date_start]){ data.push(self.event_data_transform(event)); } }); - // get the groups - var split_groups = function(tasks, group_bys) { + // get the groups + var split_groups = function(events, group_bys) { if (group_bys.length === 0) - return tasks; + return events; var groups = []; groups.push({id:-1, content: _t('-')}) - _.each(tasks, function(task) { - var group_name = task[_.first(group_bys)]; + _.each(events, function(event) { + var group_name = event[_.first(group_bys)]; if (group_name) { var group = _.find(groups, function(group) { return _.isEqual(group.id, group_name[0]); }); if (group === undefined) { @@ -326,10 +338,10 @@ openerp.web_timeline = function(instance) { }); return groups; } - var groups = split_groups(tasks, group_bys); + var groups = split_groups(events, group_bys); this.timeline.setGroups(groups); this.timeline.setItems(data); - this.timeline.setWindow(this.current_window); + this.timeline.fit(); }, do_show: function() { @@ -343,55 +355,36 @@ openerp.web_timeline = function(instance) { } return this._super(action); }, - /** - * Handles a newly created record - * - * @param {id} id of the newly created record - */ - quick_created: function (id) { - - /** - * Note: it's of the most utter importance NOT to use inplace - * modification on this.dataset.ids as reference to this data is - * spread out everywhere in the various widget. Some of these - * reference includes values that should trigger action upon - * modification. - */ - this.dataset.ids = this.dataset.ids.concat([id]); - this.dataset.trigger("dataset_changed", id); - this.refresh_event(id); - }, on_add: function(item, callback) { - var self = this, - pop = new instance.web.form.SelectCreatePopup(this), - context = this.get_popup_context(item); - pop.on("elements_selected", self, function(element_ids) { - self.reload().then(function() { - self.timeline.focus(element_ids); + var self = this; + var context = this.dataset.get_context(); + // Initialize default values for creation + var default_context = {} + default_context['default_'.concat(this.date_start)] = item.start; + default_context['default_'.concat(this.date_stop)] = moment(item.start).add(1, 'hours').toDate(); + if (item.group > 0) { + default_context['default_'.concat(this.last_group_bys[0])] = item.group; + } + context.add(default_context); + // Show popup + var dialog = new form_common.FormViewDialog(this, { + res_model: this.dataset.model, + res_id: null, + context: context, + view_id: +this.open_popup_action, + }).open(); + dialog.on('create_completed', self, function(id) { + self.dataset.ids = this.dataset.ids.concat([id]); + self.dataset.trigger("dataset_changed", id); + self.dataset.read_ids([id], self.fields).done(function(records) { + var new_event = self.event_data_transform(records[0]); + var items = self.timeline.itemsData; + items.add(new_event); + self.timeline.setItems(items); }); }); - pop.select_element( - self.dataset.model, - { - title: _t("Create"), - initial_view: "form", - }, - null, - context - ); - }, - - get_popup_context: function(item) { - var context = {}; - context['default_'.concat(this.date_start)] = item.start; - context['default_'.concat(this.date_stop)] = item.start.clone() - .addHours(this.date_delay || 1); - if(item.group != -1) - { - context['default_'.concat(this.last_group_bys[0])] = item.group; - } - return context; + return false; }, on_update: function(item, callback) { @@ -408,46 +401,18 @@ openerp.web_timeline = function(instance) { } } else { - var id_cast = parseInt(id).toString() == id ? parseInt(id) : id; - var pop = new instance.web.form.FormOpenPopup(self); - pop.on('write_completed', self, self.reload); - pop.show_element( - self.dataset.model, - id_cast, - null, - {readonly: true, title: title} - ); - var form_controller = pop.view_form; - form_controller.on("load_record", self, function() { - var footer = pop.$el.closest(".modal").find(".modal-footer"); - footer.find('.oe_form_button_edit,.oe_form_button_save').remove(); - footer.find(".oe_form_button_cancel").prev().remove(); - footer.find('.oe_form_button_cancel').before(" or "); - button_edit = _.str.sprintf("",_t("Edit")); - button_save = _.str.sprintf("",_t("Save")); - footer.prepend(button_edit + button_save); - footer.find('.oe_form_button_save').hide(); - footer.find('.oe_form_button_edit').on('click', function() { - form_controller.to_edit_mode(); - footer.find('.oe_form_button_edit,.oe_form_button_save').toggle(); - }); - footer.find('.oe_form_button_save').on('click', function() { - form_controller.save(); - form_controller.to_view_mode(); - footer.find('.oe_form_button_edit,.oe_form_button_save').toggle(); - }); - var chatter = pop.$el.closest(".modal").find(".oe_chatter"); - if(chatter.length){ - var chatter_toggler = $($.parseHTML(_.str.sprintf('
%s
', _t("Messages")))); - chatter.before(chatter_toggler) - var chatter_content = chatter_toggler.find(".oe_chatter_content"); - chatter_content.prepend(chatter); - chatter_content.toggle(); - chatter_toggler.click(function(){ - chatter_content.toggle(); - chatter_toggler.toggleClass('fa-plus-circle fa-minus-circle'); - }); - } + var dialog = new form_common.FormViewDialog(this, { + res_model: this.dataset.model, + res_id: parseInt(id).toString() == id ? parseInt(id) : id, + context: this.dataset.get_context(), + title: title, + view_id: +this.open_popup_action, + }).open(); + dialog.on('write_completed', self, function() { + self.dataset.trigger("dataset_changed", id); + self.current_window = self.timeline.getWindow(); + self.reload(); + self.timeline.setWindow(self.current_window); }); } return false; @@ -463,14 +428,12 @@ openerp.web_timeline = function(instance) { } var data = {}; data[self.fields_view.arch.attrs.date_start] = - instance.web.auto_date_to_str(start, self.fields[self.fields_view.arch.attrs.date_start].type); - data[self.fields_view.arch.attrs.date_stop] = - instance.web.auto_date_to_str(end, self.fields[self.fields_view.arch.attrs.date_stop].type); - data[self.fields_view.arch.attrs.default_group_by] = group; + time.auto_date_to_str(start, self.fields[self.fields_view.arch.attrs.date_start].type); + data[self.fields_view.arch.attrs.date_stop] = + time.auto_date_to_str(end, self.fields[self.fields_view.arch.attrs.date_stop].type); + data[self.fields_view.arch.attrs.default_group_by] = group; var id = item.evt.id; - this.dataset.write(id, data).then(function() { - self.reload(); - }); + this.dataset.write(id, data); }, on_remove: function(item, callback) { @@ -497,7 +460,7 @@ openerp.web_timeline = function(instance) { }, on_group_click: function(e) { - if(e.group == -1) + if (e.group == -1) { return; } @@ -510,55 +473,42 @@ openerp.web_timeline = function(instance) { }); }, + scale_current_window: 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); + } + }, + on_today_clicked: function(){ this.current_window = { - start: new Date(), - end : new Date().addHours(24), - } - - if (this.timeline){ - this.timeline.setWindow(this.current_window); - } + start: new moment(), + end : new moment().add(24, 'hours'), + } + + if (this.timeline) { + this.timeline.setWindow(this.current_window); + } }, - - get_middel_date: function(start, end){ - //Get 1 hour in milliseconds - var one_hour=1000*60*60; - - // Convert both dates to milliseconds - var date1_ms = start.getTime(); - var date2_ms = end.getTime(); - - // Calculate the difference in milliseconds - var difference_ms = date2_ms - date1_ms; - - // Convert back to days and return - nb_hours = Math.round(difference_ms/one_hour); - return start.clone().addHours(nb_hours/2) - }, - - scale_current_window: function(factor){ - if (this.timeline){ - this.current_window = this.timeline.getWindow(); - this.current_window.end = this.current_window.start.clone().addHours(factor); - this.timeline.setWindow(this.current_window); - } - }, - - on_scale_day_clicked: function(){ - this.scale_current_window(24); - }, - - on_scale_week_clicked: function(){ - this.scale_current_window(24 * 7); - }, - - on_scale_month_clicked: function(){ - this.scale_current_window(24 * 30); - }, - on_scale_year_clicked: function(){ - this.scale_current_window(24 * 365); - }, + on_scale_day_clicked: function(){ + this.scale_current_window(24); + }, + + on_scale_week_clicked: function(){ + this.scale_current_window(24 * 7); + }, + + on_scale_month_clicked: function(){ + this.scale_current_window(24 * 30); + }, + + on_scale_year_clicked: function(){ + this.scale_current_window(24 * 365); + }, }); -}; + + core.view_registry.add('timeline', TimelineView); + return TimelineView; +}); \ No newline at end of file diff --git a/web_timeline/views/web_timeline.xml b/web_timeline/views/web_timeline.xml index 4291e25a657d..95f6367aae44 100644 --- a/web_timeline/views/web_timeline.xml +++ b/web_timeline/views/web_timeline.xml @@ -1,16 +1,14 @@ - - - - - - +