mirror of https://github.com/OCA/web.git
[MIG] web_tree_dynamic_colored_field: Migration to 17.0
- Implementation now is based on updating `style` attribute of `cell/td` instead of manipulating element's `css` value in js. - Cleanup docs about no more functioning `colors` parameter for `tree` (since 13.0)pull/3107/head
Jurgis Pralgauskis
Enric Tobella
parent
4c780be3d5
commit
df68fb69d4
|
|
@ -63,7 +63,7 @@ Usage
|
|||
</field>
|
||||
...
|
||||
|
||||
With this example, column which renders 'name' field will have its background colored in red.
|
||||
With this example, column which renders 'name' field will have its **background** colored in red on customer records.
|
||||
|
||||
- In the tree view declaration, put
|
||||
``options='{"fg_color": "white:customer == True"}'`` attribute in the
|
||||
|
|
@ -81,26 +81,7 @@ Usage
|
|||
</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>
|
||||
...
|
||||
|
||||
- You can also use ``colors="bg_color_field: my_color"`` to defined the
|
||||
field name that will be used for the background color of the line.
|
||||
With this example, column which renders 'name' field will have its **text** colored in white on customer records.
|
||||
|
||||
- If you want to use more than one color, you can split the attributes
|
||||
using ';':
|
||||
|
|
@ -123,12 +104,6 @@ Example:
|
|||
</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.
|
||||
|
||||
- Can use strings too... In the tree view declaration, put
|
||||
``options="{'fg_color': 'green:customer_state == \'success\''}"``
|
||||
attribute in the ``field`` tag:
|
||||
|
|
@ -158,6 +133,8 @@ Known issues / Roadmap
|
|||
``colors`` attribute is no longer in the RelaxNG schema of the tree
|
||||
view, so we can't use it anymore. This feature has then been dropped,
|
||||
but could be reimplement in another way.
|
||||
- Since version 17.0 coloring is written into ``style`` attribute of
|
||||
(td) element
|
||||
|
||||
Bug Tracker
|
||||
===========
|
||||
|
|
@ -187,6 +164,7 @@ Contributors
|
|||
- Guewen Baconnier <guewen.baconnier@camptocamp.com>
|
||||
- Phuc Tran Thanh <phuc@trobz.com>
|
||||
- Sylvain LE GAL <https://twitter.com/legalsylvain>
|
||||
- Jurgis Pralgauskis <jurgis@versada.eu>
|
||||
|
||||
Other credits
|
||||
-------------
|
||||
|
|
@ -194,6 +172,7 @@ Other credits
|
|||
The development of this module has been financially supported by:
|
||||
|
||||
- Camptocamp
|
||||
- Versada
|
||||
|
||||
Maintainers
|
||||
-----------
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"name": "Colorize field in tree views",
|
||||
"summary": "Allows you to dynamically color fields on tree views",
|
||||
"category": "Hidden/Dependency",
|
||||
"version": "15.0.1.0.1",
|
||||
"version": "17.0.1.0.0",
|
||||
"depends": ["web"],
|
||||
"author": "Camptocamp, Therp BV, Odoo Community Association (OCA)",
|
||||
"license": "AGPL-3",
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
"installable": True,
|
||||
"assets": {
|
||||
"web.assets_backend": [
|
||||
"/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js",
|
||||
"web_tree_dynamic_colored_field/static/src/xml/list.xml",
|
||||
"web_tree_dynamic_colored_field/static/src/js/list_renderer.esm.js",
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@
|
|||
- Guewen Baconnier \<<guewen.baconnier@camptocamp.com>\>
|
||||
- Phuc Tran Thanh \<<phuc@trobz.com>\>
|
||||
- Sylvain LE GAL \<<https://twitter.com/legalsylvain>\>
|
||||
- Jurgis Pralgauskis \<<jurgis@versada.eu>\>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
The development of this module has been financially supported by:
|
||||
|
||||
- Camptocamp
|
||||
- Versada
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@
|
|||
`colors` attribute is no longer in the RelaxNG schema of the tree
|
||||
view, so we can't use it anymore. This feature has then been dropped,
|
||||
but could be reimplement in another way.
|
||||
- Since version 17.0 coloring is written into ``style`` attribute of (td) element
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</field>
|
||||
...
|
||||
|
||||
With this example, column which renders 'name' field will have its background colored in red.
|
||||
With this example, column which renders 'name' field will have its **background** colored in red on customer records.
|
||||
|
||||
- In the tree view declaration, put
|
||||
`options='{"fg_color": "white:customer == True"}'` attribute in the
|
||||
|
|
@ -28,28 +28,12 @@
|
|||
</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>
|
||||
...
|
||||
|
||||
- You can also use `colors="bg_color_field: my_color"` to defined the
|
||||
field name that will be used for the background color of the line.
|
||||
With this example, column which renders 'name' field will have its **text** colored in white on customer records.
|
||||
|
||||
- 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"}'
|
||||
```
|
||||
|
||||
|
|
@ -65,12 +49,6 @@ Example:
|
|||
</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.
|
||||
```
|
||||
|
||||
- Can use strings too... In the tree view declaration, put
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
|
|
@ -406,7 +405,7 @@ color of a cell in tree view</li>
|
|||
</field>
|
||||
...
|
||||
|
||||
With this example, column which renders 'name' field will have its background colored in red.
|
||||
With this example, column which renders 'name' field will have its **background** colored in red on customer records.
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">In the tree view declaration, put
|
||||
|
|
@ -423,27 +422,9 @@ With this example, column which renders 'name' field will have its background co
|
|||
</field>
|
||||
...
|
||||
|
||||
With this example, column which renders 'name' field will have its text colored in white on a customer records.
|
||||
With this example, column which renders 'name' field will have its **text** colored in white on customer records.
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">In the tree view declaration, use
|
||||
<tt class="docutils literal"><span class="pre">options='"color_field":</span> "my_color"'</tt> attribute in the <tt class="docutils literal">tree</tt>
|
||||
tag:</p>
|
||||
<pre class="literal-block">
|
||||
...
|
||||
<field name="arch" type="xml">
|
||||
<tree string="View name" colors="color_field: my_color" >
|
||||
...
|
||||
<field name="my_color" invisible="1"/>
|
||||
...
|
||||
</tree>
|
||||
</field>
|
||||
...
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">You can also use <tt class="docutils literal"><span class="pre">colors="bg_color_field:</span> my_color"</tt> to defined the
|
||||
field name that will be used for the background color of the line.</p>
|
||||
</li>
|
||||
<li><p class="first">If you want to use more than one color, you can split the attributes
|
||||
using ‘;’:</p>
|
||||
</li>
|
||||
|
|
@ -461,13 +442,7 @@ options='{"fg_color": "red:red_color == True; green:green_color =
|
|||
</span>...<span class="w">
|
||||
</span><span class="nt"></tree></span><span class="w">
|
||||
</span><span class="nt"></field></span><span class="w">
|
||||
</span>...<span class="w">
|
||||
|
||||
</span>With<span class="w"> </span>this<span class="w"> </span>example,<span class="w"> </span>the<span class="w"> </span>content<span class="w"> </span>of<span class="w"> </span>the<span class="w"> </span>field<span class="w"> </span>named<span class="w"> </span>`my_color`<span class="w"> </span>will<span class="w"> </span>be<span class="w"> </span>used<span class="w"> </span>to<span class="w">
|
||||
</span>populate<span class="w"> </span>the<span class="w"> </span>`my_color`<span class="w"> </span>CSS<span class="w"> </span>value.<span class="w"> </span>Use<span class="w"> </span>a<span class="w"> </span>function<span class="w"> </span>field<span class="w"> </span>to<span class="w"> </span>return<span class="w"> </span>whichever<span class="w">
|
||||
</span>color<span class="w"> </span>you<span class="w"> </span>want<span class="w"> </span>depending<span class="w"> </span>on<span class="w"> </span>the<span class="w"> </span>other<span class="w"> </span>record<span class="w"> </span>values.<span class="w"> </span>Note<span class="w"> </span>that<span class="w"> </span>this<span class="w">
|
||||
</span>overrides<span class="w"> </span>the<span class="w"> </span>rest<span class="w"> </span>of<span class="w"> </span>`colors`<span class="w"> </span>attributes,<span class="w"> </span>and<span class="w"> </span>that<span class="w"> </span>you<span class="w"> </span>need<span class="w"> </span>the<span class="w"> </span>tree<span class="w">
|
||||
</span>to<span class="w"> </span>load<span class="w"> </span>your<span class="w"> </span>field<span class="w"> </span>in<span class="w"> </span>the<span class="w"> </span>first<span class="w"> </span>place<span class="w"> </span>by<span class="w"> </span>adding<span class="w"> </span>it<span class="w"> </span>as<span class="w"> </span>invisible<span class="w"> </span>field.
|
||||
</span>...
|
||||
</pre>
|
||||
<ul>
|
||||
<li><p class="first">Can use strings too… In the tree view declaration, put
|
||||
|
|
@ -499,6 +474,8 @@ with the name of the field on the <tt class="docutils literal"><tree></tt>
|
|||
<tt class="docutils literal">colors</tt> attribute is no longer in the RelaxNG schema of the tree
|
||||
view, so we can’t use it anymore. This feature has then been dropped,
|
||||
but could be reimplement in another way.</li>
|
||||
<li>Since version 17.0 coloring is written into <tt class="docutils literal">style</tt> attribute of
|
||||
(td) element</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="bug-tracker">
|
||||
|
|
@ -529,6 +506,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
|
|||
<li>Guewen Baconnier <<a class="reference external" href="mailto:guewen.baconnier@camptocamp.com">guewen.baconnier@camptocamp.com</a>></li>
|
||||
<li>Phuc Tran Thanh <<a class="reference external" href="mailto:phuc@trobz.com">phuc@trobz.com</a>></li>
|
||||
<li>Sylvain LE GAL <<a class="reference external" href="https://twitter.com/legalsylvain">https://twitter.com/legalsylvain</a>></li>
|
||||
<li>Jurgis Pralgauskis <<a class="reference external" href="mailto:jurgis@versada.eu">jurgis@versada.eu</a>></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="other-credits">
|
||||
|
|
@ -536,6 +514,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
|
|||
<p>The development of this module has been financially supported by:</p>
|
||||
<ul class="simple">
|
||||
<li>Camptocamp</li>
|
||||
<li>Versada</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
/** @odoo-module **/
|
||||
|
||||
import {patch} from "@web/core/utils/patch";
|
||||
import {ListRenderer} from "@web/views/list/list_renderer";
|
||||
import {evaluateBooleanExpr} from "@web/core/py_js/py";
|
||||
|
||||
patch(ListRenderer.prototype, {
|
||||
/**
|
||||
* @param {Object} column represents field
|
||||
* @param {Record} record
|
||||
* @returns {String} style code for the html element
|
||||
*/
|
||||
getDynamicColoredStyle(column, record) {
|
||||
let style = "";
|
||||
|
||||
let color = this.getDynamicColor(column, record, "bg_color");
|
||||
if (color !== undefined) {
|
||||
style += `background-color: ${color};`;
|
||||
}
|
||||
|
||||
color = this.getDynamicColor(column, record, "fg_color");
|
||||
if (color !== undefined) {
|
||||
// $td.css('color', color);
|
||||
style += `color: ${color};`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the `color` that has truthfull expresssion
|
||||
*
|
||||
* @param column {Object} represents field
|
||||
* @param record {Record}
|
||||
* @param color_target {String} 'bg_color' or 'fg_color'
|
||||
* @returns {String | undefined} color
|
||||
*/
|
||||
getDynamicColor(column, record, color_target) {
|
||||
if (color_target in column.options) {
|
||||
const definition = column.options[color_target];
|
||||
let result = "";
|
||||
for (const color_def of definition.split(";")) {
|
||||
const color_to_expression = this.pairColorParse(color_def);
|
||||
if (color_to_expression !== undefined) {
|
||||
const [color, expression] = color_to_expression;
|
||||
if (
|
||||
evaluateBooleanExpr(
|
||||
expression,
|
||||
record.evalContextWithVirtualIds
|
||||
)
|
||||
) {
|
||||
// We don't return first match,
|
||||
// as it can be default color (with "True" expression),
|
||||
// and later more precise condition may be found.
|
||||
result = color;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result || undefined;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {String} pairColor `color: expression` pair
|
||||
* @returns {Array} undefined or array of color, expression
|
||||
*/
|
||||
pairColorParse: 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, expression];
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
odoo.define("web_tree_dynamic_colored_field", function (require) {
|
||||
"use strict";
|
||||
|
||||
var ListRenderer = require("web.ListRenderer");
|
||||
var pyUtils = require("web.py_utils");
|
||||
var py = window.py;
|
||||
|
||||
ListRenderer.include({
|
||||
/**
|
||||
* Look up for a `color_field` or ``bg_color_field`` parameter in tree `colors` attribute
|
||||
*
|
||||
* @override
|
||||
*/
|
||||
_renderBody: function () {
|
||||
if (this.arch.attrs.colors) {
|
||||
var colorAttr = this.arch.attrs.colors.split(";");
|
||||
if (colorAttr.length > 0) {
|
||||
var colorType = colorAttr[0].split(":")[0].trim();
|
||||
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 (colorType === "color_field") {
|
||||
this.colorField = colorField;
|
||||
} else if (colorType === "bg_color_field") {
|
||||
this.bgColorField = colorField;
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
"No field named '" + colorField + "' present in view."
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
return this._super();
|
||||
},
|
||||
/**
|
||||
* Colorize a cell during it's render
|
||||
*
|
||||
* @override
|
||||
*/
|
||||
_renderBodyCell: function (record, node) {
|
||||
var $td = this._super.apply(this, arguments);
|
||||
var ctx = this.getEvalContext(record);
|
||||
this.applyColorize($td, record, node, ctx);
|
||||
return $td;
|
||||
},
|
||||
|
||||
/**
|
||||
* Colorize the current cell depending on expressions provided.
|
||||
*
|
||||
* @param {Element} $td a <td> tag inside a table representing a list view
|
||||
* @param {Object} record
|
||||
* @param {Object} node an XML node (must be a <field>)
|
||||
* @param {Object} ctx evaluation context for the record
|
||||
*/
|
||||
applyColorize: function ($td, record, node, ctx) {
|
||||
if (!node.attrs.options) {
|
||||
return;
|
||||
}
|
||||
if (node.tag !== "field") {
|
||||
return;
|
||||
}
|
||||
var treeBgColor = record.data[this.bgColorField];
|
||||
if (treeBgColor) {
|
||||
$td.css("background-color", treeBgColor);
|
||||
}
|
||||
// Apply <field>'s own `options`
|
||||
if (!node.attrs.options) {
|
||||
return;
|
||||
}
|
||||
if (node.tag !== "field") {
|
||||
return;
|
||||
}
|
||||
var nodeOptions = node.attrs.options;
|
||||
if (!_.isObject(nodeOptions)) {
|
||||
nodeOptions = pyUtils.py_eval(nodeOptions);
|
||||
}
|
||||
this.applyColorizeHelper($td, nodeOptions, node, "fg_color", "color", ctx);
|
||||
this.applyColorizeHelper(
|
||||
$td,
|
||||
nodeOptions,
|
||||
node,
|
||||
"bg_color",
|
||||
"background-color",
|
||||
ctx
|
||||
);
|
||||
},
|
||||
/**
|
||||
* @param {Element} $td a <td> tag inside a table representing a list view
|
||||
* @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
|
||||
* @param {Object} ctx evaluation context for the record
|
||||
*/
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Parse `<color>: <field> <operator> <value>` forms to
|
||||
* evaluable expressions
|
||||
*
|
||||
* @param {String} pairColor `color: expression` pair
|
||||
* @returns {Array} undefined or array of color, parsed expression,
|
||||
* original expression
|
||||
*/
|
||||
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
|
||||
* @returns {Object} evaluation context for the record
|
||||
*/
|
||||
getEvalContext: function (record) {
|
||||
var ctx = _.extend({}, record.data, pyUtils.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;
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t
|
||||
t-name="web_tree_dynamic_colored_field.ListRenderer.RecordRow"
|
||||
t-inherit="web.ListRenderer.RecordRow"
|
||||
t-inherit-mode="extension"
|
||||
>
|
||||
<xpath
|
||||
expr="//t[@t-if="column.type === 'field'"]//td"
|
||||
position="attributes"
|
||||
>
|
||||
<attribute
|
||||
name="t-attf-style"
|
||||
>{{getDynamicColoredStyle(column, record)}}</attribute>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Loading…
Reference in New Issue