[FIX] web: add date for mobile week & month view

In this commit, current date is added in control panel breadcrums for calendar
week and calendar month views and this only for mobile screens.
If a week straddles two months then the two months are included in the wording
but in shortcuts (Aug-Sep 2023). In all other cases, the entire month and year
are included in the label (August 2023).

Task-3439201

closes odoo/odoo#133633

Signed-off-by: Florent Dardenne (dafl) <dafl@odoo.com>

addons/web/static/src/search/control_panel/control_panel.xml

@@ -135,6 +135,7 @@
     <t t-name="web.Breadcrumb.Name">
         <t t-if="breadcrumb.name" t-out="breadcrumb.name"/>
         <em t-else="" class="text-warning">Unnamed</em>
+        <t t-slot="control-panel-additional-breadcrums"/>
     </t>
 
 </templates>

addons/web/static/src/views/calendar/calendar_controller.js

@@ -19,6 +19,8 @@ import { browser } from "@web/core/browser/browser";
 
 import { Component, useState } from "@odoo/owl";
 
+const { DateTime } = luxon;
+
 export const SCALE_LABELS = {
     day: _t("Day"),
     week: _t("Week"),
@@ -71,6 +73,29 @@ export class CalendarController extends Component {
         this.searchBarToggler = useSearchBarToggler();
     }
 
+    get currentDate() {
+        const meta = this.model.meta;
+        const scale = meta.scale;
+        if (this.env.isSmall && ["week", "month"].includes(scale)) {
+            const date = meta.date || DateTime.now();
+            let text = "";
+            if (scale === "week") {
+                const startMonth = date.startOf("week");
+                const endMonth = date.endOf("week");
+                if (startMonth.toFormat("LLL") !== endMonth.toFormat("LLL")) {
+                    text = `${startMonth.toFormat("LLL")}-${endMonth.toFormat("LLL")}`;
+                } else {
+                    text = startMonth.toFormat("LLLL");
+                }
+            } else if (scale === "month") {
+                text = date.toFormat("LLLL");
+            }
+            return ` - ${text} ${date.year}`;
+        } else {
+            return "";
+        }
+    }
+
     get rendererProps() {
         return {
             model: this.model,

addons/web/static/src/views/calendar/calendar_controller.xml

@@ -13,6 +13,9 @@
                 <t t-set-slot="layout-actions">
                     <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
                 </t>
+                <t t-set-slot="control-panel-additional-breadcrums">
+                    <span class="currentDate"><t t-out="currentDate"/></span>
+                </t>
                 <t t-set-slot="control-panel-navigation-additional">
                     <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>

addons/web/static/tests/mobile/views/calendar_view_tests.js

@@ -370,6 +370,8 @@ QUnit.module("Views", ({ beforeEach }) => {
         // Change scale to month
         await click(target, ".o_calendar_container .o_other_calendar_panel");
         await changeScale(target, "month");
+        assert.containsOnce(target, ".currentDate");
+        assert.strictEqual(document.querySelector(".currentDate").textContent, " - February 2016");
         await click(target, ".o_calendar_container .o_other_calendar_panel");
         assert.containsNone(target, ".fc-timeGridDay-view");
         assert.containsOnce(target, ".fc-dayGridMonth-view");
@@ -378,7 +380,7 @@ QUnit.module("Views", ({ beforeEach }) => {
         await tap(target, ".fc-day-top[data-date='2016-02-10']");
         await nextTick(); // await reload & render
         await nextTick(); // await breadcrumb update
-
+        assert.strictEqual(document.querySelector(".currentDate").textContent, "");
         assert.containsNone(target, ".fc-dayGridMonth-view");
         assert.containsOnce(target, ".fc-timeGridDay-view");
         assert.equal(target.querySelector(".fc-day-header[data-date]").dataset.date, "2016-02-10");