[IMP] web: convert notification popup in service and add buttons params

this.call('web.Notification', 'notify', params)

Display a notification at the appropriate location, and returns the
reference id to the same widget. Note that this method does not wait
for the appendTo method to complete.

@param {Object} params
@param {string} params.title notification title
@param {string} params.message notification main message
@param {string} params.type 'notification' or 'warning'
@param {boolean} [params.sticky=false] if true, the notification will stay
  visible until the user clicks on it.
@param {string} [params.className] className to add on the dom
@param {function} [params.onClose] callback when the user click on the x
  or when the notification is auto close (no sticky)
@param {Array<Object>} params.buttons
@param {function} params.buttons[0].click callback on click
@param {Boolean} [params.buttons[0].primary] display the button as primary
@param {string} [params.buttons[0].text] button label
@param {string} [params.buttons[0].icon] font-awsome className or image src
@returns {Number} notification id

this.call('web.Notification', 'close', notificationId)

1 files changed, 59 insertions, 18 deletions

diff --git a/addons/web/static/src/js/widgets/notification.js b/addons/web/static/src/js/widgets/notification.js
index d05a0be380c..e9425144085 100644
--- a/addons/web/static/src/js/widgets/notification.js
+++ b/addons/web/static/src/js/widgets/notification.js
@@ -17,26 +17,45 @@ var Widget = require('web.Widget');
 var Notification = Widget.extend({
     template: 'Notification',
     events: {
-        'click .o_close': '_onClose',
+        'click > .o_close': '_onClose',
+        'click .o_buttons button': '_onClickButton'
     },
+    _autoCloseDelay: 2500,
+    _animationDelay: 400,
     /**
      * @override
      * @param {Widget} parent
      * @param {Object} params
      * @param {string} params.title notification title
-     * @param {string} params.text notification main text
+     * @param {string} params.message notification main message
      * @param {string} params.type 'notification' or 'warning'
      * @param {boolean} [params.sticky=false] if true, the notification will stay
      *   visible until the user clicks on it.
+     * @param {string} [params.className] className to add on the dom
+     * @param {function} [params.onClose] callback when the user click on the x
+     *   or when the notification is auto close (no sticky)
+     * @param {Object[]} params.buttons
+     * @param {function} params.buttons[0].click callback on click
+     * @param {boolean} [params.buttons[0].primary] display the button as primary
+     * @param {string} [params.buttons[0].text] button label
+     * @param {string} [params.buttons[0].icon] font-awsome className or image src
      */
     init: function (parent, params) {
         this._super.apply(this, arguments);
         this.title = params.title;
-        this.text = params.text;
-        this.sticky = !!params.sticky;
-        this.type = params.type;
+        this.message = params.message;
+        this.buttons = params.buttons || [];
+        this.sticky = !!this.buttons.length || !!params.sticky;
+        this.type = params.type || 'notification';
+        this.className = params.className || '';
+        this._closeCallback = params.onClose;
+        this.icon = 'fa-lightbulb-o';
+        if (this.buttons && this.buttons.length) {
+            this.icon = 'fa-question-circle-o';
+        }
         if (this.type === 'warning') {
-            this.template = 'Warning';
+            this.icon = 'fa-exclamation';
+            this.className += ' o_error';
         }
     },
     /**
@@ -44,33 +63,38 @@ var Notification = Widget.extend({
      */
     start: function () {
         var self = this;
-        if (this.type === 'warning') {
-            this.$el.addClass('o_error');
-        }
         return this._super.apply(this, arguments).then(function () {
-            self.$el.animate({opacity: 1.0}, 400, "swing", function () {
+            self.$el.animate({opacity: 1.0}, self._animationDelay, "swing", function () {
                 if(!self.sticky) {
-                    setTimeout(self._destroy.bind(self), 2500);
+                    setTimeout(function () {
+                        self.close();
+                    }, self._autoCloseDelay);
                 }
             });
         });
     },
 
     //--------------------------------------------------------------------------
-    // Private
+    // Public
     //--------------------------------------------------------------------------
 
     /**
-     * This method is used to destroy the widget with a nice animation.  We
+     * This method is used to destroy the widget with a nice animation. We
      * first perform an animation, then call the real destroy method.
      *
      * @private
+     * @param {boolean} [silent=false] if true, the notification does not call
+     *   _closeCallback method
      */
-    _destroy: function () {
+    close: function (silent) {
         var self = this;
-        this.$el.animate({opacity: 0.0}, 400, "swing", function() {
-            self.$el.animate({height: 0}, 400, "swing", self.destroy.bind(self));
-        });
+        this.trigger_up('close');
+        if (!silent && !this._buttonClicked) {
+            if (this._closeCallback) {
+                this._closeCallback();
+            }
+        }
+        this.$el.animate({opacity: 0.0, height: 0}, this._animationDelay, "swing", self.destroy.bind(self));
     },
 
     //--------------------------------------------------------------------------
@@ -81,9 +105,26 @@ var Notification = Widget.extend({
      * @private
      * @param {MouseEvent} ev
      */
+    _onClickButton: function (ev) {
+        ev.preventDefault();
+        if (this._buttonClicked) {
+            return;
+        }
+        this._buttonClicked = true;
+        var index = $(ev.currentTarget).index();
+        var button = this.buttons[index];
+        if (button.click) {
+            button.click();
+        }
+        this.close(true);
+    },
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
     _onClose: function (ev) {
         ev.preventDefault();
-        this._destroy();
+        this.close();
     },
 });