From 113ef730022bfc72a4929c8af14d80ee651afa50 Mon Sep 17 00:00:00 2001 From: Jaime Arroyo Date: Mon, 2 Dec 2019 14:21:22 +0100 Subject: [PATCH] [11.0][IMP] web_tree_dynamic_colored_field: more options --- web_tree_dynamic_colored_field/README.rst | 92 ++- .../readme/CONTRIBUTORS.rst | 6 + .../readme/DESCRIPTION.rst | 16 + .../readme/USAGE.rst | 94 ++++ .../static/description/index.html | 528 ++++++++++++++++++ .../src/js/web_tree_dynamic_colored_field.js | 48 +- 6 files changed, 764 insertions(+), 20 deletions(-) create mode 100644 web_tree_dynamic_colored_field/readme/CONTRIBUTORS.rst create mode 100644 web_tree_dynamic_colored_field/readme/DESCRIPTION.rst create mode 100644 web_tree_dynamic_colored_field/readme/USAGE.rst create mode 100644 web_tree_dynamic_colored_field/static/description/index.html diff --git a/web_tree_dynamic_colored_field/README.rst b/web_tree_dynamic_colored_field/README.rst index e1b4510d6023..6a322df34a17 100644 --- a/web_tree_dynamic_colored_field/README.rst +++ b/web_tree_dynamic_colored_field/README.rst @@ -1,11 +1,30 @@ -.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg - :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html - :alt: License: AGPL-3 - ============================ Colorize field in tree views ============================ +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/11.0/web_tree_dynamic_colored_field + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_tree_dynamic_colored_field + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png + :target: https://runbot.odoo-community.org/runbot/162/11.0 + :alt: Try me on Runbot + +|badge1| |badge2| |badge3| |badge4| |badge5| + This module aims to add support for dynamically coloring fields in tree view according to data in the record. @@ -21,6 +40,12 @@ Features * Add attribute ``bg_color`` on field's ``options`` to color background of a cell in tree view * Add attribute ``fg_color`` on field's ``options`` to change text color of a cell in tree view * Add attribute ``color_field`` on the tree element's ``colors`` to use as color +* Add attribute ``background_color_field`` on the tree element's ``colors`` to use as background-color + +**Table of contents** + +.. contents:: + :local: Usage ===== @@ -39,6 +64,20 @@ Usage With this example, column which renders 'name' field will have its background colored in red. +* In the tree view declaration, put ``options='{"bg_color": "color_field"}`` attribute in the ``field`` tag:: + + ... + + + ... + + ... + + + ... + + With this example, column which renders 'name' field will have its background colored in color_field's value. + * In the tree view declaration, put ``options='{"fg_color": "white:customer == True"}'`` attribute in the ``field`` tag:: ... @@ -65,6 +104,19 @@ Usage ... +* In the tree view declaration, use ``options='"background_color_field": "my_color"'`` attribute in the ``tree`` tag:: + + ... + + + ... + + ... + + + ... + + * If you want to use more than one color, you can split the attributes using ';': .. code:: @@ -96,33 +148,45 @@ Example: Bug Tracker =========== -Bugs are tracked on `GitHub Issues -`_. In case of trouble, please -check there if your issue has already been reported. If you spotted it first, -help us smash it by providing a detailed and welcomed feedback. +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. Credits ======= +Authors +~~~~~~~ + +* Camptocamp +* Therp BV + Contributors ------------- +~~~~~~~~~~~~ * Damien Crier * Holger Brunn * Artem Kostyuk * Guewen Baconnier +* Enric Tobella +* Jaime Arroyo + +Maintainers +~~~~~~~~~~~ -Maintainer ----------- +This module is maintained by the OCA. .. image:: https://odoo-community.org/logo.png :alt: Odoo Community Association :target: https://odoo-community.org -This module is maintained by the OCA. - OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use. -To contribute to this module, please visit https://odoo-community.org. +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_tree_dynamic_colored_field/readme/CONTRIBUTORS.rst b/web_tree_dynamic_colored_field/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000000..80cd2903b951 --- /dev/null +++ b/web_tree_dynamic_colored_field/readme/CONTRIBUTORS.rst @@ -0,0 +1,6 @@ +* Damien Crier +* Holger Brunn +* Artem Kostyuk +* Guewen Baconnier +* Enric Tobella +* Jaime Arroyo diff --git a/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst b/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst new file mode 100644 index 000000000000..71618d2aa62c --- /dev/null +++ b/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst @@ -0,0 +1,16 @@ +This module aims to add support for dynamically coloring fields in tree view +according to data in the record. + +It provides attributes on fields with the similar syntax as the ``colors`` attribute +in tree tags. + +Further, it provides a ``color_field`` attribute on tree tags's ``colors`` to use +a field's value as color. + +Features +======== + +* Add attribute ``bg_color`` on field's ``options`` to color background of a cell in tree view +* Add attribute ``fg_color`` on field's ``options`` to change text color of a cell in tree view +* Add attribute ``color_field`` on the tree element's ``colors`` to use as color +* Add attribute ``background_color_field`` on the tree element's ``colors`` to use as background-color diff --git a/web_tree_dynamic_colored_field/readme/USAGE.rst b/web_tree_dynamic_colored_field/readme/USAGE.rst new file mode 100644 index 000000000000..155b815c0d97 --- /dev/null +++ b/web_tree_dynamic_colored_field/readme/USAGE.rst @@ -0,0 +1,94 @@ +* In the tree view declaration, put ``options='{"bg_color": "red: customer==True"}`` attribute in the ``field`` tag:: + + ... + + + ... + + ... + + + ... + + With this example, column which renders 'name' field will have its background colored in red. + +* In the tree view declaration, put ``options='{"bg_color": "color_field"}`` attribute in the ``field`` tag:: + + ... + + + ... + + ... + + + ... + + With this example, column which renders 'name' field will have its background colored in color_field's value. + +* In the tree view declaration, put ``options='{"fg_color": "white:customer == True"}'`` attribute in the ``field`` tag:: + + ... + + + ... + + ... + + + ... + + With this example, column which renders 'name' field will have its text colored in white on a customer records. + +* In the tree view declaration, use ``options='"color_field": "my_color"'`` attribute in the ``tree`` tag:: + + ... + + + ... + + ... + + + ... + +* In the tree view declaration, use ``options='"background_color_field": "my_color"'`` attribute in the ``tree`` tag:: + + ... + + + ... + + ... + + + ... + + +* If you want to use more than one color, you can split the attributes using ';': + +.. code:: + + options='{"fg_color": "red:red_color == True; green:green_color == True"}' + +Example: + +.. code:: xml + + ... + + + ... + + ... + + + ... + + With this example, the content of the field named `my_color` will be used to + populate the `my_color` CSS value. Use a function field to return whichever + color you want depending on the other record values. Note that this + overrides the rest of `colors` attributes, and that you need the tree + to load your field in the first place by adding it as invisible field. + +**Note that you should always use single quotes for fields' ``options`` and wrap nested values in double quotes since ``options`` is a JSON object.** diff --git a/web_tree_dynamic_colored_field/static/description/index.html b/web_tree_dynamic_colored_field/static/description/index.html new file mode 100644 index 000000000000..8ac2c7a0b512 --- /dev/null +++ b/web_tree_dynamic_colored_field/static/description/index.html @@ -0,0 +1,528 @@ + + + + + + +Colorize field in tree views + + + +
+

Colorize field in tree views

+ + +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runbot

+

This module aims to add support for dynamically coloring fields in tree view +according to data in the record.

+

It provides attributes on fields with the similar syntax as the colors attribute +in tree tags.

+

Further, it provides a color_field attribute on tree tags’s colors to use +a field’s value as color.

+
+

Features

+
    +
  • Add attribute bg_color on field’s options to color background of a cell in tree view
    • +
  • Add attribute fg_color on field’s options to change text color of a cell in tree view
    • +
  • Add attribute color_field on the tree element’s colors to use as color
    • +
  • Add attribute background_color_field on the tree element’s colors to use as background-color
    • +
+

Table of contents

+
+
+

Usage

+
    +

  • In the tree view declaration, put options='{"bg_color": "red: customer==True"} attribute in the field tag:

    +
    +...
+<field name="arch" type="xml">
+    <tree string="View name">
+        ...
+        <field name="name" options='{"bg_color": "red: customer == True"}'/>
+        ...
+    </tree>
+</field>
+...
+
+With this example, column which renders 'name' field will have its background colored in red.
+
    +
    • +

  • In the tree view declaration, put options='{"bg_color": "color_field"} attribute in the field tag:

    +
    +...
+<field name="arch" type="xml">
+    <tree string="View name">
+        ...
+        <field name="name" options='{"bg_color": "color_field"}'/>
+        ...
+    </tree>
+</field>
+...
+
+With this example, column which renders 'name' field will have its background colored in color_field's value.
+
    +
    • +

  • In the tree view declaration, put options='{"fg_color": "white:customer == True"}' attribute in the field tag:

    +
    +...
+<field name="arch" type="xml">
+    <tree string="View name">
+        ...
+        <field name="name" options='{"fg_color": "white:customer == True"}'/>
+        ...
+    </tree>
+</field>
+...
+
+With this example, column which renders 'name' field will have its text colored in white on a customer records.
+
    +
    • +

  • In the tree view declaration, use options='"color_field": "my_color"' attribute in the tree tag:

    +
    +...
+<field name="arch" type="xml">
+    <tree string="View name" colors="color_field: my_color" >
+        ...
+        <field name="my_color" invisible="1"/>
+        ...
+    </tree>
+</field>
+...
+
    +
    • +

  • In the tree view declaration, use options='"background_color_field": "my_color"' attribute in the tree tag:

    +
    +...
+<field name="arch" type="xml">
+    <tree string="View name" colors="background_color_field: my_color" >
+        ...
+        <field name="my_color" invisible="1"/>
+        ...
+    </tree>
+</field>
+...
+
    +
    • +

  • If you want to use more than one color, you can split the attributes using ‘;’:

    +
    • +
+
+options='{"fg_color": "red:red_color == True; green:green_color == True"}'
+
+

Example:

+
+...
+ <field name="arch" type="xml">
+     <tree string="View name">
+         ...
+         <field name="name" options='{"fg_color": "red:red_color == True; green:green_color == True"}'/>
+         ...
+     </tree>
+ </field>
+ ...
+
+ With this example, the content of the field named `my_color` will be used to
+ populate the `my_color` CSS value. Use a function field to return whichever
+ color you want depending on the other record values. Note that this
+ overrides the rest of `colors` attributes, and that you need the tree
+ to load your field in the first place by adding it as invisible field.
+
+

Note that you should always use single quotes for fields’ ``options`` and wrap nested values in double quotes since ``options`` is a JSON object.

+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Camptocamp
    • +
  • Therp BV
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+Odoo Community Association +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js b/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js index 334db53734b5..44d347c7e454 100644 --- a/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js +++ b/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js @@ -10,14 +10,19 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { * * @override */ - _renderBody: function () { + _renderView: function () { if (this.arch.attrs.colors) { - var colorAttr = this.arch.attrs.colors.split(';') - .filter(color => color.trim().startsWith('color_field')); + var colors_attr = this.arch.attrs.colors.split(';') + var colorAttr = colors_attr.filter( + attr => attr.trim().startsWith('color_field') + ); + var backgroundColorAttr = colors_attr.filter( + attr => attr.trim().startsWith('background_color_field') + ); if (colorAttr.length > 0) { var colorField = colorAttr[0].split(':')[1].trim(); // validate the presence of that field in tree view - if (this.state.data.length && colorField in this.state.data[0].data) { + if (colorField in this.state.fields) { this.colorField = colorField; } else { console.warn( @@ -25,6 +30,17 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { ); } } + if (backgroundColorAttr.length > 0) { + var backgroundColorField = backgroundColorAttr[0].split(':')[1].trim(); + // validate the presence of that field in tree view + if (backgroundColorField in this.state.fields) { + this.backgroundColorField = backgroundColorField; + } else { + console.warn( + "No field named '" + backgroundColorField + "' present in view." + ); + } + } } return this._super(); }, @@ -33,6 +49,7 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { * * @override */ + _renderBodyCell: function (record, node, colIndex, options) { var $td = this._super.apply(this, arguments); var ctx = this.getEvalContext(record); @@ -40,18 +57,29 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { return $td; }, + _setDecorationClasses: function (record, $tr) { + this._super.apply(this, arguments); + this.applyAllColorize($tr, record) + }, + /** * Colorize the current cell depending on expressions provided. * * @param {Query Node} $td a tag inside a table representing a list view * @param {Object} node an XML node (must be a ) */ - applyColorize: function ($td, record, node, ctx) { + applyAllColorize: function ($tr, record) { // safely resolve value of `color_field` given in var treeColor = record.data[this.colorField]; if (treeColor) { - $td.css('color', treeColor); + $tr.css('color', treeColor); + } + var treeBackgroundColor = record.data[this.backgroundColorField]; + if (treeBackgroundColor) { + $tr.css('background-color', treeBackgroundColor) } + }, + applyColorize: function ($td, record, node, ctx) { // apply 's own `options` if (!node.attrs.options) { return; } if (node.tag !== 'field') { return; } @@ -61,6 +89,8 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { } this.applyColorizeHelper($td, nodeOptions, node, 'fg_color', 'color', ctx); this.applyColorizeHelper($td, nodeOptions, node, 'bg_color', 'background-color', ctx); + this.applyDirectColorizeHelper($td, nodeOptions, node, 'fg_color_field', 'color', ctx); + this.applyDirectColorizeHelper($td, nodeOptions, node, 'bg_color_field', 'background-color', ctx); }, /** * @param {Object} nodeOptions a mapping of nodeOptions parameters to the color itself @@ -88,6 +118,12 @@ odoo.define('web_tree_dynamic_colored_field', function (require) { } }, + applyDirectColorizeHelper: function ($td, nodeOptions, node, nodeAttribute, cssAttribute, ctx) { + var field = nodeOptions[nodeAttribute]; + if (field && ctx[field]) + $td.css(cssAttribute, ctx[field]); + }, + /** * Parse `: ` forms to * evaluatable expressions