[MERGE] Merged VME's branch for improving tree view for v7.0
bzr revid: jra@tinyerp.com-20120704053845-51oljc55jb3fznxh
This commit is contained in:
@@ -2236,6 +2236,59 @@
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.openerp .tree_header {
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #cacaca;
|
||||
color: #4c4c4c;
|
||||
padding: 5px;
|
||||
height: 25px;
|
||||
}
|
||||
.openerp .tree_header button {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.openerp .oe-treeview-table {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.openerp .oe-treeview-table th {
|
||||
padding: 10px;
|
||||
color: #4c4c4c;
|
||||
font-weight: bold;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 2px solid #cacaca;
|
||||
}
|
||||
.openerp .oe-treeview-table .treeview-tr, .openerp .oe-treeview-table .treeview-td {
|
||||
cursor: pointer;
|
||||
border-right: 1px dotted #afafb6;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #cfcccc;
|
||||
}
|
||||
.openerp .oe-treeview-table tr:hover {
|
||||
background-color: #e0e0f8;
|
||||
}
|
||||
.openerp .oe-treeview-table .oe-number {
|
||||
text-align: right !important;
|
||||
}
|
||||
.openerp .oe-treeview-table span {
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
.openerp .oe-treeview-table .treeview-tr.oe-treeview-first {
|
||||
background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat;
|
||||
}
|
||||
.openerp .oe-treeview-table .oe_open .treeview-tr.oe-treeview-first {
|
||||
background-image: url(/web/static/src/img/collapse.gif);
|
||||
}
|
||||
.openerp .oe-treeview-table .treeview-tr.oe-treeview-first span, .openerp .oe-treeview-table .treeview-td.oe-treeview-first span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.kitten-mode-activated {
|
||||
background-image: url(http://placekitten.com/g/1365/769);
|
||||
background-size: cover;
|
||||
|
||||
@@ -1764,6 +1764,49 @@ $colour4: #8a89ba
|
||||
float: right
|
||||
color: #333
|
||||
// }}}
|
||||
//Tree view
|
||||
.openerp
|
||||
.tree_header
|
||||
background-color: #f0f0f0
|
||||
border-bottom: 1px solid #cacaca
|
||||
color: #4c4c4c
|
||||
padding: 5px
|
||||
height: 25px
|
||||
button
|
||||
float: right
|
||||
height: 27px
|
||||
margin-right: 5px
|
||||
.oe-treeview-table
|
||||
width: 100%
|
||||
background-color: white
|
||||
border-spacing: 0
|
||||
th
|
||||
padding: 10px
|
||||
color: #4c4c4c
|
||||
font-weight: bold
|
||||
background-color: #f0f0f0
|
||||
border-bottom: 2px solid #cacaca
|
||||
.treeview-tr, .treeview-td
|
||||
cursor: pointer
|
||||
border-right: 1px dotted #afafb6
|
||||
vertical-align: top
|
||||
text-align: left
|
||||
border-bottom: 1px solid #cfcccc
|
||||
tr:hover
|
||||
background-color: #e0e0f8
|
||||
.oe-number
|
||||
text-align: right !important
|
||||
span
|
||||
font-size: 90%
|
||||
font-weight: normal
|
||||
white-space: nowrap
|
||||
display: block
|
||||
.treeview-tr.oe-treeview-first
|
||||
background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat
|
||||
.oe_open .treeview-tr.oe-treeview-first
|
||||
background-image: url(/web/static/src/img/collapse.gif)
|
||||
.treeview-tr.oe-treeview-first span, .treeview-td.oe-treeview-first span
|
||||
margin-left: 16px
|
||||
// Kitten Mode {{{
|
||||
.kitten-mode-activated
|
||||
background-image: url(http://placekitten.com/g/1365/769)
|
||||
|
||||
@@ -63,6 +63,12 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
}
|
||||
return fields;
|
||||
},
|
||||
store_record:function(records){
|
||||
var self = this;
|
||||
_(records).each(function (record) {
|
||||
self.records[record.id] = record;
|
||||
});
|
||||
},
|
||||
on_loaded: function (fields_view) {
|
||||
var self = this;
|
||||
var has_toolbar = !!fields_view.arch.attrs.toolbar;
|
||||
@@ -87,17 +93,19 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
this.$element.addClass(this.fields_view.arch.attrs['class']);
|
||||
|
||||
this.dataset.read_slice(this.fields_list()).then(function(records) {
|
||||
self.store_record(records);
|
||||
if (!has_toolbar) {
|
||||
// WARNING: will do a second read on the same ids, but only on
|
||||
// first load so not very important
|
||||
self.getdata(null, _(records).pluck('id'));
|
||||
self.render_data({'null':records})
|
||||
self.getdata(_.pluck(records,"id"));
|
||||
return;
|
||||
}
|
||||
|
||||
var $select = self.$element.find('select')
|
||||
.change(function () {
|
||||
var $option = $(this).find(':selected');
|
||||
self.getdata($option.val(), $option.data('children'));
|
||||
self.getdata($option.val());
|
||||
});
|
||||
_(records).each(function (record) {
|
||||
self.records[record.id] = record;
|
||||
@@ -112,7 +120,12 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
$select.change();
|
||||
}
|
||||
});
|
||||
|
||||
this.$element.find("#tree_view_expand").click(function(){
|
||||
self.expand_all();
|
||||
});
|
||||
this.$element.find("#tree_view_collapse").click(function(){
|
||||
self.collpase_all();
|
||||
});
|
||||
// TODO store open nodes in url ?...
|
||||
this.do_push_state({});
|
||||
|
||||
@@ -128,6 +141,22 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
return [color, py.parse(py.tokenize(expr)), expr];
|
||||
}).value();
|
||||
},
|
||||
expand_all: function(){
|
||||
var self = this;
|
||||
var tr = this.$element.find(".oe-treeview-table tbody tr[id^='treerow_']");
|
||||
_.each(tr,function(rec){
|
||||
self.showcontent($(rec).attr('data-id'),true);
|
||||
});
|
||||
},
|
||||
collpase_all: function(){
|
||||
var self = this;
|
||||
var root_tr = this.$element.find(".oe-treeview-table tbody tr[data-level='"+1+"']");
|
||||
_.each(root_tr,function(rec){
|
||||
if($(rec).hasClass('oe_open')){
|
||||
self.showcontent($(rec).attr('data-id'),false);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Returns the color for the provided record in the current view (from the
|
||||
* ``@colors`` attribute)
|
||||
@@ -164,50 +193,44 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
});
|
||||
|
||||
this.$element.delegate('.treeview-tr', 'click', function () {
|
||||
var is_loaded = 0,
|
||||
$this = $(this),
|
||||
var $this = $(this),
|
||||
record_id = $this.data('id'),
|
||||
record = self.records[record_id],
|
||||
children_ids = record[self.children_field];
|
||||
|
||||
_(children_ids).each(function(childid) {
|
||||
if (self.$element.find('#treerow_' + childid).length) {
|
||||
if (self.$element.find('#treerow_' + childid).is(':hidden')) {
|
||||
is_loaded = -1;
|
||||
} else {
|
||||
is_loaded++;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (is_loaded === 0) {
|
||||
if (!$this.parent().hasClass('oe_open')) {
|
||||
self.getdata(record_id, children_ids);
|
||||
}
|
||||
} else {
|
||||
self.showcontent(record_id, is_loaded < 0);
|
||||
}
|
||||
bool = $this.parent().hasClass('oe_open');
|
||||
self.showcontent(record_id, !bool);
|
||||
});
|
||||
},
|
||||
// get child data of selected value
|
||||
getdata: function (id, children_ids) {
|
||||
getdata: function (id) {
|
||||
var self = this;
|
||||
|
||||
self.dataset.read_ids(children_ids, this.fields_list()).then(function(records) {
|
||||
_(records).each(function (record) {
|
||||
self.records[record.id] = record;
|
||||
});
|
||||
|
||||
var $curr_node = self.$element.find('#treerow_' + id);
|
||||
var parent_child ={};
|
||||
id = _.isArray(id)?id:parseInt(id);
|
||||
var ir_model_data = new instance.web.Model(this.model,self.dataset.get_context() || {},[['id','child_of',id]]).query();
|
||||
ir_model_data._execute().then(function(records){
|
||||
self.store_record(records);
|
||||
_.each(records,function(rec){
|
||||
if(rec[self.children_field].length === 0)return;
|
||||
parent_child[rec.id] = [];
|
||||
_.each(rec[self.children_field],function(key){
|
||||
parent_child[rec.id].push(self.records[key]);
|
||||
});
|
||||
})
|
||||
self.render_data(parent_child);
|
||||
});
|
||||
},
|
||||
render_data: function(groupby){
|
||||
var self = this;
|
||||
_.each(_.keys(groupby),function(key){
|
||||
var $curr_node = self.$element.find('#treerow_' + key);
|
||||
var record = groupby[key];
|
||||
var children_rows = QWeb.render('TreeView.rows', {
|
||||
'records': records,
|
||||
'records': record,
|
||||
'children_field': self.children_field,
|
||||
'fields_view': self.fields_view.arch.children,
|
||||
'fields': self.fields,
|
||||
'level': $curr_node.data('level') || 0,
|
||||
'level': ($curr_node.data('level') || 0) + 1,
|
||||
'render': instance.web.format_value,
|
||||
'color_for': self.color_for
|
||||
});
|
||||
|
||||
if ($curr_node.length) {
|
||||
$curr_node.addClass('oe_open');
|
||||
$curr_node.after(children_rows);
|
||||
@@ -215,8 +238,10 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
self.$element.find('tbody').html(children_rows);
|
||||
}
|
||||
});
|
||||
self.collpase_all();
|
||||
},
|
||||
|
||||
|
||||
// Get details in listview
|
||||
activate: function(id) {
|
||||
var self = this;
|
||||
@@ -259,13 +284,5 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
|
||||
}, this);
|
||||
},
|
||||
|
||||
do_show: function () {
|
||||
this.$element.show();
|
||||
},
|
||||
|
||||
do_hide: function () {
|
||||
this.$element.hide();
|
||||
this.hidden = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -535,14 +535,16 @@
|
||||
</t>
|
||||
|
||||
<t t-name="TreeView">
|
||||
<select t-if="toolbar" style="width: 30%">
|
||||
</select>
|
||||
<table class="oe_tree_table">
|
||||
<div class = "tree_header">
|
||||
<select t-if="toolbar" ></select>
|
||||
<button id = "tree_view_collapse">Collapse All</button>
|
||||
<button id = "tree_view_expand">Expand All</button>
|
||||
</div>
|
||||
<table class="oe-treeview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th t-foreach="fields_view" t-as="field"
|
||||
t-if="!field.attrs.modifiers.tree_invisible"
|
||||
class="treeview-header">
|
||||
t-if="!field.attrs.modifiers.tree_invisible">
|
||||
<t t-esc="fields[field.attrs.name].string" />
|
||||
</th>
|
||||
</tr>
|
||||
@@ -554,11 +556,11 @@
|
||||
<tr t-name="TreeView.rows"
|
||||
t-foreach="records" t-as="record"
|
||||
t-att-id="'treerow_' + record.id"
|
||||
t-att-data-id="record.id" t-att-data-level="level + 1">
|
||||
t-att-data-id="record.id" t-att-data-level="level">
|
||||
<t t-set="children" t-value="record[children_field]"/>
|
||||
<t t-set="class" t-value="children and children.length ? 'treeview-tr' : 'treeview-td'"/>
|
||||
<t t-set="rank" t-value="'oe_tree_first'"/>
|
||||
<t t-set="style" t-value="'background-position: ' + 19*level + 'px; padding-left: ' + 19*level + 'px;'"/>
|
||||
<t t-set="rank" t-value="'oe-treeview-first'"/>
|
||||
<t t-set="style" t-value="'background-position: ' + 19*(level-1) + 'px; padding-left: ' + 19*(level-1) + 'px;'"/>
|
||||
|
||||
<td t-foreach="fields_view" t-as="field"
|
||||
t-if="!field.attrs.modifiers.tree_invisible"
|
||||
|
||||
Reference in New Issue
Block a user