[IMP] stock: add widget popover

Add a popover widget linked to a Char field containing
a JSON string. It used to display flexible content in a Bootstrap
popover which appears when the user have mouse over or focus on the
information icon/button.

task-2082261

3 files changed, 121 insertions, 0 deletions

diff --git a/addons/stock/static/src/js/popover_widget.js b/addons/stock/static/src/js/popover_widget.js
new file mode 100644
index 00000000000..9aafd9bc057
--- /dev/null
+++ b/addons/stock/static/src/js/popover_widget.js
@@ -0,0 +1,56 @@
+odoo.define('stock.popover_widget', function (require) {
+'use strict';
+
+var AbstractField = require('web.AbstractField');
+var core = require('web.core');
+var QWeb = core.qweb;
+var fieldRegistry = require('web.field_registry');
+
+/**
+ * Widget Popover for JSON field, by default render a simple html message
+ * {
+ *  'msg': '<CONTENT OF THE POPOVER>',
+ *  'color': '<COLOR CLASS OF ICON>' (optionnal),
+ *  'title': '<TITLE OF POPOVER>' (optionnal),
+ *  'popoverTemplate': '<TEMPLATE OF THE TEMPLATE>' (optionnal)
+ * }
+ */
+var PopoverWidgetField = AbstractField.extend({
+    supportedFieldTypes: ['char'],
+    buttonTemplape: 'stock.popoverButton',
+    popoverTemplate: 'stock.popoverContent',
+    trigger: 'hover focus',
+    placement: 'top',
+    html: true,
+
+    _render: function () {
+        var value = JSON.parse(this.value);
+        if (!value) {
+            this.$el.html('');
+            return;
+        }
+        this.$el.css('max-width', '17px');
+        this.$el.html(QWeb.render(this.buttonTemplape, value));
+        this.$el.find('a').prop('special_click', true);
+        this.$popover = $(QWeb.render(value.popoverTemplate || this.popoverTemplate, value));
+        this.$el.find('a').popover({
+            content: this.$popover,
+            html: this.html,
+            placement: this.placement,
+            title: value.title || this.title,
+            trigger: this.trigger,
+            delay: {'show': 0, 'hide': 100},
+        });
+    },
+
+    destroy: function () {
+        this.$el.find('a').popover('dispose');
+        this._super.apply(this, arguments);
+    },
+
+});
+
+fieldRegistry.add('popover_widget', PopoverWidgetField);
+
+return PopoverWidgetField;
+});
diff --git a/addons/stock/static/src/xml/popover_widget.xml b/addons/stock/static/src/xml/popover_widget.xml
new file mode 100644
index 00000000000..0cd4d8c7645
--- /dev/null
+++ b/addons/stock/static/src/xml/popover_widget.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="stock.popoverButton">
+        <a tabindex="0" t-attf-class="p-1 fa fa-info-circle #{ color || 'text-primary'}"/>
+    </t>
+
+    <div t-name="stock.popoverContent">
+        <t t-esc="msg"/>
+    </div>
+
+</templates>
diff --git a/addons/stock/static/tests/popover_widget_tests.js b/addons/stock/static/tests/popover_widget_tests.js
new file mode 100644
index 00000000000..d14ae384f6a
--- /dev/null
+++ b/addons/stock/static/tests/popover_widget_tests.js
@@ -0,0 +1,53 @@
+odoo.define('web.data_export_tests', function (require) {
+"use strict";
+
+var testUtils = require('web.test_utils');
+var FormView = require('web.FormView');
+var createView = testUtils.createView;
+
+QUnit.module('widgets', {}, function () {
+QUnit.module('ModelFieldSelector', {
+    beforeEach: function () {
+        this.data = {
+            partner: {
+                fields: {
+                    json_data: {string: " ", type: "char"},
+                },
+                records: [
+                    {id:1, json_data:'{"color": "text-danger", "msg": "var that = self // why not?", "title": "JS Master"}'}
+                ]
+            }
+        };
+    },
+}, function () { 
+    QUnit.test("Test creation/usage popover widget form", async function (assert) {
+        assert.expect(6);
+
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch:'<form string="Partners">' +
+                    '<field name="json_data" widget="popover_widget"/>' +
+                '</form>',
+            res_id: 1
+        });
+
+        var $popover = $('div.popover');
+        assert.strictEqual($popover.length, 0, "Shouldn't have a popover container in DOM");
+
+        var $popoverButton = form.$('a.fa.fa-info-circle.text-danger');
+        assert.strictEqual($popoverButton.length, 1, "Should have a popover icon/button in red");
+        assert.strictEqual($popoverButton.prop('special_click'), true, "Special click properpy should be activated");
+        await testUtils.dom.triggerEvents($popoverButton, ['focus']);
+        var $popover = $('div.popover');
+        assert.strictEqual($popover.length, 1, "Should have a popover container in DOM");
+        assert.strictEqual($popover.html().includes("var that = self // why not?"), true, "The message should be in DOM");
+        assert.strictEqual($popover.html().includes("JS Master"), true, "The title should be in DOM");
+
+        form.destroy();
+    });
+});
+});
+
+});