[IMP] filter: allow filter by criterion

With this commit, it is now possible to filter a table based on a
criterion, eg. filters all the values greater than 10.

Task: 4592118

Author: hokolomopo

src/components/filters/filter_menu/filter_menu.ts

@@ -1,24 +1,63 @@
-import { Component, onWillUpdateProps, useState } from "@odoo/owl";
+import { Component, onWillUpdateProps } from "@odoo/owl";
 import { BUTTON_ACTIVE_BG } from "../../../constants";
-import { deepEquals } from "../../../helpers";
+import { deepEquals, isDateTimeFormat } from "../../../helpers";
 import { interactiveSort } from "../../../helpers/sort";
-import { Position, SortDirection, SpreadsheetChildEnv } from "../../../types";
+import { _t } from "../../../translation";
+import {
+  CellValueType,
+  CriterionFilter,
+  DataFilterValue,
+  Position,
+  SortDirection,
+  SpreadsheetChildEnv,
+  filterDateCriterionOperators,
+  filterNumberCriterionOperators,
+  filterTextCriterionOperators,
+} from "../../../types";
 import { CellPopoverComponent, PopoverBuilders } from "../../../types/cell_popovers";
 import { css } from "../../helpers/css";
+import { SidePanelCollapsible } from "../../side_panel/components/collapsible/side_panel_collapsible";
+import { FilterMenuCriterion } from "../filter_menu_criterion/filter_menu_criterion";
 import { FilterMenuValueList } from "../filter_menu_value_list/filter_menu_value_list";
 
-const FILTER_MENU_HEIGHT = 295;
-
 css/* scss */ `
   .o-filter-menu {
-    padding: 8px 16px;
-    height: ${FILTER_MENU_HEIGHT}px;
-    line-height: 1;
+    width: 245px;
+    padding: 8px 0;
+    user-select: none;
+
+    .o-filter-menu-content {
+      padding: 0 16px;
+    }
+
+    .o-sort-item {
+      padding-left: 34px;
+    }
+
+    .o_side_panel_collapsible_title {
+      font-size: inherit;
+      padding: 0 0 4px 0 !important;
+      font-weight: 400 !important;
+
+      .collapsor .o-icon {
+        opacity: 0.8;
+      }
+
+      .collapsor-arrow {
+        transform-origin: 6px 8px;
+
+        .o-icon {
+          width: 12px;
+          height: 16px;
+        }
+      }
+    }
 
     .o-filter-menu-item {
       display: flex;
       cursor: pointer;
       user-select: none;
+      line-height: 1;
 
       &.selected,
       &:hover {
@@ -41,28 +80,27 @@ interface Props {
   onClosed?: () => void;
 }
 
-interface State {
-  updatedHiddenValue: string[] | undefined;
-}
+type CriterionCategory = "text" | "number" | "date";
 
 export class FilterMenu extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-FilterMenu";
   static props = {
     filterPosition: Object,
     onClosed: { type: Function, optional: true },
   };
-  static components = { FilterMenuValueList };
+  static components = { FilterMenuValueList, SidePanelCollapsible, FilterMenuCriterion };
 
-  private state: State = useState({
-    updatedHiddenValue: undefined,
-  });
+  private criterionCategory: CriterionCategory = "text";
+  private updatedCriterionValue: DataFilterValue | undefined;
 
   setup() {
     onWillUpdateProps((nextProps: Props) => {
       if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
-        this.state.updatedHiddenValue = undefined;
+        this.updatedCriterionValue = undefined;
+        this.criterionCategory = this.getCriterionCategory(nextProps.filterPosition);
       }
     });
+    this.criterionCategory = this.getCriterionCategory(this.props.filterPosition);
   }
 
   get isSortable() {
@@ -82,24 +120,85 @@ export class FilterMenu extends Component<Props, SpreadsheetChildEnv> {
     return this.env.model.getters.getTable({ sheetId, ...position });
   }
 
+  get filterValueType() {
+    const sheetId = this.env.model.getters.getActiveSheetId();
+    const position = this.props.filterPosition;
+    const filterValue = this.env.model.getters.getFilterValue({ sheetId, ...position });
+    return filterValue?.filterType;
+  }
+
+  private getCriterionCategory(position: Position): CriterionCategory {
+    const sheetId = this.env.model.getters.getActiveSheetId();
+    const filter = this.env.model.getters.getFilter({ sheetId, ...position });
+    if (!filter || !filter.filteredRange) {
+      return "text";
+    }
+
+    const cellTypesCount: Record<CriterionCategory, number> = { text: 0, number: 0, date: 0 };
+    const filteredZone = filter.filteredRange.zone;
+
+    for (let row = filteredZone.top; row <= filteredZone.bottom; row++) {
+      // 100 rows should be enough to determine the type, let's not loop on 10,000 rows for nothing
+      if (row > 100) {
+        break;
+      }
+      const cell = this.env.model.getters.getEvaluatedCell({ sheetId, row, col: position.col });
+      if (cell.type === CellValueType.text || cell.type === CellValueType.boolean) {
+        cellTypesCount.text++;
+      } else if (cell.type === CellValueType.number) {
+        if (cell.format && isDateTimeFormat(cell.format)) {
+          cellTypesCount.date++;
+        } else {
+          cellTypesCount.number++;
+        }
+      }
+    }
+
+    const max = Math.max(cellTypesCount.text, cellTypesCount.number, cellTypesCount.date);
+    const type = Object.keys(cellTypesCount).find((key) => cellTypesCount[key] === max);
+    return (type || "text") as CriterionCategory;
+  }
+
   onUpdateHiddenValues(values: string[]) {
-    this.state.updatedHiddenValue = values;
+    this.updatedCriterionValue = { filterType: "values", hiddenValues: values };
+  }
+
+  onCriterionChanged(criterion: CriterionFilter) {
+    this.updatedCriterionValue = criterion;
   }
 
   confirm() {
-    if (!this.state.updatedHiddenValue) {
+    if (!this.updatedCriterionValue) {
       this.props.onClosed?.();
       return;
     }
     const position = this.props.filterPosition;
     this.env.model.dispatch("UPDATE_FILTER", {
       ...position,
       sheetId: this.env.model.getters.getActiveSheetId(),
-      hiddenValues: this.state.updatedHiddenValue,
+      value: this.updatedCriterionValue,
     });
     this.props.onClosed?.();
   }
 
+  get criterionOperators() {
+    if (this.criterionCategory === "date") {
+      return filterDateCriterionOperators;
+    } else if (this.criterionCategory === "number") {
+      return filterNumberCriterionOperators;
+    }
+    return filterTextCriterionOperators;
+  }
+
+  get criterionTitle() {
+    if (this.criterionCategory === "date") {
+      return _t("Filter by date");
+    } else if (this.criterionCategory === "number") {
+      return _t("Filter by number");
+    }
+    return _t("Filter by text");
+  }
+
   cancel() {
     this.props.onClosed?.();
   }

src/components/filters/filter_menu/filter_menu.xml

@@ -3,23 +3,50 @@
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
       <t t-if="isSortable">
         <div>
-          <div class="o-filter-menu-item py-2 mb-1" t-on-click="() => this.sortFilterZone('asc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2 mb-1"
+            t-on-click="() => this.sortFilterZone('asc')">
             Sort ascending (A ⟶ Z)
           </div>
-          <div class="o-filter-menu-item py-2" t-on-click="() => this.sortFilterZone('desc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2"
+            t-on-click="() => this.sortFilterZone('desc')">
             Sort descending (Z ⟶ A)
           </div>
         </div>
-        <div class="o-separator"/>
       </t>
-      <FilterMenuValueList
-        filterPosition="props.filterPosition"
-        onUpdateHiddenValues.bind="onUpdateHiddenValues"
-      />
+      <div class="o-filter-menu-content">
+        <div class="o-separator"/>
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType !== 'criterion'"
+          title="criterionTitle">
+          <t t-set-slot="content">
+            <FilterMenuCriterion
+              filterPosition="props.filterPosition"
+              onCriterionChanged.bind="onCriterionChanged"
+              criterionOperators="criterionOperators"
+            />
+            <div class="mb-3"/>
+          </t>
+        </SidePanelCollapsible>
 
-      <div class="o-filter-menu-buttons d-flex justify-content-end">
-        <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
-        <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">Confirm</button>
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType === 'criterion'"
+          title.translate="Filter by values">
+          <t t-set-slot="content">
+            <FilterMenuValueList
+              filterPosition="props.filterPosition"
+              onUpdateHiddenValues.bind="onUpdateHiddenValues"
+            />
+          </t>
+        </SidePanelCollapsible>
+
+        <div class="o-filter-menu-buttons d-flex justify-content-end">
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
+            Confirm
+          </button>
+        </div>
       </div>
     </div>
   </t>

src/components/filters/filter_menu_criterion/filter_menu_criterion.ts

@@ -0,0 +1,97 @@
+import { Component, ComponentConstructor, onWillUpdateProps, useState } from "@odoo/owl";
+import { Action, createAction } from "../../../actions/action";
+import { deepCopy, deepEquals } from "../../../helpers";
+import {
+  criterionComponentRegistry,
+  getCriterionMenuItems,
+} from "../../../registries/criterion_component_registry";
+import { criterionEvaluatorRegistry } from "../../../registries/criterion_registry";
+import { _t } from "../../../translation";
+import {
+  CriterionFilter,
+  GenericCriterionType,
+  Position,
+  SpreadsheetChildEnv,
+} from "../../../types";
+import { SelectMenu } from "../../side_panel/select_menu/select_menu";
+
+interface Props {
+  filterPosition: Position;
+  criterionOperators: GenericCriterionType[];
+  onCriterionChanged: (criterion: CriterionFilter) => void;
+}
+
+interface State {
+  criterion: CriterionFilter;
+}
+
+export class FilterMenuCriterion extends Component<Props, SpreadsheetChildEnv> {
+  static template = "o-spreadsheet-FilterMenuCriterion";
+  static props = {
+    filterPosition: Object,
+    onCriterionChanged: Function,
+    criterionOperators: Array,
+  };
+  static components = { SelectMenu };
+
+  private state!: State;
+
+  setup() {
+    onWillUpdateProps((nextProps: Props) => {
+      if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
+        this.state.criterion = this.getFilterCriterionValue(nextProps.filterPosition);
+      }
+    });
+
+    this.state = useState({
+      criterion: this.getFilterCriterionValue(this.props.filterPosition),
+    });
+  }
+
+  private getFilterCriterionValue(position: Position): CriterionFilter {
+    const sheetId = this.env.model.getters.getActiveSheetId();
+    const filterValue = this.env.model.getters.getFilterCriterionValue({ sheetId, ...position });
+    return filterValue?.filterType === "criterion"
+      ? deepCopy(filterValue)
+      : { filterType: "criterion", type: "none", values: [] };
+  }
+
+  get criterionMenuItems(): Action[] {
+    const noCriterionMenuItem = createAction({
+      name: _t("None"),
+      id: "none",
+      separator: true,
+      execute: () => this.onCriterionTypeChange("none"),
+    });
+    return [
+      noCriterionMenuItem,
+      ...getCriterionMenuItems(
+        (type) => this.onCriterionTypeChange(type),
+        new Set(this.props.criterionOperators)
+      ),
+    ];
+  }
+
+  get selectedCriterionName(): string {
+    return this.state.criterion.type === "none"
+      ? _t("None")
+      : criterionEvaluatorRegistry.get(this.state.criterion.type).name;
+  }
+
+  get criterionComponent(): ComponentConstructor | undefined {
+    return this.state.criterion.type === "none"
+      ? undefined
+      : criterionComponentRegistry.get(this.state.criterion.type).component;
+  }
+
+  onCriterionChanged(criterion: CriterionFilter) {
+    this.state.criterion.values = criterion.values;
+    this.state.criterion.dateValue = criterion.dateValue;
+    this.props.onCriterionChanged(this.state.criterion);
+  }
+
+  private onCriterionTypeChange(type: CriterionFilter["type"]) {
+    this.state.criterion.type = type;
+    this.props.onCriterionChanged(this.state.criterion);
+  }
+}

src/components/filters/filter_menu_criterion/filter_menu_criterion.xml

@@ -0,0 +1,18 @@
+<templates>
+  <t t-name="o-spreadsheet-FilterMenuCriterion">
+    <SelectMenu
+      class="'o-filter-criterion-type o-input m-1 mb-2'"
+      menuItems="criterionMenuItems"
+      selectedValue="selectedCriterionName"
+    />
+
+    <t
+      t-if="criterionComponent"
+      t-component="criterionComponent"
+      t-key="selectedCriterionName"
+      criterion="state.criterion"
+      onCriterionChanged.bind="onCriterionChanged"
+      disableFormulas="true"
+    />
+  </t>
+</templates>

src/components/filters/filter_menu_value_list/filter_menu_value_list.scss

@@ -21,6 +21,7 @@
     flex: auto;
     overflow-y: auto;
     border: 1px solid $os-gray-300;
+    height: 130px;
 
     .o-filter-menu-no-values {
       color: #949494;