[REF] web: Graph with view layout

This commit rewrites the graph view template to make use of the view
layout component.

It also removes a duplicate test in the graph test suite.

X-original-commit: a9a65fd51a2317adc07bf3742f7edc360236d32e
Part-of: odoo/odoo#77463
This commit is contained in:
Julien Mougenot
2021-09-30 10:38:30 +00:00
parent 5bcf16311a
commit 163be99e53
5 changed files with 60 additions and 76 deletions
@@ -6,16 +6,16 @@
<table>
<thead>
<tr>
<th class="o_measure" t-esc="measure"/>
<th class="o_measure" t-esc="measure" />
</tr>
</thead>
<tbody>
<tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem.id">
<td>
<span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}"/>
<span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label"/>
<span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}" />
<span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
</td>
<td class="o_value" t-esc="tooltipItem.value"/>
<td class="o_value" t-esc="tooltipItem.value" />
</tr>
</tbody>
</table>
@@ -25,9 +25,9 @@
<t t-name="web.GraphRenderer" owl="1">
<div class="o_graph_renderer">
<div class="o_graph_canvas_container" t-ref="container">
<canvas t-ref="canvas"/>
<canvas t-ref="canvas" />
</div>
</div>
</t>
</templates>
</templates>
@@ -1,17 +1,16 @@
/** @odoo-module **/
import { _lt } from "@web/core/l10n/translation";
import { ControlPanel } from "@web/search/control_panel/control_panel";
import { SearchPanel } from "@web/search/search_panel/search_panel";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
import { standardViewProps } from "@web/views/helpers/standard_view_props";
import { useSetupView } from "@web/views/helpers/view_hook";
import { Layout } from "@web/views/layout";
import { useModel } from "../helpers/model";
import { GraphArchParser } from "./graph_arch_parser";
import { GraphModel } from "./graph_model";
import { GraphRenderer } from "./graph_renderer";
import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
import { registry } from "@web/core/registry";
import { standardViewProps } from "@web/views/helpers/standard_view_props";
import { useModel } from "../helpers/model";
import { useService } from "@web/core/utils/hooks";
import { useSetupView } from "@web/views/helpers/view_hook";
const viewRegistry = registry.category("views");
@@ -74,7 +73,7 @@ export class GraphView extends Component {
const { context, resModel, title } = this.model.metaData;
const views = {};
for (const [viewId, viewType] of this.props.info.views || []) {
for (const [viewId, viewType] of this.env.config.views || []) {
views[viewType] = viewId;
}
function getView(viewType) {
@@ -131,7 +130,7 @@ export class GraphView extends Component {
GraphView.template = "web.GraphView";
GraphView.buttonTemplate = "web.GraphView.Buttons";
GraphView.components = { ControlPanel, GroupByMenu, Renderer: GraphRenderer, SearchPanel };
GraphView.components = { GroupByMenu, Renderer: GraphRenderer, Layout };
GraphView.defaultProps = {
additionalMeasures: [],
@@ -1,4 +1,4 @@
.o_graph_view {
.o_graph_view > .o_content > .o_renderer {
height: 100%;
.o_graph_canvas_container {
@@ -46,31 +46,26 @@
</t>
<t t-name="web.GraphView" owl="1">
<div class="o_graph_view" t-att-class="{ o_view_sample_data: model.useSampleModel }">
<ControlPanel t-if="env.searchModel.display.controlPanel" t-props="props.info">
<t t-set-slot="control-panel-bottom-left">
<t t-call="{{ constructor.buttonTemplate }}"/>
<Layout viewType="'graph'" useSampleModel="model.useSampleModel">
<t t-set-slot="control-panel-bottom-left">
<t t-call="{{ constructor.buttonTemplate }}"/>
</t>
<t t-if="model.data">
<t t-if="model.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
<t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
</t>
</ControlPanel>
<div class="o_content">
<SearchPanel t-if="env.searchModel.display.searchPanel" />
<t t-if="model.data">
<t t-if="model.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
<t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
</t>
<Renderer
class="o_renderer"
model="model"
t-att-class="{ o_sample_data_disabled: model.useSampleModel }"
onGraphClicked="(domain) => onGraphClicked(domain)"
/>
</t>
<t t-else="" t-call="web.NoContentHelper">
<t t-set="title">Invalid data</t>
<t t-set="description">Pie chart cannot mix positive and negative numbers. Try to change your domain to only display positive results</t>
</t>
</div>
</div>
<Renderer
class="o_renderer"
model="model"
t-att-class="{ o_sample_data_disabled: model.useSampleModel }"
onGraphClicked="(domain) => onGraphClicked(domain)"
/>
</t>
<t t-else="" t-call="web.NoContentHelper">
<t t-set="title">Invalid data</t>
<t t-set="description">Pie chart cannot mix positive and negative numbers. Try to change your domain to only display positive results</t>
</t>
</Layout>
</t>
</templates>
@@ -1,13 +1,7 @@
/** @odoo-module **/
import { BORDER_WHITE, DEFAULT_BG } from "@web/views/graph/colors";
import { dialogService } from "@web/core/dialog/dialog_service";
import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
import { registry } from "@web/core/registry";
import { makeView } from "./helpers";
import { click, makeDeferred, nextTick, triggerEvent } from "@web/../tests/helpers/utils";
import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
import { click, makeDeferred, nextTick, triggerEvent } from "@web/../tests/helpers/utils";
import {
editFavoriteName,
saveFavorite,
@@ -22,6 +16,12 @@ import {
toggleMenuItemOption,
toggleSaveFavorite,
} from "@web/../tests/search/helpers";
import { makeView } from "@web/../tests/views/helpers";
import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
import { dialogService } from "@web/core/dialog/dialog_service";
import { registry } from "@web/core/registry";
import { BORDER_WHITE, DEFAULT_BG } from "@web/views/graph/colors";
import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
const serviceRegistry = registry.category("services");
@@ -30,7 +30,8 @@ function getGraphModelMetaData(graph) {
}
export function getGraphRenderer(graph) {
return Object.values(graph.__owl__.children).find((c) => c.chart);
const layout = Object.values(graph.__owl__.children)[0];
return Object.values(layout.__owl__.children).find((c) => c.chart);
}
function getChart(graph) {
@@ -2031,26 +2032,9 @@ QUnit.module("Views", (hooks) => {
type: "graph",
resModel: "foo",
noContentHelp: '<p class="abc">This helper should not be displayed in graph views</p>',
views: [[false, "search"]],
});
assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
assert.containsNone(graph, "div.o_view_nocontent");
assert.containsNone(graph, ".abc");
await toggleFilterMenu(graph);
await toggleMenuItem(graph, "False Domain");
assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
assert.containsNone(graph, "div.o_view_nocontent");
assert.containsNone(graph, ".abc");
});
QUnit.test("no content helper after update", async function (assert) {
assert.expect(6);
const graph = await makeView({
serverData,
type: "graph",
resModel: "foo",
noContentHelp: '<p class="abc">This helper should not be displayed in graph views</p>',
views: [[false, "search"]],
config: {
views: [[false, "search"]],
},
});
assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
assert.containsNone(graph, "div.o_view_nocontent");
@@ -2719,7 +2703,9 @@ QUnit.module("Views", (hooks) => {
resModel: "foo",
groupBy: ["date:year", "product_id", "date", "date:quarter"],
arch: `<graph type="line"/>`,
views: [[false, "search"]],
config: {
views: [[false, "search"]],
},
});
checkLabels(assert, graph, ["January 2016", "March 2016", "May 2016", "April 2016"]);
// mockReadGroup does not always sort groups -> May 2016 is before April 2016 for that reason.
@@ -2748,7 +2734,9 @@ QUnit.module("Views", (hooks) => {
serverData,
type: "graph",
resModel: "foo",
displayName: "Glou glou",
config: {
displayName: "Glou glou",
},
});
assert.strictEqual(
graph.el.querySelector(".o_control_panel .breadcrumb-item.active").innerText,
@@ -2851,10 +2839,12 @@ QUnit.module("Views", (hooks) => {
<field name="bar"/>
</graph>
`,
views: [
[364, "list"],
[29, "form"],
],
config: {
views: [
[364, "list"],
[29, "form"],
],
},
});
checkModeIs(assert, graph, "pie");
checkDatasets(assert, graph, ["domains"], {
@@ -3093,7 +3083,7 @@ QUnit.module("Views", (hooks) => {
type: "graph",
resModel: "foo",
arch: `
<graph>
<graph>
<field name="date"/>
<field name="product_id"/>
</graph>