[IMP] figure_chart: Double click on chart open the sidepanel

Added a feature which allow to open the side panel, when double clicking on the chart. Task id: 3205620 closes #2143 Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
odoo · Mar 20, 2023 · 308e5d6 · 308e5d6
1 parent 9781b7e
commit 308e5d6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/components/figures/figure_chart/figure_chart.ts b/src/components/figures/figure_chart/figure_chart.ts
@@ -25,6 +25,11 @@ export class ChartFigure extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartFigure";
   static components = {};
 
+  onDoubleClick() {
+    this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
+    this.env.openSidePanel("ChartPanel");
+  }
+
   get chartType(): ChartType {
     return this.env.model.getters.getChartType(this.props.figure.id);
   }

diff --git a/src/components/figures/figure_chart/figure_chart.xml b/src/components/figures/figure_chart/figure_chart.xml
@@ -1,6 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet-ChartFigure" owl="1">
-    <div class="o-chart-container w-100 h-100">
+    <div class="o-chart-container w-100 h-100" t-on-dblclick="onDoubleClick">
       <t
         t-component="chartComponent"
         figure="this.props.figure"

diff --git a/tests/components/charts.test.ts b/tests/components/charts.test.ts
@@ -186,6 +186,19 @@ describe("figures", () => {
     }
   );
 
+  test.each(["scorecard", "basicChart", "gauge"])(
+    "Double click on graph will open sidepanel",
+    async (chartType: string) => {
+      createTestChart(chartType);
+      await nextTick();
+      expect(document.querySelector(".o-chart-container")).toBeTruthy();
+      triggerMouseEvent(".o-chart-container", "dblclick");
+      await nextTick();
+      expect(model.getters.getSelectedFigureId()).toBe("someuuid");
+      expect(document.querySelector(".o-sidePanel")).toBeTruthy();
+    }
+  );
+
   test.each(["basicChart", "scorecard", "gauge"])(
     "can edit charts %s",
     async (chartType: string) => {