From c4557580ef28be701b20646644f190a7949fd1bb Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Thu, 23 Aug 2018 17:38:41 +0200
Subject: [PATCH] [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.
---
 .../src/js/views/search/time_range_menu.js    | 10 +++++
 .../views/search/time_range_menu_options.js   | 26 ++++++-------
 addons/web/static/src/xml/base.xml            | 31 ++++++++-------
 .../static/tests/views/search_view_tests.js   | 38 +++++++++----------
 4 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/addons/web/static/src/js/views/search/time_range_menu.js b/addons/web/static/src/js/views/search/time_range_menu.js
index cd873b9e602..0378c132aab 100644
--- a/addons/web/static/src/js/views/search/time_range_menu.js
+++ b/addons/web/static/src/js/views/search/time_range_menu.js
@@ -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
diff --git a/addons/web/static/src/js/views/search/time_range_menu_options.js b/addons/web/static/src/js/views/search/time_range_menu_options.js
index 1a5510ab6c4..9c042935d0e 100644
--- a/addons/web/static/src/js/views/search/time_range_menu_options.js
+++ b/addons/web/static/src/js/views/search/time_range_menu_options.js
@@ -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 =  [
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 93f2a044c07..04ad1907f0b 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -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>
diff --git a/addons/web/static/tests/views/search_view_tests.js b/addons/web/static/tests/views/search_view_tests.js
index c2b06f2c49a..a65d0b51390 100644
--- a/addons/web/static/tests/views/search_view_tests.js
+++ b/addons/web/static/tests/views/search_view_tests.js
@@ -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();