Web timeline

Necesitas definir una vista con la etiqueta \ como elemento base. Estos son los posibles atributos para la etiqueta:

| Atributo | ¿Obligatorio? | Descripción | |----|----|----| | date_start | Sí | Define el nombre del campo de tipo date que contiene el inicio del evento. | | date_stop | No | Define el nombre del campo de tipo date que contiene el fin del evento. El date_stop puede ser igual al atributo date_start para mostrar eventos como 'punto' en la Timeline (evento instantáneo). | | date_delay | No | Define el nombre del campo de tipo float/integer que contiene la duración en horas del evento, por defecto = 1. | | default_group_by | Sí | Define el nombre del campo que se tomará como agrupación por defecto al acceder a la vista o cuando no se selecciona ninguna otra agrupación. | | zoomKey | No | Especifica si la Timeline solo se amplía cuando se pulsa una tecla adicional. Los valores disponibles son '' (no se aplica), 'altKey', 'ctrlKey' o 'metaKey'. Establece esta opción si quieres poder usar el desplazamiento para navegar verticalmente en vistas con muchos eventos. | | mode | No | Especifica la ventana visible inicial. Los valores disponibles son: 'day' para mostrar el día actual, 'week', 'month' y 'fit'. El valor por defecto es 'fit' para ajustar la ventana visible de modo que quepan todos los elementos. | | margin | No | Especifica los márgenes alrededor de los elementos. Debe respetar el formato JSON. Por ejemplo '{"item":{"horizontal":-10}}'. Los valores disponibles son: '{"axis":\}' (el margen mínimo en píxeles entre los elementos y el eje temporal) '{"item":\}' (el margen mínimo en píxeles entre los elementos tanto en dirección horizontal como vertical), '{"item":{"horizontal":\}}' (el margen horizontal mínimo en píxeles entre los elementos), '{"item":{"vertical":\}}' (el margen vertical mínimo en píxeles entre los elementos), '{"item":{"horizontal":\,"vertical":\}}' (combinación entre los márgenes horizontal y vertical en píxeles entre los elementos). | | event_open_popup | No | Cuando se establece en true, permite editar los eventos en una ventana emergente. Si no (valor por defecto), el registro se edita cambiando a la vista de formulario. | | stack | No | Cuando se establece en false, los elementos no se apilarán unos sobre otros de modo que se solapen. | | colors | No | Permite establecer ciertos colores específicos si se cumple la condición expresada (sintaxis JS). | | dependency_arrow | No | Establece este atributo en un campo x2many para dibujar flechas entre los registros referenciados en el campo x2many. |

Opcionalmente puedes declarar una plantilla personalizada, que se usará para renderizar los elementos de la timeline. Tienes que nombrar la plantilla 'timeline-item'. Estas son las variables disponibles en el renderizado de la plantilla:

• record: para acceder a los valores de los campos seleccionados en la definición de la timeline.
• formatters: se usa para formatear valores (ver funciones disponibles en @web/views/fields/formatters).
• parsers: se usa para parsear valores (ver funciones disponibles en @web/views/fields/parsers).

También necesitas declarar la vista en una acción de ventana del modelo implicado.

Ver web_timeline/demo/ir_cron_view.xml para un ejemplo muy básico de vista de timeline añadido a tareas cron.

Ejemplo más evolucionado, de project_timeline:

<?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_assign"
                      date_stop="date_end"
                      string="Tasks"
                      default_group_by="project_id"
                      event_open_popup="true"
                      colors="white: user_ids == []; #2ecb71: state == '1_done'; #ec7063: state == '1_canceled'"
                      dependency_arrow="depend_on_ids"
            >
                <field name="user_ids" />
                <field name="allocated_hours" />
                <templates>
                    <t t-name="timeline-item">
                        <div class="o_project_timeline_item">
                            <t t-foreach="record.user_ids" t-as="user" t-key="user.id">
                                <img
                                    t-if="record.user_ids"
                                    t-attf-src="/web/image/res.users/#{user}/image_128/16x16"
                                    t-att-title="record.user"
                                    width="16"
                                    height="16"
                                    class="mr8"
                                    alt="User"
                                />
                            </t>
                            <span name="display_name">
                                <t t-esc="record.display_name" />
                            </span>
                            <small
                                name="allocated_hours"
                                class="text-info ml4"
                                t-if="record.allocated_hours"
                            >
                                <t
                                    t-out="formatters.get('float_time')(record.allocated_hours)"
                                />
                            </small>
                        </div>
                    </t>
                </templates>
            </timeline>
        </field>
    </record>

    <record id="project.action_view_task" model="ir.actions.act_window">
        <field
            name="view_mode"
        >kanban,list,form,calendar,timeline,pivot,graph,activity</field>
    </record>
</odoo>

Para acceder a la vista de línea de tiempo, tienes que hacer clic en el botón con el icono del reloj en el conmutador de vistas. La primera vez que accedas a ella, la ventana de línea de tiempo se ajusta para mostrar todos los elementos actuales, igual que cuando realizas una operación de búsqueda, filtro o agrupación.

Puedes usar la rueda del ratón para acercar o alejar en la línea de tiempo, y hacer clic en cualquier área libre y arrastrar para desplazar la vista en esa dirección.

Los registros de tu modelo se mostrarán como rectángulos cuyas anchuras son la duración del evento según nuestra definición. Puedes seleccionarlos haciendo clic en este rectángulo. También puedes usar las teclas Ctrl o Shift para añadir selecciones discretas o de rango. Los registros seleccionados se resaltan con un color diferente (pero la diferencia será más notable dependiendo del color de fondo). Una vez seleccionados, puedes arrastrar y mover los registros seleccionados a lo largo de la línea de tiempo.

Cuando se selecciona un registro, aparece un botón de cruz roja en la esquina superior izquierda que permite eliminar ese registro. Esto no funciona para múltiples registros aunque estuvieran seleccionados.

Los registros se agrupan en diferentes bloques dependiendo del criterio de agrupación seleccionado (si no se especifica ninguno, entonces se aplica la agrupación predeterminada). Arrastrar un registro de un bloque a otro cambia el campo correspondiente al valor que representa el bloque. También puedes hacer clic en el nombre del grupo para editar el registro implicado directamente.

Haz doble clic en el registro para editarlo. Haz doble clic en un área abierta para crear un nuevo registro con el grupo y la fecha de inicio vinculados al área en la que hiciste clic. Manteniendo pulsada la tecla Ctrl y arrastrando de izquierda a derecha, puedes crear un nuevo registro con las fechas de inicio y fin arrastradas.