diff --git a/web_timeline/__manifest__.py b/web_timeline/__manifest__.py index 0b08372107fd..1cd1adc3df31 100644 --- a/web_timeline/__manifest__.py +++ b/web_timeline/__manifest__.py @@ -5,7 +5,7 @@ { "name": "Web timeline", "summary": "Interactive visualization chart to show events in time", - "version": "19.0.1.0.0", + "version": "19.0.1.1.0", "development_status": "Production/Stable", "author": "ACSONE SA/NV, " "Tecnativa, " diff --git a/web_timeline/readme/USAGE.md b/web_timeline/readme/USAGE.md index b07a593cb0f4..c47382771217 100644 --- a/web_timeline/readme/USAGE.md +++ b/web_timeline/readme/USAGE.md @@ -28,3 +28,8 @@ 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. By holding the Ctrl key and dragging left to right, you can create a new record with the dragged start and end date. + +When the view defines dependency arrows (the `dependency_arrow` attribute), +a **Dependencies** button appears in the toolbar. Arrows are shown by +default; click the button to hide them and click again to show them. This +is useful when a large number of links makes the chart hard to read. diff --git a/web_timeline/static/src/views/timeline/timeline_renderer.esm.js b/web_timeline/static/src/views/timeline/timeline_renderer.esm.js index 29a4790c0ebd..2ae38a9d3744 100644 --- a/web_timeline/static/src/views/timeline/timeline_renderer.esm.js +++ b/web_timeline/static/src/views/timeline/timeline_renderer.esm.js @@ -31,6 +31,9 @@ export class TimelineRenderer extends Component { this.min_height = this.params.min_height; this.date_start = this.params.date_start; this.dependency_arrow = this.params.dependency_arrow; + // Dependency arrows are shown by default when configured, but can be + // toggled off at runtime through the button in the toolbar. + this.showDependencies = useState({data: Boolean(this.dependency_arrow)}); this.fields = this.params.fields; this.timeline = false; this.initial_data_loaded = false; @@ -89,6 +92,16 @@ export class TimelineRenderer extends Component { } } + /** + * Toggle the display of dependency arrows. + * + * @private + */ + _onToggleDependenciesClicked() { + this.showDependencies.data = !this.showDependencies.data; + this.draw_canvas(); + } + /** * Scale the timeline window to a day. * @@ -257,7 +270,7 @@ export class TimelineRenderer extends Component { */ draw_canvas() { this.canvas.clear(); - if (this.dependency_arrow) { + if (this.dependency_arrow && this.showDependencies.data) { this.draw_dependencies(); } } diff --git a/web_timeline/static/src/views/timeline/timeline_renderer.xml b/web_timeline/static/src/views/timeline/timeline_renderer.xml index d3793ae4daf7..04a8bc3315f8 100644 --- a/web_timeline/static/src/views/timeline/timeline_renderer.xml +++ b/web_timeline/static/src/views/timeline/timeline_renderer.xml @@ -25,6 +25,13 @@ t-on-click="_onScaleYearClicked" >Year +
diff --git a/web_timeline/static/tests/web_timeline_view_tests.esm.js b/web_timeline/static/tests/web_timeline_view_tests.esm.js index 6da9a52958a4..1499141fdd90 100644 --- a/web_timeline/static/tests/web_timeline_view_tests.esm.js +++ b/web_timeline/static/tests/web_timeline_view_tests.esm.js @@ -190,4 +190,38 @@ QUnit.module("Views", (hooks) => { await click($item_content); assert.containsNone($item_content.parentElement, ".vis-delete"); }); + + QUnit.test("no dependency toggle without dependency_arrow", async (assert) => { + await makeView({ + type: "timeline", + resModel: "order", + serverData, + arch: '', + }); + assert.containsNone(target, ".oe_timeline_button_dependencies"); + }); + + QUnit.test("toggle dependency arrows", async (assert) => { + serverData.models.order.fields.dependency_ids = { + string: "Dependencies", + type: "many2many", + relation: "order", + }; + for (const rec of serverData.models.order.records) { + rec.dependency_ids = []; + } + await makeView({ + type: "timeline", + resModel: "order", + serverData, + arch: '', + }); + const $btn = target.querySelector(".oe_timeline_button_dependencies"); + assert.ok($btn, "dependency toggle button should be present"); + assert.hasClass($btn, "btn-primary", "arrows are shown by default"); + await click($btn); + assert.doesNotHaveClass($btn, "btn-primary", "arrows hidden after toggle"); + await click($btn); + assert.hasClass($btn, "btn-primary", "arrows shown again after re-toggle"); + }); });