[FIX] web: Layout's display props could be dynamic

Before this commit, if the Layout's `display` props is a dynamic value
coming from the parent Component (ie. a getter on the component that
controls which parts of the ControlPanel should be displayed), this
value isn't applied after the first initialization.

This commit fixes it by extracting the `display` logic applied in the
constructor to a getter (moving from initialization only to once
called).

Part-of: odoo/odoo#99483
This commit is contained in:
Pierre Paridans
2022-09-13 20:30:01 +02:00
parent 8b708cca59
commit 2736d832bd
2 changed files with 59 additions and 9 deletions
+14 -8
View File
@@ -15,14 +15,6 @@ export function extractLayoutComponents(params) {
export class Layout extends Component {
setup() {
this.components = extractLayoutComponents(this.env.config);
const display = this.props.display;
if (display.controlPanel && this.env.inDialog) {
display.controlPanel = Object.assign({}, display.controlPanel, {
"top-left": false,
"bottom-left-buttons": false,
});
}
this.display = display;
}
get controlPanelSlots() {
const slots = { ...this.props.slots };
@@ -31,6 +23,20 @@ export class Layout extends Component {
delete slots.default;
return slots;
}
get display() {
const { controlPanel } = this.props.display;
if (!controlPanel || !this.env.inDialog) {
return this.props.display;
}
return {
...this.props.display,
controlPanel: {
...controlPanel,
"top-left": false,
"bottom-left-buttons": false,
},
};
}
}
Layout.template = "web.Layout";
+45 -1
View File
@@ -1,6 +1,6 @@
/** @odoo-module **/
import { getFixture, mount } from "@web/../tests/helpers/utils";
import { getFixture, mount, nextTick } from "@web/../tests/helpers/utils";
import { makeWithSearch, setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
import { dialogService } from "@web/core/dialog/dialog_service";
import { registry } from "@web/core/registry";
@@ -255,4 +255,48 @@ QUnit.module("Views", (hooks) => {
assert.notOk(target.querySelector(".o_toy_banner").closest(".o_content"));
assert.ok(target.querySelector(".o_toy_content").closest(".o_content"));
});
QUnit.test("Simple rendering: with dynamically displayed search", async (assert) => {
let displayControlPanelTopRight = true;
class ToyComponent extends Component {
get display() {
return {
...this.props.display,
controlPanel: {
...this.props.display.controlPanel,
"top-right": displayControlPanelTopRight,
},
};
}
}
ToyComponent.template = xml`
<Layout display="display">
<t t-set-slot="control-panel-top-right">
<div class="toy_search_bar" />
</t>
<div class="toy_content" />
</Layout>`;
ToyComponent.components = { Layout };
const comp = await makeWithSearch({
serverData,
Component: ToyComponent,
resModel: "foo",
searchViewId: false,
});
assert.containsOnce(target, ".o_control_panel .o_cp_top_right .toy_search_bar");
assert.containsOnce(target, ".o_component_with_search_panel .o_search_panel");
assert.containsNone(target, ".o_cp_searchview");
assert.containsOnce(target, ".o_content > .toy_content");
displayControlPanelTopRight = false;
comp.render();
await nextTick();
assert.containsNone(target, ".o_control_panel .o_cp_top_right .toy_search_bar");
assert.containsOnce(target, ".o_component_with_search_panel .o_search_panel");
assert.containsNone(target, ".o_cp_searchview");
assert.containsOnce(target, ".o_content > .toy_content");
});
});