[MIG] web_tree_dynamic_colored_field: Migration to 11.0

web_tree_dynamic_colored_field/README.rst

@@ -1,35 +1,37 @@
+.. image:: https://img.shields.io/badge/license-LGPL--3-blue.svg
+   :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+   :alt: License: LGPL-3
+
+============================
 Colorize field in tree views
 ============================
 
 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 same syntax as the 'colors' attribute
+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 to use a field's
+Further, it provides a ``color_field`` attribute on tree tags's ``colors`` to use
-value as color.
+a field's value as color.
 
 Features
 ========
 
-* Add attribute ``bg_color`` on fields to color background of a cell in tree view
+* 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 ``fg_color`` on fields 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 ``color_field`` on the tree element to use as color
-
 
 Usage
 =====
 
-* In the tree view declaration, put bg_color="red:customer==True;" attribute in the field tag::
+* 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" bg_color="red:customer==True;"/>
+            <field name="name" options='"bg_color": "red: customer == True"'/>
             ...
         </tree>
     </field>
@@ -37,37 +39,39 @@ Usage
     
     With this example, column which renders 'name' field will have its background colored in red.
 
-* In the tree view declaration, put fg_color="white:customer==True;" attribute in the field tag::
+* 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" fg_color="white:customer==True;"/>
+            <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.
+    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 color_field="color" attribute in the tree tag::
+* 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" color_field="color">
+        <tree string="View name" colors="color_field: my_color" >
             ...
-            <field name="color" invisible="1" />
+            <field name="my_color" invisible="1"/>
             ...
         </tree>
     </field>
     ...
 
-    With this example, the content of the field named `color` will be used to
+    With this example, the content of the field named `my_color` will be used to
-    populate the `color` CSS value. Use a function field to return whichever
+    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 `colors` attribute, and that you need the tree to load your
+    overrides the rest of `colors` attributes, and that you need the tree
-    field in the first place by adding it as invisible field.
+    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
 ===========
@@ -75,7 +79,7 @@ Bug Tracker
 Bugs are tracked on `GitHub Issues
 <https://github.com/OCA/web/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.
+help us smash it by providing a detailed and welcomed feedback.
 
 Credits
 =======
@@ -85,6 +89,7 @@ Contributors
 
 * Damien Crier <damien.crier@camptocamp.com>
 * Holger Brunn <hbrunn@therp.nl>
+* Artem Kostyuk <a.kostyuk@mobilunity.com>
 
 Maintainer
 ----------

web_tree_dynamic_colored_field/__init__.py

@@ -1,3 +1,2 @@
-# -*- coding: utf-8 -*-
+# Copyright 2015-2018 Camptocamp SA, Damien Crier
-# © 2015 Camptocamp SA, Damien Crier
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).

web_tree_dynamic_colored_field/__manifest__.py

@@ -1,13 +1,12 @@
-# -*- coding: utf-8 -*-
+# Copyright 2015-2018 Camptocamp SA, Damien Crier
-# © 2015 Camptocamp SA, Damien Crier
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 {
     'name': 'Colorize field in tree views',
     'summary': 'Allows you to dynamically color fields on tree views',
     'category': 'Hidden/Dependency',
-    'version': '10.0.1.0.0',
+    'version': '11.0.1.0.0',
     'depends': ['web'],
-    'author': "Camptocamp,Therp BV,Odoo Community Association (OCA)",
+    'author': "Camptocamp, Therp BV, Odoo Community Association (OCA)",
     'license': 'AGPL-3',
     'website': 'https://github.com/OCA/web',
     'demo': [
@@ -16,7 +15,5 @@
     'data': [
         'views/web_tree_dynamic_colored_field.xml',
     ],
-    'qweb': [
+    'installable': True,
-        'static/src/xml/*.xml',
-    ],
 }

web_tree_dynamic_colored_field/demo/res_users.xml

@@ -4,17 +4,21 @@
         <field name="model">res.users</field>
         <field name="inherit_id" ref="base.view_users_tree" />
         <field name="arch" type="xml">
-            <xpath expr="." position="attributes">
+          <tree position="attributes">
-                <attribute name="color_field">lang</attribute>
+            <attribute name="colors">color_field: lang</attribute>
-            </xpath>
+          </tree>
-            <field name="login_date" position="attributes">
+          <field name="login_date" position="attributes">
-                <attribute name="bg_color">red: login_date == False</attribute>
+            <attribute name="options">{
-                <attribute name="fg_color">white: login_date == False</attribute>
+              "bg_color": "#9e1635: login_date == False",
-            </field>
+              "fg_color": "white: login_date == False"
-            <field name="name" position="attributes">
+            }</attribute>
-                <attribute name="bg_color">red: login == 'admin'</attribute>
+          </field>
-                <attribute name="fg_color">white: login == 'admin'</attribute>
+          <field name="name" position="attributes">
-            </field>
+            <attribute name="options"> {
+              "bg_color": "blue; #653b5b: login == 'admin'",
+              "fg_color": "white"
+            }</attribute>
+          </field>
         </field>
     </record>
 </odoo>

web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js

@@ -1,95 +1,129 @@
-odoo.define('web_tree_dynamic_colored_field', function(require)
+odoo.define('web_tree_dynamic_colored_field', function (require) {
-{
     'use strict';
-    var ListView = require('web.ListView'),
-        pyeval = require('web.pyeval'),
-        py = window.py;
 
-    var pair_colors = function(pair_color){
+    var ListRenderer = require('web.ListRenderer');
-        if (pair_color !== ""){
+    var pyeval = require('web.pyeval');
-            var pair_list = pair_color.split(':'),
-                color = pair_list[0],
-                expression = pair_list[1];
-            return [color, py.parse(py.tokenize(expression)), expression];
-        }
-    };
 
-    var get_eval_context = function(record){
+    ListRenderer.include({
-        return _.extend(
+        /**
-            {},
+         * Look up for a `color_field` parameter in tree `colors` attribute
-            record.attributes,
+         *
-            pyeval.context()
+         * @override
-        );
+         */
-    };
+        _renderBody: function () {
-
+            if (this.arch.attrs.colors) {
-    var colorize_helper = function(obj, record, column, field_attribute, css_attribute){
+                var colorField = this.arch.attrs.colors.split(';')
-        var result = '';
+                .filter(color => color.trim().startsWith('color_field'))[0]
-        if (column[field_attribute]){
+                .split(':')[1]
-            var colors = _(column[field_attribute].split(';'))
+                .trim();
-            .chain()
+                // validate the presence of that field in tree view
-            .map(pair_colors)
+                var fieldNames = _(this.columns).map(
-            .value()
+                    (value) => { return value.attrs.name; }
-            .filter(function CheckUndefined(value, index, ar) {
+                );
-                return value !== undefined;
+                if (fieldNames.indexOf(colorField) === -1) {
-            });
+                    console.warn(
-            var ctx = get_eval_context(record);
+                        "No field named '" + colorField + "' present in view."
-            for(var i=0, len=colors.length; i<len; ++i) {
+                    );
-                var pair = colors[i],
+                } else {
-                    color = pair[0],
+                    this.colorField = colorField;
-                    expression = pair[1];
-                if (py.evaluate(expression, ctx).toJSON()) {
-                    result = css_attribute + ': ' + color + ';';
                 }
             }
-        }
+            return this._super();
-        return result;
-    };
-
-    var colorize = function(record, column){
-        var res = '';
-        res += colorize_helper(this, record, column, 'bg_color', 'background-color');
-        res += colorize_helper(this, record, column, 'fg_color', 'color');
-        return res;
-    };
-
-    ListView.List.include({
-        init: function(group, opts){
-            this._super(group, opts);
-            this.columns.fct_colorize = colorize;
         },
-    });
+        /**
-
+         * Colorize a cell during it's render
-    ListView.include({
+         *
-        load_view: function()
+         * @override
-        {
+         */
-            var self = this;
+        _renderBodyCell: function (record, node, colIndex, options) {
-            return this._super.apply(this, arguments)
+            var $td = this._super.apply(this, arguments);
-            .then(function()
+            var ctx = this.getEvalContext(record);
-            {
+            this.applyColorize($td, record, node, ctx);
-                // the style_for helper is only called if one of colors or
+            return $td;
-                // fonts is not null
-                if(self.fields_view.arch.attrs.color_field)
-                {
-                    self.colors = [];
-                }
-            });
         },
-        style_for: function (record)
+
-        {
+        /**
-            var result = this._super.apply(this, arguments);
+         * Colorize the current cell depending on expressions provided.
-            if(this.fields_view.arch.attrs.color_field)
+         *
-            {
+         * @param {Query Node} $td a <td> tag inside a table representing a list view
-                var color = py.evaluate(
+         * @param {Object} node an XML node (must be a <field>)
-                    py.parse(py.tokenize(
+         */
-                        this.fields_view.arch.attrs.color_field
+        applyColorize: function ($td, record, node, ctx) {
-                    )),
+            // safely resolve value of `color_field` given in <tree>
-                    get_eval_context(record)).toJSON();
+            var treeColor = record.data[this.colorField];
-                if(color)
+            if (treeColor) {
-                {
+                $td.css('color', treeColor);
-                    result += 'color: ' + color;
+            }
+            // apply <field>'s own `options`
+            if (!node.attrs.options) { return; }
+            var nodeOptions = JSON.parse(node.attrs.options);
+            this.applyColorizeHelper($td, nodeOptions, node, 'fg_color', 'color', ctx);
+            this.applyColorizeHelper($td, nodeOptions, node, 'bg_color', 'background-color', ctx);
+        },
+        /**
+         * @param {Object} nodeOptions a mapping of nodeOptions parameters to the color itself
+         * @param {Object} node an XML node (must be a <field>)
+         * @param {string} nodeAttribute an attribute of a node to apply a style onto
+         * @param {string} cssAttribute a real CSS-compatible attribute
+         */
+        applyColorizeHelper: function ($td, nodeOptions, node, nodeAttribute, cssAttribute, ctx) {
+            if (nodeOptions[nodeAttribute]) {
+                var colors = _(nodeOptions[nodeAttribute].split(';'))
+                    .chain()
+                    .map(this.pairColors)
+                    .value()
+                    .filter(function CheckUndefined(value, index, ar) {
+                        return value !== undefined;
+                    });
+                for (var i=0, len=colors.length; i<len; ++i) {
+                    var pair = colors[i],
+                        color = pair[0],
+                        expression = pair[1];
+                    if (py.evaluate(expression, ctx).toJSON()) {
+                        $td.css(cssAttribute, color);
+                    }
                 }
             }
-            return result;
         },
+
+        /**
+         * Parse `<color>: <field> <operator> <value>` forms to
+         * evaluatable expressions
+         *
+         * @param {string} pairColor `color: expression` pair
+         */
+        pairColors: function (pairColor) {
+            if (pairColor !== "") {
+                var pairList = pairColor.split(':'),
+                    color = pairList[0],
+                    // if one passes a bare color instead of an expression,
+                    // then we consider that color is to be shown in any case
+                    expression = pairList[1]? pairList[1] : 'True';
+                return [color, py.parse(py.tokenize(expression)), expression];
+            }
+            return undefined;
+        },
+        /**
+         * Construct domain evaluation context, mostly by passing
+         * record's fields's values to local scope.
+         *
+         * @param {Object} record a record to build a context from
+         */
+        getEvalContext: function (record) {
+            var ctx = _.extend(
+                {},
+                record.data,
+                pyeval.context()
+            );
+            for (var key in ctx) {
+                var value = ctx[key];
+                if (ctx[key] instanceof moment) {
+                    // date/datetime fields are represented w/ Moment objects
+                    // docs: https://momentjs.com/
+                    ctx[key] = value.format('YYYY-MM-DD hh:mm:ss');
+                }
+            }
+            return ctx;
+        }
     });
 });

web_tree_dynamic_colored_field/static/src/xml/web_tree_dynamic_colored_field.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<templates>
-
-    <tr t-extend="ListView.row">
-        <t t-jquery="td[t-att-data-field='column.id']" t-operation="attributes">
-            <attribute name="t-att-style">columns.fct_colorize(record, column)</attribute>
-        </t>
-    </tr>
-
-</templates>

web_tree_dynamic_colored_field/views/web_tree_dynamic_colored_field.xml

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- vim:fdn=3:
--->
 <odoo>
     <template id="assets_backend" name="web_tree_dynamic_colored_field assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">