From 1b8a0e66eee009946caa8afeadc809cf1a7583bf Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Wed, 7 Nov 2012 15:37:40 +0100
Subject: [PATCH] [REV]
 nicolas.vanhoren@openerp.com-20120712074237-xugmbw19wjjoes9l

eagerly loaded treeviews, making heavily loaded charts of accounts
completely unusable

bzr revid: xmo@openerp.com-20121107143740-31i16933dfg4t6xk
---
 addons/web/static/src/js/view_tree.js | 105 +++++++++++---------------
 addons/web/static/src/xml/base.xml    |  16 ++--
 2 files changed, 51 insertions(+), 70 deletions(-)

diff --git a/addons/web/static/src/js/view_tree.js b/addons/web/static/src/js/view_tree.js
index 05760420ba8..3f1dfabe80a 100644
--- a/addons/web/static/src/js/view_tree.js
+++ b/addons/web/static/src/js/view_tree.js
@@ -45,7 +45,7 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
             view_type: "tree",
             toolbar: this.view_manager ? !!this.view_manager.sidebar : false,
             context: this.dataset.get_context()
-        }).then(this.on_loaded);
+        }, this.on_loaded);
     },
     /**
      * Returns the list of fields needed to correctly read objects.
@@ -63,12 +63,6 @@ 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;
@@ -93,19 +87,17 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
         this.$el.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.render_data({'null':records})
-                self.getdata(_.pluck(records,"id"));
+                self.getdata(null, _(records).pluck('id'));
                 return;
             }
 
             var $select = self.$el.find('select')
                 .change(function () {
                     var $option = $(this).find(':selected');
-                    self.getdata($option.val());
+                    self.getdata($option.val(), $option.data('children'));
                 });
             _(records).each(function (record) {
                 self.records[record.id] = record;
@@ -120,12 +112,7 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
                 $select.change();
             }
         });
-        this.$el.find("#tree_view_expand").click(function(){
-                self.expand_all();
-        });
-        this.$el.find("#tree_view_collapse").click(function(){
-            self.collpase_all();
-        });
+
         // TODO store open nodes in url ?...
         this.do_push_state({});
 
@@ -141,22 +128,6 @@ 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.$el.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.$el.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)
@@ -193,44 +164,50 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
         });
 
         this.$el.delegate('.treeview-tr', 'click', function () {
-            var $this = $(this),
+            var is_loaded = 0,
+                $this = $(this),
                 record_id = $this.data('id'),
-                bool = $this.parent().hasClass('oe_open');
-                self.showcontent(record_id, !bool);
+                record = self.records[record_id],
+                children_ids = record[self.children_field];
+
+            _(children_ids).each(function(childid) {
+                if (self.$el.find('#treerow_' + childid).length) {
+                    if (self.$el.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);
+            }
         });
     },
     // get child data of selected value
-    getdata: function (id) {
+    getdata: function (id, children_ids) {
         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.$el.find('#treerow_' + key);
-            var record = groupby[key];
+
+        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.$el.find('#treerow_' + id);
             var children_rows = QWeb.render('TreeView.rows', {
-                'records': record,
+                'records': records,
                 'children_field': self.children_field,
                 'fields_view': self.fields_view.arch.children,
                 'fields': self.fields,
-                'level': ($curr_node.data('level') || 0) + 1,
+                'level': $curr_node.data('level') || 0,
                 'render': instance.web.format_value,
                 'color_for': self.color_for
             });
+
             if ($curr_node.length) {
                 $curr_node.addClass('oe_open');
                 $curr_node.after(children_rows);
@@ -238,10 +215,8 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
                 self.$el.find('tbody').html(children_rows);
             }
         });
-        self.collpase_all();
     },
 
-
     // Get details in listview
     activate: function(id) {
         var self = this;
@@ -284,5 +259,13 @@ instance.web.TreeView = instance.web.View.extend(/** @lends instance.web.TreeVie
         }, this);
     },
 
+    do_show: function () {
+        this.$el.show();
+    },
+
+    do_hide: function () {
+        this.$el.hide();
+        this.hidden = true;
+    }
 });
 };
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 275d31a9fde..4118d3fc363 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -567,16 +567,14 @@
 </t>
 
 <t t-name="TreeView">
-    <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">
+    <select t-if="toolbar" style="width: 30%">
+    </select>
+    <table class="oe_tree_table oe-treeview-table">
         <thead>
             <tr>
                 <th t-foreach="fields_view" t-as="field"
-                    t-if="!field.attrs.modifiers.tree_invisible">
+                    t-if="!field.attrs.modifiers.tree_invisible"
+                    class="treeview-header">
                     <t t-esc="field_value.attrs.string || fields[field.attrs.name].string" />
                 </th>
             </tr>
@@ -588,11 +586,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">
+        t-att-data-id="record.id" t-att-data-level="level + 1">
     <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-treeview-first'"/>
-    <t t-set="style" t-value="'background-position: ' + 19*(level-1) + 'px; padding-left: ' + (4 + 19*(level-1)) + 'px;'"/>
+    <t t-set="style" t-value="'background-position: ' + 19*(level) + 'px; padding-left: ' + (4 + 19*(level)) + 'px;'"/>
 
     <td t-foreach="fields_view" t-as="field"
         t-if="!field.attrs.modifiers.tree_invisible"