[IMP] web: review time range menu rendering

This commit changes two things in the time range menu
appearance:

	- the order of range options
	- the spacing between them (now two different groups
	  are separated by an empty lines)

Some tests had to be changed accordingly.
This commit is contained in:
Mathieu Duckerts-Antoine
2018-09-04 17:37:14 +02:00
parent 5510d808b8
commit c4557580ef
4 changed files with 60 additions and 45 deletions
@@ -39,6 +39,16 @@ var TimeRangeMenu = Widget.extend({
}
});
this.periodOptions = PeriodOptions;
this.periodGroups = PeriodOptions.reduce(
function (acc, option) {
if (!_.contains(acc, option.groupId)) {
acc.push(option.groupId);
}
return acc;
},
[]
);
this.comparisonOptions = ComparisonOptions;
// Following steps determine initial configuration
@@ -5,19 +5,19 @@ var core = require('web.core');
var _lt = core._lt;
var PeriodOptions = [
{description: _lt('Today'), optionId: 'today', groupId: 1},
{description: _lt('This Week'), optionId: 'this_week', groupId: 1},
{description: _lt('This Month'), optionId: 'this_month', groupId: 1},
{description: _lt('This Quarter'), optionId: 'this_quarter', groupId: 1},
{description: _lt('This Year'), optionId: 'this_year', groupId: 1},
{description: _lt('Yesterday'), optionId: 'yesterday', groupId: 2},
{description: _lt('Last Week'), optionId: 'last_week', groupId: 2},
{description: _lt('Last Month'), optionId: 'last_month', groupId: 2},
{description: _lt('Last Quarter'), optionId: 'last_quarter', groupId: 2},
{description: _lt('Last Year'), optionId: 'last_year', groupId: 2},
{description: _lt('Last 7 Days'), optionId: 'last_7_days', groupId: 3},
{description: _lt('Last 30 Days'), optionId: 'last_30_days', groupId: 3},
{description: _lt('Last 365 Days'), optionId: 'last_365_days', groupId: 3},
{description: _lt('Last 7 Days'), optionId: 'last_7_days', groupId: 1},
{description: _lt('Last 30 Days'), optionId: 'last_30_days', groupId: 1},
{description: _lt('Last 365 Days'), optionId: 'last_365_days', groupId: 1},
{description: _lt('Today'), optionId: 'today', groupId: 2},
{description: _lt('This Week'), optionId: 'this_week', groupId: 2},
{description: _lt('This Month'), optionId: 'this_month', groupId: 2},
{description: _lt('This Quarter'), optionId: 'this_quarter', groupId: 2},
{description: _lt('This Year'), optionId: 'this_year', groupId: 2},
{description: _lt('Yesterday'), optionId: 'yesterday', groupId: 3},
{description: _lt('Last Week'), optionId: 'last_week', groupId: 3},
{description: _lt('Last Month'), optionId: 'last_month', groupId: 3},
{description: _lt('Last Quarter'), optionId: 'last_quarter', groupId: 3},
{description: _lt('Last Year'), optionId: 'last_year', groupId: 3},
];
var ComparisonOptions = [
+18 -13
View File
@@ -1136,7 +1136,7 @@
</button>
<div class="dropdown-menu o_dropdown_menu o_time_range_menu" role="menu">
<div class="dropdown-item-text">
<label for="date_field_selector">Date Field</label>
<label for="date_field_selector">Based On</label>
<select id="date_field_selector" class="o_input o_date_field_selector">
<t t-foreach="widget.dateFields" t-as="field">
<t t-if="widget.dateField.name === field.name">
@@ -1153,19 +1153,24 @@
</select>
</div>
<div class="dropdown-item-text">
<label for="time_range_selector">Date Range</label>
<label for="time_range_selector">Range</label>
<select id="time_range_selector" class="o_input o_time_range_selector">
<t t-foreach="widget.periodOptions" t-as="option">
<t t-if="widget.timeRangeId === option.optionId">
<option t-att-value="option.optionId" selected="selected">
<t t-esc="option.description"/>
</option>
</t>
<t t-else="">
<option t-att-value="option.optionId">
<t t-esc="option.description"/>
</option>
</t>
<t t-foreach="widget.periodGroups" t-as="group">
<optgroup t-if="group !== 1"/>
<t t-foreach="widget.periodOptions" t-as="option">
<t t-if="option.groupId === group">
<t t-if="widget.timeRangeId === option.optionId">
<option t-att-value="option.optionId" selected="selected">
<t t-esc="option.description"/>
</option>
</t>
<t t-else="">
<option t-att-value="option.optionId">
<t t-esc="option.description"/>
</option>
</t>
</t>
</t>
</t>
</select>
</div>
@@ -187,6 +187,9 @@ QUnit.module('Search View', {
};
this.periodOptions = [
'last_7_days',
'last_30_days',
'last_365_days',
'today',
'this_week',
'this_month',
@@ -197,13 +200,16 @@ QUnit.module('Search View', {
'last_month',
'last_quarter',
'last_year',
'last_7_days',
'last_30_days',
'last_365_days'
];
// assuming that the current time is: 2017-03-22:01:00:00
this.periodDomains = [
// last 7 days (whole days)
['&', ["date_field", ">=", "2017-03-15"],["date_field", "<", "2017-03-22"]],
// last 30 days
['&', ["date_field", ">=", "2017-02-20"],["date_field", "<", "2017-03-22"]],
// last 365 days
['&', ["date_field", ">=", "2016-03-22"],["date_field", "<", "2017-03-22"]],
// today
['&', ["date_field", ">=", "2017-03-22"],["date_field", "<", "2017-03-23"]],
// this week
@@ -224,16 +230,16 @@ QUnit.module('Search View', {
['&', ["date_field", ">=", "2016-10-01"],["date_field", "<", "2017-01-01"]],
// last year
['&', ["date_field", ">=", "2016-01-01"],["date_field", "<", "2017-01-01"]],
// last 7 days (whole days)
['&', ["date_field", ">=", "2017-03-15"],["date_field", "<", "2017-03-22"]],
// last 30 days
['&', ["date_field", ">=", "2017-02-20"],["date_field", "<", "2017-03-22"]],
// last 365 days
['&', ["date_field", ">=", "2016-03-22"],["date_field", "<", "2017-03-22"]],
];
// assuming that the current time is: 2017-03-22:01:00:00
this.previousPeriodDomains = [
// last 7 days (whole days) - 1 week
['&', ["date_field", ">=", "2017-03-08"],["date_field", "<", "2017-03-15"]],
// last 30 days - 30 days
['&', ["date_field", ">=", "2017-01-21"],["date_field", "<", "2017-02-20"]],
// last 365 days
['&', ["date_field", ">=", "2015-03-23"],["date_field", "<", "2016-03-22"]],
// today - 1 day
['&', ["date_field", ">=", "2017-03-21"],["date_field", "<", "2017-03-22"]],
// this week - 1 week
@@ -254,12 +260,6 @@ QUnit.module('Search View', {
['&', ["date_field", ">=", "2016-07-01"],["date_field", "<", "2016-10-01"]],
// last year - 1 year
['&', ["date_field", ">=", "2015-01-01"],["date_field", "<", "2016-01-01"]],
// last 7 days (whole days) - 1 week
['&', ["date_field", ">=", "2017-03-08"],["date_field", "<", "2017-03-15"]],
// last 30 days - 30 days
['&', ["date_field", ">=", "2017-01-21"],["date_field", "<", "2017-02-20"]],
// last 365 days
['&', ["date_field", ">=", "2015-03-23"],["date_field", "<", "2016-03-22"]],
];
},
}, function () {
@@ -540,6 +540,9 @@ QUnit.module('Search View', {
assert.deepEqual(periodOptions, this.periodOptions,
"13 period options should be available:");
$('.o_menu_item .o_item_option[data-option_id="last_7_days"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_30_days"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_365_days"]').click();
$('.o_menu_item .o_item_option[data-option_id="today"]').click();
$('.o_menu_item .o_item_option[data-option_id="this_week"]').click();
$('.o_menu_item .o_item_option[data-option_id="this_month"]').click();
@@ -550,9 +553,6 @@ QUnit.module('Search View', {
$('.o_menu_item .o_item_option[data-option_id="last_month"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_quarter"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_year"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_7_days"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_30_days"]').click();
$('.o_menu_item .o_item_option[data-option_id="last_365_days"]').click();
actionManager.destroy();
window.Date = RealDate;
@@ -583,7 +583,7 @@ QUnit.module('Search View', {
actionManager.doAction(6);
$('span.fa-filter').click();
$('.o_filters_menu .o_menu_item a').click();
$('.o_item_option:first').click();
$('.o_item_option[data-option_id="today"]').click();
$('span.fa-star').click();
$('.o_favorites_menu .o_save_search a').click();
$('.o_favorites_menu .o_save_name button').click();