Jiten (OpenERP) has proposed merging
lp:~openerp-dev/openerp-web/trunk-improve-tree-view into lp:openerp-web.
Requested reviews:
OpenERP R&D Web Team (openerp-dev-web)
For more details, see:
https://code.launchpad.net/~openerp-dev/openerp-web/trunk-improve-tree-view/+merge/113337
Improve tree view for trunk. (MERGE VME branch)
- Make a grid for all tree records.
- Make a cursor pointer on hover of grid to show that record.
- Add two buttons for expand all and collapse all.
--
https://code.launchpad.net/~openerp-dev/openerp-web/trunk-improve-tree-view/+merge/113337
Your team OpenERP R&D Team is subscribed to branch
lp:~openerp-dev/openerp-web/trunk-improve-tree-view.
=== modified file 'addons/web/static/src/css/base.css'
--- addons/web/static/src/css/base.css 2012-07-03 06:07:35 +0000
+++ addons/web/static/src/css/base.css 2012-07-04 06:41:19 +0000
@@ -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;
=== modified file 'addons/web/static/src/css/base.sass'
--- addons/web/static/src/css/base.sass 2012-07-03 06:07:35 +0000
+++ addons/web/static/src/css/base.sass 2012-07-04 06:41:19 +0000
@@ -1764,6 +1764,49 @@
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)
=== modified file 'addons/web/static/src/js/view_tree.js'
--- addons/web/static/src/js/view_tree.js 2012-06-27 15:17:33 +0000
+++ addons/web/static/src/js/view_tree.js 2012-07-04 06:41:19 +0000
@@ -63,6 +63,12 @@
}
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 @@
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 @@
$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 @@
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 @@
});
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) {
- 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);
+ getdata: function (id) {
+ var self = this;
+ 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 @@
self.$element.find('tbody').html(children_rows);
}
});
+ self.collpase_all();
},
+
// Get details in listview
activate: function(id) {
var self = this;
@@ -259,13 +284,5 @@
}, this);
},
- do_show: function () {
- this.$element.show();
- },
-
- do_hide: function () {
- this.$element.hide();
- this.hidden = true;
- }
});
};
=== modified file 'addons/web/static/src/xml/base.xml'
--- addons/web/static/src/xml/base.xml 2012-07-02 16:09:51 +0000
+++ addons/web/static/src/xml/base.xml 2012-07-04 06:41:19 +0000
@@ -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"
_______________________________________________
Mailing list: https://launchpad.net/~openerp-dev-gtk
Post to : [email protected]
Unsubscribe : https://launchpad.net/~openerp-dev-gtk
More help : https://help.launchpad.net/ListHelp
