[IMP] web: add a generic notification feature inside form views

The notification box remains on the form until either:
 - the user closes it explicitly, or
 - the user edits the record, or
 - the form view is refreshed (switch to another record, or refresh form).

Add a method `once` to `EventDispatcherMixin`, as it is convenient.
Make `FormView` trigger events `to_view_mode` and `to_edit_mode`.

3 files changed, 45 insertions, 0 deletions

diff --git a/addons/web/static/src/js/framework/mixins.js b/addons/web/static/src/js/framework/mixins.js
index e9f9b2c94b0..2f96da09872 100644
--- a/addons/web/static/src/js/framework/mixins.js
+++ b/addons/web/static/src/js/framework/mixins.js
@@ -268,6 +268,17 @@ var EventDispatcherMixin = _.extend({}, ParentedMixin, {
         });
         return this;
     },
+    once: function(events, dest, func) {
+        // similar to this.on(), but func is executed only once
+        var self = this
+        if (typeof func !== "function") {
+            throw new Error("Event handler must be a function.");
+        }
+        self.on(events, dest, function what() {
+            func.apply(this, arguments);
+            self.off(events, dest, what);
+        });
+    },
     trigger: function() {
         this.__edispatcherEvents.trigger.apply(this.__edispatcherEvents, arguments);
         return this;
diff --git a/addons/web/static/src/js/views/form_view.js b/addons/web/static/src/js/views/form_view.js
index c729e397b65..9720ed14a8c 100644
--- a/addons/web/static/src/js/views/form_view.js
+++ b/addons/web/static/src/js/views/form_view.js
@@ -665,6 +665,7 @@ var FormView = View.extend(common.FieldManagerMixin, {
      */
     to_view_mode: function() {
         this._actualize_mode("view");
+        this.trigger('to_view_mode');
     },
     /**
      * Ask the view to switch to edit mode if possible. The view may not do it
@@ -673,6 +674,7 @@ var FormView = View.extend(common.FieldManagerMixin, {
     to_edit_mode: function() {
         this.onchanges_mutex = new utils.Mutex();
         this._actualize_mode("edit");
+        this.trigger('to_edit_mode');
     },
     /**
      * Ask the view to switch to a precise mode if possible. The view is free to
@@ -1070,6 +1072,30 @@ var FormView = View.extend(common.FieldManagerMixin, {
     sidebar_eval_context: function () {
         return $.when(this.build_eval_context());
     },
+    /**
+     * Add a notification box inside the form. The notification automatically
+     * goes away (by default when switching to edit mode or changing the form
+     * content.)
+     *
+     * @param {jQuery} $content
+     * @param {Object} [options]
+     * @param {String} [options.type], one of: "success", "info", "warning", "danger"
+     * @param {String} [options.events], when to remove notification
+     */
+    notify_in_form: function ($content, options) {
+        options = options || {};
+        var type = options.type || 'info';
+        var $box = $(QWeb.render('notification-box', {type: type}));
+        $box.append($content);
+        // create handler to remove notification box
+        var events = options.events || 'to_edit_mode view_content_has_changed';
+        this.once(events, null, function() {
+            $box.remove();
+        });
+        // add content inside notification box on top of the sheet/form
+        var $target = this.$('.oe_form_sheet').length ? this.$('.oe_form_sheet') : this.$el;
+        $target.prepend($box);
+    },
     open_defaults_dialog: function () {
         var self = this;
         var display = function (field, value) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 82197ef6efe..4ad7312d40c 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1456,4 +1456,12 @@
     </t>
 </t>
 
+<t t-name="notification-box">
+    <div t-att-class="'alert alert-dismissible alert-' + type" role="alert">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true" class="fa fa-times"></span>
+        </button>
+    </div>
+</t>
+
 </templates>