[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:
@@ -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";
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user