refactoring: implement actionmanager, and router

So we now have a working SPA!
This commit is contained in:
Géry Debongnie
2019-01-24 10:58:46 +01:00
parent 443f5e210c
commit c6b83b1aed
10 changed files with 193 additions and 144 deletions
+9 -10
View File
@@ -1,14 +1,13 @@
import { Widget } from "../core/widget";
import { Action } from "../services/actions";
import { Env } from "../env";
import { Env, Menu } from "../env";
const template = `
<div class="o_navbar">
<span class="title">Odoo</span>
<ul>
<li t-foreach="env.actions" t-as="action">
<a t-on-click="activateAction(action)" t-att-href="getUrl(action)">
<t t-esc="action.title"/>
<li t-foreach="env.menus" t-as="menu">
<a t-on-click="activateMenu(menu)" t-att-href="getUrl(menu)">
<t t-esc="menu.title"/>
</a>
</li>
</ul>
@@ -19,13 +18,13 @@ export class Navbar extends Widget<Env> {
name = "navbar";
template = template;
getUrl(action: Action) {
const action_id = String(action.id);
return this.env.router.formatURL("web", { action_id });
getUrl(menu: Menu) {
const action_id = String(menu.actionID);
return this.env.router.formatURL("", { action_id });
}
activateAction(action: Action, event: MouseEvent) {
activateMenu(menu: Menu, event: MouseEvent) {
event.preventDefault();
this.env.actionManager.doAction(action);
this.env.actionManager.doAction(menu.actionID);
}
}
+39 -34
View File
@@ -1,13 +1,13 @@
import { Widget } from "../core/widget";
import { Navbar } from "./navbar";
import { Action } from "../services/actions";
import { ActionWidget } from "../services/action_manager";
// import { Action } from "../services/actions";
import { Env } from "../env";
const template = `
<div class="o_web_client">
<t t-widget="Navbar"/>
<div class="o_content">
<t t-widget="Content"/>
<div class="o_content" t-ref="content">
</div>
</div>
`;
@@ -16,39 +16,44 @@ export class RootWidget extends Widget<Env> {
name = "root";
template = template;
widgets = { Navbar };
constructor(env: Env) {
super(env);
this.setMainWidget();
}
content: Widget<Env> | null = null;
mounted() {
this.env.router.register(this, this.onUrlChange);
}
setMainWidget() {
const action = this.getAction();
(<any>this.widgets).Content = action.Widget;
}
onUrlChange() {
this.setMainWidget();
// notice that this can only be safely done because the root widget is
// mounted now.
this.render();
}
getAction(): Action {
const routeInfo = this.env.router.getRoute();
const actionID = parseInt(routeInfo.query.action_id);
let actions: Action[] = this.env.actions;
let action = actions.find(a => a.id === actionID);
if (!action) {
action = actions.find(a => a.default === true);
if (!action) {
throw new Error("No valid action!");
}
this.env.actionManager.on("action_ready", this, this.setContentWidget);
const actionWidget = this.env.actionManager.getCurrentAction();
if (actionWidget) {
this.setContentWidget(actionWidget);
}
return action;
}
async setContentWidget(actionWidget: ActionWidget) {
const currentWidget = this.content;
const newWidget = new actionWidget.Widget(this, actionWidget.props);
await newWidget.mount(<HTMLElement>this.refs.content);
if (currentWidget) {
currentWidget.destroy();
}
this.content = newWidget;
}
// onUrlChange() {
// this.setMainWidget();
// // notice that this can only be safely done because the root widget is
// // mounted now.
// this.render();
// }
// getAction(): Action {
// const routeInfo = this.env.router.getRoute();
// const actionID = parseInt(routeInfo.query.action_id);
// let actions: Action[] = this.env.actions;
// let action = actions.find(a => a.id === actionID);
// if (!action) {
// action = actions.find(a => a.default === true);
// if (!action) {
// throw new Error("No valid action!");
// }
// }
// return action;
// }
}