[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.
This commit is contained in:
Géry Debongnie
2016-11-08 15:21:37 +01:00
parent 7eb8ed2769
commit 78dfb01942
2 changed files with 42 additions and 24 deletions
+37 -21
View File
@@ -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)
+5 -3
View File
@@ -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>