From 227e089efc4246a408b6a498a42425b1bdaff2f5 Mon Sep 17 00:00:00 2001
From: Damien Bouvy <dbo@odoo.com>
Date: Mon, 5 Jun 2023 14:38:45 +0000
Subject: [PATCH] [FIX] web: restore calendar navigation

Since the new 'milk' backend theme, we removed previous/next buttons in
the calendar view and made the mini-calendar the main control mechanism
for the calendar view: users were expected to discover that clicking on
a specific date in the mini-calendar would change the main display to
the period encompassing said date (e.g. if the calendar is in week moed
and I click on June 7th 2023, I would see the week of Jun 5-11)

As it happens, it is rather coutner-intuitive and users expect to find a
clearer control mechanism (and I don't blame them).

This commit re-introduces such controls in the sidebar, next to the
period selector.

closes odoo/odoo#123978

X-original-commit: 89897d0902c6e14bcd03fd9853f2fadbe7f348e3
Signed-off-by: Bouvy Damien (dbo) <dbo@odoo.com>
---
 .../src/views/calendar/calendar_controller.xml   | 16 +++++++++++++++-
 .../tests/views/calendar/calendar_view_tests.js  |  4 ++--
 .../web/static/tests/views/calendar/helpers.js   |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index 371743a0df7..9fd903639e3 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -26,7 +26,21 @@
                             >
                                 Today
                             </button>
-                            <ViewScaleSelector scales="scales" currentScale="model.scale" setScale.bind="setScale" />
+                            <div class="d-flex gap-1 o_calendar_navigation_buttons">
+                                <button
+                                    class="btn btn-secondary btn-sm d-none d-md-block o_calendar_button_prev"
+                                    title="Previous"
+                                    aria-label="Previous"
+                                    t-on-click.stop="() => this.setDate('previous')"
+                                ><i class="fa fa-chevron-left"/></button>
+                                <ViewScaleSelector scales="scales" currentScale="model.scale" setScale.bind="setScale" />
+                                <button
+                                    class="btn btn-secondary btn-sm d-none d-md-block o_calendar_button_next"
+                                    title="Next"
+                                    aria-label="Next"
+                                    t-on-click.stop="() => this.setDate('next')"
+                                ><i class="fa fa-chevron-right"/></button>
+                            </div>
                         </div>
                         <div class="o_calendar_sidebar">
                             <DatePicker t-if="!env.isSmall" t-props="datePickerProps" />
diff --git a/addons/web/static/tests/views/calendar/calendar_view_tests.js b/addons/web/static/tests/views/calendar/calendar_view_tests.js
index 04163d2de8a..00b15cf3b12 100644
--- a/addons/web/static/tests/views/calendar/calendar_view_tests.js
+++ b/addons/web/static/tests/views/calendar/calendar_view_tests.js
@@ -960,8 +960,8 @@ QUnit.module("Views", ({ beforeEach }) => {
         assert.containsN(
             target,
             ".fc-event-container .fc-event",
-            10,
-            "should still display 10 events"
+            0,
+            "should display 0 events"
         );
         await pickDate(target, "2017-01-01");
         assert.containsN(
diff --git a/addons/web/static/tests/views/calendar/helpers.js b/addons/web/static/tests/views/calendar/helpers.js
index 5a90c19be60..c98f923216d 100644
--- a/addons/web/static/tests/views/calendar/helpers.js
+++ b/addons/web/static/tests/views/calendar/helpers.js
@@ -508,7 +508,7 @@ export async function changeScale(target, scale) {
 }
 
 export async function navigate(target, direction) {
-    await click(target, `.o_calendar_mini .ui-datepicker-${direction}`);
+    await click(target, `.o_calendar_navigation_buttons .o_calendar_button_${direction}`);
 }
 
 export function findFilterPanelSection(target, sectionName) {