From d128feafeb5f2b6e353e5e43880de96b247343ef Mon Sep 17 00:00:00 2001 From: "Pierre Pulinckx (pipu)" Date: Fri, 1 Sep 2023 12:00:43 +0200 Subject: [PATCH] [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) --- .../search/control_panel/control_panel.xml | 1 + .../src/views/calendar/calendar_controller.js | 25 +++++++++++++++++++ .../views/calendar/calendar_controller.xml | 3 +++ .../tests/mobile/views/calendar_view_tests.js | 4 ++- 4 files changed, 32 insertions(+), 1 deletion(-) diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml index 21d68846d84..3e3ebee7d62 100644 --- a/addons/web/static/src/search/control_panel/control_panel.xml +++ b/addons/web/static/src/search/control_panel/control_panel.xml @@ -135,6 +135,7 @@ Unnamed + diff --git a/addons/web/static/src/views/calendar/calendar_controller.js b/addons/web/static/src/views/calendar/calendar_controller.js index 5c90bbf7723..6be9de28262 100644 --- a/addons/web/static/src/views/calendar/calendar_controller.js +++ b/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, diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml index 111884e733a..771f3e41d30 100644 --- a/addons/web/static/src/views/calendar/calendar_controller.xml +++ b/addons/web/static/src/views/calendar/calendar_controller.xml @@ -13,6 +13,9 @@ + + + diff --git a/addons/web/static/tests/mobile/views/calendar_view_tests.js b/addons/web/static/tests/mobile/views/calendar_view_tests.js index 06c88d395b0..4f56430b696 100644 --- a/addons/web/static/tests/mobile/views/calendar_view_tests.js +++ b/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");