diff --git a/src/components/side_panel/side_panel/side_panel_store.ts b/src/components/side_panel/side_panel/side_panel_store.ts index 83f591c171..528553eb89 100644 --- a/src/components/side_panel/side_panel/side_panel_store.ts +++ b/src/components/side_panel/side_panel/side_panel_store.ts @@ -23,7 +23,7 @@ export const MIN_SHEET_VIEW_WIDTH = 150; export class SidePanelStore extends SpreadsheetStore { mutators = ["open", "toggle", "close", "changePanelSize", "resetPanelSize"] as const; - initialPanelProps: SidePanelProps = {}; + currentPanelProps: SidePanelProps = {}; componentTag: string = ""; panelSize = DEFAULT_SIDE_PANEL_SIZE; @@ -31,11 +31,11 @@ export class SidePanelStore extends SpreadsheetStore { if (!this.componentTag) { return false; } - return this.computeState(this.componentTag, this.initialPanelProps).isOpen; + return this.computeState(this.componentTag, this.currentPanelProps).isOpen; } get panelProps(): SidePanelProps { - const state = this.computeState(this.componentTag, this.initialPanelProps); + const state = this.computeState(this.componentTag, this.currentPanelProps); if (state.isOpen) { return state.props ?? {}; } @@ -43,7 +43,7 @@ export class SidePanelStore extends SpreadsheetStore { } get panelKey(): string | undefined { - const state = this.computeState(this.componentTag, this.initialPanelProps); + const state = this.computeState(this.componentTag, this.currentPanelProps); if (state.isOpen) { return state.key; } @@ -56,10 +56,10 @@ export class SidePanelStore extends SpreadsheetStore { return; } if (this.isOpen && componentTag !== this.componentTag) { - this.initialPanelProps?.onCloseSidePanel?.(); + this.currentPanelProps?.onCloseSidePanel?.(); } this.componentTag = componentTag; - this.initialPanelProps = state.props ?? {}; + this.currentPanelProps = state.props ?? {}; } toggle(componentTag: string, panelProps: SidePanelProps) { @@ -71,8 +71,8 @@ export class SidePanelStore extends SpreadsheetStore { } close() { - this.initialPanelProps.onCloseSidePanel?.(); - this.initialPanelProps = {}; + this.currentPanelProps.onCloseSidePanel?.(); + this.currentPanelProps = {}; this.componentTag = ""; } @@ -98,7 +98,11 @@ export class SidePanelStore extends SpreadsheetStore { props: panelProps, }; } else { - return customComputeState(this.getters, panelProps); + const state = customComputeState(this.getters, panelProps); + if (state.isOpen) { + this.currentPanelProps = state.props ?? this.currentPanelProps; + } + return state; } } } diff --git a/tests/figures/chart/charts_component.test.ts b/tests/figures/chart/charts_component.test.ts index 39525b220a..e4e873d0ff 100644 --- a/tests/figures/chart/charts_component.test.ts +++ b/tests/figures/chart/charts_component.test.ts @@ -1,6 +1,7 @@ import { App } from "@odoo/owl"; import { CommandResult, Model, Spreadsheet } from "../../../src"; import { ChartPanel } from "../../../src/components/side_panel/chart/main_chart_panel/main_chart_panel"; +import { SidePanelStore } from "../../../src/components/side_panel/side_panel/side_panel_store"; import { ChartTerms } from "../../../src/components/translations_terms"; import { BACKGROUND_CHART_COLOR, DEBOUNCE_TIME } from "../../../src/constants"; import { toHex, toZone } from "../../../src/helpers"; @@ -1475,6 +1476,29 @@ describe("charts", () => { ]); }); + test("Deleting the second chart after selecting it closes the side panel", async () => { + createTestChart("basicChart", chartId); + createTestChart("basicChart", "secondChartId"); + await mountSpreadsheet(); + await openChartConfigSidePanel(model, env, chartId); + const store = env.getStore(SidePanelStore); + const sheetId = model.getters.getActiveSheetId(); + + const figures = model.getters.getFigures(sheetId); + expect(store.panelProps.figureId).toBe(figures[0].id); + expect(fixture.querySelector(".o-sidePanel")).not.toBeNull(); + + model.dispatch("SELECT_FIGURE", { figureId: figures[1].id }); + await nextTick(); + expect(store.panelProps.figureId).toBe(figures[1].id); + expect(fixture.querySelector(".o-sidePanel")).not.toBeNull(); + + model.dispatch("DELETE_FIGURE", { sheetId, figureId: figures[1].id }); + await nextTick(); + expect(store.isOpen).toBeFalsy(); + expect(fixture.querySelector(".o-sidePanel")).toBeNull(); + }); + describe("Scorecard specific tests", () => { test("can edit chart baseline colors", async () => { createTestChart("scorecard");