OCA
/
web
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[WIP] Lot of usability improvements....

pull/908/head
Laurent Mignon (ACSONE) 10 years ago
committed by Tom Blauwendraat
parent
ccde99a82f
commit
da3c425dec
6 changed files with 206 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.rst
  2. 4
      project_view.xml
  3. 21
      static/src/css/web_timeline.css
  4. 333
      static/src/js/web_timeline.js
  5. 4
      static/src/xml/web_timeline.xml
  6. 2
      views/web_timeline.xml

2
README.rst
View File

@ -4,4 +4,4 @@ Timeline Widget
!Prototype!
Define a new widget displaying events in an interactive visualization chart.
The widget is based on the external library
http://almende.github.io/chap-links-library/timeline.html
http://visjs.org/timeline_examples.html

4
project_view.xml
View File

@ -10,9 +10,9 @@
<field name="arch" type="xml">
<timeline date_start="date_start"
date_stop="date_end"
progress="progress"
date_delay='1'
string="Tasks"
default_group_by="user_id" event_open_popup="true" colors="#ec7063:kanban_state=='blocked';#2ecb71:kanban_state=='done';#95a5a5:kanban_state=='normal';">
default_group_by="user_id" event_open_popup="true" colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
</timeline>
</field>
</record>

21
static/src/css/web_timeline.css
View File

@ -15,3 +15,24 @@
.timeline-navigation-move-right .ui-icon{
background: none !important;
}
/*.vis.timeline .timeaxis .grid.odd {
background: #f5f5f5;
} */
/* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
background: gray;
}
/* .vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
color: white;
} */
.vis.timeline .item.range .content {
overflow: visible;
}
.oe_chatter_toggle {
padding: 15px;
}

333
static/src/js/web_timeline.js
View File

@ -25,10 +25,10 @@ openerp.web_timeline = function(instance) {
template: "TimelineView",
display_name: _lt('Timeline'),
quick_create_instance: 'instance.web_timeline.QuickCreate',
init: function (parent, dataset, view_id, options) {
this._super(parent);
this.ready = $.Deferred();
this.permissions = {};
this.set_default_options(options);
this.dataset = dataset;
this.model = dataset.model;
@ -39,7 +39,24 @@ openerp.web_timeline = function(instance) {
this.range_start = null;
this.range_stop = null;
this.selected_filters = [];
this.group_by_name = {};
this.current_window = null;
},
get_perm: function(name){
var self = this;
var promise = self.permissions[name];
if(!promise) {
var defer = $.Deferred();
new instance.web.Model(this.dataset.model)
.call("check_access_rights", [name, false])
.then(function (value) {
self.permissions[name] = value;
defer.resolve();
});
return defer;
} else {
return promise;
}
},
set_default_options: function(options) {
@ -66,7 +83,11 @@ openerp.web_timeline = function(instance) {
this.fields_view = fv;
this.parse_colors();
this.$timeline = this.$el.find(".oe_timeline_widget");
this.$el.find(".oe_timeline_button_today").click(self.on_today_clicked);
this.current_window = {
start: new Date(),
end : new Date().addHours(24),
}
this.info_fields = [];
if (!attrs.date_start) {
@ -117,116 +138,54 @@ openerp.web_timeline = function(instance) {
self.write_right = write_right;
});
var init = new instance.web.Model(this.dataset.model)
.call("check_access_rights", ["create", false])
.then(function (create_right) {
self.create_right = create_right;
var init = function () {
self.init_timeline().then(function() {
$(window).trigger('resize');
self.trigger('timeline_view_loaded', fv);
self.ready.resolve();
});
});
return $.when(fields_get.then(unlink_check).then(edit_check).then(init));
};
var test = $.when(self.fields_get, self.get_perm('unlink'), self.get_perm('write'), self.get_perm('create'));
return $.when(test).then(init);
},
init_timeline: function() {
var self = this;
var options = {
groupOrder: 'content',
groupOrder: self.group_order,
editable: {
add: self.write_right, // add new items by double tapping
updateTime: self.write_right, // drag items horizontally
updateGroup: self.write_right, // drag items from one group to another
remove: self.unlink_right, // delete an item by tapping the delete button top right
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
},
selectable: true,
showCurrentTime: true,
start: new Date(),
onAdd: function (item, callback) {
self.on_task_create(item);
},
onMove: function (item, callback) {
self.on_item_changed(item);
callback(item); // send back adjusted item
},
onUpdate: function (item, callback) {
self.on_item_changed(item);
callback(item); // send back adjusted item
},
onRemove: function (item, callback) {
self.remove_event(item, callback);
},
onAdd: self.on_add,
onMove: self.on_move,
onUpdate: self.on_update,
onRemove: self.on_remove,
};
self.timeline = new vis.Timeline(self.$timeline.get(0));
self.timeline.setOptions(options);
return $.when();
},
on_task_create: function(item) {
var self = this;
var pop = new instance.web.form.SelectCreatePopup(this);
pop.on("elements_selected", self, function() {
self.reload();
});
context = {};
context['default_'.concat(self.date_start)] = item.start;
context['default_'.concat(self.last_group_bys[0])] = item.group;
pop.select_element(
self.dataset.model,
{
title: _t("Create"),
initial_view: "form",
},
null,
context
);
},
register_events: function(){
var self = this;
var options = {
};
self.timeline.setOptions(options);
self.timeline.on('edit', function() {
var sel = self.timeline.getSelection();
if (sel.length) {
if (sel[0].row != undefined) {
var row = sel[0].row;
self.open_event(row);
}
}
});
self.timeline.on('delete', function() {
if(! self.unlink_right){
self.timeline.cancelDelete();
alert(_t("You are not allowed to delete this event ?"));
}
var sel = self.timeline.getSelection();
if (sel.length) {
if (sel[0].row != undefined) {
var row = sel[0].row;
self.remove_event(self.timeline.getItem(row), undefined);
}
}
});
self.timeline.on('changed', function() {
var sel = self.timeline.getSelection();
if (sel.length) {
if (sel[0].row != undefined) {
var row = sel[0].row;
self.on_item_changed(self.timeline.getItem(row));
group_order: function(grp1, grp2) {
// display non grouped elements first
if (grp1.id === -1){
return -1;
}
if (grp2.id === -1){
return +1;
}
});
},
return grp1.content - grp2.content;
},
/**
* Transform OpenERP event object to fulltimeline event object
* Transform OpenERP event object to timeline event object
*/
event_data_transform: function(evt) {
var self = this;
@ -258,6 +217,10 @@ openerp.web_timeline = function(instance) {
} else {
group = -1;
}
_.each(self.colors, function(color){
if(eval("'" + evt[color.field] + "' " + color.opt + " '" + color.value + "'"))
self.color = color.color;
});
var r = {
'start': date_start,
'end': date_stop,
@ -265,20 +228,10 @@ openerp.web_timeline = function(instance) {
'id': evt.id,
'group': group,
'evt': evt,
'style': 'background-color: ' + self.color + ';',
};
if (!self.useContacts || self.all_filters[evt[this.color_field]] !== undefined) {
if (this.color_field && evt[this.color_field]) {
var color_key = evt[this.color_field];
if (typeof color_key === "object") {
color_key = color_key[0];
}
r.className = 'cal_opacity timeline_color_'+ this.get_color(color_key);
}
}
else { // if form all, get color -1
r.className = 'cal_opacity timeline_color_'+ self.all_filters[-1].color;
}
self.color = undefined;
return r;
},
@ -323,8 +276,10 @@ openerp.web_timeline = function(instance) {
reload: function() {
var self = this;
if (this.last_domains !== undefined)
if (this.last_domains !== undefined){
self.current_window = self.timeline.getWindow();
return this.do_search(this.last_domains, this.last_contexts, this.last_group_bys);
}
},
on_data_loaded: function(tasks, group_bys) {
@ -342,8 +297,7 @@ openerp.web_timeline = function(instance) {
var self = this;
var data = [];
var groups = [];
groups.push({id:-1, content:'undefined'})
self.group_by_name = {};
groups.push({id:-1, content: _t('Undefined')})
_.each(tasks, function(event) {
data.push(self.event_data_transform(event));
});
@ -352,25 +306,68 @@ openerp.web_timeline = function(instance) {
});
this.timeline.setGroups(groups);
this.timeline.setItems(data);
this.timeline.moveTo(new Date(), true);
this.timeline.setWindow(this.current_window);
//this.timeline.moveTo(new Date(), true);
//this.timeline.zoom(0.5, new Date());
},
set_records: function(events){
do_show: function() {
this.do_push_state({});
return this._super();
},
is_action_enabled: function(action) {
if (action === 'create' && !this.options.creatable) {
return false;
}
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;
var data = [];
_.each(events, function(event) {
this.push(this.event_data_transform(event));
var pop = new instance.web.form.SelectCreatePopup(this);
pop.on("elements_selected", self, function(element_ids) {
self.reload().then(function() {
self.timeline.focus(element_ids);
});
this.timeline.draw(data);
});
context = {};
context['default_'.concat(self.date_start)] = item.start;
context['default_'.concat(self.last_group_bys[0])] = item.group;
context['default_'.concat(self.date_stop)] = item.start.clone().addHours(this.date_delay || 1);
pop.select_element(
self.dataset.model,
{
title: _t("Create"),
initial_view: "form",
},
null,
context
);
},
open_event: function(index) {
on_update: function(item, callback) {
var self = this;
var item = self.timeline.getItem(index);
var id = item.evt.id;
var title = item.evt.__name;
var index = index;
if (! this.open_popup_action) {
var index = this.dataset.get_id_index(id);
this.dataset.index = index;
@ -381,53 +378,58 @@ openerp.web_timeline = function(instance) {
}
}
else {
var pop = new instance.web.form.FormOpenPopup(this);
var id_cast = parseInt(id).toString() == id ? parseInt(id) : id;
pop.show_element(this.dataset.model, id_cast, this.dataset.get_context(), {
title: _.str.sprintf(_t("View: %s"),title),
view_id: +this.open_popup_action,
res_id: id_cast,
target: 'new',
readonly:true
});
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}
);
//pop.on('closed', self, self.reload);
var form_controller = pop.view_form;
form_controller.on("load_record", self, function(){
button_edit = _.str.sprintf("<button class='oe_button oe_bold editme oe_highlight'><span> %s </span></button>",_t("Edit Event"));
pop.$el.closest(".modal").find(".modal-footer").prepend(button_delete);
pop.$el.closest(".modal").find(".modal-footer").prepend(button_edit);
$('.editme').click(
function() {
$('.oe_form_button_cancel').trigger('click');
self.dataset.index = self.dataset.get_id_index(id);
self.do_switch_view('form', null, { mode: "edit" });
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("<span> or </span>");
button_edit = _.str.sprintf("<button class='oe_button oe_form_button_edit oe_bold oe_highlight'><span> %s </span></button>",_t("Edit"));
button_save = _.str.sprintf("<button class='oe_button oe_form_button_save oe_bold oe_highlight'><span> %s </span></button>",_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('<div class="oe_chatter_toggle fa fa-plus-circle"><span> %s </span><div class="oe_chatter_content"></div></div>', _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');
});
}
);
});
}
return false;
},
do_show: function() {
this.do_push_state({});
return this._super();
},
is_action_enabled: function(action) {
if (action === 'create' && !this.options.creatable) {
return false;
}
return this._super(action);
},
on_item_changed: function(item) {
on_move: function(item, callback) {
var self = this;
var start = item.start;
var end = item.end;
var group = false;
if (item.group) {
if (item.group != -1) {
group = item.group;
}
var data = {};
@ -437,29 +439,12 @@ openerp.web_timeline = function(instance) {
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;
var id = item.evt.id;
this.dataset.write(id, data);
},
/**
* 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);
this.dataset.write(id, data).then(function() {
self.reload();
});
},
remove_event: function(item, callback) {
on_remove: function(item, callback) {
var self = this;
function do_it() {
return $.when(self.dataset.unlink([item.evt.id])).then(function() {
@ -473,5 +458,17 @@ openerp.web_timeline = function(instance) {
} else
return do_it();
},
on_today_clicked: function(){
this.current_window = {
start: new Date(),
end : new Date().addHours(24),
}
if (this.timeline){
this.timeline.setWindow(this.current_window);
}
},
});
};

4
static/src/xml/web_timeline.xml
View File

@ -1,6 +1,10 @@
<template>
<t t-name="TimelineView">
<div class="oe_timeline_view">
<div class="oe_timeline_buttons btn-group btn-sm">
<button class="btn btn-default btn-sm oe_timeline_button_today">Today</button>
</div>
<div class="oe_timeline_widget" />
</div>
</t>

2
views/web_timeline.xml
View File

@ -5,8 +5,8 @@
<data>
<template id="assets_backend" name="web_calendar assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/web_timeline/static/src/css/web_timeline.css"/>
<link rel="stylesheet" href="/web_timeline/static/lib/vis/vis.css"/>
<link rel="stylesheet" href="/web_timeline/static/src/css/web_timeline.css"/>
<script type="text/javascript" src="/web_timeline/static/lib/vis/vis.js"></script>
<script type="text/javascript" src="/web_timeline/static/src/js/web_timeline.js"></script>

Write Preview
Loading…
Cancel
Save