From 78dfb019422ea734f2bd527a3503baffa8a35d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 8 Nov 2016 10:51:51 +0100
Subject: [PATCH] [IMP] web: disable selected fields in pivot dropdown

In the pivot view, when the user select a new field to drill down, the
previous dropdown menu displayed all the groupable fields as valid
choice.  This commit disables all the fields that have already been
selected.  It means that they will be greyed out, and inactive in the
UI.
---
 addons/web/static/src/js/views/pivot_view.js | 58 +++++++++++++-------
 addons/web/static/src/xml/base.xml           |  8 ++-
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/addons/web/static/src/js/views/pivot_view.js b/addons/web/static/src/js/views/pivot_view.js
index c9a01f44ec2..f956a826039 100644
--- a/addons/web/static/src/js/views/pivot_view.js
+++ b/addons/web/static/src/js/views/pivot_view.js
@@ -118,18 +118,31 @@ var PivotView = View.extend({
     },
     start: function () {
         this.$el.toggleClass('o_enable_linking', this.enable_linking);
-        var context = {
-            fields: _.chain(this.groupable_fields).pairs().sortBy(function(f) {
-                return f[1].string;
-            }).value(),
-        };
         this.$field_selection = this.$('.o_field_selection');
-        this.$field_selection.html(QWeb.render('PivotView.FieldSelection', context));
         core.bus.on('click', this, function () {
-            this.$field_selection.find('ul').first().hide();
+            this.$field_selection.empty();
         });
         return this._super();
     },
+    render_field_selection: function (top, left) {
+        var grouped_fields = this.main_row.groupbys
+            .concat(this.main_col.groupbys)
+            .map(function(f) { return f.split(':')[0];});
+
+        var fields = _.chain(this.groupable_fields)
+            .pairs()
+            .sortBy(function(f) { return f[1].string; })
+            .map(function (f) { return [f[0], f[1], _.contains(grouped_fields, f[0])]; })
+            .value();
+
+        this.$field_selection.html(QWeb.render('PivotView.FieldSelection', {
+            fields: fields
+        }));
+
+        this.$field_selection.find('ul').first()
+            .css({top: top, left: left})
+            .show();
+    },
     /**
      * Render the buttons according to the PivotView.buttons template and
      * add listeners on it.
@@ -242,23 +255,21 @@ var PivotView = View.extend({
         this.display_table();
     },
     on_closed_header_click: function (event) {
-        var id = $(event.target).data('id'),
-            header = this.headers[id],
-            groupbys = header.root.groupbys;
+        var $target = $(event.target);
+        var id = $target.data('id');
+        var header = this.headers[id];
+        var groupbys = header.root.groupbys;
+
         if (header.path.length - 1 < groupbys.length) {
             this.expand_header(header, groupbys[header.path.length - 1])
                 .then(this.proxy('display_table'));
         } else {
             this.last_header_selected = id;
-            var $test = $(event.target);
-            var $menu = this.$field_selection.find('ul').first();
-            var position = $test.position();
-            $menu.css({
-                top: position.top + $test.height(),
-                left: position.left + event.offsetX,
-            });
-            $menu.show();
-            event.stopPropagation();            
+            var position = $target.position();
+            var top = position.top + $target.height();
+            var left = position.left + event.offsetX;
+            this.render_field_selection(top, left);
+            event.stopPropagation();
         }
     },
     on_cell_click: function (event) {
@@ -320,8 +331,13 @@ var PivotView = View.extend({
     },
     on_field_menu_selection: function (event) {
         event.preventDefault();
-        var field = $(event.target).parent().data('field'),
-            interval = $(event.target).data('interval'),
+        var $target = $(event.target);
+        if ($target.parent().hasClass('disabled')) {
+            event.stopPropagation();
+            return;
+        }
+        var field = $target.parent().data('field'),
+            interval = $target.data('interval'),
             header = this.headers[this.last_header_selected];
         if (interval) field = field + ':' + interval;
         this.expand_header(header, field)
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b732944f052..f23d862a100 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -582,7 +582,7 @@
     <ul class="dropdown-menu o_pivot_field_menu" role="menu">
         <t t-foreach="fields" t-as="field">
             <t t-if="(field[1].type === 'date') || (field[1].type === 'datetime')">
-                <li class="o_inline_dropdown" t-att-data-field="field[0]">
+                <li t-att-data-field="field[0]" t-attf-class="o_inline_dropdown#{field[2] ? ' disabled' : ''}">
                     <a href="#" class="o_pivot_field_selection">
                         <t t-esc="field[1].string"/>
                     </a>
@@ -595,8 +595,10 @@
                     </ul>
                 </li>
             </t>
-            <t t-if="(field[1].type !== 'date') &amp;&amp; (field[1].type !== 'datetime')">
-                <li t-att-data-field="field[0]"><a href="#"><t t-esc="field[1].string"/></a></li>
+            <t t-else="">
+                <li t-att-data-field="field[0]" t-att-class="(field[2] ? 'disabled' : '')">
+                    <a href="#"><t t-esc="field[1].string"/></a>
+                </li>
             </t>
         </t>
     </ul>