[FIX] web: Calendar: update breadcrumbs and buttons

In calendar views, the breadcrumbs should display the period
displayed in the view (e.g. in month mode, something like 'April
2017'). Moreover, the 'Day', 'Week' and 'Month' buttons should be
highlighted when the corresponding mode is used.

This rev. ensures that this is the case.

3 files changed, 30 insertions, 2 deletions

diff --git a/addons/web/static/src/js/views/calendar/calendar_controller.js b/addons/web/static/src/js/views/calendar/calendar_controller.js
index db2394ddd1d..8d27acb43dd 100644
--- a/addons/web/static/src/js/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/js/views/calendar/calendar_controller.js
@@ -28,6 +28,7 @@ var CalendarController = AbstractController.extend({
         changeDate: '_onChangeDate',
         changeFilter: '_onChangeFilter',
         toggleFullWidth: '_onToggleFullWidth',
+        viewUpdated: '_onViewUpdated',
     }),
     /**
      * @override
@@ -39,6 +40,7 @@ var CalendarController = AbstractController.extend({
     init: function (parent, model, renderer, params) {
         this._super.apply(this, arguments);
         this.current_start = null;
+        this.displayName = params.displayName;
         this.quickAddPop = params.quickAddPop;
         this.disableQuickCreate = params.disableQuickCreate;
         this.eventOpenPopup = params.eventOpenPopup;
@@ -317,6 +319,21 @@ var CalendarController = AbstractController.extend({
     _onUpdateRecord: function (event) {
         this._updateRecord(event.data);
     },
+    /**
+     * The internal state of the calendar (mode, period displayed) has changed,
+     * so update the control panel buttons and breadcrumbs accordingly.
+     *
+     * @param {OdooEvent} event
+     */
+    _onViewUpdated: function (event) {
+        this.mode = event.data.mode;
+        if (this.$buttons) {
+            this.$buttons.find('.active').removeClass('active');
+            this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
+        }
+        var subtitle = (this.mode === 'week' ? _t('Week ') : '') + event.data.title;
+        this.set({title: this.displayName + ' (' + subtitle + ')'});
+    },
 });
 
 return CalendarController;
diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index 9ec70551413..9a3dd68dbee 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -350,9 +350,19 @@ return AbstractRenderer.extend({
                 element.find('.fc-content .fc-time').text(display_hour);
             },
             // Dirty hack to ensure a correct first render
-            eventAfterAllRender: function (view) {
+            eventAfterAllRender: function () {
                 window.dispatchEvent(new Event('resize'));
             },
+            viewRender: function (view) {
+                // compute mode from view.name which is either 'month', 'agendaWeek' or 'agendaDay'
+                var mode = view.name === 'month' ? 'month' : (view.name === 'agendaWeek' ? 'week' : 'day');
+                // compute title: in week mode, display the week number
+                var title = mode === 'week' ? view.intervalStart.week() : view.title;
+                self.trigger_up('viewUpdated', {
+                    mode: mode,
+                    title: title,
+                });
+            },
             height: 'parent',
             unselectAuto: false,
         });
diff --git a/addons/web/static/src/js/views/calendar/calendar_view.js b/addons/web/static/src/js/views/calendar/calendar_view.js
index 71a6c30b756..d73b61e9c78 100644
--- a/addons/web/static/src/js/views/calendar/calendar_view.js
+++ b/addons/web/static/src/js/views/calendar/calendar_view.js
@@ -107,7 +107,7 @@ var CalendarView = AbstractView.extend({
 
         //if quick_add = False, we don't allow quick_add
         //if quick_add = not specified in view, we use the default widgets.QuickCreate
-        //if quick_add = is NOT False and IS specified in view, we this one for widgets.QuickCreate'   
+        //if quick_add = is NOT False and IS specified in view, we this one for widgets.QuickCreate'
         this.controllerParams.quickAddPop = (!('quick_add' in attrs) || utils.toBoolElse(attrs.quick_add+'', true));
         this.controllerParams.disableQuickCreate =  params.disable_quick_create || !this.controllerParams.quickAddPop;
         // If this field is set ot true, we don't open the event in form view, but in a popup with the view_id passed by this parameter
@@ -116,6 +116,7 @@ var CalendarView = AbstractView.extend({
         this.controllerParams.eventOpenPopup = utils.toBoolElse(attrs.event_open_popup || '', false);
         this.controllerParams.mapping = mapping;
         this.controllerParams.context = params.context || {};
+        this.controllerParams.displayName = params.action && params.action.name;
 
         this.rendererParams.displayFields = displayFields;
         this.rendererParams.eventTemplate = _.findWhere(arch.children, {'tag': 'templates'});