Techsystech
/
web_techsystech
forked from Techsystech/web
3
0
Fork 0
Code Pull Requests Activity

[MIG] web_timeline: Migration to 17.0 

- Convert Moment.js to Luxon.
- Replace Underscore.js with native JavaScript code.
- Migrate legacy views to the new system and add an architecture parser to separate logic.
- added basic test
17.0
Carlos Lopez 2024-10-06 11:10:16 -05:00
parent 459b5d2964
commit 43341291dd
23 changed files with 1652 additions and 1346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web_timeline/README.rst
View File

@ -135,8 +135,10 @@ 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``).
- ``formatters``: used to format values (see available functions in
``@web/views/fields/formatters``).
- ``parsers``: used to parse values (see available functions in
``@web/views/fields/parsers``).
You also need to declare the view in an action window of the involved
model.
@ -159,15 +161,15 @@ More evolved example, from ``project_timeline``:
string="Tasks"
default_group_by="project_id"
event_open_popup="true"
colors="white: user_ids == []; #2ecb71: kanban_state == 'done'; #ec7063: kanban_state == 'blocked'"
colors="white: user_ids == []; #2ecb71: state == '1_done'; #ec7063: state == '1_canceled'"
dependency_arrow="depend_on_ids"
>
<field name="user_ids" />
<field name="planned_hours" />
<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 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"
@ -182,12 +184,12 @@ More evolved example, from ``project_timeline``:
<t t-esc="record.display_name" />
</span>
<small
name="planned_hours"
name="allocated_hours"
class="text-info ml4"
t-if="record.planned_hours"
t-if="record.allocated_hours"
>
<t
t-esc="field_utils.format.float_time(record.planned_hours)"
t-out="formatters.get('float_time')(record.allocated_hours)"
/>
</small>
</div>
@ -293,6 +295,7 @@ Contributors
- Pedro M. Baeza
- Alexandre Díaz
- César A. Sánchez
- Carlos López
- `Onestein <https://www.onestein.nl>`__:

16
web_timeline/__manifest__.py
View File

@ -1,10 +1,11 @@
# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
# Copyright 2024 Tecnativa - Carlos Lopez
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
{
"name": "Web timeline",
"summary": "Interactive visualization chart to show events in time",
"version": "16.0.1.1.5",
"version": "17.0.1.0.0",
"development_status": "Production/Stable",
"author": "ACSONE SA/NV, "
"Tecnativa, "
@ -25,13 +26,24 @@
"web.assets_backend": [
"web_timeline/static/src/views/timeline/timeline_view.scss",
"web_timeline/static/src/views/timeline/timeline_canvas.scss",
"web_timeline/static/src/views/timeline/timeline_arch_parser.esm.js",
"web_timeline/static/src/views/timeline/timeline_view.esm.js",
"web_timeline/static/src/views/timeline/timeline_renderer.esm.js",
"web_timeline/static/src/views/timeline/timeline_renderer.xml",
"web_timeline/static/src/views/timeline/timeline_controller.esm.js",
"web_timeline/static/src/views/timeline/timeline_controller.xml",
"web_timeline/static/src/views/timeline/timeline_model.esm.js",
"web_timeline/static/src/views/timeline/timeline_canvas.esm.js",
"web_timeline/static/src/views/timeline/timeline_view.xml",
"web_timeline/static/src/views/timeline/timeline_canvas.xml",
],
"web_timeline.vis-timeline_lib": [
"/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.js",
"/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.css",
],
"web.qunit_suite_tests": [
"web_timeline/static/tests/helpers.esm.js",
"web_timeline/static/tests/web_timeline_arch_parser_tests.esm.js",
"web_timeline/static/tests/web_timeline_view_tests.esm.js",
],
},
}

1
web_timeline/models/__init__.py
View File

@ -2,3 +2,4 @@
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from . import ir_ui_view
from . import ir_action

13
web_timeline/models/ir_action.py 100644
View File

@ -0,0 +1,13 @@
# Copyright 2024 Tecnativa - Carlos Lopez
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from odoo import fields, models
from .ir_ui_view import TIMELINE_VIEW
class ActWindowView(models.Model):
_inherit = "ir.actions.act_window.view"
view_mode = fields.Selection(
selection_add=[TIMELINE_VIEW], ondelete={"timeline": "cascade"}
)

4
web_timeline/models/ir_ui_view.py
View File

@ -1,4 +1,5 @@
# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
# Copyright 2024 Tecnativa - Carlos Lopez
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from odoo import fields, models
@ -10,3 +11,6 @@ class IrUIView(models.Model):
_inherit = "ir.ui.view"
type = fields.Selection(selection_add=[TIMELINE_VIEW])
def _is_qweb_based_view(self, view_type):
return view_type == TIMELINE_VIEW[0] or super()._is_qweb_based_view(view_type)

19
web_timeline/readme/CONFIGURE.md
View File

@ -20,10 +20,9 @@ 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`).
- `record`: to access the fields values selected in the timeline definition.
- `formatters`: used to format values (see available functions in `@web/views/fields/formatters`).
- `parsers`: used to parse values (see available functions in `@web/views/fields/parsers`).
You also need to declare the view in an action window of the involved
model.
@ -45,15 +44,15 @@ More evolved example, from `project_timeline`:
string="Tasks"
default_group_by="project_id"
event_open_popup="true"
colors="white: user_ids == []; #2ecb71: kanban_state == 'done'; #ec7063: kanban_state == 'blocked'"
colors="white: user_ids == []; #2ecb71: state == '1_done'; #ec7063: state == '1_canceled'"
dependency_arrow="depend_on_ids"
>
<field name="user_ids" />
<field name="planned_hours" />
<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 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"
@ -68,12 +67,12 @@ More evolved example, from `project_timeline`:
<t t-esc="record.display_name" />
</span>
<small
name="planned_hours"
name="allocated_hours"
class="text-info ml4"
t-if="record.planned_hours"
t-if="record.allocated_hours"
>
<t
t-esc="field_utils.format.float_time(record.planned_hours)"
t-out="formatters.get('float_time')(record.allocated_hours)"
/>
</small>
</div>

1
web_timeline/readme/CONTRIBUTORS.md
View File

@ -9,6 +9,7 @@
- Pedro M. Baeza
- Alexandre Díaz
- César A. Sánchez
- Carlos López
- [Onestein](https://www.onestein.nl):
- Dennis Sluijk \<<d.sluijk@onestein.nl>\>
- Anjeel Haria

19
web_timeline/static/description/index.html
View File

@ -516,8 +516,10 @@ rendering:</p>
<ul class="simple">
<li><tt class="docutils literal">record</tt>: to access the fields values selected in the timeline
definition.</li>
<li><tt class="docutils literal">field_utils</tt>: used to format and parse values (see available
functions in <tt class="docutils literal">web.field_utils</tt>).</li>
<li><tt class="docutils literal">formatters</tt>: used to format values (see available functions in
<tt class="docutils literal">&#64;web/views/fields/formatters</tt>).</li>
<li><tt class="docutils literal">parsers</tt>: used to parse values (see available functions in
<tt class="docutils literal">&#64;web/views/fields/parsers</tt>).</li>
</ul>
<p>You also need to declare the view in an action window of the involved
model.</p>
@ -536,15 +538,15 @@ view example added onto cron tasks.</p>
</span><span class="na">string=</span><span class="s">&quot;Tasks&quot;</span><span class="w">
</span><span class="na">default_group_by=</span><span class="s">&quot;project_id&quot;</span><span class="w">
</span><span class="na">event_open_popup=</span><span class="s">&quot;true&quot;</span><span class="w">
</span><span class="na">colors=</span><span class="s">&quot;white: user_ids == []; #2ecb71: kanban_state == 'done'; #ec7063: kanban_state == 'blocked'&quot;</span><span class="w">
</span><span class="na">colors=</span><span class="s">&quot;white: user_ids == []; #2ecb71: state == '1_done'; #ec7063: state == '1_canceled'&quot;</span><span class="w">
</span><span class="na">dependency_arrow=</span><span class="s">&quot;depend_on_ids&quot;</span><span class="w">
</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;field</span><span class="w"> </span><span class="na">name=</span><span class="s">&quot;user_ids&quot;</span><span class="w"> </span><span class="nt">/&gt;</span><span class="w">
</span><span class="nt">&lt;field</span><span class="w"> </span><span class="na">name=</span><span class="s">&quot;planned_hours&quot;</span><span class="w"> </span><span class="nt">/&gt;</span><span class="w">
</span><span class="nt">&lt;field</span><span class="w"> </span><span class="na">name=</span><span class="s">&quot;allocated_hours&quot;</span><span class="w"> </span><span class="nt">/&gt;</span><span class="w">
</span><span class="nt">&lt;templates&gt;</span><span class="w">
</span><span class="nt">&lt;t</span><span class="w"> </span><span class="na">t-name=</span><span class="s">&quot;timeline-item&quot;</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;div</span><span class="w"> </span><span class="na">class=</span><span class="s">&quot;o_project_timeline_item&quot;</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;t</span><span class="w"> </span><span class="na">t-foreach=</span><span class="s">&quot;record.user_ids&quot;</span><span class="w"> </span><span class="na">t-as=</span><span class="s">&quot;user&quot;</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;t</span><span class="w"> </span><span class="na">t-foreach=</span><span class="s">&quot;record.user_ids&quot;</span><span class="w"> </span><span class="na">t-as=</span><span class="s">&quot;user&quot;</span><span class="w"> </span><span class="na">t-key=</span><span class="s">&quot;user.id&quot;</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;img</span><span class="w">
</span><span class="na">t-if=</span><span class="s">&quot;record.user_ids&quot;</span><span class="w">
</span><span class="na">t-attf-src=</span><span class="s">&quot;/web/image/res.users/#{user}/image_128/16x16&quot;</span><span class="w">
@ -559,12 +561,12 @@ view example added onto cron tasks.</p>
</span><span class="nt">&lt;t</span><span class="w"> </span><span class="na">t-esc=</span><span class="s">&quot;record.display_name&quot;</span><span class="w"> </span><span class="nt">/&gt;</span><span class="w">
</span><span class="nt">&lt;/span&gt;</span><span class="w">
</span><span class="nt">&lt;small</span><span class="w">
</span><span class="na">name=</span><span class="s">&quot;planned_hours&quot;</span><span class="w">
</span><span class="na">name=</span><span class="s">&quot;allocated_hours&quot;</span><span class="w">
</span><span class="na">class=</span><span class="s">&quot;text-info ml4&quot;</span><span class="w">
</span><span class="na">t-if=</span><span class="s">&quot;record.planned_hours&quot;</span><span class="w">
</span><span class="na">t-if=</span><span class="s">&quot;record.allocated_hours&quot;</span><span class="w">
</span><span class="nt">&gt;</span><span class="w">
</span><span class="nt">&lt;t</span><span class="w">
</span><span class="na">t-esc=</span><span class="s">&quot;field_utils.format.float_time(record.planned_hours)&quot;</span><span class="w">
</span><span class="na">t-out=</span><span class="s">&quot;formatters.get('float_time')(record.allocated_hours)&quot;</span><span class="w">
</span><span class="nt">/&gt;</span><span class="w">
</span><span class="nt">&lt;/small&gt;</span><span class="w">
</span><span class="nt">&lt;/div&gt;</span><span class="w">
@ -663,6 +665,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
<li>Pedro M. Baeza</li>
<li>Alexandre Díaz</li>
<li>César A. Sánchez</li>
<li>Carlos López</li>
</ul>
</li>
<li><a class="reference external" href="https://www.onestein.nl">Onestein</a>:<ul>

191
web_timeline/static/src/views/timeline/timeline_arch_parser.esm.js 100644
View File

@ -0,0 +1,191 @@
/** @odoo-module **/
/**
* Copyright 2024 Tecnativa - Carlos López
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
*/
import {_t} from "@web/core/l10n/translation";
import {archParseBoolean} from "@web/views/utils";
import {parseExpr} from "@web/core/py_js/py";
import {visitXML} from "@web/core/utils/xml";
const MODES = ["day", "week", "month", "fit"];
export class TimelineParseArchError extends Error {}
export class TimelineArchParser {
parse(arch, fields) {
const archInfo = {
colors: [],
class: "",
templateDocs: {},
min_height: 300,
mode: "fit",
canCreate: true,
canUpdate: true,
canDelete: true,
options: {
groupOrder: "order",
orientation: {axis: "both", item: "top"},
selectable: true,
multiselect: true,
showCurrentTime: true,
stack: true,
margin: {item: 2},
zoomKey: "ctrlKey",
},
};
const fieldNames = fields.display_name ? ["display_name"] : [];
visitXML(arch, (node) => {
switch (node.tagName) {
case "timeline": {
if (!node.hasAttribute("date_start")) {
throw new TimelineParseArchError(
_t("Timeline view has not defined 'date_start' attribute.")
);
}
if (!node.hasAttribute("default_group_by")) {
throw new TimelineParseArchError(
_t(
"Timeline view has not defined 'default_group_by' attribute."
)
);
}
archInfo.date_start = node.getAttribute("date_start");
archInfo.default_group_by = node.getAttribute("default_group_by");
if (node.hasAttribute("class")) {
archInfo.class = node.getAttribute("class");
}
if (node.hasAttribute("date_stop")) {
archInfo.date_stop = node.getAttribute("date_stop");
}
if (node.hasAttribute("date_delay")) {
archInfo.date_delay = node.getAttribute("date_delay");
}
if (node.hasAttribute("colors")) {
archInfo.colors = this.parse_colors(
node.getAttribute("colors")
);
}
if (node.hasAttribute("dependency_arrow")) {
archInfo.dependency_arrow =
node.getAttribute("dependency_arrow");
}
if (node.hasAttribute("stack")) {
archInfo.options.stack = archParseBoolean(
node.getAttribute("stack"),
true
);
}
if (node.hasAttribute("zoomKey")) {
archInfo.options.zoomKey =
node.getAttribute("zoomKey") || "ctrlKey";
}
if (node.hasAttribute("margin")) {
archInfo.options.margin = node.getAttribute("margin")
? JSON.parse(node.getAttribute("margin"))
: {item: 2};
}
if (node.hasAttribute("min_height")) {
archInfo.min_height = node.getAttribute("min_height");
}
if (node.hasAttribute("mode")) {
archInfo.mode = node.getAttribute("mode");
if (!MODES.includes(archInfo.mode)) {
throw new TimelineParseArchError(
`Timeline view cannot display mode: ${archInfo.mode}`
);
}
}
if (node.hasAttribute("event_open_popup")) {
archInfo.open_popup_action = archParseBoolean(
node.getAttribute("event_open_popup")
);
}
if (node.hasAttribute("create")) {
archInfo.canCreate = archParseBoolean(
node.getAttribute("create"),
true
);
}
if (node.hasAttribute("edit")) {
archInfo.canUpdate = archParseBoolean(
node.getAttribute("edit"),
true
);
}
if (node.hasAttribute("delete")) {
archInfo.canDelete = archParseBoolean(
node.getAttribute("delete"),
true
);
}
break;
}
case "field": {
const fieldName = node.getAttribute("name");
if (!fieldNames.includes(fieldName)) {
fieldNames.push(fieldName);
}
break;
}
case "t": {
if (node.hasAttribute("t-name")) {
archInfo.templateDocs[node.getAttribute("t-name")] = node;
break;
}
}
}
});
const fieldsToGather = [
"date_start",
"date_stop",
"default_group_by",
"progress",
"date_delay",
archInfo.default_group_by,
];
for (const field of fieldsToGather) {
if (archInfo[field] && !fieldNames.includes(archInfo[field])) {
fieldNames.push(archInfo[field]);
}
}
for (const color of archInfo.colors) {
if (!fieldNames.includes(color.field)) {
fieldNames.push(color.field);
}
}
if (
archInfo.dependency_arrow &&
!fieldNames.includes(archInfo.dependency_arrow)
) {
fieldNames.push(archInfo.dependency_arrow);
}
archInfo.fieldNames = fieldNames;
return archInfo;
}
/**
* Parse the colors attribute.
* @param {Array} colors
* @returns {Array}
*/
parse_colors(colors) {
if (colors) {
return colors
.split(";")
.filter(Boolean)
.map((color_pair) => {
const [color, expr] = color_pair.split(":");
const ast = parseExpr(expr);
return {
color: color,
field: ast.left.value,
ast,
};
});
}
return [];
}
}

274
web_timeline/static/src/views/timeline/timeline_canvas.esm.js
View File

@ -1,160 +1,146 @@
/** @odoo-module **/
/* Copyright 2018 Onestein
Copyright 2024 Tecnativa - Carlos López
* License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). */
odoo.define("web_timeline.TimelineCanvas", function (require) {
"use strict";
const Widget = require("web.Widget");
/**
* Used to draw stuff on upon the timeline view.
*/
export class TimelineCanvas {
constructor(canvas_ref) {
this.canvas_ref = canvas_ref;
}
/**
* Clears all drawings (svg elements) from the canvas.
*/
clear() {
$(this.canvas_ref).find(" > :not(defs)").remove();
}
/**
* Used to draw stuff on upon the timeline view.
* Gets the path from one point to another.
*
* @param {Object} rectFrom
* @param {Object} rectTo
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakAt The space between the line turns
* @returns {Array} Each item represents a coordinate
*/
const TimelineCanvas = Widget.extend({
template: "TimelineView.Canvas",
get_polyline_points(rectFrom, rectTo, widthMarker, breakAt) {
let fromX = 0,
toX = 0;
if (rectFrom.x < rectTo.x + rectTo.w) {
fromX = rectFrom.x + rectFrom.w + widthMarker;
toX = rectTo.x;
} else {
fromX = rectFrom.x - widthMarker;
toX = rectTo.x + rectTo.w;
}
let deltaBreak = 0;
if (fromX < toX) {
deltaBreak = fromX + breakAt - (toX - breakAt);
} else {
deltaBreak = fromX - breakAt - (toX + breakAt);
}
const fromHalfHeight = rectFrom.h / 2;
const fromY = rectFrom.y + fromHalfHeight;
const toHalfHeight = rectTo.h / 2;
const toY = rectTo.y + toHalfHeight;
const xDiff = fromX - toX;
const yDiff = fromY - toY;
const threshold = breakAt + widthMarker;
const spaceY = toHalfHeight + 2;
/**
* Clears all drawings (svg elements) from the canvas.
*/
clear: function () {
this.$(" > :not(defs)").remove();
},
/**
* Gets the path from one point to another.
*
* @param {Object} rectFrom
* @param {Object} rectTo
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakAt The space between the line turns
* @returns {Array} Each item represents a coordinate
*/
get_polyline_points: function (rectFrom, rectTo, widthMarker, breakAt) {
let fromX = 0,
toX = 0;
if (rectFrom.x < rectTo.x + rectTo.w) {
fromX = rectFrom.x + rectFrom.w + widthMarker;
toX = rectTo.x;
const points = [[fromX, fromY]];
const _addPoints = (space, ePoint, mode) => {
if (mode) {
points.push([fromX + breakAt, fromY]);
points.push([fromX + breakAt, ePoint + space]);
points.push([toX - breakAt, toY + space]);
points.push([toX - breakAt, toY]);
} else {
fromX = rectFrom.x - widthMarker;
toX = rectTo.x + rectTo.w;
points.push([fromX - breakAt, fromY]);
points.push([fromX - breakAt, ePoint + space]);
points.push([toX + breakAt, toY + space]);
points.push([toX + breakAt, toY]);
}
let deltaBreak = 0;
if (fromX < toX) {
deltaBreak = fromX + breakAt - (toX - breakAt);
};
if (fromY !== toY) {
if (Math.abs(xDiff) < threshold) {
points.push([fromX + breakAt, toY + yDiff]);
points.push([fromX + breakAt, toY]);
} else {
deltaBreak = fromX - breakAt - (toX + breakAt);
const yDiffSpace = yDiff > 0 ? spaceY : -spaceY;
_addPoints(yDiffSpace, toY, rectFrom.x < rectTo.x + rectTo.w);
}
const fromHalfHeight = rectFrom.h / 2;
const fromY = rectFrom.y + fromHalfHeight;
const toHalfHeight = rectTo.h / 2;
const toY = rectTo.y + toHalfHeight;
const xDiff = fromX - toX;
const yDiff = fromY - toY;
const threshold = breakAt + widthMarker;
const spaceY = toHalfHeight + 2;
} else if (Math.abs(deltaBreak) >= threshold) {
_addPoints(spaceY, fromY, fromX < toX);
}
points.push([toX, toY]);
const points = [[fromX, fromY]];
const _addPoints = (space, ePoint, mode) => {
if (mode) {
points.push([fromX + breakAt, fromY]);
points.push([fromX + breakAt, ePoint + space]);
points.push([toX - breakAt, toY + space]);
points.push([toX - breakAt, toY]);
} else {
points.push([fromX - breakAt, fromY]);
points.push([fromX - breakAt, ePoint + space]);
points.push([toX + breakAt, toY + space]);
points.push([toX + breakAt, toY]);
}
};
if (fromY !== toY) {
if (Math.abs(xDiff) < threshold) {
points.push([fromX + breakAt, toY + yDiff]);
points.push([fromX + breakAt, toY]);
} else {
const yDiffSpace = yDiff > 0 ? spaceY : -spaceY;
_addPoints(yDiffSpace, toY, rectFrom.x < rectTo.x + rectTo.w);
}
} else if (Math.abs(deltaBreak) >= threshold) {
_addPoints(spaceY, fromY, fromX < toX);
}
points.push([toX, toY]);
return points;
}
return points;
},
/**
* Draws an arrow.
*
* @param {HTMLElement} from Element to draw the arrow from
* @param {HTMLElement} to Element to draw the arrow to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @returns {HTMLElement} The created SVG polyline
*/
draw_arrow(from, to, color, width) {
return this.draw_line(from, to, color, width, "#arrowhead", 10, 12);
}
/**
* Draws an arrow.
*
* @param {HTMLElement} from Element to draw the arrow from
* @param {HTMLElement} to Element to draw the arrow to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @returns {HTMLElement} The created SVG polyline
*/
draw_arrow: function (from, to, color, width) {
return this.draw_line(from, to, color, width, "#arrowhead", 10, 12);
},
/**
* Draws a line.
*
* @param {HTMLElement} from Element to draw the line from
* @param {HTMLElement} to Element to draw the line to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @param {String} markerStart Start marker of the line
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakLineAt The space between the line turns
* @returns {HTMLElement} The created SVG polyline
*/
draw_line: function (
from,
to,
color,
width,
markerStart,
/**
* Draws a line.
*
* @param {HTMLElement} from Element to draw the line from
* @param {HTMLElement} to Element to draw the line to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @param {String} markerStart Start marker of the line
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakLineAt The space between the line turns
* @returns {HTMLElement} The created SVG polyline
*/
draw_line(from, to, color, width, markerStart, widthMarker, breakLineAt) {
const $from = $(from);
const childPosFrom = $from.offset();
const parentPosFrom = $from.closest(".vis-center").offset();
const rectFrom = {
x: childPosFrom.left - parentPosFrom.left,
y: childPosFrom.top - parentPosFrom.top,
w: $from.width(),
h: $from.height(),
};
const $to = $(to);
const childPosTo = $to.offset();
const parentPosTo = $to.closest(".vis-center").offset();
const rectTo = {
x: childPosTo.left - parentPosTo.left,
y: childPosTo.top - parentPosTo.top,
w: $to.width(),
h: $to.height(),
};
const points = this.get_polyline_points(
rectFrom,
rectTo,
widthMarker,
breakLineAt
) {
const $from = $(from);
const childPosFrom = $from.offset();
const parentPosFrom = $from.closest(".vis-center").offset();
const rectFrom = {
x: childPosFrom.left - parentPosFrom.left,
y: childPosFrom.top - parentPosFrom.top,
w: $from.width(),
h: $from.height(),
};
const $to = $(to);
const childPosTo = $to.offset();
const parentPosTo = $to.closest(".vis-center").offset();
const rectTo = {
x: childPosTo.left - parentPosTo.left,
y: childPosTo.top - parentPosTo.top,
w: $to.width(),
h: $to.height(),
};
const points = this.get_polyline_points(
rectFrom,
rectTo,
widthMarker,
breakLineAt
);
const line = document.createElementNS(
"http://www.w3.org/2000/svg",
"polyline"
);
line.setAttribute("points", _.flatten(points).join(","));
line.setAttribute("stroke", color || "#000");
line.setAttribute("stroke-width", width || 1);
line.setAttribute("fill", "none");
if (markerStart) {
line.setAttribute("marker-start", "url(" + markerStart + ")");
}
this.$el.append(line);
return line;
},
});
return TimelineCanvas;
});
);
const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
line.setAttribute("points", points.flat().join(","));
line.setAttribute("stroke", color || "#000");
line.setAttribute("stroke-width", width || 1);
line.setAttribute("fill", "none");
if (markerStart) {
line.setAttribute("marker-start", "url(" + markerStart + ")");
}
this.canvas_ref.append(line);
return line;
}
}

17
web_timeline/static/src/views/timeline/timeline_canvas.xml
View File

@ -1,17 +0,0 @@
<?xml version="1.0" encoding="utf-8" ?>
<template>
<svg t-name="TimelineView.Canvas" class="oe_timeline_view_canvas">
<defs>
<marker
id="arrowhead"
markerWidth="10"
markerHeight="7"
refX="10"
refY="3.5"
orient="auto"
>
<polygon points="10 0, 10 7, 0 3.5" />
</marker>
</defs>
</svg>
</template>

425
web_timeline/static/src/views/timeline/timeline_controller.esm.js
View File

@ -1,106 +1,78 @@
/** @odoo-module alias=web_timeline.TimelineController **/
/* Copyright 2023 Onestein - Anjeel Haria
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
import AbstractController from "web.AbstractController";
/**
* Copyright 2023 Onestein - Anjeel Haria
* Copyright 2024 Tecnativa - Carlos López
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
*/
import {Component, useRef} from "@odoo/owl";
import {ConfirmationDialog} from "@web/core/confirmation_dialog/confirmation_dialog";
import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog";
import time from "web.time";
import core from "web.core";
import Dialog from "web.Dialog";
var _t = core._t;
import {Component} from "@odoo/owl";
import {Layout} from "@web/search/layout";
import {SearchBar} from "@web/search/search_bar/search_bar";
import {_t} from "@web/core/l10n/translation";
import {makeContext} from "@web/core/context";
import {standardViewProps} from "@web/views/standard_view_props";
import {useDebounced} from "@web/core/utils/timing";
import {useModel} from "@web/model/model";
import {useSearchBarToggler} from "@web/search/search_bar/search_bar_toggler";
import {useService} from "@web/core/utils/hooks";
import {useSetupView} from "@web/views/view_hook";
export default AbstractController.extend({
custom_events: _.extend({}, AbstractController.prototype.custom_events, {
onGroupClick: "_onGroupClick",
onItemDoubleClick: "_onItemDoubleClick",
onUpdate: "_onUpdate",
onRemove: "_onRemove",
onMove: "_onMove",
onAdd: "_onAdd",
}),
const {DateTime} = luxon;
// Import time from "web.time";
export class TimelineController extends Component {
/**
* @override
*/
init: function (parent, model, renderer, params) {
this._super.apply(this, arguments);
this.open_popup_action = params.open_popup_action;
this.date_start = params.date_start;
this.date_stop = params.date_stop;
this.date_delay = params.date_delay;
this.context = params.actionContext;
setup() {
this.rootRef = useRef("root");
this.model = useModel(this.props.Model, this.props.modelParams);
useSetupView({rootRef: useRef("root")});
this.searchBarToggler = useSearchBarToggler();
this.date_start = this.props.modelParams.date_start;
this.date_stop = this.props.modelParams.date_stop;
this.date_delay = this.props.modelParams.date_delay;
this.open_popup_action = this.props.modelParams.open_popup_action;
this.moveQueue = [];
this.debouncedInternalMove = _.debounce(this.internalMove, 0);
},
on_detach_callback() {
if (this.Dialog) {
this.Dialog();
this.Dialog = undefined;
}
return this._super.apply(this, arguments);
},
/**
* @override
*/
update: function (params, options) {
const res = this._super.apply(this, arguments);
if (_.isEmpty(params)) {
return res;
}
const defaults = _.defaults({}, options, {
adjust_window: true,
});
const domains = params.domain || this.renderer.last_domains || [];
const contexts = params.context || [];
const group_bys = params.groupBy || this.renderer.last_group_bys || [];
this.last_domains = domains;
this.last_contexts = contexts;
// Select the group by
let n_group_bys = group_bys;
if (!n_group_bys.length && this.renderer.arch.attrs.default_group_by) {
n_group_bys = this.renderer.arch.attrs.default_group_by.split(",");
}
this.renderer.last_group_bys = n_group_bys;
this.renderer.last_domains = domains;
let fields = this.renderer.fieldNames;
fields = _.uniq(fields.concat(n_group_bys));
$.when(
res,
this._rpc({
model: this.model.modelName,
method: "search_read",
kwargs: {
fields: fields,
domain: domains,
order: [{name: this.renderer.arch.attrs.default_group_by}],
},
context: this.getSession().user_context,
}).then((data) =>
this.renderer.on_data_loaded(data, n_group_bys, defaults.adjust_window)
)
);
return res;
},
this.debouncedInternalMove = useDebounced(this.internalMove, 0);
this.dialogService = useService("dialog");
this.actionService = useService("action");
}
get rendererProps() {
return {
model: this.model,
onAdd: this._onAdd.bind(this),
onGroupClick: this._onGroupClick.bind(this),
onItemDoubleClick: this._onItemDoubleClick.bind(this),
onMove: this._onMove.bind(this),
onRemove: this._onRemove.bind(this),
onUpdate: this._onUpdate.bind(this),
};
}
getSearchProps() {
const {comparision, context, domain, groupBy, orderBy} = this.env.searchModel;
return {comparision, context, domain, groupBy, orderBy};
}
/**
* Gets triggered when a group in the timeline is
* clicked (by the TimelineRenderer).
*
* @private
* @param {EventObject} event
* @returns {jQuery.Deferred}
* @param {EventObject} item
*/
_onGroupClick: function (event) {
const groupField = this.renderer.last_group_bys[0];
return this.do_action({
_onGroupClick(item) {
const groupField = this.model.last_group_bys[0];
this.actionService.doAction({
type: "ir.actions.act_window",
res_model: this.renderer.fields[groupField].relation,
res_id: event.data.item.group,
target: "new",
res_model: this.model.fields[groupField].relation,
res_id: item.group,
views: [[false, "form"]],
view_mode: "form",
target: "new",
});
},
}
/**
* Triggered on double-click on an item in read-only mode (otherwise, we use _onUpdate).
@ -109,63 +81,61 @@ export default AbstractController.extend({
* @param {EventObject} event
* @returns {jQuery.Deferred}
*/
_onItemDoubleClick: function (event) {
return this.openItem(event.data.item, false);
},
_onItemDoubleClick(event) {
return this.openItem(event.item, false);
}
/**
* Opens a form view of a clicked timeline
* item (triggered by the TimelineRenderer).
*
* @private
* @param {EventObject} event
* @param {Object} item
* @returns {Object}
*/
_onUpdate: function (event) {
const item = event.data.item;
_onUpdate(item) {
const item_id = Number(item.evt.id) || item.evt.id;
return this.openItem(item_id, true);
},
}
/** Open specified item, either through modal, or by navigating to form view. */
openItem: function (item_id, is_editable) {
/** Open specified item, either through modal, or by navigating to form view.
* @param {Integer} item_id
* @param {Boolean} is_editable
*/
openItem(item_id, is_editable) {
if (this.open_popup_action) {
const options = {
resModel: this.model.modelName,
resModel: this.model.model_name,
resId: item_id,
context: this.getSession().user_context,
};
if (is_editable) {
options.onRecordSaved = () => this.write_completed();
options.onRecordSaved = async () => {
await this.model.load(this.getSearchProps());
this.render();
};
} else {
options.preventEdit = true;
}
this.Dialog = Component.env.services.dialog.add(
FormViewDialog,
options,
{}
);
this.Dialog = this.dialogService.add(FormViewDialog, options, {});
} else {
this.trigger_up("switch_view", {
view_type: "form",
model: this.model.modelName,
res_id: item_id,
this.env.services.action.switchView("form", {
resId: item_id,
mode: is_editable ? "edit" : "readonly",
});
}
},
}
/**
* Gets triggered when a timeline item is
* moved (triggered by the TimelineRenderer).
*
* @private
* @param {EventObject} event
* @param {Object} item
* @param {Function} callback
*/
_onMove: function (event) {
const item = event.data.item;
const fields = this.renderer.fields;
const event_start = item.start;
const event_end = item.end;
_onMove(item, callback) {
const event_start = DateTime.fromJSDate(item.start);
const event_end = item.end ? DateTime.fromJSDate(item.end) : false;
let group = false;
if (item.group !== -1) {
group = item.group;
@ -173,52 +143,34 @@ export default AbstractController.extend({
const data = {};
// In case of a move event, the date_delay stay the same,
// only date_start and stop must be updated
data[this.date_start] = time.auto_date_to_str(
event_start,
fields[this.date_start].type
);
data[this.date_start] = this.model.serializeDate(this.date_start, event_start);
if (this.date_stop) {
// In case of instantaneous event, item.end is not defined
if (event_end) {
data[this.date_stop] = time.auto_date_to_str(
event_end,
fields[this.date_stop].type
data[this.date_stop] = this.model.serializeDate(
this.date_stop,
event_end
);
} else {
data[this.date_stop] = data[this.date_start];
}
}
if (this.date_delay && event_end) {
const diff_seconds = Math.round(
(event_end.getTime() - event_start.getTime()) / 1000
);
data[this.date_delay] = diff_seconds / 3600;
const diff = event_end.diff(event_start, "hours");
data[this.date_delay] = diff.hours;
}
const grouped_field = this.renderer.last_group_bys[0];
this._rpc({
model: this.modelName,
method: "fields_get",
args: [grouped_field],
context: this.getSession().user_context,
}).then(async (fields_processed) => {
if (
this.renderer.last_group_bys &&
this.renderer.last_group_bys instanceof Array &&
fields_processed[grouped_field].type !== "many2many"
) {
data[this.renderer.last_group_bys[0]] = group;
}
this.moveQueue.push({
id: event.data.item.id,
data: data,
event: event,
});
this.debouncedInternalMove();
const grouped_field = this.model.last_group_bys[0];
if (this.model.fields[grouped_field].type !== "many2many") {
data[grouped_field] = group;
}
this.moveQueue.push({
id: item.id,
data,
item,
callback,
});
},
this.debouncedInternalMove();
}
/**
* Write enqueued moves to Odoo. After all writes are finished it updates
* the view once (prevents flickering of the view when multiple timeline items
@ -226,153 +178,96 @@ export default AbstractController.extend({
*
* @returns {jQuery.Deferred}
*/
internalMove: function () {
async internalMove() {
const queues = this.moveQueue.slice();
this.moveQueue = [];
const defers = [];
for (const item of queues) {
defers.push(
this._rpc({
model: this.model.modelName,
method: "write",
args: [[item.event.data.item.id], item.data],
context: this.getSession().user_context,
}).then(() => {
item.event.data.callback(item.event.data.item);
})
);
await this.model.write_completed(item.id, item.data);
item.callback(item.item);
}
return $.when.apply($, defers).done(() => {
this.write_completed({
adjust_window: false,
});
});
},
await this.model.load(this.getSearchProps());
this.render();
}
/**
* Triggered when a timeline item gets removed from the view.
* Requires user confirmation before it gets actually deleted.
*
* @private
* @param {EventObject} event
* @returns {jQuery.Deferred}
* @param {Object} item
* @param {Function} callback
*/
_onRemove: function (event) {
var def = $.Deferred();
Dialog.confirm(this, _t("Are you sure you want to delete this record?"), {
_onRemove(item, callback) {
this.dialogService.add(ConfirmationDialog, {
title: _t("Warning"),
confirm_callback: () => {
this.remove_completed(event).then(def.resolve.bind(def));
body: _t("Are you sure you want to delete this record?"),
confirmLabel: _t("Confirm"),
cancelLabel: _t("Discard"),
confirm: async () => {
await this.model.remove_completed(item);
callback(item);
},
cancel: () => {
return;
},
cancel_callback: def.resolve.bind(def),
});
return def;
},
}
/**
* Triggered when a timeline item gets added and opens a form view.
*
* @private
* @param {EventObject} event
* @returns {dialogs.FormViewDialog}
* @param {Object} item
* @param {Function} callback
*/
_onAdd: function (event) {
const item = event.data.item;
_onAdd(item, callback) {
// Initialize default values for creation
const default_context = {};
default_context["default_".concat(this.date_start)] = item.start;
const context = {};
let item_start = false,
item_end = false;
item_start = DateTime.fromJSDate(item.start);
context[`default_${this.date_start}`] = this.model.serializeDate(
this.date_start,
item_start
);
if (this.date_delay) {
default_context["default_".concat(this.date_delay)] = 1;
}
if (this.date_start) {
default_context["default_".concat(this.date_start)] = moment(item.start)
.utc()
.format("YYYY-MM-DD HH:mm:ss");
context[`default_${this.date_delay}`] = 1;
}
if (this.date_stop && item.end) {
default_context["default_".concat(this.date_stop)] = moment(item.end)
.utc()
.format("YYYY-MM-DD HH:mm:ss");
item_end = DateTime.fromJSDate(item.end);
context[`default_${this.date_stop}`] = this.model.serializeDate(
this.date_stop,
item_end
);
}
if (this.date_delay && this.date_start && this.date_stop && item.end) {
default_context["default_".concat(this.date_delay)] =
(moment(item.end) - moment(item.start)) / 3600000;
if (this.date_delay && this.date_stop && item_end) {
const diff = item_end.diff(item_start, "hours");
context[`default_${this.date_delay}`] = diff.hours;
}
if (item.group > 0) {
default_context["default_".concat(this.renderer.last_group_bys[0])] =
item.group;
context[`default_${this.model.last_group_bys[0]}`] = item.group;
}
// Show popup
this.Dialog = Component.env.services.dialog.add(
this.dialogService.add(
FormViewDialog,
{
resId: false,
context: _.extend(default_context, this.context),
onRecordSaved: (record) => this.create_completed([record.res_id]),
resModel: this.model.modelName,
context: makeContext([context], this.env.searchModel.context),
onRecordSaved: async (record) => {
const new_record = await this.model.create_completed(record.resId);
callback(new_record);
},
resModel: this.model.model_name,
},
{onClose: () => event.data.callback()}
{onClose: () => callback()}
);
return false;
},
/**
* Triggered upon completion of a new record.
* Updates the timeline view with the new record.
*
* @param {RecordId} id
* @returns {jQuery.Deferred}
*/
create_completed: function (id) {
return this._rpc({
model: this.model.modelName,
method: "read",
args: [id, this.model.fieldNames],
context: this.context,
}).then((records) => {
var new_event = this.renderer.event_data_transform(records[0]);
var items = this.renderer.timeline.itemsData;
items.add(new_event);
});
},
/**
* Triggered upon completion of writing a record.
* @param {ControllerOptions} options
*/
write_completed: function (options) {
const params = {
domain: this.renderer.last_domains,
context: this.context,
groupBy: this.renderer.last_group_bys,
};
this.update(params, options);
},
/**
* Triggered upon confirm of removing a record.
* @param {EventObject} event
* @returns {jQuery.Deferred}
*/
remove_completed: function (event) {
return this._rpc({
model: this.modelName,
method: "unlink",
args: [[event.data.item.id]],
context: this.getSession().user_context,
}).then(() => {
let unlink_index = false;
for (var i = 0; i < this.model.data.data.length; i++) {
if (this.model.data.data[i].id === event.data.item.id) {
unlink_index = i;
}
}
if (!isNaN(unlink_index)) {
this.model.data.data.splice(unlink_index, 1);
}
event.data.callback(event.data.item);
});
},
});
}
}
TimelineController.template = "web_timeline.TimelineView";
TimelineController.components = {Layout, SearchBar};
TimelineController.props = {
...standardViewProps,
Model: Function,
modelParams: Object,
Renderer: Function,
};

18
web_timeline/static/src/views/timeline/timeline_controller.xml 100644
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="web_timeline.TimelineView">
<div t-att-class="props.className" t-ref="root">
<Layout
className="model.useSampleModel ? 'o_view_sample_data' : ''"
display="props.display"
>
<t t-set-slot="layout-actions">
<SearchBar t-if="searchBarToggler.state.showSearchBar" />
</t>
<t t-component="props.Renderer" t-props="rendererProps" />
</Layout>
</div>
</t>
</templates>

288
web_timeline/static/src/views/timeline/timeline_model.esm.js
View File

@ -1,77 +1,227 @@
odoo.define("web_timeline.TimelineModel", function (require) {
"use strict";
/** @odoo-module **/
/**
* Copyright 2024 Tecnativa - Carlos López
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
*/
import {serializeDate, serializeDateTime} from "@web/core/l10n/dates";
import {KanbanCompiler} from "@web/views/kanban/kanban_compiler";
import {KeepLast} from "@web/core/utils/concurrency";
import {Model} from "@web/model/model";
import {evaluate} from "@web/core/py_js/py";
import {onWillStart} from "@odoo/owl";
import {registry} from "@web/core/registry";
import {renderToString} from "@web/core/utils/render";
import {useViewCompiler} from "@web/views/view_compiler";
const AbstractModel = require("web.AbstractModel");
const {DateTime} = luxon;
const parsers = registry.category("parsers");
const formatters = registry.category("formatters");
const TimelineModel = AbstractModel.extend({
init: function () {
this._super.apply(this, arguments);
},
export class TimelineModel extends Model {
setup(params) {
this.params = params;
this.model_name = params.resModel;
this.fields = this.params.fields;
this.date_start = this.params.date_start;
this.date_stop = this.params.date_stop;
this.date_delay = this.params.date_delay;
this.colors = this.params.colors;
this.last_group_bys = this.params.default_group_by.split(",");
const templates = useViewCompiler(KanbanCompiler, this.params.templateDocs);
this.recordTemplate = templates["timeline-item"];
load: function (params) {
this.modelName = params.modelName;
this.fieldNames = params.fieldNames;
this.default_group_by = params.default_group_by;
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((write, unlink, create) => {
this.write_right = write;
this.unlink_right = unlink;
this.create_right = create;
this.preload_def.resolve();
});
this.keepLast = new KeepLast();
onWillStart(async () => {
this.write_right = await this.orm.call(
this.model_name,
"check_access_rights",
["write", false]
);
this.unlink_right = await this.orm.call(
this.model_name,
"check_access_rights",
["unlink", false]
);
this.create_right = await this.orm.call(
this.model_name,
"check_access_rights",
["create", false]
);
});
}
/**
* Read the records for the timeline.
* @param {Object} searchParams
*/
async load(searchParams) {
if (searchParams.groupBy && searchParams.groupBy.length) {
this.last_group_bys = searchParams.groupBy;
} else {
this.last_group_bys = this.params.default_group_by.split(",");
}
let fields = this.params.fieldNames;
fields = [...new Set(fields.concat(this.last_group_bys))];
this.data = await this.keepLast.add(
this.orm.call(this.model_name, "search_read", [], {
fields: fields,
domain: searchParams.domain,
order: this.params.default_group_by,
context: searchParams.context,
})
);
this.notify();
}
/**
* Transform Odoo event object to timeline event object.
*
* @param {Object} record
* @private
* @returns {Object}
*/
_event_data_transform(record) {
const [date_start, date_stop] = this._get_event_dates(record);
let group = record[this.last_group_bys[0]];
if (group && Array.isArray(group) && group.length > 0) {
group = group[0];
} else {
group = -1;
}
let colorToApply = false;
for (const color of this.colors) {
if (evaluate(color.ast, record)) {
colorToApply = color.color;
}
}
this.data = {
domain: params.domain,
context: params.context,
};
let content = record.display_name;
if (this.recordTemplate) {
content = this._render_timeline_item(record);
}
return this.preload_def.then(this._loadTimeline.bind(this));
},
const timeline_item = {
start: date_start.toJSDate(),
content: content,
id: record.id,
order: record.order,
group: group,
evt: record,
style: `background-color: ${colorToApply};`,
};
// Only specify range end when there actually is one.
// ➔ Instantaneous events / those with inverted dates are displayed as points.
if (date_stop && DateTime.fromISO(date_start) < DateTime.fromISO(date_stop)) {
timeline_item.end = date_stop.toJSDate();
}
return timeline_item;
}
/**
* Get dates from given event
*
* @param {Object} record
* @returns {Object}
*/
_get_event_dates(record) {
let date_start = DateTime.now();
let date_stop = null;
const date_delay = record[this.date_delay] || false;
date_start = this.parseDate(
this.fields[this.date_start],
record[this.date_start]
);
if (this.date_stop && record[this.date_stop]) {
date_stop = this.parseDate(
this.fields[this.date_stop],
record[this.date_stop]
);
}
if (!date_stop && date_delay) {
date_stop = date_start.plus({hours: date_delay});
}
/**
* Read the records for the timeline.
*
* @private
* @returns {jQuery.Deferred}
*/
_loadTimeline: function () {
return this._rpc({
model: this.modelName,
method: "search_read",
kwargs: {
fields: this.fieldNames,
domain: this.data.domain,
order: [{name: this.default_group_by}],
context: this.data.context,
},
}).then((events) => {
this.data.data = events;
this.data.rights = {
unlink: this.unlink_right,
create: this.create_right,
write: this.write_right,
};
});
},
});
return [date_start, date_stop];
}
/**
* Parse Date or DateTime field
*
* @param {Object} field
* @param {Object} value
* @returns {DateTime} new_date in UTC timezone if field is datetime
*/
parseDate(field, value) {
let new_date = parsers.get(field.type)(value);
if (field.type === "datetime") {
new_date = new_date.setZone("UTC", {keepLocalTime: true});
}
return new_date;
}
return TimelineModel;
});
/**
* Serializes a date or datetime value based on the field type.
* to send it to the server.
* @param {String} field_name - The field name.
* @param {DateTime} value - The value to be serialized, either a date or datetime.
* @returns {String} - The serialized date or datetime string.
*/
serializeDate(field_name, value) {
const field = this.fields[field_name];
return field.type === "date" ? serializeDate(value) : serializeDateTime(value);
}
/**
* Render timeline item template.
*
* @param {Object} record Record
* @private
* @returns {String} Rendered template
*/
_render_timeline_item(record) {
return renderToString(this.recordTemplate, {
record: record,
formatters,
parsers,
});
}
/**
* Triggered upon confirm of removing a record.
* @param {EventObject} event
* @returns {jQuery.Deferred}
*/
async remove_completed(event) {
await this.orm.call(this.model_name, "unlink", [[event.evt.id]]);
const unlink_index = this.data.findIndex((item) => item.id === event.evt.id);
if (unlink_index !== -1) {
this.data.splice(unlink_index, 1);
}
}
/**
* Triggered upon completion of a new record.
* Updates the timeline view with the new record.
*
* @param {RecordId} id
* @returns {jQuery.Deferred}
*/
async create_completed(id) {
const records = await this.orm.call(this.model_name, "read", [
[id],
this.params.fieldNames,
]);
return this._event_data_transform(records[0]);
}
/**
* Triggered upon completion of writing a record.
* @param {Integer} id
* @param {Object} vals
*/
async write_completed(id, vals) {
return this.orm.call(this.model_name, "write", [id, vals]);
}
get canCreate() {
return this.params.canCreate && this.create_right;
}
get canDelete() {
return this.params.canDelete && this.unlink_right;
}
get canEdit() {
return this.params.canUpdate && this.write_right;
}
}

1051
web_timeline/static/src/views/timeline/timeline_renderer.esm.js
View File

File diff suppressed because it is too large Load Diff

46
web_timeline/static/src/views/timeline/timeline_renderer.xml 100644
View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="web_timeline.TimelineRenderer">
<div class="oe_timeline_view" t-ref="root">
<div class="oe_timeline_buttons">
<button
t-att-class="'oe_timeline_button_today btn ' + (mode.data == 'today' ? ' btn-primary' : 'btn-default')"
t-on-click="_onTodayClicked"
>Today</button>
<div class="btn-group btn-sm">
<button
t-att-class="'oe_timeline_button_scale_day btn ' + (mode.data == 'day' ? ' btn-primary' : 'btn-default')"
t-on-click="_onScaleDayClicked"
>Day</button>
<button
t-att-class="'oe_timeline_button_scale_week btn ' + (mode.data == 'week' ? ' btn-primary' : 'btn-default')"
t-on-click="_onScaleWeekClicked"
>Week</button>
<button
t-att-class="'oe_timeline_button_scale_month btn ' + (mode.data == 'month' ? ' btn-primary' : 'btn-default')"
t-on-click="_onScaleMonthClicked"
>Month</button>
<button
t-att-class="'oe_timeline_button_scale_year btn ' + (mode.data == 'year' ? ' btn-primary' : 'btn-default')"
t-on-click="_onScaleYearClicked"
>Year</button>
</div>
</div>
<div class="oe_timeline_widget" t-ref="canvas" />
</div>
</t>
<svg t-name="TimelineView.Canvas" class="oe_timeline_view_canvas">
<defs>
<marker
id="arrowhead"
markerWidth="10"
markerHeight="7"
refX="10"
refY="3.5"
orient="auto"
>
<polygon points="10 0, 10 7, 0 3.5" />
</marker>
</defs>
</svg>
</templates>

202
web_timeline/static/src/views/timeline/timeline_view.esm.js
View File

@ -1,174 +1,48 @@
/* global py */
/** @odoo-module **/
/* Odoo web_timeline
* Copyright 2015 ACSONE SA/NV
* Copyright 2016 Pedro M. Baeza <pedro.baeza@tecnativa.com>
* Copyright 2023 Onestein - Anjeel Haria
* Copyright 2024 Tecnativa - Carlos López
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
odoo.define("web_timeline.TimelineView", function (require) {
"use strict";
import {TimelineArchParser} from "./timeline_arch_parser.esm";
import {TimelineController} from "./timeline_controller.esm";
import {TimelineModel} from "./timeline_model.esm";
import {TimelineRenderer} from "./timeline_renderer.esm";
import {_lt} from "@web/core/l10n/translation";
import {registry} from "@web/core/registry";
const core = require("web.core");
const utils = require("web.utils");
const view_registry = require("web.view_registry");
const AbstractView = require("web.AbstractView");
const TimelineRenderer = require("web_timeline.TimelineRenderer");
const TimelineController = require("web_timeline.TimelineController");
const TimelineModel = require("web_timeline.TimelineModel");
const viewRegistry = registry.category("views");
const _lt = core._lt;
export const TimelineView = {
display_name: _lt("Timeline"),
icon: "fa fa-tasks",
multiRecord: true,
ArchParser: TimelineArchParser,
Controller: TimelineController,
Renderer: TimelineRenderer,
Model: TimelineModel,
jsLibs: ["/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.js"],
cssLibs: ["/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.css"],
type: "timeline",
function isNullOrUndef(value) {
return _.isUndefined(value) || _.isNull(value);
}
props: (genericProps, view) => {
const {arch, fields, resModel} = genericProps;
const parser = new view.ArchParser();
const archInfo = parser.parse(arch, fields);
const modelParams = {
...archInfo,
resModel: resModel,
fields: fields,
};
function toBoolDefaultTrue(value) {
return isNullOrUndef(value) ? true : utils.toBoolElse(value, true);
}
var TimelineView = AbstractView.extend({
display_name: _lt("Timeline"),
icon: "fa fa-tasks",
jsLibs: ["/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.js"],
cssLibs: ["/web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.css"],
config: _.extend({}, AbstractView.prototype.config, {
Model: TimelineModel,
Controller: TimelineController,
Renderer: TimelineRenderer,
}),
viewType: "timeline",
/**
* @override
*/
init: function (viewInfo, params) {
this._super.apply(this, arguments);
this.modelName = this.controllerParams.modelName;
const action = params.action;
this.arch = this.rendererParams.arch;
const attrs = this.arch.attrs;
const date_start = attrs.date_start;
const date_stop = attrs.date_stop;
const date_delay = attrs.date_delay;
const dependency_arrow = attrs.dependency_arrow;
const fields = viewInfo.fields;
let fieldNames = fields.display_name ? ["display_name"] : [];
const fieldsToGather = [
"date_start",
"date_stop",
"default_group_by",
"progress",
"date_delay",
attrs.default_group_by,
];
for (const field of fieldsToGather) {
if (attrs[field]) {
fieldNames.push(attrs[field]);
}
}
const archFieldNames = _.map(
_.filter(this.arch.children, (item) => item.tag === "field"),
(item) => item.attrs.name
);
fieldNames = _.union(fieldNames, archFieldNames);
const colors = this.parse_colors();
for (const color of colors) {
if (!fieldNames.includes(color.field)) {
fieldNames.push(color.field);
}
}
if (dependency_arrow) {
fieldNames.push(dependency_arrow);
}
const mode = attrs.mode || attrs.default_window || "fit";
const min_height = attrs.min_height || 300;
if (!isNullOrUndef(attrs.quick_create_instance)) {
this.quick_create_instance = "instance." + attrs.quick_create_instance;
}
let open_popup_action = false;
if (
!isNullOrUndef(attrs.event_open_popup) &&
utils.toBoolElse(attrs.event_open_popup, true)
) {
open_popup_action = attrs.event_open_popup;
}
this.rendererParams.mode = mode;
this.rendererParams.model = this.modelName;
this.rendererParams.view = this;
this.rendererParams.options = this._preapre_vis_timeline_options(attrs);
this.rendererParams.can_create = toBoolDefaultTrue(attrs.create);
this.rendererParams.can_update = toBoolDefaultTrue(attrs.edit);
this.rendererParams.can_delete = toBoolDefaultTrue(attrs.delete);
this.rendererParams.date_start = date_start;
this.rendererParams.date_stop = date_stop;
this.rendererParams.date_delay = date_delay;
this.rendererParams.colors = colors;
this.rendererParams.fieldNames = fieldNames;
this.rendererParams.default_group_by = attrs.default_group_by;
this.rendererParams.min_height = min_height;
this.rendererParams.dependency_arrow = dependency_arrow;
this.rendererParams.fields = fields;
this.loadParams.modelName = this.modelName;
this.loadParams.fieldNames = fieldNames;
this.loadParams.default_group_by = attrs.default_group_by;
this.controllerParams.open_popup_action = open_popup_action;
this.controllerParams.date_start = date_start;
this.controllerParams.date_stop = date_stop;
this.controllerParams.date_delay = date_delay;
this.controllerParams.actionContext = action.context;
this.withSearchPanel = false;
},
_preapre_vis_timeline_options: function (attrs) {
return {
groupOrder: "order",
orientation: {axis: "both", item: "top"},
selectable: true,
multiselect: true,
showCurrentTime: true,
stack: toBoolDefaultTrue(attrs.stack),
margin: attrs.margin ? JSON.parse(attrs.margin) : {item: 2},
zoomKey: attrs.zoomKey || "ctrlKey",
};
},
/**
* Parse the colors attribute.
*
* @private
* @returns {Array}
*/
parse_colors: function () {
if (this.arch.attrs.colors) {
return _(this.arch.attrs.colors.split(";"))
.chain()
.compact()
.map((color_pair) => {
const pair = color_pair.split(":");
const color = pair[0];
const expr = pair[1];
const temp = py.parse(py.tokenize(expr));
return {
color: color,
field: temp.expressions[0].value,
opt: temp.operators[0],
value: temp.expressions[1].value,
};
})
.value();
}
return [];
},
});
view_registry.add("timeline", TimelineView);
return TimelineView;
});
return {
...genericProps,
modelParams,
Model: view.Model,
Renderer: view.Renderer,
};
},
};
viewRegistry.add("timeline", TimelineView);

27
web_timeline/static/src/views/timeline/timeline_view.xml
View File

@ -1,27 +0,0 @@
<?xml version="1.0" encoding="utf-8" ?>
<template>
<t t-name="TimelineView">
<div class="oe_timeline_view">
<div class="oe_timeline_buttons">
<button
class="btn btn-default btn-sm oe_timeline_button_today"
>Today</button>
<div class="btn-group btn-sm">
<button
class="btn btn-default oe_timeline_button_scale_day"
>Day</button>
<button
class="btn btn-default oe_timeline_button_scale_week"
>Week</button>
<button
class="btn btn-default oe_timeline_button_scale_month"
>Month</button>
<button
class="btn btn-default oe_timeline_button_scale_year"
>Year</button>
</div>
</div>
<div class="oe_timeline_widget" />
</div>
</t>
</template>

8
web_timeline/static/tests/helpers.esm.js 100644
View File

@ -0,0 +1,8 @@
/** @odoo-module **/
export const FAKE_ORDER_FIELDS = {
display_name: {string: "Display Name", type: "char"},
date_start: {string: "Date start", type: "date"},
date_end: {string: "Date end", type: "date"},
partner_id: {string: "Partner", type: "many2one", relation: "partner"},
};

141
web_timeline/static/tests/web_timeline_arch_parser_tests.esm.js 100644
View File

@ -0,0 +1,141 @@
/** @odoo-module **/
import {
TimelineArchParser,
TimelineParseArchError,
} from "@web_timeline/views/timeline/timeline_arch_parser.esm";
import {FAKE_ORDER_FIELDS} from "./helpers.esm";
import {parseXML} from "@web/core/utils/xml";
function parseArch(arch) {
const parser = new TimelineArchParser();
const xmlDoc = parseXML(arch);
return parser.parse(xmlDoc, FAKE_ORDER_FIELDS);
}
function check(assert, paramName, paramValue, expectedName, expectedValue) {
const arch = `<timeline date_start="start_date" default_group_by="partner_id" ${paramName}="${paramValue}" />`;
const data = parseArch(arch);
assert.strictEqual(data[expectedName], expectedValue);
}
// eslint-disable-next-line no-undef
QUnit.module("TimelineView - ArchParser");
// eslint-disable-next-line no-undef
QUnit.test("throw if date_start is not set", (assert) => {
assert.throws(
() => parseArch(`<timeline default_group_by="partner_id"/>`),
TimelineParseArchError
);
});
// eslint-disable-next-line no-undef
QUnit.test("throw if default_group_by is not set", (assert) => {
assert.throws(
() => parseArch(`<timeline date_start="date_start"/>`),
TimelineParseArchError
);
});
// eslint-disable-next-line no-undef
QUnit.test("hasEditDialog", (assert) => {
check(assert, "event_open_popup", "", "open_popup_action", false);
check(assert, "event_open_popup", "true", "open_popup_action", true);
check(assert, "event_open_popup", "True", "open_popup_action", true);
check(assert, "event_open_popup", "1", "open_popup_action", true);
check(assert, "event_open_popup", "false", "open_popup_action", false);
check(assert, "event_open_popup", "False", "open_popup_action", false);
check(assert, "event_open_popup", "0", "open_popup_action", false);
});
// eslint-disable-next-line no-undef
QUnit.test("create", (assert) => {
check(assert, "create", "", "canCreate", true);
check(assert, "create", "true", "canCreate", true);
check(assert, "create", "True", "canCreate", true);
check(assert, "create", "1", "canCreate", true);
check(assert, "create", "false", "canCreate", false);
check(assert, "create", "False", "canCreate", false);
check(assert, "create", "0", "canCreate", false);
check(assert, "create", "12", "canCreate", true);
});
// eslint-disable-next-line no-undef
QUnit.test("edit", (assert) => {
check(assert, "edit", "", "canUpdate", true);
check(assert, "edit", "true", "canUpdate", true);
check(assert, "edit", "True", "canUpdate", true);
check(assert, "edit", "1", "canUpdate", true);
check(assert, "edit", "false", "canUpdate", false);
check(assert, "edit", "False", "canUpdate", false);
check(assert, "edit", "0", "canUpdate", false);
check(assert, "edit", "12", "canUpdate", true);
});
// eslint-disable-next-line no-undef
QUnit.test("delete", (assert) => {
check(assert, "delete", "", "canDelete", true);
check(assert, "delete", "true", "canDelete", true);
check(assert, "delete", "True", "canDelete", true);
check(assert, "delete", "1", "canDelete", true);
check(assert, "delete", "false", "canDelete", false);
check(assert, "delete", "False", "canDelete", false);
check(assert, "delete", "0", "canDelete", false);
check(assert, "delete", "12", "canDelete", true);
});
// eslint-disable-next-line no-undef
QUnit.test("mode", (assert) => {
check(assert, "mode", "day", "mode", "day");
check(assert, "mode", "week", "mode", "week");
check(assert, "mode", "month", "mode", "month");
assert.throws(() => {
parseArch(
`<timeline date_start="start_date" default_group_by="partner_id" mode="other" />`
);
}, TimelineParseArchError);
assert.throws(() => {
parseArch(
`<timeline date_start="start_date" default_group_by="partner_id" mode="" />`
);
}, TimelineParseArchError);
});
// eslint-disable-next-line no-undef
QUnit.test("colors", (assert) => {
const archInfo = parseArch(`
<timeline date_start="start_date" default_group_by="partner_id" colors="gray: state == 'cancel'; #ec7063: state == 'done'"/>
`);
assert.strictEqual(archInfo.colors.length, 2, "colors should be 2");
assert.strictEqual(archInfo.colors[0].field, "state", "field should be state");
assert.strictEqual(archInfo.colors[0].color, "gray", "color should be gray");
assert.strictEqual(
archInfo.colors[0].ast.left.value,
"state",
"ast left value should be state"
);
assert.strictEqual(archInfo.colors[0].ast.op, "==", "ast op value should be '=='");
assert.strictEqual(
archInfo.colors[0].ast.right.value,
"cancel",
"ast right value should be cancel"
);
assert.ok(
archInfo.fieldNames.includes("state"),
"fieldNames should include field state"
);
});
// eslint-disable-next-line no-undef
QUnit.test("templates", (assert) => {
const archInfo = parseArch(`
<timeline date_start="start_date" default_group_by="partner_id">
<field name="other_field" />
<templates>
<t t-name="timeline-item">
<span t-out="record.other_field" />
</t>
</templates>
</timeline>
`);
assert.ok(
archInfo.templateDocs.hasOwnProperty("timeline-item"),
"template name should be timeline-item"
);
assert.ok(
archInfo.fieldNames.includes("other_field"),
"fieldNames should include field other_field"
);
});

194
web_timeline/static/tests/web_timeline_view_tests.esm.js 100644
View File

@ -0,0 +1,194 @@
/** @odoo-module **/
import {click, getFixture} from "@web/../tests/helpers/utils";
import {makeView, setupViewRegistries} from "@web/../tests/views/helpers";
import {FAKE_ORDER_FIELDS} from "./helpers.esm";
import {loadBundle} from "@web/core/assets";
let serverData = {};
let target = null;
// eslint-disable-next-line no-undef
QUnit.module("Views", (hooks) => {
loadBundle("web_timeline.vis-timeline_lib");
hooks.beforeEach(async () => {
serverData = {
models: {
partner: {
fields: {
name: {string: "Name", type: "char"},
},
records: [
{id: 1, name: "Partner 1"},
{id: 2, name: "Partner 2"},
{id: 3, name: "Partner 3"},
],
},
order: {
fields: FAKE_ORDER_FIELDS,
records: [
{
id: 1,
display_name: "Record 1",
date_start: "2024-01-01",
date_end: "2024-01-02",
partner_id: 1,
},
{
id: 2,
display_name: "Record 2",
date_start: "2024-01-03",
date_end: "2024-02-05",
partner_id: 1,
},
{
id: 3,
display_name: "Record 3",
date_start: "2024-01-10",
date_end: "2024-01-15",
partner_id: 2,
},
{
id: 4,
display_name: "Record 4",
date_start: "2024-01-15",
date_end: "2024-02-01",
partner_id: 3,
},
],
methods: {
check_access_rights() {
return Promise.resolve(true);
},
},
},
},
};
setupViewRegistries();
target = getFixture();
});
// eslint-disable-next-line no-undef
QUnit.module("TimelineView - View");
// eslint-disable-next-line no-undef
QUnit.test("Test basic timeline view", async (assert) => {
await makeView({
type: "timeline",
resModel: "order",
serverData,
arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id"/>',
});
assert.containsOnce(target, ".oe_timeline_view");
});
// eslint-disable-next-line no-undef
QUnit.test("click today slot", async (assert) => {
await makeView({
type: "timeline",
resModel: "order",
serverData,
arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id"/>',
});
const $today = target.querySelector(".oe_timeline_button_today");
const $day = target.querySelector(".oe_timeline_button_scale_day");
const $week = target.querySelector(".oe_timeline_button_scale_week");
const $month = target.querySelector(".oe_timeline_button_scale_month");
const $year = target.querySelector(".oe_timeline_button_scale_year");
await click($today);
assert.hasClass(
$today,
"btn-primary",
"today should have classnames btn-primary"
);
assert.doesNotHaveClass(
$day,
"btn-primary",
"day should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$week,
"btn-primary",
"week should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$month,
"btn-primary",
"month should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$year,
"btn-primary",
"year should no have classnames btn-primary"
);
});
// eslint-disable-next-line no-undef
QUnit.test("click month slot", async (assert) => {
await makeView({
type: "timeline",
resModel: "order",
serverData,
arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id"/>',
});
const $today = target.querySelector(".oe_timeline_button_today");
const $day = target.querySelector(".oe_timeline_button_scale_day");
const $week = target.querySelector(".oe_timeline_button_scale_week");
const $month = target.querySelector(".oe_timeline_button_scale_month");
const $year = target.querySelector(".oe_timeline_button_scale_year");
await click($month);
assert.hasClass(
$month,
"btn-primary",
"month should have classnames btn-primary"
);
assert.doesNotHaveClass(
$today,
"btn-primary",
"today should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$day,
"btn-primary",
"day should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$week,
"btn-primary",
"week should no have classnames btn-primary"
);
assert.doesNotHaveClass(
$year,
"btn-primary",
"year should no have classnames btn-primary"
);
});
// eslint-disable-next-line no-undef
QUnit.test("Check button delete", async (assert) => {
await makeView({
type: "timeline",
resModel: "order",
serverData,
arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id"/>',
});
const $elements = [...target.querySelectorAll(".vis-item-content")];
const $item_contents = $elements.filter((el) =>
el.textContent.includes("Record 2")
);
assert.strictEqual($item_contents.length, 1, "items should be 1");
const $item_content = $item_contents[0];
await click($item_content);
assert.containsOnce($item_content.parentElement, ".vis-delete");
});
// eslint-disable-next-line no-undef
QUnit.test("Check button delete disabled", async (assert) => {
await makeView({
type: "timeline",
resModel: "order",
serverData,
arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id" delete="0"/>',
});
const $elements = [...target.querySelectorAll(".vis-item-content")];
const $item_contents = $elements.filter((el) =>
el.textContent.includes("Record 2")
);
assert.strictEqual($item_contents.length, 1, "items should be 1");
const $item_content = $item_contents[0];
await click($item_content);
assert.containsNone($item_content.parentElement, ".vis-delete");
});
});

1
web_timeline/tests/__init__.py 100644
View File

@ -0,0 +1 @@
from . import test_web_timeline

23
web_timeline/tests/test_web_timeline.py 100644
View File

@ -0,0 +1,23 @@
# Copyright 2024 Tecnativa - Carlos Lopez
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from odoo.tests import tagged
from odoo.tests.common import HttpCase
@tagged("post_install", "-at_install")
class TestWebTimeline(HttpCase):
def test_timeline_arch(self):
self.browser_js(
"/web/tests?filter=TimelineView - ArchParser",
"",
login="admin",
timeout=1800,
)
def test_timeline_view(self):
self.browser_js(
"/web/tests?filter=TimelineView - View",
"",
login="admin",
timeout=1800,
)