From 6da48dbc957b7f08d4eb59bba7993a0abcef5403 Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Thu, 20 Jul 2023 08:23:50 +0000
Subject: [PATCH] [IMP] web: add show weekends to calendar

This commit adds the "show weekends" functionality to calendar which
allows the user to choose whether weekends should be shown in the calendar
or not (defaults to false).

task-3425523

closes odoo/odoo#129107

Signed-off-by: Luca Vitali (luvi) <luvi@odoo.com>
---
 .../calendar_common_renderer.js               |  3 +-
 .../src/views/calendar/calendar_controller.js | 33 ++++++++++++++-----
 .../views/calendar/calendar_controller.xml    |  2 +-
 addons/web/static/src/views/calendar/hooks.js |  7 ++++
 .../view_components/view_scale_selector.js    |  2 ++
 .../view_components/view_scale_selector.xml   |  8 +++++
 .../views/calendar/calendar_view_tests.js     |  5 ++-
 .../view_scale_selector_tests.js              | 10 ++++++
 8 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
index 98487de5d7b..b8c178c593a 100644
--- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
@@ -96,6 +96,7 @@ export class CalendarCommonRenderer extends Component {
             unselectAuto: false,
             weekLabel:
                 this.props.model.scale === "month" && this.env.isSmall ? "" : this.env._t("Week"),
+            weekends: this.props.isWeekendVisible,
             weekNumberCalculation: "ISO",
             weekNumbers: true,
             weekNumbersWithinDays: !this.env.isSmall,
@@ -158,7 +159,7 @@ export class CalendarCommonRenderer extends Component {
         this.popover.open(
             target,
             this.getPopoverProps(record),
-            `o_cw_popover o_calendar_color_${typeof(color) === "number" ? color : 0}`
+            `o_cw_popover o_calendar_color_${typeof color === "number" ? color : 0}`
         );
     }
     updateSize() {
diff --git a/addons/web/static/src/views/calendar/calendar_controller.js b/addons/web/static/src/views/calendar/calendar_controller.js
index c24085a148f..ef1e61ca5e5 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/views/calendar/calendar_controller.js
@@ -16,6 +16,7 @@ import { SearchBar } from "@web/search/search_bar/search_bar";
 import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { ViewScaleSelector } from "@web/views/view_components/view_scale_selector";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
+import { browser } from "@web/core/browser/browser";
 
 import { Component, useState } from "@odoo/owl";
 
@@ -43,20 +44,28 @@ export class CalendarController extends Component {
         this.orm = useService("orm");
         this.displayDialog = useUniqueDialog();
 
-        this.model = useModelWithSampleData(this.props.Model, {
-            ...this.props.archInfo,
-            resModel: this.props.resModel,
-            domain: this.props.domain,
-            fields: this.props.fields,
-        }, {
-            onWillStart: this.onWillStartModel.bind(this),
-        });
+        this.model = useModelWithSampleData(
+            this.props.Model,
+            {
+                ...this.props.archInfo,
+                resModel: this.props.resModel,
+                domain: this.props.domain,
+                fields: this.props.fields,
+            },
+            {
+                onWillStart: this.onWillStartModel.bind(this),
+            }
+        );
 
         useSetupView({
             getLocalState: () => this.model.exportedState,
         });
 
         this.state = useState({
+            isWeekendVisible:
+                browser.localStorage.getItem("calendar.isWeekendVisible") != null
+                    ? JSON.parse(browser.localStorage.getItem("calendar.isWeekendVisible"))
+                    : true,
             showSideBar: !this.env.isSmall,
         });
 
@@ -66,6 +75,7 @@ export class CalendarController extends Component {
     get rendererProps() {
         return {
             model: this.model,
+            isWeekendVisible: this.model.scale === "day" || this.state.isWeekendVisible,
             createRecord: this.createRecord.bind(this),
             deleteRecord: this.deleteRecord.bind(this),
             editRecord: this.editRecord.bind(this),
@@ -216,7 +226,7 @@ export class CalendarController extends Component {
     }
 
     onWillStartModel() {}
-    
+
     async setDate(move) {
         let date = null;
         switch (move) {
@@ -242,6 +252,11 @@ export class CalendarController extends Component {
     async setScale(scale) {
         await this.model.load({ scale });
     }
+
+    toggleWeekendVisibility() {
+        this.state.isWeekendVisible = !this.state.isWeekendVisible;
+        browser.localStorage.setItem("calendar.isWeekendVisible", this.state.isWeekendVisible);
+    }
 }
 CalendarController.components = {
     DatePicker: CalendarDatePicker,
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index 358bd0c09b0..b72cffcd308 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -33,7 +33,7 @@
                                     aria-label="Previous"
                                     t-on-click.stop="() => this.setDate('previous')"
                                 ><i class="oi oi-arrow-left"/></button>
-                                <ViewScaleSelector scales="scales" currentScale="model.scale" setScale.bind="setScale" />
+                                <ViewScaleSelector scales="scales" currentScale="model.scale" isWeekendVisible="state.isWeekendVisible" setScale.bind="setScale" toggleWeekendVisibility.bind="toggleWeekendVisibility" />
                                 <button
                                     class="o_calendar_button_next btn btn-secondary btn-sm d-none d-md-block"
                                     title="Next"
diff --git a/addons/web/static/src/views/calendar/hooks.js b/addons/web/static/src/views/calendar/hooks.js
index ca0d814653a..47e75ab9dcf 100644
--- a/addons/web/static/src/views/calendar/hooks.js
+++ b/addons/web/static/src/views/calendar/hooks.js
@@ -10,6 +10,7 @@ import {
     onPatched,
     onWillStart,
     onWillUnmount,
+    onWillUpdateProps,
     useComponent,
     useExternalListener,
     useRef,
@@ -124,8 +125,14 @@ export function useFullCalendar(refName, params) {
             throw new Error(`Cannot instantiate FullCalendar\n${e.message}`);
         }
     });
+
+    let isWeekendVisible = params.isWeekendVisible;
+    onWillUpdateProps((np) => {
+        isWeekendVisible = np.isWeekendVisible;
+    });
     onPatched(() => {
         instance.refetchEvents();
+        instance.setOption("weekends", isWeekendVisible);
     });
     onWillUnmount(() => {
         instance.destroy();
diff --git a/addons/web/static/src/views/view_components/view_scale_selector.js b/addons/web/static/src/views/view_components/view_scale_selector.js
index 0754d431490..7220b9c38ac 100644
--- a/addons/web/static/src/views/view_components/view_scale_selector.js
+++ b/addons/web/static/src/views/view_components/view_scale_selector.js
@@ -13,7 +13,9 @@ export class ViewScaleSelector extends Component {
     static props = {
         scales: { type: Object },
         currentScale: { type: String },
+        isWeekendVisible: { type: Boolean, optional: true },
         setScale: { type: Function },
+        toggleWeekendVisibility: { type: Function, optional: true },
     };
     get scales() {
         return Object.entries(this.props.scales).map(([key, value]) => ({ key, ...value }));
diff --git a/addons/web/static/src/views/view_components/view_scale_selector.xml b/addons/web/static/src/views/view_components/view_scale_selector.xml
index 9262331f4f9..01b5e0f4b6a 100644
--- a/addons/web/static/src/views/view_components/view_scale_selector.xml
+++ b/addons/web/static/src/views/view_components/view_scale_selector.xml
@@ -15,6 +15,14 @@
                     <t t-esc="scale.description" />
                 </DropdownItem>
             </t>
+            <div t-if="this.props.isWeekendVisible !== undefined" class="dropdown-divider" role="separator"/>
+            <DropdownItem
+                    t-if="this.props.isWeekendVisible !== undefined"
+                    class="`${props.isWeekendVisible ? 'active' : ''}`"
+                    onSelected="props.toggleWeekendVisibility"
+                >
+                Show weekends
+            </DropdownItem>
         </Dropdown>
     </t>
 
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 49af6e57754..55b7750ca0f 100644
--- a/addons/web/static/tests/views/calendar/calendar_view_tests.js
+++ b/addons/web/static/tests/views/calendar/calendar_view_tests.js
@@ -2688,7 +2688,10 @@ QUnit.module("Views", ({ beforeEach }) => {
                 </calendar>
             `,
         });
-        const colorClass = Array.from(findEvent(target, 1).classList).find(className => className.startsWith("o_calendar_color_"));
+
+        const colorClass = Array.from(findEvent(target, 1).classList).find((className) =>
+            className.startsWith("o_calendar_color_")
+        );
         assert.notOk(isNaN(Number(colorClass.split("_").at(-1))));
         await clickEvent(target, 1);
         assert.hasClass(target.querySelector(".o_cw_popover"), colorClass);
diff --git a/addons/web/static/tests/views/view_components/view_scale_selector_tests.js b/addons/web/static/tests/views/view_components/view_scale_selector_tests.js
index 9b33ca86d23..55cc74ee65d 100644
--- a/addons/web/static/tests/views/view_components/view_scale_selector_tests.js
+++ b/addons/web/static/tests/views/view_components/view_scale_selector_tests.js
@@ -45,10 +45,14 @@ QUnit.module("ViewComponents", (hooks) => {
                             description: "Yearly",
                         },
                     },
+                    isWeekendVisible: true,
                     setScale: (scale) => {
                         this.state.scale = scale;
                         assert.step(scale);
                     },
+                    toggleWeekendVisibility: () => {
+                        assert.step("toggleWeekendVisibility");
+                    },
                     currentScale: this.state.scale,
                 };
             }
@@ -89,6 +93,10 @@ QUnit.module("ViewComponents", (hooks) => {
             "Daily",
             "the right text is displayed on the toggler"
         );
+
+        await click(target, ".scale_button_selection");
+        await click(target, ".dropdown-item:last-child");
+        assert.verifySteps(["toggleWeekendVisibility"]);
     });
 
     QUnit.test("ViewScaleSelector with only one scale available", async (assert) => {
@@ -110,6 +118,8 @@ QUnit.module("ViewComponents", (hooks) => {
                         },
                     },
                     setScale: () => {},
+                    isWeekendVisible: false,
+                    toggleWeekendVisibility: () => {},
                     currentScale: this.state.scale,
                 };
             }