[ADD] web_widget_child_selector

pull/1430/head
Enric Tobella 2019-11-07 18:05:12 +01:00
parent 94b789365b
commit 57789bb60f
15 changed files with 741 additions and 0 deletions

View File

@ -0,0 +1,88 @@
=========================
Web Widget Child Selector
=========================
.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
:target: https://odoo-community.org/page/development-status
:alt: Beta
.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3
.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
:target: https://github.com/OCA/web/tree/11.0/web_widget_child_selector
:alt: OCA/web
.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
:target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_widget_child_selector
:alt: Translate me on Weblate
.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
:target: https://runbot.odoo-community.org/runbot/162/11.0
:alt: Try me on Runbot
|badge1| |badge2| |badge3| |badge4| |badge5|
This module allows to use a new widget for many2one fields that are made hierarchically.
Now, you can navigate easily between the hierarchy.
When we are using readonly, the behaviour is similar than Many2one, but on edition
we are able to select the parents and childs in order to navigate properly.
.. image:: https://raw.githubusercontent.com/web_widget_child_selector/static/description/edit_mode.png
:alt: Edition Screenshot
**Table of contents**
.. contents::
:local:
Usage
=====
Use child_selection widget on a field.
If necessary we can use child_selection_field on options in order to define
which field we will show on edition only.
For example, name instead of display_name.
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_widget_child_selector%0Aversion:%2011.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
~~~~~~~
* Creu Blanca
Contributors
~~~~~~~~~~~~
* Enric Tobella <etobella@creublanca.es>
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/11.0/web_widget_child_selector>`_ project on GitHub.
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

View File

@ -0,0 +1 @@
from . import models

View File

@ -0,0 +1,20 @@
# Copyright 2019 Creu Blanca
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
{
'name': 'Web Widget Child Selector',
'summary': "Widget used for navigation on hierarchy fields",
'version': '11.0.1.0.0',
'license': 'AGPL-3',
'author': 'Creu Blanca,Odoo Community Association (OCA)',
'website': 'https://github.com/OCA/web',
'depends': [
'web',
],
'data': [
'views/assets.xml',
],
'qweb': [
'static/src/xml/widget_child_selector.xml',
],
}

View File

@ -0,0 +1 @@
from . import base

View File

@ -0,0 +1,38 @@
# Copyright 2019 Creu Blanca
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
from odoo import models, _
class Base(models.AbstractModel):
_inherit = 'base'
def get_record_parent(self):
self.ensure_one()
if not hasattr(self, self._parent_name):
return False
parent = getattr(self, self._parent_name)
if not parent:
return False
return parent.name_get()[0]
def _get_record_parents(self, field):
if not self:
return [(False, _('Root'))]
return getattr(
self, self._parent_name
)._get_record_parents(field) + [(self.id, str(getattr(self, field)))]
def _get_record_direct_childs(self, field):
if not hasattr(self, self._parent_name):
return []
return [(r.id, str(getattr(r, field))) for r in self.search([(
self._parent_name, '=', self.id or False
)])]
def get_record_direct_childs_parents(self, options):
field = options.get('child_selection_field', 'display_name')
return {
'childs': self._get_record_direct_childs(field),
'parents': self._get_record_parents(field)
}

View File

@ -0,0 +1 @@
* Enric Tobella <etobella@creublanca.es>

View File

@ -0,0 +1,8 @@
This module allows to use a new widget for many2one fields that are made hierarchically.
Now, you can navigate easily between the hierarchy.
When we are using readonly, the behaviour is similar than Many2one, but on edition
we are able to select the parents and childs in order to navigate properly.
.. image:: /web_widget_child_selector/static/description/edit_mode.png
:alt: Edition Screenshot

View File

@ -0,0 +1,4 @@
Use child_selection widget on a field.
If necessary we can use child_selection_field on options in order to define
which field we will show on edition only.
For example, name instead of display_name.

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@ -0,0 +1,431 @@
<?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.14: http://docutils.sourceforge.net/" />
<title>Web Widget Child Selector</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="web-widget-child-selector">
<h1 class="title">Web Widget Child Selector</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/11.0/web_widget_child_selector"><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-11-0/web-11-0-web_widget_child_selector"><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/11.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module allows to use a new widget for many2one fields that are made hierarchically.
Now, you can navigate easily between the hierarchy.</p>
<p>When we are using readonly, the behaviour is similar than Many2one, but on edition
we are able to select the parents and childs in order to navigate properly.</p>
<img alt="Edition Screenshot" src="https://raw.githubusercontent.com/web_widget_child_selector/static/description/edit_mode.png" />
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
<ul class="simple">
<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
<li><a class="reference internal" href="#bug-tracker" id="id2">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="id3">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="id4">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="id5">Contributors</a></li>
<li><a class="reference internal" href="#maintainers" id="id6">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<div class="section" id="usage">
<h1><a class="toc-backref" href="#id1">Usage</a></h1>
<p>Use child_selection widget on a field.
If necessary we can use child_selection_field on options in order to define
which field we will show on edition only.
For example, name instead of display_name.</p>
</div>
<div class="section" id="bug-tracker">
<h1><a class="toc-backref" href="#id2">Bug Tracker</a></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_widget_child_selector%0Aversion:%2011.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><a class="toc-backref" href="#id3">Credits</a></h1>
<div class="section" id="authors">
<h2><a class="toc-backref" href="#id4">Authors</a></h2>
<ul class="simple">
<li>Creu Blanca</li>
</ul>
</div>
<div class="section" id="contributors">
<h2><a class="toc-backref" href="#id5">Contributors</a></h2>
<ul class="simple">
<li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
</ul>
</div>
<div class="section" id="maintainers">
<h2><a class="toc-backref" href="#id6">Maintainers</a></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/11.0/web_widget_child_selector">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,95 @@
odoo.define('web.web_widget_child_selector', function(require) {
"use strict";
var relational_fields = require('web.relational_fields');
var field_registry = require('web.field_registry');
var core = require('web.core');
var qweb = core.qweb;
var FieldMany2One = relational_fields.FieldMany2One;
var FieldChildSelector = FieldMany2One.extend({
template: "FieldChildSelector",
events: _.extend({}, FieldMany2One.prototype.events, {
'click .o_child_selection_button': '_onChildSelectionClick',
}),
start: function () {
// booleean indicating that the content of the input isn't synchronized
// with the current m2o value (for instance, the user is currently
// typing something in the input, and hasn't selected a value yet).
this.$input_dropdown = this.$('.o_input_dropdown');
this.$input_value = this.$('.o_input_value')
return this._super.apply(this, arguments);
},
_renderReadonly: function () {
var value = _.escape((this.m2o_value || "").trim()).split("\n").join("<br/>");
this.$el.html(value);
if (!this.nodeOptions.no_open && this.value) {
this.$el.attr('href', _.str.sprintf('#id=%s&model=%s', this.value.res_id, this.field.relation));
this.$el.addClass('o_form_uri');
}
},
_set_childs: function() {
var self = this;
this.childs = {};
this.parents = {};
this.$input_dropdown.empty();
this.$input_value.empty();
var resources = [];
if (this.value.res_id)
resources = [this.value.res_id]
this._rpc({
model: this.field.relation,
method: 'get_record_direct_childs_parents',
args: [ resources, this.nodeOptions],
context: this.record.getContext(this.recordParams),
})
.then(function (data) {
_.each(data['parents'], function(parent, key) {
self.parents[key] = parent;
});
_.each(data['childs'], function(child, key) {
self.childs[key] = child;
});
self.$input_dropdown.append(qweb.render('FieldChildSelectorChild', {
'childs': self.childs,
}));
self.$input_value.append(qweb.render('FieldChildSelectorParent', {
'parents': self.parents,
}));
});
},
_onChildSelectionParent: function(event) {
var self = this;
this._rpc({
model: this.field.relation,
method: 'get_record_parent',
args: [[this.value.res_id || false]],
context: this.record.getContext(this.recordParams),
})
.then(function (parent) {
if (parent)
self._setValue({
id: parent[0], display_name: parent[1]
})
else
self._setValue({
id: false, display_name: false
});
});
},
_onChildSelectionClick: function(event) {
var target = $(event.target);
var index = target.data('index');
var type = target.data('type');
var value = (type === 'child') ? this.childs[index]: this.parents[index];
this._setValue({id: value[0], display_name: value[1]});
},
_renderEdit: function() {
this._set_childs();
},
});
field_registry.add('child_selector', FieldChildSelector);
return FieldChildSelector;
})

View File

@ -0,0 +1,9 @@
.btn.o_child_selection_button {
white-space:normal;
width:100%;
margin:2px;
}
a.o_child_selection_button {
cursor: pointer,
}

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="FieldChildSelector">
<!--<div class="o_element"/>-->
<t t-if="widget.mode === 'readonly'">
<a t-if="!widget.nodeOptions.no_open" t-att-tabindex="widget.attrs.tabindex" class="o_form_uri" href="#"/>
<span t-if="widget.nodeOptions.no_open"/>
</t>
<div t-if="widget.mode === 'edit'" class="o_field_widget">
<span class="o_input_value"/>
<div class="o_input_dropdown"/>
</div>
</t>
<t t-name="FieldChildSelectorChild">
<div class="row">
<div t-foreach="childs" t-as="key" class="col-xs-12">
<button t-att-data-id="childs[key][0]" t-att-data-index="key"
data-type="child" class="o_child_selection_button btn">
<t t-esc="childs[key][1]"/>
</button>
</div>
</div>
</t>
<t t-name="FieldChildSelectorParent">
<span>
<t t-foreach="parents" t-as="key">
<t t-if="key > 0"> / </t>
<a t-att-data-id="parents[key][0]" t-att-data-index="key"
data-type="parent" class="o_child_selection_button">
<t t-esc="parents[key][1]"/>
</a>
</t>
</span>
</t>
</templates>

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_backend" name="web_widget_child_selector" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/web_widget_child_selector/static/src/less/widget_child_selector.less"/>
<script type="text/javascript" src="/web_widget_child_selector/static/src/js/widget_child_selector.js"/>
</xpath>
</template>
</odoo>