preliminary work for better menu support

This commit is contained in:
Géry Debongnie
2019-02-03 14:14:09 +01:00
parent e1bdce57ee
commit 34475a5002
4 changed files with 193 additions and 12 deletions
+120 -3
View File
@@ -3,12 +3,129 @@
<head>
<meta charset="utf-8">
<title>Odoo Web Core Demo</title>
<script src="/static/libs/almond/almond.js"></script>
<script src="/main.js"></script>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/app.css">
<!-- Bootstrap... This sucks. -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- AMD module system -->
<script src="/static/libs/almond/almond.js"></script>
<!-- Application JS/CSS -->
<script src="/main.js"></script>
<link rel="stylesheet" href="/app.css">
<script>
window.odoo = {};
odoo.menus = [
{
id: 96,
name: "Discuss",
parent_id: false,
action: "ir.actions.client,131",
icon: "fa fa-comment",
children: [
{
id: 97,
name: "Integrations",
parent_id: 96,
action: false,
icon: false,
children: [
{
id: 188,
name: "Github Repositories",
parent_id: 97,
action: "ir.actions.act_window,233",
icon: false,
children: []
}
]
}
]
},
{
id: 205,
name: "Notes",
parent_id: false,
action: "ir.actions.act_window,250",
icon: "fa fa-pen",
children: []
},
{
id: 409,
name: "CRM",
parent_id: false,
action: "ir.actions.act_window,597",
icon: "fa fa-handshake",
children: [
{
id: 418,
name: "Sales",
parent_id: 409,
action: false,
icon: false,
children: [
{
id: 423,
name: "My Pipeline",
parent_id: 418,
action: "ir.actions.act_window,597",
icon: false,
children: []
},
{
id: 812,
name: "My Quotations",
parent_id: 418,
action: "ir.actions.act_window,1051",
icon: false,
children: []
},
{
id: 419,
name: "Team Pipelines",
parent_id: 418,
action: "ir.actions.act_window,275",
icon: false,
children: []
}
]
},
{
id: 421,
name: "Leads",
parent_id: 409,
action: false,
icon: false,
children: [
{
id: 422,
name: "Leads",
parent_id: 421,
action: "ir.actions.act_window,595",
icon: false,
children: []
},
{
id: 752,
name: "Scoring Rules",
parent_id: 421,
icon: false,
action: "ir.actions.act_window,1083",
children: []
}
]
}
]
}
];
require('main');
</script>
</head>
+12 -2
View File
@@ -3,6 +3,7 @@
import { debounce } from "./core/utils";
import { makeEnvironment } from "./env";
import { Root } from "./widgets/root";
import { MenuItem, processMenuItems } from "./misc/menu_helpers";
//------------------------------------------------------------------------------
// Application bootstrapping
@@ -10,9 +11,18 @@ import { Root } from "./widgets/root";
document.addEventListener("DOMContentLoaded", async function() {
const env = await makeEnvironment();
const rootWidget = new Root(env);
await rootWidget.mount(document.body);
// menu processing
const menuItems: MenuItem[] = (<any>window).odoo.menus;
const menuInfo = processMenuItems(menuItems);
delete (<any>window).odoo.menus; // overkill?
// creating root widget
const rootWidget = new Root(env, { menuInfo });
await rootWidget.mount(document.body);
(<any>window).odoo.rootWidget = rootWidget;
// adding reactiveness to mobile/non mobile
window.addEventListener("resize", <any>debounce(() => {
const isMobile = window.innerWidth <= 768;
if (isMobile !== env.isMobile) {
+54
View File
@@ -0,0 +1,54 @@
//------------------------------------------------------------------------------
// Types
//------------------------------------------------------------------------------
export interface BaseMenuItem {
id: number;
name: string;
parent_id: number | false;
action: string | false;
icon: string | false;
}
export interface MenuItem extends BaseMenuItem {
children: MenuItem[];
}
export interface ProcessedMenuItem extends BaseMenuItem {
children: number[];
}
export interface MenuInfo {
menuMap: { [key: number]: ProcessedMenuItem | undefined };
roots: number[];
}
//------------------------------------------------------------------------------
// Helpers
//------------------------------------------------------------------------------
export function processMenuItems(items: MenuItem[]): MenuInfo {
const menuMap: MenuInfo["menuMap"] = {};
const roots: number[] = [];
for (let root of items) {
roots.push(root.id);
addToMap(root);
}
function addToMap(m: MenuItem) {
let processedItem: ProcessedMenuItem = Object.assign({}, m, {
children: m.children.map(c => c.id)
});
menuMap[processedItem.id] = processedItem;
m.children.forEach(addToMap);
}
return { menuMap, roots };
}
// todo
// menu -> formatURL(menuID, menus),
// findApp(menuID, menus),
// findMenu
+7 -7
View File
@@ -1,7 +1,8 @@
import { INotification } from "../core/notifications";
import { Widget } from "../core/widget";
import { Env } from "../env";
import { MenuInfo } from "../misc/menu_helpers";
import { ActionStack } from "../services/action_manager";
import { INotification } from "../core/notifications";
import { ActionContainer } from "./action_container";
import { HomeMenu } from "./home_menu";
import { Navbar } from "./navbar";
@@ -17,11 +18,15 @@ interface State {
inHome: boolean;
}
interface Props {
menuInfo: MenuInfo;
}
//------------------------------------------------------------------------------
// Root Widget
//------------------------------------------------------------------------------
export class Root extends Widget<Env, {}> {
export class Root extends Widget<Env, Props> {
template = "web.web_client";
widgets = { Navbar, Notification, HomeMenu, ActionContainer };
@@ -31,11 +36,6 @@ export class Root extends Widget<Env, {}> {
inHome: false
};
constructor(env: Env) {
super(env);
this.toggleHome = this.toggleHome.bind(this);
}
mounted() {
this.env.notifications.on("notifications_updated", this, notifs =>
this.updateState({ notifications: notifs })