[REF] web: add utility function to render checkboxes

Odoo checkboxes have a special style which requires a special DOM
structure. Instead of having to build this structure each time we need
a checkbox to be rendered, it is better to have a function that does
that. It is also better to have a JS function for this instead of a qweb
template so that this has not to be lazy loaded by the frontend for
something as simple as a checkbox.

3 files changed, 43 insertions, 16 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index e1592c53f73..0ce30e2ac4e 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -201,6 +201,35 @@ return {
         }
         return $button;
     },
+    /**
+     * Renders a checkbox with standard odoo template. This does not use any xml
+     * template to avoid forcing the frontend part to lazy load a xml file for
+     * each widget which might want to create a simple checkbox.
+     *
+     * @param {Object} [options]
+     * @param {Object} [options.prop]
+     *        Allows to set the input properties (disabled and checked states).
+     * @param {string} [options.text]
+     *        The checkbox's associated text. If none is given then a simple
+     *        checkbox without label structure is rendered.
+     * @returns {jQuery}
+     */
+    renderCheckbox: function (options) {
+        var $container = $('<div class="o_checkbox"><input type="checkbox"/><span/></div>');
+        if (options && options.prop) {
+            $container.children('input').prop(options.prop);
+        }
+        if (options && options.text) {
+            $container = $('<label/>').append(
+                $container,
+                $('<span/>', {
+                    class: 'ml8',
+                    text: options.text,
+                })
+            );
+        }
+        return $container;
+    },
 };
 
 });
diff --git a/addons/web/static/src/js/fields/field_utils.js b/addons/web/static/src/js/fields/field_utils.js
index 0a44a52e315..9d3ae75af92 100644
--- a/addons/web/static/src/js/fields/field_utils.js
+++ b/addons/web/static/src/js/fields/field_utils.js
@@ -16,6 +16,7 @@ odoo.define('web.field_utils', function (require) {
  */
 
 var core = require('web.core');
+var dom = require('web.dom');
 var session = require('web.session');
 var time = require('web.time');
 var utils = require('web.utils');
@@ -27,9 +28,9 @@ var _t = core._t;
 //------------------------------------------------------------------------------
 
 /**
- * @todo Really? it returns a jqueryElement...  We should try to move this to a
- * module with dom helpers functions, such as web.dom, maybe. And replace this
- * with a function that returns a string so we can get rid of the forceString.
+ * @todo Really? it returns a jQuery element...  We should try to avoid this and
+ * let DOM utility functions handle this directly. And replace this with a
+ * function that returns a string so we can get rid of the forceString.
  *
  * @param {boolean} value
  * @param {Object} [field]
@@ -37,22 +38,18 @@ var _t = core._t;
  * @param {Object} [options] additional options
  * @param {boolean} [options.forceString=false] if true, returns a string
 *    representation of the boolean rather than a jQueryElement
- * @returns {jQueryElement | string}
+ * @returns {jQuery|string}
  */
 function formatBoolean(value, field, options) {
     if (options && options.forceString) {
         return value ? _t('True') : _t('False');
     }
-    var $input = $('<input/>', {
-        type: 'checkbox',
-    }).prop({
-        checked: value,
-        disabled: true,
+    return dom.renderCheckbox({
+        prop: {
+            checked: value,
+            disabled: true,
+        },
     });
-    var $div = $('<div/>', {
-        class: 'o_checkbox',
-    });
-    return $div.append($input, '<span/>');
 }
 
 /**
@@ -437,8 +434,8 @@ function parseFloat(value) {
 
 /**
  * Parse a String containing currency symbol and returns amount
- * 
- * @param {string} value 
+ *
+ * @param {string} value
  *                The string to be parsed
  *                We assume that a monetary is always a pair (symbol, amount) separated
  *                by a non breaking space. A simple float can also be accepted as value
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index 295266db276..4851870c8f8 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -4,6 +4,7 @@ odoo.define('web.ListRenderer', function (require) {
 var BasicRenderer = require('web.BasicRenderer');
 var config = require('web.config');
 var core = require('web.core');
+var dom = require('web.dom');
 var field_utils = require('web.field_utils');
 var Pager = require('web.Pager');
 var utils = require('web.utils');
@@ -560,7 +561,7 @@ var ListRenderer = BasicRenderer.extend({
      * @returns {jQueryElement}
      */
     _renderSelector: function (tag) {
-        var $content = $('<div class="o_checkbox"><input type="checkbox"><span/></div>');
+        var $content = dom.renderCheckbox();
         return $('<' + tag + ' width="1">')
                     .addClass('o_list_record_selector')
                     .append($content);