From ec3e3c3379a73c2d67e01bfc497668182d8d0638 Mon Sep 17 00:00:00 2001
From: Leonardo Pavan Rocha <lpr@odoo.com>
Date: Mon, 16 Oct 2023 14:36:56 +0200
Subject: [PATCH] [IMP] web: save sidebar state in session storage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds the feature of saving the calendar state in the user’s
session storage. This allows the user to refresh the page and the sidebar will
be hidden/shown depending on what is saved in the session storage.

task-3455051
task-3389317

Part-of: odoo/odoo#138670
---
 .../src/views/calendar/calendar_controller.js | 20 ++++++++++---
 .../views/calendar/calendar_controller.xml    |  4 +--
 .../views/calendar/calendar_view_tests.js     | 30 +++++++++++++++++++
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/views/calendar/calendar_controller.js b/addons/web/static/src/views/calendar/calendar_controller.js
index e2cb95aaf34..fc14fdc0f38 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/views/calendar/calendar_controller.js
@@ -1,6 +1,9 @@
 /** @odoo-module **/
 
-import { deleteConfirmationMessage, ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import {
+    deleteConfirmationMessage,
+    ConfirmationDialog,
+} from "@web/core/confirmation_dialog/confirmation_dialog";
 import { _t } from "@web/core/l10n/translation";
 import { useOwnedDialogs, useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
@@ -62,12 +65,15 @@ export class CalendarController extends Component {
             getLocalState: () => this.model.exportedState,
         });
 
+        const sessionShowSidebar = browser.sessionStorage.getItem("calendar.showSideBar");
         this.state = useState({
             isWeekendVisible:
                 browser.localStorage.getItem("calendar.isWeekendVisible") != null
                     ? JSON.parse(browser.localStorage.getItem("calendar.isWeekendVisible"))
                     : true,
-            showSideBar: !this.env.isSmall,
+            showSideBar:
+                !this.env.isSmall &&
+                Boolean(sessionShowSidebar != null ? JSON.parse(sessionShowSidebar) : true),
         });
 
         this.searchBarToggler = useSearchBarToggler();
@@ -100,7 +106,6 @@ export class CalendarController extends Component {
         return this.model.meta.date || DateTime.now();
     }
 
-
     get today() {
         return DateTime.now().toFormat("d");
     }
@@ -192,10 +197,17 @@ export class CalendarController extends Component {
         return {
             model: this.model,
             sideBarShown: this.state.showSideBar,
-            toggleSideBar: () => (this.state.showSideBar = !this.state.showSideBar),
+            toggleSideBar: () => {
+                this.state.showSideBar = !this.state.showSideBar;
+            },
         };
     }
 
+    toggleSideBar() {
+        this.state.showSideBar = !this.state.showSideBar;
+        browser.sessionStorage.setItem("calendar.showSideBar", this.state.showSideBar);
+    }
+
     get showCalendar() {
         return !this.env.isSmall || !this.state.showSideBar;
     }
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index efe88aac0d5..cf531f9ff8c 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -54,11 +54,11 @@
                                 <t t-esc="dayHeader" />
                             </t>
                         </h5>
-                        <button class="btn btn-light d-none d-lg-block oi oi-panel-right ms-auto collapsed" data-bs-target=".o_calendar_sidebar_container" data-bs-toggle="collapse" aria-expanded="true"/>
+                        <button class="btn btn-light d-none d-lg-block oi oi-panel-right ms-auto collapsed" t-on-click="toggleSideBar"/>
                     </div>
                     <MobileFilterPanel t-if="env.isSmall" t-props="mobileFilterPanelProps" />
                     <t t-if="showCalendar" t-component="props.Renderer" t-props="rendererProps" />
-                    <div t-if="showSideBar" class="o_calendar_sidebar_container col-auto collapse-horizontal collapse show overflow-x-hidden overflow-y-auto">
+                    <div t-if="showSideBar" class="o_calendar_sidebar_container col-auto overflow-x-hidden overflow-y-auto">
                         <div class="o_calendar_sidebar">
                             <DatePicker t-if="!env.isSmall" t-props="datePickerProps" />
                             <FilterPanel t-props="filterPanelProps" />
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 dca4b79d36c..dce62ad5229 100644
--- a/addons/web/static/tests/views/calendar/calendar_view_tests.js
+++ b/addons/web/static/tests/views/calendar/calendar_view_tests.js
@@ -4921,6 +4921,36 @@ QUnit.module("Views", ({ beforeEach }) => {
         assert.containsN(target, ".fc-event.o_past_event", 4, "should show 4 past events");
     });
 
+    QUnit.test("calendar sidebar state is saved on session storage", async (assert) => {
+        patchWithCleanup(browser, {
+            sessionStorage: {
+                setItem(key, value) {
+                    if (key === "calendar.showSideBar") {
+                        assert.step(`${key}-${value}`);
+                    }
+                },
+                getItem(key) {
+                    if (key === "calendar.showSideBar") {
+                        assert.step(`${key}-read`);
+                        return false;
+                    }
+                },
+            },
+        });
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" mode="week"/>
+            `,
+        });
+        assert.containsNone(target, ".o_calendar_sidebar");
+        await click(target, ".o_calendar_header .oi-panel-right");
+        assert.containsOnce(target, ".o_calendar_sidebar");
+        assert.verifySteps(["calendar.showSideBar-read", "calendar.showSideBar-true"]);
+    });
+
     QUnit.test("calendar should show date information on header", async (assert) => {
         assert.expect(6);
         patchDate(2015, 11, 26, 9, 0, 0);