display notifications instantly (imperative way)

web/static/src/ts/core/notifications.ts

@@ -12,14 +12,19 @@ export interface INotification {
   sticky: boolean;
 }
 
-export type NotificationEvent = "notifications_updated";
-
-export type Callback = (notifs: INotification[]) => void;
-
 export interface INotificationManager {
   add(notif: Partial<INotification>): number;
   close(id: number): void;
-  on(event: NotificationEvent, owner: any, callback: Callback): void;
+  on(
+    event: "notification_added",
+    owner: any,
+    callback: (notif: INotification) => void
+  ): void;
+  on(
+    event: "notification_closed",
+    owner: any,
+    callback: (id: number) => void
+  ): void;
 }
 
 //------------------------------------------------------------------------------
@@ -28,7 +33,6 @@ export interface INotificationManager {
 
 export class NotificationManager extends Bus implements INotificationManager {
   nextID = 1;
-  notifications: INotification[] = [];
 
   add(notif: Partial<INotification>): number {
     const id = this.nextID++;
@@ -39,15 +43,13 @@ export class NotificationManager extends Bus implements INotificationManager {
       sticky: false
     };
     const notification = Object.assign(defaultVals, notif, { id });
-    this.notifications.push(notification);
-    this.trigger("notifications_updated", this.notifications);
+    this.trigger("notification_added", notification);
     if (!notification.sticky) {
       setTimeout(() => this.close(id), 2500);
     }
     return id;
   }
   close(id: number) {
-    this.notifications = this.notifications.filter(n => n.id !== id);
-    this.trigger("notifications_updated", this.notifications);
+    this.trigger("notification_closed", id);
   }
 }

web/static/src/ts/widgets/root.ts

@@ -1,4 +1,3 @@
-import { INotification } from "../core/notifications";
 import { Query } from "../core/router";
 import { debounce } from "../core/utils";
 import { ActionStack } from "../services/action_manager";
@@ -37,7 +36,6 @@ export interface Props {
 }
 
 interface State {
-  notifications: INotification[];
   stack: ActionStack;
   inHome: boolean;
   currentApp: MenuItem | null;
@@ -49,15 +47,16 @@ interface State {
 
 export class Root extends Widget<Props, State> {
   template = "web.web_client";
-  widgets = { Navbar, Notification, HomeMenu, ActionContainer };
+  widgets = { Navbar, HomeMenu, ActionContainer };
 
   state: State = {
-    notifications: [],
     stack: [],
     inHome: false,
     currentApp: null
   };
 
+  notifications: { [id: number]: Notification } = {};
+
   constructor(env: Env, props: Props) {
     super(env, props);
     const query = this.env.router.getQuery();
@@ -69,9 +68,15 @@ export class Root extends Widget<Props, State> {
   }
   mounted() {
     // notifications
-    this.env.notifications.on("notifications_updated", this, notifs =>
-      this.updateState({ notifications: notifs })
-    );
+    this.env.notifications.on("notification_added", this, notif => {
+      const notification = new Notification(this, notif);
+      this.notifications[notif.id] = notification;
+      notification.mount(<any>this.refs.notification_container);
+    });
+    this.env.notifications.on("notification_closed", this, id => {
+      this.notifications[id].destroy();
+      delete this.notifications[id];
+    });
 
     // loading indicator
     this.env.ajax.on("rpc_status", this, status => {

web/static/src/xml/templates.xml

@@ -9,11 +9,7 @@
     <t t-else="1">
       <t t-widget="ActionContainer" 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 class="o_notification_container" t-ref="notification_container"/>
     <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
   </div>