Merge PR #1480 into 13.0

Signed-off-by simahawk
pull/1533/head
OCA-git-bot 2020-03-19 12:14:52 +00:00
commit 4d03d6fe66
20 changed files with 1046 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,162 @@
============================
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/12.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-12-0/web-12-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/12.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.
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
**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.
* 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>
...
* 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.**
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:%2012.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>
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/12.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,15 @@
# 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": "13.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"],
"data": ["views/web_tree_dynamic_colored_field.xml"],
"installable": True,
}

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,26 @@
# 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"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Language: es\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#. module: web_tree_dynamic_colored_field
#. openerp-web
#: code:addons/web_tree_dynamic_colored_field/static/src/xml/web_tree_dynamic_colored_field.xml:7
#, python-format
msgid "columns.fct_colorize(record, column)"
msgstr "columns.fct_colorize(record, column)"

View File

@ -0,0 +1,26 @@
# 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"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Language: fi\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#. module: web_tree_dynamic_colored_field
#. openerp-web
#: code:addons/web_tree_dynamic_colored_field/static/src/xml/web_tree_dynamic_colored_field.xml:7
#, python-format
msgid "columns.fct_colorize(record, column)"
msgstr "columns.fct_colorize(record, column)"

View File

@ -0,0 +1,26 @@
# 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"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Language: nl_NL\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#. module: web_tree_dynamic_colored_field
#. openerp-web
#: code:addons/web_tree_dynamic_colored_field/static/src/xml/web_tree_dynamic_colored_field.xml:7
#, python-format
msgid "columns.fct_colorize(record, column)"
msgstr "columns.fct_colorize(record, column)"

View File

@ -0,0 +1,26 @@
# 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"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Language: sl\n"
"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n%100==4 ? 2 : 3);\n"
#. module: web_tree_dynamic_colored_field
#. openerp-web
#: code:addons/web_tree_dynamic_colored_field/static/src/xml/web_tree_dynamic_colored_field.xml:7
#, python-format
msgid "columns.fct_colorize(record, column)"
msgstr "columns.fct_colorize(record, column)"

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: <>\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,4 @@
* Damien Crier <damien.crier@camptocamp.com>
* Holger Brunn <hbrunn@therp.nl>
* Artem Kostyuk <a.kostyuk@mobilunity.com>
* Guewen Baconnier <guewen.baconnier@camptocamp.com>

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,55 @@
* 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.**

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/12.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-12-0/web-12-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/12.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>
<p>It provides attributes on fields with the similar syntax as the <tt class="docutils literal">colors</tt> attribute
in tree tags.</p>
<p>Further, it provides a <tt class="docutils literal">color_field</tt> attribute on tree tagss <tt class="docutils literal">colors</tt> to use
a fields value as color.</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>
<li>Add attribute <tt class="docutils literal">color_field</tt> on the tree elements <tt class="docutils literal">colors</tt> to use as color</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">In the tree view declaration, use <tt class="docutils literal"><span class="pre">options='&quot;color_field&quot;:</span> &quot;my_color&quot;'</tt> attribute in the <tt class="docutils literal">tree</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; colors=&quot;color_field: my_color&quot; &gt;
...
&lt;field name=&quot;my_color&quot; invisible=&quot;1&quot;/&gt;
...
&lt;/tree&gt;
&lt;/field&gt;
...
</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="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:%2012.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>
</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/12.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,124 @@
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({
/**
* 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 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;
},
});
});

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<template
id="assets_backend"
name="web_tree_dynamic_colored_field assets"
inherit_id="web.assets_backend"
>
<xpath expr="." position="inside">
<script
type="text/javascript"
src="/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js"
/>
</xpath>
</template>
</odoo>