mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[MIG] web_timeline: Migration to 9.0
This commit is contained in:
committed by
Martin Nicolas Cuesta
parent
a5028b630d
commit
28688d4135
@@ -2,48 +2,106 @@
|
||||
: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
|
||||
|
||||
Configuration
|
||||
=============
|
||||
|
||||
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_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
|
||||
|
||||
<?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"
|
||||
colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
|
||||
</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>
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
Example:
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<record id="view_task_timeline" model="ir.ui.view">
|
||||
<field name="name">project.task.timeline</field>
|
||||
<field name="model">project.task</field>
|
||||
<field name="type">timeline</field>
|
||||
<field eval="2" name="priority"/>
|
||||
<field name="arch" type="xml">
|
||||
<timeline date_start="date_start"
|
||||
date_stop="date_end"
|
||||
date_delay='1'
|
||||
string="Tasks"
|
||||
default_group_by="user_id" event_open_popup="true" colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
|
||||
</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>
|
||||
</data>
|
||||
</openerp>
|
||||
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.
|
||||
|
||||
|
||||
.. 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
|
||||
===========
|
||||
|
||||
@@ -65,6 +123,7 @@ Contributors
|
||||
|
||||
* Laurent Mignon <laurent.mignon@acsone.eu>
|
||||
* Adrien Peiffer <adrien.peiffer@acsone.eu>
|
||||
* Pedro M. Baeza <pedro.baeza@tecnativa.com>
|
||||
|
||||
Maintainer
|
||||
----------
|
||||
|
||||
Reference in New Issue
Block a user