[IMP] web: add BadgeField component

This new field component displays the field's value inside a
bootstrap pill badge. Supported field types are 'char', 'selection'
and 'many2one'. The background color of the badge can be customized
by using the decoration-xxx mechanism, e.g.
 <field name="state" decoration-danger="state == 'cancel'" widget="badge"/>

Part of task 2195254

2 files changed, 24 insertions, 0 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields_owl.js b/addons/web/static/src/js/fields/basic_fields_owl.js
index a00b14fb9ee..8a5915410ee 100644
--- a/addons/web/static/src/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/js/fields/basic_fields_owl.js
@@ -7,6 +7,27 @@ odoo.define('web.basic_fields_owl', function (require) {
 
     const _lt = core._lt;
 
+
+    /**
+     * FieldBadge displays the field's value inside a bootstrap pill badge.
+     * The supported field's types are 'char', 'selection' and 'many2one'.
+     *
+     * By default, the background color of the badge is a light gray, but it can
+     * be customized by setting a 'decoration-xxx' attribute on the field.
+     * For instance,
+     *   <field name="some_field" widget="badge" decoration-danger="state == 'cancel'"/>
+     * renders a badge with a red background on records matching the condition.
+     */
+    class FieldBadge extends AbstractField {
+        _getClassFromDecoration(decoration) {
+            return `bg-${decoration.split('-')[1]}-light`;
+        }
+    }
+    FieldBadge.description = _lt("Badge");
+    FieldBadge.supportedFieldTypes = ['selection', 'many2one', 'char'];
+    FieldBadge.template = 'web.FieldBadge';
+
+
     class FieldBoolean extends AbstractField {
         patched() {
             super.patched();
@@ -105,7 +126,9 @@ odoo.define('web.basic_fields_owl', function (require) {
     FieldBoolean.supportedFieldTypes = ['boolean'];
     FieldBoolean.template = 'web.FieldBoolean';
 
+
     return {
+        FieldBadge,
         FieldBoolean,
     };
 });
diff --git a/addons/web/static/src/js/fields/field_registry_owl.js b/addons/web/static/src/js/fields/field_registry_owl.js
index f5f7d900ef8..907ea38a9d7 100644
--- a/addons/web/static/src/js/fields/field_registry_owl.js
+++ b/addons/web/static/src/js/fields/field_registry_owl.js
@@ -27,5 +27,6 @@ odoo.define('web._field_registry_owl', function (require) {
 
     // Basic fields
     registry
+        .add('badge', basicFields.FieldBadge)
         .add('boolean', basicFields.FieldBoolean);
 });