[IMP] web: add support for interval selection in groupbys

In this commit, we extend the search view to allow the selection
of some intervals for date or datetime fields in groupby menu.
The valid intervals are day, week, month, quarter, and year.

It is also possible to add a button 'Group By' in the control panel
owned by a graph view in case it is declared 'embedded' (e.g. in a
dashboard view).

Note that have three new generic reusable widgets have been introduced
in this commit: DropdownMenu, GroupByMenu, and FiltersMenu.

1 files changed, 48 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/graph/graph_controller.js b/addons/web/static/src/js/views/graph/graph_controller.js
index 77e3f1e7a40..e9f933023b1 100644
--- a/addons/web/static/src/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/js/views/graph/graph_controller.js
@@ -4,13 +4,15 @@ odoo.define('web.GraphController', function (require) {
  * Odoo Graph view
  *---------------------------------------------------------*/
 
-var AbstractController = require('web.AbstractController');
 var core = require('web.core');
+var AbstractController = require('web.AbstractController');
+var GroupByMenuInterfaceMixin = require('web.GroupByMenuInterfaceMixin');
 
 var qweb = core.qweb;
 
-var GraphController = AbstractController.extend({
+var GraphController = AbstractController.extend(GroupByMenuInterfaceMixin,{
     className: 'o_graph',
+
     /**
      * @override
      * @param {Widget} parent
@@ -18,10 +20,23 @@ var GraphController = AbstractController.extend({
      * @param {GraphRenderer} renderer
      * @param {Object} params
      * @param {string[]} params.measures
+     * @param {boolean} params.isEmbedded
+     * @param {string[]} params.groupableFields,
      */
     init: function (parent, model, renderer, params) {
+        GroupByMenuInterfaceMixin.init.call(this);
         this._super.apply(this, arguments);
         this.measures = params.measures;
+        // this parameter condition the appearance of a 'Group By'
+        // button in the control panel owned by the graph view.
+        this.isEmbedded = params.isEmbedded;
+        // this parameter determines what is the list of fields
+        // that may be used within the groupby menu available when
+        // the view is embedded
+        this.groupableFields = params.groupableFields;
+        // extends custom_events key. This allow the controller
+        // to listen to information comming from the groupby menu.
+        // this is used when the view is embedded.
     },
     /**
      * @todo check if this can be removed (mostly duplicate with
@@ -53,6 +68,12 @@ var GraphController = AbstractController.extend({
             graph_measure: state.measure,
             graph_mode: state.mode,
             graph_groupbys: state.groupedBy,
+            // this parameter is not used anywher for now
+            // the idea would be to seperate intervals from
+            // fieldnames in groupbys. This could be done
+            // in graph view only or everywhere but this is
+            // a big refactoring.
+            graph_intervalMapping: state.intervalMapping,
         };
     },
     /**
@@ -66,13 +87,18 @@ var GraphController = AbstractController.extend({
      */
     renderButtons: function ($node) {
         if ($node) {
-            var context = {measures: _.pairs(_.omit(this.measures, '__count__'))};
+            var context = {
+                measures: _.pairs(_.omit(this.measures, '__count__')),
+            };
             this.$buttons = $(qweb.render('GraphView.buttons', context));
             this.$measureList = this.$buttons.find('.o_graph_measures_list');
             this.$buttons.find('button').tooltip();
             this.$buttons.click(this._onButtonClick.bind(this));
             this._updateButtons();
             this.$buttons.appendTo($node);
+            if (this.isEmbedded) {
+                this._addGroupByMenu($node, this.groupableFields);
+            }
         }
     },
 
@@ -80,10 +106,22 @@ var GraphController = AbstractController.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /*
+     * override
+     *
+     * @private
+     * @param {string[]} groupbys
+     */
+    _setGroupby: function (groupbys) {
+        this.update({groupBy: groupbys});
+    },
+
     /**
      * @todo remove this and directly calls update. Update should be overridden
      * and modified to call _updateButtons
      *
+     * private
+     *
      * @param {string} mode one of 'pie', 'line' or 'bar'
      */
     _setMode: function (mode) {
@@ -102,6 +140,8 @@ var GraphController = AbstractController.extend({
         });
     },
     /**
+     * override
+     *
      * @private
      */
     _update: function () {
@@ -133,17 +173,20 @@ var GraphController = AbstractController.extend({
     /**
      * Do what need to be done when a button from the control panel is clicked.
      *
+     * @private
      * @param {MouseEvent} event
      */
     _onButtonClick: function (event) {
         var $target = $(event.target);
+        var parent;
+        var field;
         if ($target.hasClass('o_graph_button')) {
             this._setMode($target.data('mode'));
         } else if ($target.parents('.o_graph_measures_list').length) {
             event.preventDefault();
             event.stopPropagation();
-            var parent = $target.parent();
-            var field = parent.data('field');
+            parent = $target.parent();
+            field = parent.data('field');
             this._setMeasure(field);
         }
     },