pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web: update systray registry to take Component/props

Browse Source
This commit is contained in:
Géry Debongnie
2021-06-18 21:31:30 +02:00
committed by Aaron Bohy
parent 2e2d6a166e
commit f4bb46cd29
7 changed files with 163 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/debug/debug_service.js
+7 -1
View File
@@ -21,7 +21,13 @@ export const debugService = {
start(env, { orm }) {
let accessRightsProm;
if (env.debug !== "") {
registry.category("systray").add("web.debug_mode_menu", DebugMenu, { sequence: 100 });
registry.category("systray").add(
"web.debug_mode_menu",
{
Component: DebugMenu,
},
{ sequence: 100 }
);
}
return {
addons/web/static/src/legacy/systray_menu_item.js
+1 -1
View File
@@ -32,7 +32,7 @@ function addSystrayItem(Widget) {
SystrayItem.template = tags.xml`<SystrayItemAdapter Component="Widget" />`;
SystrayItem.components = { SystrayItemAdapter };
systrayRegistry.add(name, SystrayItem, { sequence: Widget.prototype.sequence });
systrayRegistry.add(name, { Component: SystrayItem }, { sequence: Widget.prototype.sequence });
convertedItems.push(Widget);
}
addons/web/static/src/webclient/navbar/navbar.js
+18 -12
View File
@@ -14,12 +14,15 @@ const systrayRegistry = registry.category("systray");
export class MenuDropdown extends Dropdown {
setup() {
super.setup();
useEffect(() => {
if (this.props.xmlid) {
const toggler = this.el.querySelector("button.o_dropdown_toggler");
toggler.dataset.menuXmlid = this.props.xmlid;
}
}, () => []);
useEffect(
() => {
if (this.props.xmlid) {
const toggler = this.el.querySelector("button.o_dropdown_toggler");
toggler.dataset.menuXmlid = this.props.xmlid;
}
},
() => []
);
}
}
MenuDropdown.props.xmlid = {
@@ -30,11 +33,14 @@ MenuDropdown.props.xmlid = {
export class MenuItem extends DropdownItem {
setup() {
super.setup();
useEffect(() => {
if (this.props.payload.xmlid) {
this.el.dataset.menuXmlid = this.props.payload.xmlid;
}
}, () => []);
useEffect(
() => {
if (this.props.payload.xmlid) {
this.el.dataset.menuXmlid = this.props.payload.xmlid;
}
},
() => []
);
}
}
@@ -77,7 +83,7 @@ export class NavBar extends Component {
get systrayItems() {
return systrayRegistry
.getAll()
.filter((Item) => ("isDisplayed" in Item ? Item.isDisplayed(this.env) : true))
.filter((item) => ("isDisplayed" in item ? item.isDisplayed(this.env) : true))
.reverse();
}
addons/web/static/src/webclient/navbar/navbar.xml
+2 -2
View File
@@ -24,8 +24,8 @@
<!-- Systray -->
<ul class="o_menu_systray" role="menu">
<t t-foreach="systrayItems" t-as="Item" t-key="Item_index">
<t t-component="Item" />
<t t-foreach="systrayItems" t-as="item" t-key="item_index">
<t t-component="item.Component" t-props="item.props" />
</t>
</ul>
</nav>
addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
+9 -6
View File
@@ -9,11 +9,6 @@ const { Component, hooks } = owl;
const { useState } = hooks;
export class SwitchCompanyMenu extends Component {
static isDisplayed(env) {
const { availableCompanies } = env.services.company;
return Object.keys(availableCompanies).length > 1 && !env.isSmall;
}
setup() {
this.companyService = useService("company");
this.currentCompany = this.companyService.currentCompany;
@@ -45,4 +40,12 @@ export class SwitchCompanyMenu extends Component {
SwitchCompanyMenu.template = "web.SwitchCompanyMenu";
SwitchCompanyMenu.toggleDelay = 1000;
registry.category("systray").add("SwitchCompanyMenu", SwitchCompanyMenu, { sequence: 1 });
const systrayItem = {
Component: SwitchCompanyMenu,
isDisplayed(env) {
const { availableCompanies } = env.services.company;
return Object.keys(availableCompanies).length > 1 && !env.isSmall;
},
};
registry.category("systray").add("SwitchCompanyMenu", systrayItem, { sequence: 1 });
addons/web/static/src/webclient/user_menu/user_menu.js
+13 -10
View File
@@ -13,19 +13,18 @@ const userMenuRegistry = registry.category("user_menuitems");
class UserMenuItem extends DropdownItem {
setup() {
super.setup();
useEffect(() => {
if (this.props.payload.id) {
this.el.dataset.menu = this.props.payload.id;
}
}, () => []);
useEffect(
() => {
if (this.props.payload.id) {
this.el.dataset.menu = this.props.payload.id;
}
},
() => []
);
}
}
export class UserMenu extends Component {
static isDisplayed(env) {
return !env.isSmall;
}
setup() {
this.user = useService("user");
const { origin } = browser.location;
@@ -58,4 +57,8 @@ export class UserMenu extends Component {
UserMenu.template = "web.UserMenu";
UserMenu.components = { UserMenuItem };
registry.category("systray").add("web.user_menu", UserMenu, { sequence: 0 });
const systrayItem = {
Component: UserMenu,
isDisplayed: (env) => !env.isSmall,
};
registry.category("systray").add("web.user_menu", systrayItem, { sequence: 0 });
addons/web/static/tests/webclient/navbar_tests.js
+113 -110
View File
@@ -27,7 +27,7 @@ QUnit.module("Navbar", {
serviceRegistry.add("notification", notificationService);
serviceRegistry.add("hotkey", hotkeyService);
serviceRegistry.add("ui", uiService);
systrayRegistry.add("addon.myitem", MySystrayItem);
systrayRegistry.add("addon.myitem", { Component: MySystrayItem });
patchWithCleanup(browser, {
setTimeout: (handler, delay, ...args) => handler(...args),
clearTimeout: () => {},
@@ -154,10 +154,10 @@ QUnit.test("navbar can display systray items ordered based on their sequence", a
MyItem4.template = xml`<li class="my-item-4">my item 4</li>`;
clearRegistryWithCleanup(systrayRegistry);
systrayRegistry.add("addon.myitem2", MyItem2);
systrayRegistry.add("addon.myitem1", MyItem1, { sequence: 0 });
systrayRegistry.add("addon.myitem3", MyItem3, { sequence: 100 });
systrayRegistry.add("addon.myitem4", MyItem4);
systrayRegistry.add("addon.myitem2", { Component: MyItem2 });
systrayRegistry.add("addon.myitem1", { Component: MyItem1 }, { sequence: 0 });
systrayRegistry.add("addon.myitem3", { Component: MyItem3 }, { sequence: 100 });
systrayRegistry.add("addon.myitem4", { Component: MyItem4 });
const env = await makeTestEnv(baseConfig);
const target = getFixture();
const navbar = await mount(NavBar, { env, target });
@@ -202,11 +202,7 @@ QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
3,
"should have 3 menu sections displayed (that are not the 'more' menu)"
);
assert.containsNone(
navbar.el,
".o_menu_sections_more",
"the 'more' menu should not exist"
);
assert.containsNone(navbar.el, ".o_menu_sections_more", "the 'more' menu should not exist");
// Force minimal width and dispatch window resize event
navbar.el.style.width = "0%";
window.dispatchEvent(new Event("resize"));
@@ -238,11 +234,7 @@ QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
3,
"should have 3 menu sections displayed (that are not the 'more' menu)"
);
assert.containsNone(
navbar.el,
".o_menu_sections_more",
"the 'more' menu should not exist"
);
assert.containsNone(navbar.el, ".o_menu_sections_more", "the 'more' menu should not exist");
// Check the navbar adaptation calls
assert.verifySteps([
"adapt -> hide 0/3 sections",
@@ -252,104 +244,115 @@ QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
navbar.destroy();
});
QUnit.test("'more' menu sections adaptations do not trigger render in some cases", async (assert) => {
let adaptRunning = false;
let adaptCount = 0;
let adaptRenderCount = 0;
class MyNavbar extends NavBar {
async adapt() {
adaptRunning = true;
adaptCount++;
await super.adapt();
adaptRunning = false;
}
async render() {
if (adaptRunning) {
adaptRenderCount++;
QUnit.test(
"'more' menu sections adaptations do not trigger render in some cases",
async (assert) => {
let adaptRunning = false;
let adaptCount = 0;
let adaptRenderCount = 0;
class MyNavbar extends NavBar {
async adapt() {
adaptRunning = true;
adaptCount++;
await super.adapt();
adaptRunning = false;
}
async render() {
if (adaptRunning) {
adaptRenderCount++;
}
await super.render(...arguments);
}
await super.render(...arguments);
}
const newMenus = {
root: { id: "root", children: [1], name: "root", appID: "root" },
1: { id: 1, children: [11, 12, 13], name: "App1", appID: 1 },
11: { id: 11, children: [], name: "Section 1", appID: 1 },
12: { id: 12, children: [], name: "Section 2", appID: 1 },
13: { id: 13, children: [], name: "Section 3", appID: 1 },
};
baseConfig.serverData.menus = newMenus;
// Force the parent width, to make this test independent of screen size
const target = getFixture();
target.style.width = "600px";
const env = await makeTestEnv(baseConfig);
const navbar = await mount(MyNavbar, { env, target });
assert.strictEqual(navbar.currentAppSections.length, 0, "0 app sub menus");
assert.strictEqual(navbar.el.offsetWidth, 600);
assert.strictEqual(adaptCount, 1);
assert.strictEqual(
adaptRenderCount,
0,
"during adapt, render not triggered as the navbar has no app sub menus"
);
// Force minimal width and dispatch window resize event
navbar.el.style.width = "0%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(navbar.el.offsetWidth, 0);
assert.strictEqual(adaptCount, 2);
assert.strictEqual(
adaptRenderCount,
0,
"during adapt, render not triggered as the navbar has no app sub menus"
);
// Set menu
env.services.menu.setCurrentMenu(1);
await nextTick();
assert.strictEqual(navbar.currentAppSections.length, 3, "3 app sub menus");
assert.strictEqual(
navbar.currentAppSectionsExtra.length,
3,
"all app sub menus are inside the more menu"
);
assert.strictEqual(adaptCount, 3);
assert.strictEqual(
adaptRenderCount,
1,
"during adapt, render triggered as the navbar does not have enough space for app sub menus"
);
// Force 40% width and dispatch window resize event
navbar.el.style.width = "40%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(
navbar.currentAppSectionsExtra.length,
3,
"all app sub menus are STILL inside the more menu"
);
assert.strictEqual(adaptCount, 4);
assert.strictEqual(
adaptRenderCount,
1,
"during adapt, render not triggered as the more menu dropdown is STILL the same"
);
// Reset to full width and dispatch window resize event
navbar.el.style.width = "100%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(navbar.currentAppSections.length, 3, "still 3 app sub menus");
assert.strictEqual(
navbar.currentAppSectionsExtra.length,
0,
"all app sub menus are NO MORE inside the more menu"
);
assert.strictEqual(adaptCount, 5);
assert.strictEqual(
adaptRenderCount,
2,
"during adapt, render triggered as the more menu dropdown is NO MORE the same"
);
navbar.destroy();
}
const newMenus = {
root: { id: "root", children: [1], name: "root", appID: "root" },
1: { id: 1, children: [11, 12, 13], name: "App1", appID: 1 },
11: { id: 11, children: [], name: "Section 1", appID: 1 },
12: { id: 12, children: [], name: "Section 2", appID: 1 },
13: { id: 13, children: [], name: "Section 3", appID: 1 },
};
baseConfig.serverData.menus = newMenus;
// Force the parent width, to make this test independent of screen size
const target = getFixture();
target.style.width = "600px";
const env = await makeTestEnv(baseConfig);
const navbar = await mount(MyNavbar, { env, target });
assert.strictEqual(navbar.currentAppSections.length, 0, "0 app sub menus");
assert.strictEqual(navbar.el.offsetWidth, 600);
assert.strictEqual(adaptCount, 1);
assert.strictEqual(
adaptRenderCount, 0,
"during adapt, render not triggered as the navbar has no app sub menus"
);
// Force minimal width and dispatch window resize event
navbar.el.style.width = "0%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(navbar.el.offsetWidth, 0);
assert.strictEqual(adaptCount, 2);
assert.strictEqual(
adaptRenderCount, 0,
"during adapt, render not triggered as the navbar has no app sub menus"
);
// Set menu
env.services.menu.setCurrentMenu(1);
await nextTick();
assert.strictEqual(navbar.currentAppSections.length, 3, "3 app sub menus");
assert.strictEqual(
navbar.currentAppSectionsExtra.length, 3,
"all app sub menus are inside the more menu"
);
assert.strictEqual(adaptCount, 3);
assert.strictEqual(
adaptRenderCount, 1,
"during adapt, render triggered as the navbar does not have enough space for app sub menus"
);
// Force 40% width and dispatch window resize event
navbar.el.style.width = "40%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(
navbar.currentAppSectionsExtra.length, 3,
"all app sub menus are STILL inside the more menu"
);
assert.strictEqual(adaptCount, 4);
assert.strictEqual(
adaptRenderCount, 1,
"during adapt, render not triggered as the more menu dropdown is STILL the same"
);
// Reset to full width and dispatch window resize event
navbar.el.style.width = "100%";
window.dispatchEvent(new Event("resize"));
await nextTick();
assert.strictEqual(navbar.currentAppSections.length, 3, "still 3 app sub menus");
assert.strictEqual(
navbar.currentAppSectionsExtra.length, 0,
"all app sub menus are NO MORE inside the more menu"
);
assert.strictEqual(adaptCount, 5);
assert.strictEqual(
adaptRenderCount, 2,
"during adapt, render triggered as the more menu dropdown is NO MORE the same"
);
navbar.destroy();
});
);
QUnit.test("'more' menu sections properly updated on app change", async (assert) => {
const newMenus = {