From 6e3fbaac751f229c084e2a4c685909813696b197 Mon Sep 17 00:00:00 2001 From: maso Date: Wed, 2 Oct 2024 10:22:32 +0330 Subject: [PATCH 1/2] [fix][17.0] To show dependency graph --- .../job_direct_graph/job_direct_graph.esm.js | 56 ++++++++++--------- queue_job/views/queue_job_views.xml | 1 + 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js b/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js index 85f195600a..7dc0b50815 100644 --- a/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js +++ b/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js @@ -1,32 +1,34 @@ /* @odoo-module */ /* global vis */ +import {_t} from "@web/core/l10n/translation"; +import {Component, onWillStart, onMounted, useRef, useState} from "@odoo/owl"; import {loadCSS, loadJS} from "@web/core/assets"; import {registry} from "@web/core/registry"; import {standardFieldProps} from "@web/views/fields/standard_field_props"; import {useService} from "@web/core/utils/hooks"; - -const {Component, onWillStart, useEffect, useRef} = owl; +import {useRecordObserver} from "@web/model/relational_model/utils"; export class JobDirectGraph extends Component { setup() { + super.setup(); this.orm = useService("orm"); this.action = useService("action"); this.rootRef = useRef("root_vis"); this.network = null; + this.state = useState({}); + + onWillStart(async () => { await loadJS("/queue_job/static/lib/vis/vis-network.min.js"); loadCSS("/queue_job/static/lib/vis/vis-network.min.css"); }); - useEffect(() => { + useRecordObserver((record) => { + this.state.value = record.data[this.props.name]; + }); + onMounted(() => { this.renderNetwork(); this._fitNetwork(); - return () => { - if (this.network) { - this.$el.empty(); - } - return this.rootRef.el; - }; }); } @@ -56,24 +58,21 @@ export class JobDirectGraph extends Component { if (this.network) { this.$el.empty(); } - let nodes = this.props.value.nodes || []; - if (!nodes.length) { - return; - } - nodes = nodes.map((node) => { + + let nodes = (this.state.value.nodes || []).map((node) => { node.title = this.htmlTitle(node.title || ""); + node.label = _t("Job %(id)s", {'id': node.id}); return node; }); - const edges = []; - _.each(this.props.value.edges || [], function (edge) { + let edges = (this.state.value.edges || []).map((edge) => { const edgeFrom = edge[0]; const edgeTo = edge[1]; - edges.push({ + return { from: edgeFrom, to: edgeTo, arrows: "to", - }); + }; }); const data = { @@ -93,23 +92,22 @@ export class JobDirectGraph extends Component { } const network = new vis.Network(this.$el[0], data, options); network.selectNodes([this.resId]); - var self = this; - network.on("dragging", function () { + network.on("dragging", () => { // By default, dragging changes the selected node // to the dragged one, we want to keep the current // job selected - network.selectNodes([self.resId]); + network.selectNodes([this.resId]); }); - network.on("click", function (params) { + network.on("click", (params) => { if (params.nodes.length > 0) { - var resId = params.nodes[0]; - if (resId !== self.resId) { - self.openDependencyJob(resId); + let resId = params.nodes[0]; + if (resId !== this.resId) { + this.openDependencyJob(resId); } } else { // Clicked outside of the nodes, we want to // keep the current job selected - network.selectNodes([self.resId]); + network.selectNodes([this.resId]); } }); this.network = network; @@ -140,4 +138,8 @@ JobDirectGraph.props = { JobDirectGraph.template = "queue.JobDirectGraph"; -registry.category("fields").add("job_directed_graph", JobDirectGraph); +export const jobDirectGraph = { + component: JobDirectGraph, +}; + +registry.category("fields").add("job_directed_graph", jobDirectGraph); diff --git a/queue_job/views/queue_job_views.xml b/queue_job/views/queue_job_views.xml index 684cf79f65..4fdf69a4f9 100644 --- a/queue_job/views/queue_job_views.xml +++ b/queue_job/views/queue_job_views.xml @@ -67,6 +67,7 @@ + Date: Wed, 2 Oct 2024 10:28:20 +0330 Subject: [PATCH 2/2] [fix] precommit --- .../job_direct_graph/job_direct_graph.esm.js | 18 +++++++++--------- queue_job/views/queue_job_views.xml | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js b/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js index 7dc0b50815..86d336e3b0 100644 --- a/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js +++ b/queue_job/static/src/views/fields/job_direct_graph/job_direct_graph.esm.js @@ -1,13 +1,14 @@ /* @odoo-module */ /* global vis */ -import {_t} from "@web/core/l10n/translation"; -import {Component, onWillStart, onMounted, useRef, useState} from "@odoo/owl"; +import {Component, onMounted, onWillStart, useRef, useState} from "@odoo/owl"; import {loadCSS, loadJS} from "@web/core/assets"; + +import {_t} from "@web/core/l10n/translation"; import {registry} from "@web/core/registry"; import {standardFieldProps} from "@web/views/fields/standard_field_props"; -import {useService} from "@web/core/utils/hooks"; import {useRecordObserver} from "@web/model/relational_model/utils"; +import {useService} from "@web/core/utils/hooks"; export class JobDirectGraph extends Component { setup() { @@ -18,7 +19,6 @@ export class JobDirectGraph extends Component { this.network = null; this.state = useState({}); - onWillStart(async () => { await loadJS("/queue_job/static/lib/vis/vis-network.min.js"); loadCSS("/queue_job/static/lib/vis/vis-network.min.css"); @@ -59,13 +59,13 @@ export class JobDirectGraph extends Component { this.$el.empty(); } - let nodes = (this.state.value.nodes || []).map((node) => { + const nodes = (this.state.value.nodes || []).map((node) => { node.title = this.htmlTitle(node.title || ""); - node.label = _t("Job %(id)s", {'id': node.id}); + node.label = _t("Job %(id)s", {id: node.id}); return node; }); - let edges = (this.state.value.edges || []).map((edge) => { + const edges = (this.state.value.edges || []).map((edge) => { const edgeFrom = edge[0]; const edgeTo = edge[1]; return { @@ -98,9 +98,9 @@ export class JobDirectGraph extends Component { // job selected network.selectNodes([this.resId]); }); - network.on("click", (params) => { + network.on("click", (params) => { if (params.nodes.length > 0) { - let resId = params.nodes[0]; + const resId = params.nodes[0]; if (resId !== this.resId) { this.openDependencyJob(resId); } diff --git a/queue_job/views/queue_job_views.xml b/queue_job/views/queue_job_views.xml index 4fdf69a4f9..611ca0937f 100644 --- a/queue_job/views/queue_job_views.xml +++ b/queue_job/views/queue_job_views.xml @@ -67,7 +67,7 @@ - +