[FIX] web,base: document template widget in settings

Go to General Settings, click on 'Change Document Template', and
in the opened dialog, click on a template.

Before this rev., it automatically closed the dialog, which was
not really convenient.

This rev. introduces a new field widget (image_selection) for
this use case, and ensures that the dialog doesn't close when
a template is selected.

Test written by @mba-odoo

3 files changed, 93 insertions, 0 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 7e6a330120e..911afea36e5 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2391,6 +2391,56 @@ var AceEditor = DebouncedField.extend({
     },
 });
 
+var ImageSelection = AbstractField.extend({
+    supportedFieldTypes: ['selection'],
+    events: _.extend({}, AbstractField.prototype.events, {
+        'click img': '_onImgClicked',
+    }),
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     */
+    _render: function () {
+        var self = this;
+        this.$el.empty();
+        _.each(this.nodeOptions, function (val, key) {
+            var $container = $('<div>').addClass('col-xs-3 text-center');
+            var $img = $('<img>')
+                .addClass('img img-responsive img-thumbnail ml16')
+                .toggleClass('btn-info', key === self.value)
+                .attr('src', val.image_link)
+                .data('key', key);
+            $container.append($img);
+            if (val.preview_link) {
+                var $previewLink = $('<a>')
+                    .text('Preview')
+                    .attr('href', val.preview_link)
+                    .attr('target', '_blank');
+                $container.append($previewLink);
+            }
+            self.$el.append($container);
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     * @param {MouseEvent} event
+     */
+    _onImgClicked: function (event) {
+        this._setValue($(event.currentTarget).data('key'));
+    },
+});
+
 return {
     TranslatableFieldMixin: TranslatableFieldMixin,
     DebouncedField: DebouncedField,
@@ -2416,6 +2466,7 @@ return {
     HandleWidget: HandleWidget,
     InputField: InputField,
     AttachmentImage: AttachmentImage,
+    ImageSelection: ImageSelection,
     LabelSelection: LabelSelection,
     StateSelectionWidget: StateSelectionWidget,
     FavoriteWidget: FavoriteWidget,
diff --git a/addons/web/static/src/js/fields/field_registry.js b/addons/web/static/src/js/fields/field_registry.js
index 019a98e51f1..61e371d867a 100644
--- a/addons/web/static/src/js/fields/field_registry.js
+++ b/addons/web/static/src/js/fields/field_registry.js
@@ -37,6 +37,7 @@ registry
     .add('monetary', basic_fields.FieldMonetary)
     .add('priority', basic_fields.PriorityWidget)
     .add('attachment_image', basic_fields.AttachmentImage)
+    .add('image_selection', basic_fields.ImageSelection)
     .add('label_selection', basic_fields.LabelSelection)
     .add('state_selection', basic_fields.StateSelectionWidget)
     .add('kanban_state_selection', basic_fields.StateSelectionWidget)
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 9d0d0807199..91029cf9cfc 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -38,6 +38,8 @@ QUnit.module('basic_fields', {
                     selection: {string: "Selection", type: "selection", searchable:true,
                         selection: [['normal', 'Normal'],['blocked', 'Blocked'],['done', 'Done']]},
                     document: {string: "Binary", type: "binary"},
+                    image_selection: {string: "Image Selection", type: "selection", searchable:true,
+                        selection: [['background', 'Background'],['boxed', 'Boxed'],['clean', 'Clean'],['standard', 'Standard']]},
                 },
                 records: [{
                     id: 1,
@@ -3995,6 +3997,45 @@ QUnit.module('basic_fields', {
 
         form.destroy();
     });
+
+    QUnit.module('FieldImageSelection');
+
+    QUnit.test('image selection widget in form view', function (assert) {
+        assert.expect(3);
+
+        var nodeOptions = {
+            background: {
+                image_link: '/base/static/img/preview_background.png',
+                preview_link: '/base/static/pdf/preview_background.pdf',
+            },
+            boxed: {
+                image_link: '/base/static/img/preview_boxed.png',
+                preview_link: '/base/static/pdf/preview_boxed.pdf',
+            },
+        };
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form>' +
+                    '<field name="image_selection" widget="image_selection"' +
+                    ' options=\'' + JSON.stringify(nodeOptions) + '\'/> '+
+                  '</form>',
+            res_id: 2,
+        });
+
+        assert.strictEqual(form.$('.img.img-responsive').length, 2,
+            "Two images should be rendered");
+        assert.strictEqual(form.$('.img.btn-info').length, 0,
+            "No image should be selected");
+
+        // select first image
+        form.$(".img.img-responsive:first").click();
+        assert.ok(form.$(".img.img-responsive:first").hasClass('btn-info'),
+            "First image should be selected");
+
+        form.destroy();
+    });
 });
 });
 });