[IMP] pivot: add collapse/expand icons to pivot

This commit adds icons to collapse/expand dimensions of a pivot.

The computation of the collapsed state of the pivot is done in the
`SpreadsheetPivotTable`. But since some features need the full,
non-collapsed pivot (eg. calculated measures), we now need two
different `SpreadsheetPivotTable` per pivot, `pivot.getTableStructure()`
and `pivot.getNonCollapsedTableStructure()`.

closes #6083

Task: 4674387
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: hokolomopo

src/actions/menu_items_actions.ts

@@ -430,7 +430,7 @@ export const REINSERT_DYNAMIC_PIVOT_CHILDREN = (env: SpreadsheetChildEnv) =>
     sequence: index,
     execute: (env: SpreadsheetChildEnv) => {
       const zone = env.model.getters.getSelectedZone();
-      const table = env.model.getters.getPivot(pivotId).getTableStructure().export();
+      const table = env.model.getters.getPivot(pivotId).getCollapsedTableStructure().export();
       env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
         pivotId,
         table,
@@ -451,7 +451,7 @@ export const REINSERT_STATIC_PIVOT_CHILDREN = (env: SpreadsheetChildEnv) =>
     sequence: index,
     execute: (env: SpreadsheetChildEnv) => {
       const zone = env.model.getters.getSelectedZone();
-      const table = env.model.getters.getPivot(pivotId).getTableStructure().export();
+      const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure().export();
       env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
         pivotId,
         table,

src/components/grid_cell_icon/grid_cell_icon.ts

@@ -1,33 +1,25 @@
 import { Component } from "@odoo/owl";
 import { DEFAULT_VERTICAL_ALIGN, GRID_ICON_EDGE_LENGTH, GRID_ICON_MARGIN } from "../../constants";
 import { positionToZone } from "../../helpers";
-import { Align, CellPosition, Rect, SpreadsheetChildEnv, VerticalAlign } from "../../types";
-import { css, cssPropertiesToCss } from "../helpers";
-
-css/* scss */ `
-  .o-grid-cell-icon {
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-  }
-`;
+import { GridIcon } from "../../registries/icons_on_cell_registry";
+import { CellPosition, Rect, SpreadsheetChildEnv, VerticalAlign } from "../../types";
+import { cssPropertiesToCss } from "../helpers";
 
 export interface GridCellIconProps {
-  cellPosition: CellPosition;
-  horizontalAlign?: Align;
+  icon: GridIcon;
   verticalAlign?: VerticalAlign;
 }
 
 export class GridCellIcon extends Component<GridCellIconProps, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-GridCellIcon";
   static props = {
-    cellPosition: Object,
-    horizontalAlign: { type: String, optional: true },
+    icon: Object,
     verticalAlign: { type: String, optional: true },
     slots: Object,
   };
 
   get iconStyle(): string {
-    const cellPosition = this.props.cellPosition;
+    const cellPosition = this.props.icon.position;
     const merge = this.env.model.getters.getMerge(cellPosition);
     const zone = merge || positionToZone(cellPosition);
     const rect = this.env.model.getters.getVisibleRectWithoutHeaders(zone);
@@ -36,6 +28,8 @@ export class GridCellIcon extends Component<GridCellIconProps, SpreadsheetChildE
     return cssPropertiesToCss({
       top: `${y}px`,
       left: `${x}px`,
+      width: `${this.props.icon.size}px`,
+      height: `${this.props.icon.size}px`,
     });
   }
 
@@ -63,16 +57,17 @@ export class GridCellIcon extends Component<GridCellIconProps, SpreadsheetChildE
 
     const cell = this.env.model.getters.getCell(cellPosition);
     const evaluatedCell = this.env.model.getters.getEvaluatedCell(cellPosition);
-    const align = this.props.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
+    const align =
+      this.props.icon.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
 
     switch (align) {
       case "right":
-        return end - GRID_ICON_MARGIN - GRID_ICON_EDGE_LENGTH;
+        return end - this.props.icon.size - this.props.icon.margin;
       case "left":
-        return start + GRID_ICON_MARGIN;
+        return start + this.props.icon.margin;
       default:
-        const centeringOffset = Math.floor((end - start - GRID_ICON_EDGE_LENGTH) / 2);
-        return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
+        const centeringOffset = Math.floor((end - start - this.props.icon.size) / 2);
+        return end - this.props.icon.size - centeringOffset;
     }
   }
 

src/components/grid_cell_icon/grid_cell_icon.xml

@@ -2,7 +2,7 @@
   <t t-name="o-spreadsheet-GridCellIcon">
     <div
       class="o-grid-cell-icon position-absolute overflow-hidden"
-      t-if="isPositionVisible(this.props.cellPosition)"
+      t-if="isPositionVisible(this.props.icon.position)"
       t-att-style="iconStyle">
       <t t-slot="default"/>
     </div>

src/components/grid_cell_icon_overlay/grid_cell_icon_overlay.xml

@@ -1,7 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-GridCellIconOverlay">
     <t t-foreach="icons" t-as="icon" t-key="icon_index">
-      <GridCellIcon cellPosition="icon.position" horizontalAlign="icon.horizontalAlign">
+      <GridCellIcon icon="icon">
         <t t-component="icon.component" cellPosition="icon.position"/>
       </GridCellIcon>
     </t>

src/components/pivot_collapse_icon/pivot_collapse_icon.ts

@@ -0,0 +1,72 @@
+import { Component } from "@odoo/owl";
+import { deepEquals } from "../../helpers";
+import { CellPosition, SpreadsheetChildEnv } from "../../types";
+import { css } from "../helpers";
+
+css/* scss */ `
+  .o-spreadsheet {
+    .o-pivot-collapse-icon {
+      cursor: pointer;
+      width: 11px;
+      height: 11px;
+      border: 1px solid #777;
+      background-color: #eee;
+      margin: 3px 0 3px 6px;
+
+      .o-icon {
+        width: 5px;
+        height: 5px;
+      }
+    }
+  }
+`;
+
+interface Props {
+  cellPosition: CellPosition;
+}
+
+export class PivotCollapseIcon extends Component<Props, SpreadsheetChildEnv> {
+  static template = "o-spreadsheet-PivotCollapseIcon";
+  static props = {
+    cellPosition: Object,
+  };
+
+  onClick() {
+    const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
+    const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
+    if (!pivotId || pivotCell.type !== "HEADER") {
+      return;
+    }
+    const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
+
+    const collapsedDomains = definition.collapsedDomains?.[pivotCell.dimension]
+      ? [...definition.collapsedDomains[pivotCell.dimension]]
+      : [];
+    const index = collapsedDomains.findIndex((domain) => deepEquals(domain, pivotCell.domain));
+    if (index !== -1) {
+      collapsedDomains.splice(index, 1);
+    } else {
+      collapsedDomains.push(pivotCell.domain);
+    }
+
+    const newDomains = definition.collapsedDomains
+      ? { ...definition.collapsedDomains }
+      : { COL: [], ROW: [] };
+    newDomains[pivotCell.dimension] = collapsedDomains;
+    this.env.model.dispatch("UPDATE_PIVOT", {
+      pivotId,
+      pivot: { ...definition, collapsedDomains: newDomains },
+    });
+  }
+
+  get isCollapsed() {
+    const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
+    const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
+    if (!pivotId || pivotCell.type !== "HEADER") {
+      return false;
+    }
+    const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
+    const domains = definition.collapsedDomains?.[pivotCell.dimension] ?? [];
+    return domains?.some((domain) => deepEquals(domain, pivotCell.domain));
+  }
+}

src/components/pivot_collapse_icon/pivot_collapse_icon.xml

@@ -0,0 +1,10 @@
+<templates>
+  <t t-name="o-spreadsheet-PivotCollapseIcon">
+    <div
+      class="o-pivot-collapse-icon o-hoverable-button d-flex align-items-center justify-content-center"
+      t-on-click="onClick">
+      <t t-if="isCollapsed" t-call="o-spreadsheet-Icon.PLUS"/>
+      <t t-else="" t-call="o-spreadsheet-Icon.MINUS"/>
+    </div>
+  </t>
+</templates>

src/components/pivot_html_renderer/pivot_html_renderer.ts

@@ -105,7 +105,7 @@ export class PivotHTMLRenderer extends Component<Props, SpreadsheetChildEnv> {
   });
 
   setup() {
-    const table = this.pivot.getTableStructure();
+    const table = this.pivot.getExpandedTableStructure();
     const formulaId = this.env.model.getters.getPivotFormulaId(this.props.pivotId);
     this.data = {
       columns: this._buildColHeaders(formulaId, table),
@@ -153,7 +153,7 @@ export class PivotHTMLRenderer extends Component<Props, SpreadsheetChildEnv> {
    * The parent of "January" is "Australia"
    */
   private addRecursiveRow(index: number): number[] {
-    const rows = this.pivot.getTableStructure().rows;
+    const rows = this.pivot.getExpandedTableStructure().rows;
     const row = [...rows[index].values];
     if (row.length <= 1) {
       return [index];

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

@@ -9,8 +9,10 @@ import { _t } from "../../../../translation";
 import { Command, UID } from "../../../../types";
 import {
   PivotCoreDefinition,
+  PivotCoreDimension,
   PivotCoreMeasure,
   PivotDimension,
+  PivotDomain,
   PivotField,
   PivotFields,
   PivotMeasure,
@@ -198,6 +200,14 @@ export class PivotSidePanelStore extends SpreadsheetStore {
       })),
       sortedColumn: this.shouldKeepSortedColumn(definition) ? definition.sortedColumn : undefined,
     };
+    if (cleanedDefinition.collapsedDomains) {
+      const { COL, ROW } = cleanedDefinition.collapsedDomains;
+      cleanedDefinition.collapsedDomains = {
+        COL: COL.filter((domain) => this.areDomainFieldsValid(domain, cleanedDefinition.columns)),
+        ROW: ROW.filter((domain) => this.areDomainFieldsValid(domain, cleanedDefinition.rows)),
+      };
+    }
+
     if (!this.draft && deepEquals(coreDefinition, cleanedDefinition)) {
       return;
     }
@@ -301,4 +311,16 @@ export class PivotSidePanelStore extends SpreadsheetStore {
       deepEquals(oldDefinition.columns, newDefinition.columns)
     );
   }
+
+  private areDomainFieldsValid(domain: PivotDomain, dims: PivotCoreDimension[]) {
+    const fieldsNameWithGranularity = dims.map(
+      ({ fieldName, granularity }) => fieldName + (granularity ? `:${granularity}` : "")
+    );
+    for (let i = 0; i < domain.length; i++) {
+      if (domain[i].field !== fieldsNameWithGranularity[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
 }

src/functions/module_lookup.ts

@@ -12,12 +12,12 @@ import {
   getPivotId,
 } from "./helper_lookup";
 import {
+  LinearSearchMode,
   dichotomicSearch,
   expectNumberRangeError,
   generateMatrix,
   isEvaluationError,
   linearSearch,
-  LinearSearchMode,
   strictToInteger,
   toBoolean,
   toMatrix,
@@ -877,7 +877,7 @@ export const PIVOT = {
     if (error) {
       return error;
     }
-    const table = pivot.getTableStructure();
+    const table = pivot.getCollapsedTableStructure();
     const cells = table.getPivotCells(_includedTotal, _includeColumnHeaders);
     const headerRows = _includeColumnHeaders ? table.columns.length : 0;
     const pivotTitle = this.getters.getPivotDisplayName(pivotId);

src/helpers/pivot/pivot_domain_helpers.ts

@@ -6,7 +6,7 @@ import {
   PivotDomain,
   PivotNode,
 } from "../../types";
-import { clip, deepCopy } from "../misc";
+import { clip, deepCopy, deepEquals } from "../misc";
 
 export const PREVIOUS_VALUE = "(previous)";
 export const NEXT_VALUE = "(next)";
@@ -51,10 +51,18 @@ function getFieldValueInDomain(
 }
 
 export function isDomainIsInPivot(pivot: Pivot, domain: PivotDomain) {
+  for (const node of domain) {
+    if (
+      pivot.definition.rows.find((row) => row.nameWithGranularity === node.field) === undefined &&
+      pivot.definition.columns.find((col) => col.nameWithGranularity === node.field) === undefined
+    ) {
+      return false;
+    }
+  }
   const { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
   return (
-    checkIfDomainInInTree(rowDomain, pivot.getTableStructure().getRowTree()) &&
-    checkIfDomainInInTree(colDomain, pivot.getTableStructure().getColTree())
+    checkIfDomainInInTree(rowDomain, pivot.getExpandedTableStructure().getRowTree()) &&
+    checkIfDomainInInTree(colDomain, pivot.getExpandedTableStructure().getColTree())
   );
 }
 
@@ -168,8 +176,8 @@ export function getPreviousOrNextValueDomain(
   const dimension = getFieldDimensionType(pivot, fieldNameWithGranularity);
   const tree =
     dimension === "row"
-      ? pivot.getTableStructure().getRowTree()
-      : pivot.getTableStructure().getColTree();
+      ? pivot.getExpandedTableStructure().getRowTree()
+      : pivot.getExpandedTableStructure().getColTree();
   const dimDomain = getDimensionDomain(pivot, dimension, domain);
 
   const currentTreeNode = walkDomainTree(dimDomain, tree, fieldNameWithGranularity);
@@ -268,3 +276,10 @@ export function sortPivotTree(
   }
   return sortedTree;
 }
+
+export function isParentDomain(domain: PivotDomain, parentDomain: PivotDomain) {
+  return (
+    domain.length > parentDomain.length &&
+    parentDomain.every((node, i) => deepEquals(node, domain[i]))
+  );
+}