[REF] large refactoring in progress. goal is to separate the data handling code (pivot) from the ui code (drawing, buttons, events (addon web_graph)

bzr revid: ged@openerp.com-20131122135927-mfaa44juzjhp4kas

2 files changed, 303 insertions, 29 deletions

diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index 7ad283c6810..91c794ea2ae 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -27,7 +27,34 @@ instance.web_graph.GraphView = instance.web.View.extend({
         'click .graph_mode_selection li' : function (event) {
             event.preventDefault();
             this.mode = event.target.attributes['data-mode'].nodeValue;
-            console.log("change mode",this.mode);
+        },
+
+        'click .web_graph_click' : function (event) {
+            event.preventDefault();
+            if (event.target.attributes['data-row-id'] !== undefined) {
+                this.handle_header_event({type:'row', event:event});
+
+            }
+            if (event.target.attributes['data-col-id'] !== undefined) {
+                this.handle_header_event({type:'col', event:event});
+            }
+        },
+
+        'click a.field-selection' : function (event) {
+            var id,
+                field_id = event.target.attributes['data-field-id'].nodeValue;
+            event.preventDefault();
+            this.dropdown.remove();
+            if (event.target.attributes['data-row-id'] !== undefined) {
+                id = event.target.attributes['data-row-id'].nodeValue;
+                this.pivot_table.expand_row(id, field_id)
+                    .then(this.proxy('draw_table'));
+            } 
+            if (event.target.attributes['data-col-id'] !== undefined) {
+                id = event.target.attributes['data-col-id'].nodeValue;
+                this.pivot_table.expand_col(id, field_id)
+                    .then(this.proxy('draw_table'));
+            } 
         },
     },
 
@@ -123,9 +150,56 @@ instance.web_graph.GraphView = instance.web.View.extend({
         return this._super();
     },
 
+
+    handle_header_event: function (options) {
+        var pivot = this.pivot_table,
+            id = options.event.target.attributes['data-' + options.type + '-id'].nodeValue,
+            header = pivot['get_' + options.type](id);
+
+        if (header.is_expanded) {
+            pivot['fold_' + options.type](header);
+            this.draw_table();
+        } else {
+            if (header.path.length < pivot[options.type + '_groupby'].length) {
+                // expand the corresponding header
+                var field = pivot[options.type + '_groupby'][header.path.length];
+                pivot['expand_' + options.type](id, field)
+                    .then(this.proxy('draw_table'));
+            } else {
+                // display dropdown to query field to expand
+                this.display_dropdown({id:header.id, 
+                                       type: options.type,
+                                       target: $(event.target), 
+                                       x: event.pageX, 
+                                       y: event.pageY});
+            }
+        }
+
+    },
+
+    display_dropdown: function (options) {
+        var self = this,
+            pivot = this.pivot_table,
+            already_grouped = pivot.row_groupby.concat(pivot.col_groupby),
+            possible_groups = _.difference(self.data.important_fields, already_grouped),
+            dropdown_options = {
+                fields: _.map(possible_groups, function (field) {
+                    return {id: field, value: self.data.fields[field].string};
+            })};
+        dropdown_options[options.type + '_id'] = options.id;
+
+        this.dropdown = $(QWeb.render('field_selection', dropdown_options));
+        options.target.after(this.dropdown);
+        this.dropdown.css({position:'absolute',
+                           left:options.x,
+                           top:options.y});
+        $('.field-selection').next('.dropdown-menu').toggle();
+    },
+
     draw_table: function () {
+        this.table.empty();
         this.draw_top_headers();
-        this.pivot_table.iterate(this.pivot_table.rows, this.proxy('draw_row'));
+        _.each(this.pivot_table.rows_array(), this.proxy('draw_row'));
     },
 
     make_border_cell: function (colspan, rowspan) {
@@ -148,16 +222,25 @@ instance.web_graph.GraphView = instance.web.View.extend({
             height = pivot.get_max_path_length(pivot.cols),
             header_cells = [[this.make_border_cell(1, height)]];
 
+        function set_dim (cols) {
+            _.each(cols.children, set_dim);
+            if (cols.children.length === 0) {
+                cols.height = height - cols.path.length + 1;
+                cols.width = 1;
+            } else {
+                cols.height = 1;
+                cols.width = _.reduce(cols.children, function (sum,c) { return sum + c.width;}, 0);
+            }
+        }
+
         function make_col_header (col) {
             var cell = self.make_border_cell(col.width, col.height);
-            return cell.append(self.make_header_title(col))
-                       .attr('data-col-id', col.id);
+            return cell.append(self.make_header_title(col).attr('data-col-id', col.id));
         }
 
         function make_cells (queue, level) {
             var col = queue.shift();
             queue = queue.concat(col.children);
-            console.log("col",col, level);
             if (col.path.length == level) {
                 _.last(header_cells).push(make_col_header(col));
             } else {
@@ -169,6 +252,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
             }
         }
 
+        set_dim(pivot.cols);  // add width and height info to columns headers
+
         if (pivot.cols.children.length === 0) {
             make_cells([pivot.cols], 0);
         } else {
@@ -183,8 +268,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
     draw_row: function (row) {
         var pivot = this.pivot_table,
             html_row = $('<tr></tr>'),
-            row_header = $('<td></td>')
-                .append(this.make_header_title(row))
+            row_header = this.make_border_cell(1,1)
+                .append(this.make_header_title(row).attr('data-row-id', row.id))
                 .addClass('graph_border');
 
         for (var i in _.range(row.path.length)) {
@@ -193,7 +278,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
         html_row.append(row_header);
 
-        pivot.iterate(pivot.cols, function (col) {
+        _.each(pivot.cols_array(), function (col) {
             var cell = $('<td></td>').append(pivot.get_value(row.id, col.id));
             html_row.append(cell)
         });
diff --git a/addons/web_graph/static/src/js/pivot.js b/addons/web_graph/static/src/js/pivot.js
index dca21087ce5..9783155848b 100644
--- a/addons/web_graph/static/src/js/pivot.js
+++ b/addons/web_graph/static/src/js/pivot.js
@@ -28,8 +28,6 @@ var PivotTable = openerp.web.Class.extend({
 			parent: null,
 			children: [],
 			domain: this.domain,
-			height: 1,
-			width: 1,
 		};
 
 		this.cols = {
@@ -40,8 +38,6 @@ var PivotTable = openerp.web.Class.extend({
 			parent: null,
 			children: [],
 			domain: this.domain,
-			height: 1,
-			width: 1,
 		};
 
 		// get total and create first cell
@@ -63,14 +59,11 @@ var PivotTable = openerp.web.Class.extend({
 						parent: self.rows,
 						children: [],
 						domain: group.model._domain,
-						height: 1,
-						width: 1,
 					});
 					self.set_value(new_id, self.cols.id, 
 								   group.attributes.aggregates[self.measure]);
 				});
 				self.rows.is_expanded = true;
-				self.rows.width = groups.length;
 			});
 
 		return $.when(tot, grp);
@@ -111,25 +104,224 @@ var PivotTable = openerp.web.Class.extend({
 		});
 	},
 
+	iterate_rows: function (iterator) {
+		this.iterate(this.rows, iterator);
+	},
+
+	iterate_cols: function (iterator) {
+		this.iterate(this.cols, iterator);
+	},
+
 	get_max_path_length: function (header) {
         var height = 0;
-        this.iterate(this.cols, function (col) {
+        this.iterate_cols(function (col) {
             height = Math.max(height, col.path.length);
         });
         return height;
 	},
 
-        // function set_dim (cols) {
-        //     _.each(cols.children, set_dim);
-        //     if (cols.children.length === 0) {
-        //         cols.height = height - cols.path.length + 1;
-        //         cols.width = 1;
-        //     } else {
-        //         cols.height = 1;
-        //         cols.width = _.reduce(cols.children, function (sum,c) { return sum + c.width;}, 0);
-        //     }
-        // }
+	rows_array: function () {
+		var result = [];
+		this.iterate_rows(function (row) { result.push(row); });
+		return result;
+	},
+
+	cols_array: function () {
+		var result = [];
+		this.iterate_cols(function (col) { result.push(col); });
+		return result;
+	},
+
+	get_col: function (id) {
+		return _.find(this.cols_array(), function (col) { return col.id == id;});
+	},
+
+	get_row: function (id) {
+		return _.find(this.rows_array(), function (row) { return row.id == id;});
+	},
+
+	fold: function (header) {
+		header.children = [];
+		header.is_expanded = false;
+        var fold_lvls = _.map(this.rows_array(), function(g) {return g.path.length;});
+        var new_groupby_length = _.max(fold_lvls); 
 
+        this.row_groupby.splice(new_groupby_length);
+
+		// to do : remove every corresponding cells
+	},
+
+	fold_row: function (row) {
+		this.fold(row);
+	},
+
+	fold_col: function (col) {
+		this.fold(col);
+	},
+
+	expand_row: function (row_id, field_id) {
+        var self = this,
+        	row = this.get_row(row_id);
+
+        if (row.path.length == this.row_groupby.length) {
+            this.row_groupby.push(field_id);
+        }
+        return query_groups_data(this.model, this.visible_fields(), row.domain, this.col_groupby, field_id)
+            .then(function (groups) {
+                _.each(groups, function (group) {
+                	var new_row_id = self.make_header(group, row);
+                    var cols_array = self.cols_array();
+                    _.each(group, function (data) {
+                    	var col = _.find(cols_array, function (c) {
+                    		return _.isEqual(_.rest(data.path), c.path);
+                    	});
+                    	if (col) {
+                    		self.set_value(new_row_id, col.id, data.attributes.aggregates[self.measure]);
+                    	}
+                    });
+                });
+                row.is_expanded = true;
+        });
+	},
+
+	expand_col: function (col_id, field_id) {
+        var self = this,
+        	col = this.get_col(col_id);
+
+        if (col.path.length == this.col_groupby.length) {
+            this.col_groupby.push(field_id);
+        }
+
+		console.log("cols",this.cols_array());
+        console.log("dbg",this.col_groupby);
+        return query_groups_data(this.model, this.visible_fields(), col.domain, this.row_groupby, field_id)
+            .then(function (groups) {
+            	console.log("groups",groups);
+                _.each(groups, function (group) {
+        //         	console.log("adding group",group);
+                	var new_col_id = self.make_header(group, col);
+        //          //    var rows_array = self.rows_array();
+        //             // _.each(group, function (data) {
+        //             // 	var row = _.find(rows_array, function (c) {
+        //             // 		return _.isEqual(data.path.slice(1), c.path);
+        //             // 	});
+        //             // 	if (row) {
+        //             // 		self.set_value(row.id, new_col_id, data.attributes.aggregates[self.measure]);
+        //             // 	}
+        //             // });
+                });
+        //         col.is_expanded = true;
+        //         // console.log("col is now",col);
+        //         // console.log("dbg",col.children.length);
+        });
+
+	},
+
+	make_header: function (groups, parent) {
+
+		var new_header = {
+			id: this.generate_id(),
+			path: parent.path.concat(groups[0].attributes.value[1]),
+			name: groups[0].attributes.value[1],
+			is_expanded: false,
+			parent: parent.id,
+			children: [],
+			domain: groups[0].model._domain,
+		};
+		parent.children.push(new_header);
+		return new_header.id;
+	},
+
+//     make_row: function (groups, parent_id) {
+//         var self = this,
+//             path,
+//             value,
+//             expanded,
+//             domain,
+//             parent,
+//             has_parent = (parent_id !== undefined),
+//             row_id = this.generate_id();
+
+//         if (has_parent) {
+//             parent = this.get_row(parent_id);
+//             path = parent.path.concat(groups[0].attributes.value[1]);
+//             value = groups[0].attributes.value[1];
+//             expanded = false;
+//             parent.children.push(row_id);
+//             domain = groups[0].model._domain;
+//         } else {
+//             parent = null;
+//             path = [];
+//             value = 'Total';
+//             expanded = true;
+//             domain = this.data.domain;
+//         }
+
+//         var jquery_row = $('<tr></tr>');
+
+//         var header = self.make_cell(value, {is_border:true, indent: path.length, foldable:true, row_id: row_id});
+//         jquery_row.append(header);
+
+//         var cell;
+
+//         _.each(this.cols, function (col) {
+//             var element = _.find(groups, function (group) {
+//                 return _.isEqual(_.rest(group.path), col.path);
+//             });
+//             if (element === undefined) {
+//                 cell = self.make_cell('');
+//             } else {
+//                 cell = self.make_cell(element.attributes.aggregates[self.data.measure]);                
+//             }
+//             if (col.expanded) {
+//                 cell.css('display', 'none');
+//             }
+//             col.cells.push({td:cell, row_id:row_id});
+//             jquery_row.append(cell);
+//         });
+
+//         if (!has_parent) {
+//             header.find('.icon-plus-sign')
+//                 .removeClass('icon-plus-sign')
+//                 .addClass('icon-minus-sign');            
+//         }
+
+//         var row = {
+//             id: row_id,
+//             path: path,
+//             value: value,
+//             expanded: expanded,
+//             parent: parent_id,
+//             children: [],
+//             html: jquery_row,
+//             domain: domain,
+//         };
+//         this.rows.push(row);  // to do, insert it properly, after all childs of parent
+//         return row;
+//     },
+
+//     expand_row: function (row_id, field_id) {
+//         var self = this;
+//         var row = this.get_row(row_id);
+
+//         if (row.path.length == this.data.row_groupby.length) {
+//             this.data.row_groupby.push(field_id);
+//         }
+//         row.expanded = true;
+//         row.html.find('.icon-plus-sign')
+//             .removeClass('icon-plus-sign')
+//             .addClass('icon-minus-sign');
+
+//         var visible_fields = this.data.row_groupby.concat(this.data.col_groupby, this.data.measure);
+//         query_groups_data(this.data.model, visible_fields, row.domain, this.data.col_groupby, field_id)
+//             .then(function (groups) {
+//                 _.each(groups.reverse(), function (group) {
+//                     var new_row = self.make_row(group, row_id);
+//                     row.html.after(new_row.html);
+//                 });
+//         });
+
+//     },
 
 	// toArray: function (header) {
 	// 	return [header].concat(_.map(header.children), this.toArray(hea))
@@ -147,9 +339,6 @@ var PivotTable = openerp.web.Class.extend({
 
 	// }
 
-	// function fold_row (row) {
-
-	// }
 
 	// function fold_col (col) {