[IMP] web: save sidebar state in session storage

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

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;
     }

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" />

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);