[FIX] pivot: error on removing max number of columns/rows

When deleting the pivot style numberOfRows or numberOfColumns in the
pivot design panel, the pivot would be in error. This was because we
didn't handle the cases where the content on the input was not a number,
and would set `NaN` values.

closes #7384

Task: 5220970
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

Author: hokolomopo

src/components/side_panel/pivot/pivot_side_panel/pivot_design_panel/pivot_design_panel.ts

@@ -3,6 +3,7 @@ import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadshee
 import { Component } from "@odoo/owl";
 import { Store, useLocalStore } from "../../../../../store_engine";
 import { PivotStyle, UID } from "../../../../../types";
+import { NumberInput } from "../../../../number_input/number_input";
 import { Checkbox } from "../../../components/checkbox/checkbox";
 import { Section } from "../../../components/section/section";
 import { PivotSidePanelStore } from "../pivot_side_panel_store";
@@ -14,14 +15,19 @@ interface Props {
 export class PivotDesignPanel extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-PivotDesignPanel";
   static props = { pivotId: String };
-  static components = { Section, Checkbox };
+  static components = { Section, Checkbox, NumberInput };
 
   store!: Store<PivotSidePanelStore>;
 
   setup() {
     this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId, "neverDefer");
   }
 
+  updatePivotStyleNumberProperty(valueStr: string, key: keyof PivotStyle) {
+    const value = parseInt(valueStr);
+    this.store.update({ style: { ...this.pivotStyle, [key]: isNaN(value) ? undefined : value } });
+  }
+
   updatePivotStyleProperty(key: keyof PivotStyle, value: PivotStyle[keyof PivotStyle]) {
     this.store.update({ style: { ...this.pivotStyle, [key]: value } });
   }

src/components/side_panel/pivot/pivot_side_panel/pivot_design_panel/pivot_design_panel.xml

@@ -6,24 +6,22 @@
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max rows:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfRows ?? ''"
-                type="number"
-                class="o-pivot-n-of-rows o-input"
-                placeholder="e.g. 10"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfRows', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfRows ?? ''"
+                class="'o-pivot-n-of-rows'"
+                placeholder.translate="e.g. 10"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
               />
             </div>
           </div>
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max columns:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfColumns ?? ''"
-                type="number"
-                class="o-pivot-n-of-columns o-input"
-                placeholder="e.g. 5"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfColumns', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfColumns ?? ''"
+                class="'o-pivot-n-of-columns'"
+                placeholder.translate="e.g. 5"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
               />
             </div>
           </div>

tests/pivots/pivot_design_side_panel.test.ts

@@ -94,4 +94,20 @@ describe("Spreadsheet pivot side panel", () => {
     await setInputValueAndTrigger("input.o-pivot-n-of-rows", "12");
     expect(model.getters.getPivotCoreDefinition("1").style?.numberOfRows).toBe(12);
   });
+
+  test("Editing a number input with a non-number value make the property undefined and not NaN", async () => {
+    updatePivot(model, "1", { style: { numberOfRows: 5, numberOfColumns: 10 } });
+    await nextTick();
+
+    jest.useFakeTimers();
+    setInputValueAndTrigger("input.o-pivot-n-of-rows", "olà");
+    setInputValueAndTrigger("input.o-pivot-n-of-columns", "");
+    jest.advanceTimersByTime(1000);
+
+    expect(model.getters.getPivotCoreDefinition("1").style).toEqual({
+      numberOfRows: undefined,
+      numberOfColumns: undefined,
+    });
+    jest.useRealTimers();
+  });
 });