display notifications in a declarative way

web/static/src/ts/env.ts

@@ -1,7 +1,7 @@
 import { WEnv } from "./core/component";
 import { QWeb } from "./core/qweb_vdom";
 import { idGenerator } from "./core/utils";
-import { INotification, RPC, Services, Store } from "./store/store";
+import { Notification, RPC, Services, Store } from "./store/store";
 
 //------------------------------------------------------------------------------
 // Types
@@ -12,7 +12,7 @@ export interface Env extends WEnv {
 
   // commands
   activateMenuItem(menuId: number): void;
-  addNotification(notif: Partial<INotification>): number;
+  addNotification(notif: Partial<Notification>): number;
   closeNotification(id: number): void;
   toggleHomeMenu(): void;
 

web/static/src/ts/store/notification_mixin.ts

@@ -1,37 +0,0 @@
-import { Type } from "../core/component";
-import { BaseStore } from "./store";
-
-//------------------------------------------------------------------------------
-// Notifications Mixin
-//------------------------------------------------------------------------------
-export interface INotification {
-  id: number;
-  title: string;
-  message: string;
-  type: "notification" | "warning";
-  sticky: boolean;
-}
-
-export function notificationMixin<T extends Type<BaseStore>>(Base: T) {
-  return class extends Base {
-    addNotification(notif: Partial<INotification>): number {
-      const id = this.generateID();
-      const defaultVals = {
-        title: "",
-        message: "",
-        type: "notification",
-        sticky: false
-      };
-      const notification = Object.assign(defaultVals, notif, { id });
-      this.trigger("notification_added", notification);
-      if (!notification.sticky) {
-        setTimeout(() => this.closeNotification(id), 2500);
-      }
-      return id;
-    }
-
-    closeNotification(id: number) {
-      this.trigger("notification_closed", id);
-    }
-  };
-}

web/static/src/ts/store/store.ts

@@ -4,7 +4,6 @@ import { idGenerator } from "../core/utils";
 import { RPC } from "../services/ajax";
 import { IRouter, Query } from "../services/router";
 import { actionManagerMixin, ActionWidget } from "./action_manager_mixin";
-import { notificationMixin } from "./notification_mixin";
 import { rpcMixin } from "./rpc_mixin";
 import { MenuItem } from "./store";
 
@@ -13,7 +12,6 @@ import { MenuItem } from "./store";
 //------------------------------------------------------------------------------
 
 export { ActionWidget } from "./action_manager_mixin";
-export { INotification } from "./notification_mixin";
 export { RPC } from "./rpc_mixin";
 
 export interface MenuItem {
@@ -39,6 +37,7 @@ export interface MenuInfo {
 export interface State {
   inHome: boolean;
   currentApp: MenuItem | null;
+  notifications: Notification[];
 }
 
 export interface Services {
@@ -46,13 +45,22 @@ export interface Services {
   router: IRouter;
 }
 
+export interface Notification {
+  id: number;
+  title: string;
+  message: string;
+  type: "notification" | "warning";
+  sticky: boolean;
+}
+
 //------------------------------------------------------------------------------
 // Store
 //------------------------------------------------------------------------------
 export class BaseStore extends EventBus {
   state: State = {
     inHome: false,
-    currentApp: null
+    currentApp: null,
+    notifications: []
   };
   menuInfo: MenuInfo;
   services: Services;
@@ -93,11 +101,31 @@ export class BaseStore extends EventBus {
     this.currentQuery = query;
     this.services.router.navigate(query);
   }
+
+  addNotification(notif: Partial<Notification>): number {
+    const id = this.generateID();
+    const defaultVals = {
+      title: "",
+      message: "",
+      type: "notification",
+      sticky: false
+    };
+    const notification = Object.assign(defaultVals, notif, { id });
+    const notifs = this.state.notifications.concat(notification);
+    this.update({ notifications: notifs });
+    if (!notification.sticky) {
+      setTimeout(() => this.closeNotification(id), 2500);
+    }
+    return id;
+  }
+
+  closeNotification(id: number) {
+    const notifs = this.state.notifications.filter(n => n.id !== id);
+    this.update({ notifications: notifs });
+  }
 }
 
-export class Store extends actionManagerMixin(
-  rpcMixin(notificationMixin(BaseStore))
-) {
+export class Store extends actionManagerMixin(rpcMixin(BaseStore)) {
   constructor(
     services: Services,
     menuInfo: MenuInfo,

web/static/src/ts/ui/notification.ts

@@ -1,4 +1,4 @@
-import { INotification } from "../store/store";
+import { Notification as INotification } from "../store/store";
 import { Widget } from "./widget";
 
 export class Notification extends Widget<INotification, {}> {

web/static/src/ts/ui/root.ts

@@ -13,9 +13,8 @@ import { Action } from "../store/action_manager_mixin";
 
 export class Root extends Widget<Store, State> {
   template = "web.web_client";
-  widgets = { Navbar, HomeMenu };
+  widgets = { Navbar, HomeMenu, Notification };
 
-  notifications: { [id: number]: Notification } = {};
   store: Store;
 
   constructor(env: Env, store: Store) {
@@ -23,22 +22,12 @@ export class Root extends Widget<Store, State> {
     this.store = store;
     this.state = store.state;
   }
+
   mounted() {
     this.store.on("state_updated", this, newState => {
       this.updateState(newState);
     });
 
-    // notifications
-    this.store.on("notification_added", this, notif => {
-      const notification = new Notification(this, notif);
-      this.notifications[notif.id] = notification;
-      notification.mount(<any>this.refs.notification_container);
-    });
-    this.store.on("notification_closed", this, id => {
-      this.notifications[id].destroy();
-      delete this.notifications[id];
-    });
-
     // loading indicator
     this.store.on("rpc_status", this, status => {
       const method = status === "loading" ? "remove" : "add";

web/static/src/xml/templates.xml

@@ -5,7 +5,11 @@
     <t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" />
     <t t-widget="HomeMenu" t-if="state.inHome" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" />
     <div class="o_content" t-att-class="state.inHome ? 'o_hidden' : ''" t-ref="content"/>
-    <div class="o_notification_container" t-ref="notification_container"/>
+    <div class="o_notification_container">
+      <t t-foreach="state.notifications" t-as="notif">
+        <t t-widget="Notification" t-props="notif"/>
+      </t>
+    </div>
     <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
   </div>