NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

small refactoring...

Browse Source
This commit is contained in:
Géry Debongnie
2019-01-31 13:19:30 +01:00
parent bac075dbbd
commit 92bea3df52
17 changed files with 199 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/src/ts/core/Widget.ts
+3 -1
View File
@@ -7,6 +7,7 @@ import { QWeb } from "./qweb_vdom";
//------------------------------------------------------------------------------
// Types/helpers
//------------------------------------------------------------------------------
export interface WEnv {
qweb: QWeb;
getID(): number;
@@ -35,6 +36,7 @@ const patch = init([sdListeners, sdAttrs]);
//------------------------------------------------------------------------------
// Widget
//------------------------------------------------------------------------------
export class Widget<T extends WEnv, Props> {
__widget__: Meta<WEnv>;
name: string = "widget";
@@ -53,7 +55,7 @@ export class Widget<T extends WEnv, Props> {
// Lifecycle
//--------------------------------------------------------------------------
constructor(parent: Widget<T, {}> | T, props?: Props) {
constructor(parent: Widget<T, any> | T, props?: Props) {
wl.push(this);
// is this a good idea?
// Pro: if props is empty, we can create easily a widget
web/static/src/ts/core/event_bus.ts
+1
View File
@@ -20,6 +20,7 @@ export interface Subscription {
//------------------------------------------------------------------------------
// EventBus
//------------------------------------------------------------------------------
export class EventBus {
private subscriptions: { [eventType: string]: Subscription[] } = {};
web/static/src/ts/core/qweb_vdom.ts
+3
View File
@@ -17,6 +17,7 @@ const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in
//------------------------------------------------------------------------------
// Compilation Context
//------------------------------------------------------------------------------
export class Context {
nextID: number = 1;
code: string[] = [];
@@ -98,6 +99,7 @@ export class Context {
//------------------------------------------------------------------------------
// QWeb rendering engine
//------------------------------------------------------------------------------
export class QWeb {
rawTemplates: { [name: string]: RawTemplate } = {};
parsedTemplates: { [name: string]: ParsedTemplate } = {};
@@ -461,6 +463,7 @@ export class QWeb {
//------------------------------------------------------------------------------
// QWeb Directives
//------------------------------------------------------------------------------
interface CompilationInfo {
nodeID?: number;
node: Element;
web/static/src/ts/main.ts
+6 -2
View File
@@ -1,19 +1,23 @@
///<amd-module name="main" />
import { debounce } from "./core/utils";
import { makeEnvironment } from "./env";
import { registry } from "./registry";
import { Discuss } from "./widgets/discuss";
import { Root } from "./root";
import { debounce } from "./core/utils";
import { CRM } from "./widgets/crm";
import { Discuss } from "./widgets/discuss";
//------------------------------------------------------------------------------
// Prepare application registry
//------------------------------------------------------------------------------
registry.add("action", "discuss", Discuss);
registry.add("action", "crm", CRM);
//------------------------------------------------------------------------------
// Application bootstrapping
//------------------------------------------------------------------------------
document.addEventListener("DOMContentLoaded", async function() {
const env = makeEnvironment();
const rootWidget = new Root(env);
web/static/src/ts/registry.ts
+4
View File
@@ -23,6 +23,10 @@ export class Registry {
this.registries[type][name] = action;
return this;
}
getAction(name: string): ActionWidget {
return this.registries.action[name];
}
}
//------------------------------------------------------------------------------
web/static/src/ts/root.ts
+36 -46
View File
@@ -1,80 +1,70 @@
import { Widget } from "./core/widget";
import { Env } from "./env";
import { ActionStack } from "./services/action_manager";
import { INotification } from "./services/notifications";
import { Action } from "./widgets/action";
import { HomeMenu } from "./widgets/home_menu";
import { Navbar } from "./widgets/navbar";
import { Notification } from "./widgets/notification";
const template = `
<div class="o_web_client">
<t t-widget="Navbar" t-props="{toggleHomeMenu:toggleHomeMenu,inMenu:state.inMenu}"/>
<t t-if="state.inMenu">
<t t-widget="HomeMenu" t-props="{toggleHomeMenu:toggleHomeMenu}"/>
</t>
<t t-else="1">
<t t-widget="Action" t-keep-alive="1"/>
</t>
<div class="o_notification_container">
<t t-foreach="state.notifications" t-as="notif">
<t t-widget="Notification" t-props="notif"/>
</t>
</div>
</div>
`;
//------------------------------------------------------------------------------
// Types
//------------------------------------------------------------------------------
interface State {
notifications: INotification[];
stack: ActionStack;
inMenu: boolean;
}
//------------------------------------------------------------------------------
// Root Widget
//------------------------------------------------------------------------------
const template = `
<div class="o_web_client">
<t t-widget="Navbar" t-props="{toggleHome:toggleHome,inMenu:state.inMenu}"/>
<t t-if="state.inMenu">
<t t-widget="HomeMenu" t-keep-alive="1"/>
</t>
<t t-else="1">
<t t-widget="Action" t-props="{stack:state.stack}" t-keep-alive="1"/>
</t>
<div class="o_notification_container">
<t t-foreach="state.notifications" t-as="notif">
<t t-widget="Notification" t-props="notif"/>
</t>
</div>
</div>
`;
export class Root extends Widget<Env, {}> {
name = "root";
template = template;
widgets = { Navbar, Notification, HomeMenu, Action };
content: Widget<Env, {}> | null = null;
state: State = {
notifications: [],
stack: [],
inMenu: false
};
constructor(env: Env) {
super(env);
this.toggleHomeMenu = this.toggleHomeMenu.bind(this);
this.toggleHome = this.toggleHome.bind(this);
}
mounted() {
// this.env.actionManager.on("action_ready", this, this.setContentWidget);
this.env.notifications.on("notification_added", this, this.addNotif);
this.env.notifications.on("notification_removed", this, this.removeNotif);
// const actionWidget = this.env.actionManager.getCurrentAction();
// if (actionWidget) {
// this.setContentWidget(actionWidget);
// }
this.env.notifications.on("notifications_updated", this, notifs =>
this.updateState({ notifications: notifs })
);
this.env.actionManager.on("action_stack_updated", this, stack =>
this.updateState({ stack })
);
this.env.actionManager.activate();
}
// 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;
// }
addNotif(notif: INotification) {
const notifications = this.state.notifications.concat(notif);
this.updateState({ notifications });
}
removeNotif(notif: INotification) {
const notifs = this.state.notifications.filter(f => f.id !== notif.id);
this.updateState({ notifications: notifs });
}
toggleHomeMenu() {
toggleHome() {
this.updateState({ inMenu: !this.state.inMenu });
}
}
web/static/src/ts/services/action_manager.ts
+54 -53
View File
@@ -1,47 +1,50 @@
import { Callback, EventBus } from "../core/event_bus";
import { EventBus } from "../core/event_bus";
import { Widget } from "../core/widget";
import { Env } from "../env";
import { Registry } from "../registry";
import { Type } from "../types";
import { CRM } from "../widgets/crm";
import { Discuss } from "../widgets/discuss";
import { IRouter, Query } from "./router";
//------------------------------------------------------------------------------
// Types
//------------------------------------------------------------------------------
export interface ClientAction {
export type ActionRequest = string | number;
export type Context = { [key: string]: any };
export interface CommonActionInfo {
id: number;
context: Context;
title: string;
target: "current" | "new";
}
export interface ClientActionInfo extends CommonActionInfo {
type: "client";
name: string;
Widget: Type<Widget<Env, {}>>;
}
export interface ActWindowAction {
export interface ActWindowInfo extends CommonActionInfo {
type: "act_window";
views: string[];
view: string;
}
export type ActionEvent = "action_ready";
export type ActionInfo = ClientActionInfo | ActWindowInfo;
export type ActionStack = ActionInfo[];
export type ActionEvent = "action_stack_updated";
type Callback = (stack: ActionStack) => void;
export interface IActionManager {
doAction(actionID: number): void;
activate(): void;
doAction(request: ActionRequest): void;
on(event: ActionEvent, owner: any, callback: Callback): void;
getCurrentAction(): ActionWidget | null;
getStack(): ActionStack;
}
export type Action = ClientAction | ActWindowAction;
export interface ActionWidget {
id: number;
Widget: Type<Widget<Env, {}>>;
props: any;
}
const actions: any[] = [
{ id: 1, title: "Discuss", Widget: Discuss, default: true },
{ id: 2, title: "CRM", Widget: CRM }
];
//------------------------------------------------------------------------------
// Action Manager
//------------------------------------------------------------------------------
@@ -49,49 +52,47 @@ const actions: any[] = [
export class ActionManager extends EventBus implements IActionManager {
router: IRouter;
registry: Registry;
currentAction: ActionWidget | null = null;
stack: ActionStack;
constructor(router: IRouter, registry: Registry) {
super();
this.router = router;
this.registry = registry;
const query = this.router.getQuery();
this.update(query);
this.stack = [];
}
activate() {
this.router.on("query_changed", this, this.update);
if (!this.currentAction) {
const action = actions.find(a => a.default);
if (action) {
this.doAction(action.id);
}
this.update(this.router.getQuery());
}
doAction(request: ActionRequest) {
if (typeof request === "number") {
// this is an action ID
let name = request === 1 ? 'discuss' : 'crm';
let title = request === 1 ? 'Discuss': 'CRM';
let Widget = this.registry.getAction(name);
this.stack = [
{
id: 1,
context: {},
target: "current",
type: "client",
name,
title,
Widget: Widget
}
];
this.trigger("action_stack_updated", this.stack);
}
}
getStack(): ActionStack {
return [];
}
update(query: Query) {
const initialAction = this.currentAction;
if ("action_id" in query) {
const actionID = parseInt(query.action_id);
this.doAction(actionID);
}
if (this.currentAction && initialAction !== this.currentAction) {
}
}
doAction(actionID: number) {
const action = actions.find(a => a.id === actionID);
if (action) {
this.currentAction = {
id: action.id,
Widget: action.Widget,
props: {}
};
}
this.trigger("action_ready", this.currentAction);
this.router.navigate({ action_id: String(actionID) });
}
registerAction(action: Action) {}
getCurrentAction(): ActionWidget | null {
return this.currentAction;
}
}
web/static/src/ts/services/ajax.ts
+8
View File
@@ -1,3 +1,7 @@
//------------------------------------------------------------------------------
// Types
//------------------------------------------------------------------------------
export interface RPCQuery {
model: string;
method: string;
@@ -7,6 +11,10 @@ export interface IAjax {
rpc(rpc: RPCQuery): Promise<any>;
}
//------------------------------------------------------------------------------
// Ajax
//------------------------------------------------------------------------------
export class Ajax implements IAjax {
rpc(rpc: RPCQuery): Promise<any> {
return Promise.resolve(1);
web/static/src/ts/services/notifications.ts
+8 -10
View File
@@ -12,9 +12,9 @@ export interface INotification {
sticky: boolean;
}
export type NotificationEvent = "notification_added" | "notification_removed";
export type NotificationEvent = "notifications_updated";
export type Callback = (notif: INotification) => void;
export type Callback = (notifs: INotification[]) => void;
export interface INotificationManager {
add(notif: Partial<INotification>): number;
@@ -25,9 +25,10 @@ export interface INotificationManager {
//------------------------------------------------------------------------------
// Notification Manager
//------------------------------------------------------------------------------
export class NotificationManager extends Bus implements INotificationManager {
nextID = 1;
notifications: { [key: number]: INotification } = {};
notifications: INotification[] = [];
add(notif: Partial<INotification>): number {
const id = this.nextID++;
@@ -38,18 +39,15 @@ export class NotificationManager extends Bus implements INotificationManager {
sticky: false
};
const notification = Object.assign(defaultVals, notif, { id });
this.notifications[id] = notification;
this.trigger("notification_added", notification);
this.notifications.push(notification);
this.trigger("notifications_updated", this.notifications);
if (!notification.sticky) {
setTimeout(() => this.close(id), 2500);
}
return id;
}
close(id: number) {
let notification = this.notifications[id];
if (notification) {
delete this.notifications[id];
this.trigger("notification_removed", notification);
}
this.notifications = this.notifications.filter(n => n.id !== id);
this.trigger("notifications_updated", this.notifications);
}
}
web/static/src/ts/services/router.ts
+2
View File
@@ -3,6 +3,7 @@ import { EventBus, Callback } from "../core/event_bus";
//------------------------------------------------------------------------------
// Types and helpers
//------------------------------------------------------------------------------
export type Query = { [key: string]: string };
function clearSlashes(s: string): string {
@@ -21,6 +22,7 @@ export interface IRouter {
//------------------------------------------------------------------------------
// Router
//------------------------------------------------------------------------------
export class Router extends EventBus implements IRouter {
currentQuery: Query;
web/static/src/ts/widgets/Action.ts
+32 -10
View File
@@ -1,14 +1,36 @@
import { Widget } from "../core/widget";
import { Env } from "../env";
import { ActionStack } from "../services/action_manager";
const template = `
<div class="o_content">
<span>MAIN ACTION</span>
<input/>
</div>
`;
export class Action extends Widget<Env, {}> {
name = "action";
template = template;
export interface Props {
stack: ActionStack;
}
export class Action extends Widget<Env, Props> {
name = "action";
template = `<div class="o_content"/>`;
currentWidget: any;
mounted() {
this.setContentWidget();
}
shouldUpdate(nextProps: Props) {
this.props = nextProps;
this.setContentWidget();
return false;
}
async setContentWidget() {
const info = this.props.stack[this.props.stack.length - 1];
if (info && info.type === "client") {
const Widget = info.Widget;
let widget = new Widget(this, {});
await widget.mount(this.el!);
if (this.currentWidget) {
this.currentWidget.destroy();
}
this.currentWidget = widget;
}
}
}
web/static/src/ts/widgets/Navbar.ts
+5 -4
View File
@@ -3,19 +3,20 @@ import { Env, Menu } from "../env";
const template = `
<div class="o_navbar">
<a aria-label="Applications" class="o_title fa fa-th" href="#" title="Applications" accesskey="h" t-on-click="toggleHomeMenu"/>
<a aria-label="Applications" class="o_title fa fa-th" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
<ul t-if="!props.inMenu">
<li t-foreach="env.menus" t-as="menu">
<a t-att-href="getUrl(menu)">
<t t-esc="menu.title"/>
</a>
</li>
<li t-if="env.isMobile">MOBILEMODE</li>
</ul>
</div>
`;
export interface Props {
toggleHomeMenu: () => void;
toggleHome: () => void;
inMenu: boolean;
}
@@ -28,8 +29,8 @@ export class Navbar extends Widget<Env, Props> {
return this.env.router.formatURL("", { action_id });
}
toggleHomeMenu(ev: MouseEvent) {
toggleHome(ev: MouseEvent) {
ev.preventDefault();
this.props.toggleHomeMenu();
this.props.toggleHome();
}
}
web/static/tests/helpers.ts
+4 -7
View File
@@ -5,11 +5,7 @@ import { Env } from "../src/ts/env";
import { IAjax, RPCQuery } from "../src/ts/services/ajax";
import { NotificationManager } from "../src/ts/services/notifications";
import {
IActionManager,
ActionEvent,
ActionWidget
} from "../src/ts/services/action_manager";
import { IActionManager, ActionEvent } from "../src/ts/services/action_manager";
import { Callback } from "../src/ts/core/event_bus";
import { IRouter, Query, RouterEvent } from "../src/ts/services/router";
@@ -55,8 +51,9 @@ class MockAjax implements IAjax {
class MockActionManager implements IActionManager {
doAction(actionID: number) {}
on(event: ActionEvent, owner: any, callback: Callback) {}
getCurrentAction(): ActionWidget | null {
return null;
activate() {}
getStack() {
return [];
}
}
web/static/tests/services/notifications.test.ts
+20 -17
View File
@@ -1,51 +1,54 @@
import { NotificationManager } from "../../src/ts/services/notifications";
import {
NotificationManager,
INotification
} from "../../src/ts/services/notifications";
test("can subscribe and add notification", () => {
let notified = false;
let notifs: INotification[] = [];
const notifications = new NotificationManager();
notifications.on("notification_added", {}, () => (notified = true));
expect(notified).toBe(false);
notifications.on("notifications_updated", {}, n => (notifs = n));
expect(notifs.length).toBe(0);
const id = notifications.add({ title: "test", message: "message" });
expect(notified).toBe(true);
expect(notifs.length).toBe(1);
expect(id).toBeDefined();
});
test("can close a notification", () => {
let notifs: INotification[] = [];
const notifications = new NotificationManager();
let notified = false;
notifications.on("notification_removed", {}, () => (notified = true));
notifications.on("notifications_updated", {}, n => (notifs = n));
const id = notifications.add({ title: "test", message: "message" });
expect(notified).toBe(false);
expect(notifs.length).toBe(1);
notifications.close(id);
expect(notified).toBe(true);
expect(notifs.length).toBe(0);
});
test("notifications closes themselves after a while", () => {
jest.useFakeTimers();
let notifs: INotification[] = [];
const notifications = new NotificationManager();
let removed = false;
notifications.on("notification_removed", {}, () => (removed = true));
notifications.on("notifications_updated", {}, n => (notifs = n));
notifications.add({ title: "test", message: "message" });
expect(setTimeout).toHaveBeenCalledTimes(1);
expect(removed).toBe(false);
expect(notifs.length).toBe(1);
jest.runAllTimers();
expect(removed).toBe(true);
expect(notifs.length).toBe(0);
});
test("sticky notifications do not close themselves after a while", () => {
jest.useFakeTimers();
let notifs: INotification[] = [];
const notifications = new NotificationManager();
let removed = false;
notifications.on("notification_removed", {}, () => (removed = true));
notifications.on("notifications_updated", {}, n => (notifs = n));
notifications.add({ title: "test", message: "message", sticky: true });
expect(setTimeout).toHaveBeenCalledTimes(0);
expect(removed).toBe(false);
expect(notifs.length).toBe(1);
jest.runAllTimers();
expect(removed).toBe(false);
expect(notifs.length).toBe(1);
});
web/static/tests/widgets/__snapshots__/navbar.test.ts.snap
+3
View File
@@ -5,6 +5,7 @@ exports[`can be rendered 1`] = `
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
<ul>
</ul>
</div>"
`;
@@ -18,6 +19,7 @@ exports[`can render one menu item 1`] = `
menu
</a>
</li>
</ul>
</div>"
`;
@@ -27,6 +29,7 @@ exports[`mobile mode: navbar is different 1`] = `
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
<ul>
<li>MOBILEMODE</li>
</ul>
</div>"
`;
web/static/tests/widgets/navbar.test.ts
+1 -1
View File
@@ -13,7 +13,7 @@ let props: Props;
beforeEach(() => {
fixture = makeTestFixture();
env = makeTestEnv();
props = { inMenu: false, toggleHomeMenu: () => {} };
props = { inMenu: false, toggleHome: () => {} };
});
afterEach(() => {
web/static/tests/widgets/notification.test.ts
+9 -7
View File
@@ -42,19 +42,21 @@ test("can be rendered", async () => {
});
test("can be closed by clicking on it (if sticky)", async () => {
let notif: INotification;
let removed = false;
env.notifications.on("notification_added", null, _notif => (notif = _notif));
let notifs: INotification[] = [];
env.notifications.on(
"notifications_updated",
null,
_notifs => (notifs = _notifs)
);
env.notifications.add({
title: "title",
message: "message",
sticky: true
});
env.notifications.on("notification_removed", null, () => (removed = true));
const navbar = new Notification(env, notif!);
const navbar = new Notification(env, notifs[0]);
await navbar.mount(fixture);
expect(removed).toBe(false);
expect(notifs.length).toBe(1);
(<any>fixture.getElementsByClassName("o_close")[0]).click();
expect(removed).toBe(true);
expect(notifs.length).toBe(0);
});