Merge PR #2145 into 15.0

Signed-off-by pedrobaeza
This commit is contained in:
OCA-git-bot
2022-10-17 13:50:41 +00:00
20 changed files with 1079 additions and 0 deletions

View File

@@ -0,0 +1 @@
../../../../web_tree_dynamic_colored_field

View File

@@ -0,0 +1,6 @@
import setuptools
setuptools.setup(
setup_requires=['setuptools-odoo'],
odoo_addon=True,
)

View File

@@ -0,0 +1,160 @@
============================
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/15.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-15-0/web-15-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/15.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.
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
**Table of contents**
.. contents::
:local:
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='{"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.
* 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
...
<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.**
Known issues / Roadmap
======================
* Before version 13.0, this module had a feature allowing to change the color of
a line depending on a field, using a ``colors`` attribute with the name of the
field on the ``<tree>`` element. Since 13.0, the ``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.
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 <https://github.com/OCA/web/issues/new?body=module:%20web_tree_dynamic_colored_field%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
Do not contact contributors directly about support or help with technical issues.
Credits
=======
Authors
~~~~~~~
* Camptocamp
* Therp BV
Contributors
~~~~~~~~~~~~
* Damien Crier <damien.crier@camptocamp.com>
* Holger Brunn <hbrunn@therp.nl>
* Artem Kostyuk <a.kostyuk@mobilunity.com>
* Guewen Baconnier <guewen.baconnier@camptocamp.com>
* Phuc Tran Thanh <phuc@trobz.com>
Other credits
~~~~~~~~~~~~~
The development of this module has been financially supported by:
* Camptocamp
Maintainers
~~~~~~~~~~~
This module is maintained by the OCA.
.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org
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 <https://github.com/OCA/web/tree/15.0/web_tree_dynamic_colored_field>`_ project on GitHub.
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

View File

@@ -0,0 +1 @@
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).

View File

@@ -0,0 +1,19 @@
# Copyright 2015-2018 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": "15.0.1.0.0",
"depends": ["web"],
"author": "Camptocamp, Therp BV, Odoo Community Association (OCA)",
"license": "AGPL-3",
"website": "https://github.com/OCA/web",
"demo": ["demo/res_users.xml"],
"installable": True,
"assets": {
"web.assets_backend": [
"/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js",
],
},
}

View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<record id="view_users_tree" model="ir.ui.view">
<field name="model">res.users</field>
<field name="inherit_id" ref="base.view_users_tree" />
<field name="arch" type="xml">
<field name="login_date" position="attributes">
<attribute name="options">{
"bg_color": "#9e1635: login_date == False",
"fg_color": "white: login_date == False"
}</attribute>
</field>
<field name="name" position="attributes">
<attribute name="options"> {
"bg_color": "blue; #653b5b: login == 'admin'",
"fg_color": "white"
}</attribute>
</field>
</field>
</record>
</odoo>

View File

@@ -0,0 +1,22 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_tree_dynamic_colored_field
#
# Translators:
# Pedro M. Baeza <pedro.baeza@gmail.com>, 2017
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 9.0c\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-01-05 01:38+0000\n"
"PO-Revision-Date: 2017-01-05 01:38+0000\n"
"Last-Translator: Pedro M. Baeza <pedro.baeza@gmail.com>, 2017\n"
"Language-Team: Spanish (https://www.transifex.com/oca/teams/23907/es/)\n"
"Language: es\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#~ msgid "columns.fct_colorize(record, column)"
#~ msgstr "columns.fct_colorize(record, column)"

View File

@@ -0,0 +1,22 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_tree_dynamic_colored_field
#
# Translators:
# Jarmo Kortetjärvi <jarmo.kortetjarvi@gmail.com>, 2016
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 8.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2016-07-08 16:36+0000\n"
"PO-Revision-Date: 2016-07-08 16:36+0000\n"
"Last-Translator: Jarmo Kortetjärvi <jarmo.kortetjarvi@gmail.com>, 2016\n"
"Language-Team: Finnish (https://www.transifex.com/oca/teams/23907/fi/)\n"
"Language: fi\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#~ msgid "columns.fct_colorize(record, column)"
#~ msgstr "columns.fct_colorize(record, column)"

View File

@@ -0,0 +1,23 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_tree_dynamic_colored_field
#
# Translators:
# Peter Hageman <hageman.p@gmail.com>, 2017
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 10.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-06-22 08:27+0000\n"
"PO-Revision-Date: 2017-06-22 08:27+0000\n"
"Last-Translator: Peter Hageman <hageman.p@gmail.com>, 2017\n"
"Language-Team: Dutch (Netherlands) (https://www.transifex.com/oca/"
"teams/23907/nl_NL/)\n"
"Language: nl_NL\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#~ msgid "columns.fct_colorize(record, column)"
#~ msgstr "columns.fct_colorize(record, column)"

View File

@@ -0,0 +1,23 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_tree_dynamic_colored_field
#
# Translators:
# Matjaž Mozetič <m.mozetic@matmoz.si>, 2016
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 8.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2016-06-24 00:46+0000\n"
"PO-Revision-Date: 2016-06-24 00:46+0000\n"
"Last-Translator: Matjaž Mozetič <m.mozetic@matmoz.si>, 2016\n"
"Language-Team: Slovenian (https://www.transifex.com/oca/teams/23907/sl/)\n"
"Language: sl\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n"
"%100==4 ? 2 : 3);\n"
#~ msgid "columns.fct_colorize(record, column)"
#~ msgstr "columns.fct_colorize(record, column)"

View File

@@ -0,0 +1,13 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 14.0\n"
"Report-Msgid-Bugs-To: \n"
"Last-Translator: \n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"

View File

@@ -0,0 +1,14 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 12.0\n"
"Report-Msgid-Bugs-To: \n"
"Last-Translator: Automatically generated\n"
"Language-Team: none\n"
"Language: zh_CN\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=1; plural=0;\n"

View File

@@ -0,0 +1,6 @@
* Damien Crier <damien.crier@camptocamp.com>
* Holger Brunn <hbrunn@therp.nl>
* Artem Kostyuk <a.kostyuk@mobilunity.com>
* Guewen Baconnier <guewen.baconnier@camptocamp.com>
* Phuc Tran Thanh <phuc@trobz.com>
* Sylvain LE GAL <https://twitter.com/legalsylvain>

View File

@@ -0,0 +1,3 @@
The development of this module has been financially supported by:
* Camptocamp

View File

@@ -0,0 +1,8 @@
This module aims to add support for dynamically coloring fields in tree view
according to data in the record.
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

View File

@@ -0,0 +1,5 @@
* Before version 13.0, this module had a feature allowing to change the color of
a line depending on a field, using a ``colors`` attribute with the name of the
field on the ``<tree>`` element. Since 13.0, the ``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.

View File

@@ -0,0 +1,70 @@
* 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='{"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>
...
* 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.
* 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
...
<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.**

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@@ -0,0 +1,497 @@
<?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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
<title>Colorize field in tree views</title>
<style type="text/css">
/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/
/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
border: 0 }
table.borderless td, table.borderless th {
/* Override padding for "table.docutils td" with "! important".
The right padding separates the table cells. */
padding: 0 0.5em 0 0 ! important }
.first {
/* Override more specific margin styles with "! important". */
margin-top: 0 ! important }
.last, .with-subtitle {
margin-bottom: 0 ! important }
.hidden {
display: none }
.subscript {
vertical-align: sub;
font-size: smaller }
.superscript {
vertical-align: super;
font-size: smaller }
a.toc-backref {
text-decoration: none ;
color: black }
blockquote.epigraph {
margin: 2em 5em ; }
dl.docutils dd {
margin-bottom: 0.5em }
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
overflow: hidden;
}
/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
font-weight: bold }
*/
div.abstract {
margin: 2em 5em }
div.abstract p.topic-title {
font-weight: bold ;
text-align: center }
div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
margin: 2em ;
border: medium outset ;
padding: 1em }
div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
font-weight: bold ;
font-family: sans-serif }
div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, .code .error {
color: red ;
font-weight: bold ;
font-family: sans-serif }
/* Uncomment (and remove this text!) to get reduced vertical space in
compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
margin-bottom: 0.5em }
div.compound .compound-last, div.compound .compound-middle {
margin-top: 0.5em }
*/
div.dedication {
margin: 2em 5em ;
text-align: center ;
font-style: italic }
div.dedication p.topic-title {
font-weight: bold ;
font-style: normal }
div.figure {
margin-left: 2em ;
margin-right: 2em }
div.footer, div.header {
clear: both;
font-size: smaller }
div.line-block {
display: block ;
margin-top: 1em ;
margin-bottom: 1em }
div.line-block div.line-block {
margin-top: 0 ;
margin-bottom: 0 ;
margin-left: 1.5em }
div.sidebar {
margin: 0 0 0.5em 1em ;
border: medium outset ;
padding: 1em ;
background-color: #ffffee ;
width: 40% ;
float: right ;
clear: right }
div.sidebar p.rubric {
font-family: sans-serif ;
font-size: medium }
div.system-messages {
margin: 5em }
div.system-messages h1 {
color: red }
div.system-message {
border: medium outset ;
padding: 1em }
div.system-message p.system-message-title {
color: red ;
font-weight: bold }
div.topic {
margin: 2em }
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
margin-top: 0.4em }
h1.title {
text-align: center }
h2.subtitle {
text-align: center }
hr.docutils {
width: 75% }
img.align-left, .figure.align-left, object.align-left, table.align-left {
clear: left ;
float: left ;
margin-right: 1em }
img.align-right, .figure.align-right, object.align-right, table.align-right {
clear: right ;
float: right ;
margin-left: 1em }
img.align-center, .figure.align-center, object.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}
table.align-center {
margin-left: auto;
margin-right: auto;
}
.align-left {
text-align: left }
.align-center {
clear: both ;
text-align: center }
.align-right {
text-align: right }
/* reset inner alignment in figures */
div.align-right {
text-align: inherit }
/* div.align-center * { */
/* text-align: left } */
.align-top {
vertical-align: top }
.align-middle {
vertical-align: middle }
.align-bottom {
vertical-align: bottom }
ol.simple, ul.simple {
margin-bottom: 1em }
ol.arabic {
list-style: decimal }
ol.loweralpha {
list-style: lower-alpha }
ol.upperalpha {
list-style: upper-alpha }
ol.lowerroman {
list-style: lower-roman }
ol.upperroman {
list-style: upper-roman }
p.attribution {
text-align: right ;
margin-left: 50% }
p.caption {
font-style: italic }
p.credits {
font-style: italic ;
font-size: smaller }
p.label {
white-space: nowrap }
p.rubric {
font-weight: bold ;
font-size: larger ;
color: maroon ;
text-align: center }
p.sidebar-title {
font-family: sans-serif ;
font-weight: bold ;
font-size: larger }
p.sidebar-subtitle {
font-family: sans-serif ;
font-weight: bold }
p.topic-title {
font-weight: bold }
pre.address {
margin-bottom: 0 ;
margin-top: 0 ;
font: inherit }
pre.literal-block, pre.doctest-block, pre.math, pre.code {
margin-left: 2em ;
margin-right: 2em }
pre.code .ln { color: grey; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}
span.classifier {
font-family: sans-serif ;
font-style: oblique }
span.classifier-delimiter {
font-family: sans-serif ;
font-weight: bold }
span.interpreted {
font-family: sans-serif }
span.option {
white-space: nowrap }
span.pre {
white-space: pre }
span.problematic {
color: red }
span.section-subtitle {
/* font-size relative to parent (h1..h6 element) */
font-size: 80% }
table.citation {
border-left: solid 1px gray;
margin-left: 1px }
table.docinfo {
margin: 2em 4em }
table.docutils {
margin-top: 0.5em ;
margin-bottom: 0.5em }
table.footnote {
border-left: solid 1px black;
margin-left: 1px }
table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
padding-left: 0.5em ;
padding-right: 0.5em ;
vertical-align: top }
table.docutils th.field-name, table.docinfo th.docinfo-name {
font-weight: bold ;
text-align: left ;
white-space: nowrap ;
padding-left: 0 }
/* "booktabs" style (no vertical lines) */
table.docutils.booktabs {
border: 0px;
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
table.docutils.booktabs * {
border: 0px;
}
table.docutils.booktabs th {
border-bottom: thin solid;
text-align: left;
}
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
font-size: 100% }
ul.auto-toc {
list-style-type: none }
</style>
</head>
<body>
<div class="document" id="colorize-field-in-tree-views">
<h1 class="title">Colorize field in tree views</h1>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_tree_dynamic_colored_field"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_tree_dynamic_colored_field"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/15.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module aims to add support for dynamically coloring fields in tree view
according to data in the record.</p>
<div class="section" id="features">
<h1>Features</h1>
<ul class="simple">
<li>Add attribute <tt class="docutils literal">bg_color</tt> on fields <tt class="docutils literal">options</tt> to color background of a cell in tree view</li>
<li>Add attribute <tt class="docutils literal">fg_color</tt> on fields <tt class="docutils literal">options</tt> to change text color of a cell in tree view</li>
</ul>
<p><strong>Table of contents</strong></p>
</div>
<div class="section" id="usage">
<h1>Usage</h1>
<ul>
<li><p class="first">In the tree view declaration, put <tt class="docutils literal"><span class="pre">options='{&quot;bg_color&quot;:</span> &quot;red: <span class="pre">customer==True&quot;}</span></tt> attribute in the <tt class="docutils literal">field</tt> tag:</p>
<pre class="literal-block">
...
&lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt;
&lt;tree string=&quot;View name&quot;&gt;
...
&lt;field name=&quot;name&quot; options='{&quot;bg_color&quot;: &quot;red: customer == True&quot;}'/&gt;
...
&lt;/tree&gt;
&lt;/field&gt;
...
With this example, column which renders 'name' field will have its background colored in red.
</pre>
</li>
<li><p class="first">In the tree view declaration, put <tt class="docutils literal"><span class="pre">options='{&quot;fg_color&quot;:</span> &quot;white:customer == <span class="pre">True&quot;}'</span></tt> attribute in the <tt class="docutils literal">field</tt> tag:</p>
<pre class="literal-block">
...
&lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt;
&lt;tree string=&quot;View name&quot;&gt;
...
&lt;field name=&quot;name&quot; options='{&quot;fg_color&quot;: &quot;white:customer == True&quot;}'/&gt;
...
&lt;/tree&gt;
&lt;/field&gt;
...
With this example, column which renders 'name' field will have its text colored in white on a customer records.
</pre>
</li>
<li><p class="first">If you want to use more than one color, you can split the attributes using ;:</p>
</li>
</ul>
<pre class="code literal-block">
options='{&quot;fg_color&quot;: &quot;red:red_color == True; green:green_color == True&quot;}'
</pre>
<p>Example:</p>
<pre class="code xml literal-block">
...
<span class="nt">&lt;field</span> <span class="na">name=</span><span class="s">&quot;arch&quot;</span> <span class="na">type=</span><span class="s">&quot;xml&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;tree</span> <span class="na">string=</span><span class="s">&quot;View name&quot;</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;field</span> <span class="na">name=</span><span class="s">&quot;name&quot;</span> <span class="na">options=</span><span class="s">'{&quot;fg_color&quot;: &quot;red:red_color == True; green:green_color == True&quot;}'</span><span class="nt">/&gt;</span>
...
<span class="nt">&lt;/tree&gt;</span>
<span class="nt">&lt;/field&gt;</span>
...
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.
</pre>
<p><strong>Note that you should always use single quotes for fields ``options`` and wrap nested values in double quotes since ``options`` is a JSON object.</strong></p>
</div>
<div class="section" id="known-issues-roadmap">
<h1>Known issues / Roadmap</h1>
<ul class="simple">
<li>Before version 13.0, this module had a feature allowing to change the color of
a line depending on a field, using a <tt class="docutils literal">colors</tt> attribute with the name of the
field on the <tt class="docutils literal">&lt;tree&gt;</tt> element. Since 13.0, the <tt class="docutils literal">colors</tt> attribute is no
longer in the RelaxNG schema of the tree view, so we cant use it anymore.
This feature has then been dropped, but could be reimplement in another way.</li>
</ul>
</div>
<div class="section" id="bug-tracker">
<h1>Bug Tracker</h1>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
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
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_tree_dynamic_colored_field%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
</div>
<div class="section" id="credits">
<h1>Credits</h1>
<div class="section" id="authors">
<h2>Authors</h2>
<ul class="simple">
<li>Camptocamp</li>
<li>Therp BV</li>
</ul>
</div>
<div class="section" id="contributors">
<h2>Contributors</h2>
<ul class="simple">
<li>Damien Crier &lt;<a class="reference external" href="mailto:damien.crier&#64;camptocamp.com">damien.crier&#64;camptocamp.com</a>&gt;</li>
<li>Holger Brunn &lt;<a class="reference external" href="mailto:hbrunn&#64;therp.nl">hbrunn&#64;therp.nl</a>&gt;</li>
<li>Artem Kostyuk &lt;<a class="reference external" href="mailto:a.kostyuk&#64;mobilunity.com">a.kostyuk&#64;mobilunity.com</a>&gt;</li>
<li>Guewen Baconnier &lt;<a class="reference external" href="mailto:guewen.baconnier&#64;camptocamp.com">guewen.baconnier&#64;camptocamp.com</a>&gt;</li>
<li>Phuc Tran Thanh &lt;<a class="reference external" href="mailto:phuc&#64;trobz.com">phuc&#64;trobz.com</a>&gt;</li>
</ul>
</div>
<div class="section" id="other-credits">
<h2>Other credits</h2>
<p>The development of this module has been financially supported by:</p>
<ul class="simple">
<li>Camptocamp</li>
</ul>
</div>
<div class="section" id="maintainers">
<h2>Maintainers</h2>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
<p>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.</p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_tree_dynamic_colored_field">OCA/web</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,165 @@
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;
},
});
});