[FIX] Fix localization in CF part 2

Task: 6089166

Author: matho-odoo

src/actions/insert_actions.ts

@@ -1,6 +1,5 @@
 import { functionRegistry } from "../functions";
 import { isDefined } from "../helpers";
-import { localizeDataValidationRule } from "../helpers/locale";
 import { handlePasteResult } from "../helpers/ui/paste_interactive";
 import { _t } from "../translation";
 import { ActionBuilder, ActionSpec } from "./action";
@@ -313,7 +312,7 @@ export const insertDropdown: ActionSpec = {
       return;
     }
     env.openSidePanel("DataValidationEditor", {
-      rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
+      rule,
       onExit: () => {
         env.openSidePanel("DataValidation");
       },

src/components/composer/composer/abstract_composer_store.ts

@@ -97,6 +97,7 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
   }
   protected abstract confirmEdition(content: string): void;
   protected abstract getComposerContent(position: CellPosition): string;
+  // We need to use different canonicalize method in the standalone composer and the cell composer where dates should not be converted (they are not canonicals on UPDATE_CELL)
   protected abstract getCurrentCanonicalContent(): string;
 
   abstract stopEdition(direction?: Direction): void;

src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts

@@ -13,6 +13,7 @@ import {
   isColorValid,
   rangeReference,
 } from "../../../../helpers";
+import { canonicalizeContent, localizeContent } from "../../../../helpers/locale";
 import { cycleFixedReference } from "../../../../helpers/reference_type";
 import { _t } from "../../../../translation";
 import {
@@ -370,6 +371,11 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
     this.state.openedMenu = undefined;
   }
 
+  localizeValue(value: string | undefined): string {
+    const locale = this.env.model.getters.getLocale();
+    return value ? localizeContent(value, locale) : "";
+  }
+
   /*****************************************************************************
    * Cell Is Rule
    ****************************************************************************/
@@ -503,7 +509,9 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
   }
 
   updateThresholdValue(threshold: "minimum" | "midpoint" | "maximum", value: string) {
-    this.state.rules.colorScale[threshold]!.value = value;
+    const locale = this.env.model.getters.getLocale();
+    const canonicalizedValue = canonicalizeContent(value, locale);
+    this.state.rules.colorScale[threshold]!.value = canonicalizedValue;
     this.updateConditionalFormat({ rule: this.state.rules.colorScale });
   }
 
@@ -565,7 +573,9 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
     inflectionPoint: "lowerInflectionPoint" | "upperInflectionPoint",
     value: string
   ) {
-    this.state.rules.iconSet[inflectionPoint].value = value;
+    const locale = this.env.model.getters.getLocale();
+    const canonicalizedValue = canonicalizeContent(value, locale);
+    this.state.rules.iconSet[inflectionPoint].value = canonicalizedValue;
     this.updateConditionalFormat({ rule: this.state.rules.iconSet });
   }
 

src/components/side_panel/conditional_formatting/cf_editor/color_scale_rule_editor.xml

@@ -41,7 +41,7 @@
           t-if="threshold.type !== 'formula'"
           type="text"
           class="o-input"
-          t-att-value="threshold.value"
+          t-att-value="this.localizeValue(threshold.value)"
           t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
           t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         />

src/components/side_panel/conditional_formatting/cf_editor/icon_set_rule_editor.xml

@@ -57,7 +57,7 @@
             t-if="inflectionPointValue.type !== 'formula'"
             class="o-input"
             t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
-            t-att-value="rule[inflectionPoint].value"
+            t-att-value="this.localizeValue(rule[inflectionPoint].value)"
             t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
           />
           <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>

src/components/side_panel/conditional_formatting/cf_preview/cf_preview.ts

@@ -1,6 +1,7 @@
 import { Component, useRef } from "@odoo/owl";
 import { CF_ICON_EDGE_LENGTH, GRAY_200, GRAY_300, HIGHLIGHT_COLOR } from "../../../../constants";
 import { colorNumberString } from "../../../../helpers";
+import { localizeContent } from "../../../../helpers/locale";
 import { _t } from "../../../../translation";
 import { ConditionalFormat, Highlight, SpreadsheetChildEnv } from "../../../../types";
 import { cellStyleToCss, css, cssPropertiesToCss } from "../../../helpers";
@@ -111,10 +112,15 @@ export class ConditionalFormatPreview extends Component<Props, SpreadsheetChildE
       case "CellIsRule":
         const description = CellIsOperators[cf.rule.operator];
         if (cf.rule.values.length === 1) {
-          return `${description} ${cf.rule.values[0]}`;
+          const locale = this.env.model.getters.getLocale();
+          const localizedValue = localizeContent(cf.rule.values[0], locale);
+          return `${description} ${localizedValue}`;
         }
         if (cf.rule.values.length === 2) {
-          return _t("%s %s and %s", description, cf.rule.values[0], cf.rule.values[1]);
+          const locale = this.env.model.getters.getLocale();
+          const localizedValue1 = localizeContent(cf.rule.values[0], locale);
+          const localizedValue2 = localizeContent(cf.rule.values[1], locale);
+          return _t("%s %s and %s", description, localizedValue1, localizedValue2);
         }
         return description;
       case "ColorScaleRule":

src/components/side_panel/conditional_formatting/conditional_formatting.ts

@@ -1,5 +1,4 @@
 import { Component, onWillUpdateProps, useState } from "@odoo/owl";
-import { localizeCFRule } from "../../../helpers/locale";
 import { ConditionalFormat, SpreadsheetChildEnv, UID, Zone } from "../../../types";
 import { Section } from "../components/section/section";
 import { ConditionalFormattingEditor } from "./cf_editor/cf_editor";
@@ -71,10 +70,7 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
     const cfs = this.env.model.getters.getConditionalFormats(
       this.env.model.getters.getActiveSheetId()
     );
-    return cfs.map((cf) => ({
-      ...cf,
-      rule: localizeCFRule(cf.rule, this.env.model.getters.getLocale()),
-    }));
+    return cfs;
   }
 
   private switchToList() {

src/components/side_panel/data_validation/data_validation_panel.ts

@@ -1,5 +1,4 @@
 import { Component, useState } from "@odoo/owl";
-import { localizeDataValidationRule } from "../../../helpers/locale";
 import { DataValidationRule, SpreadsheetChildEnv, UID } from "../../../types";
 import { DataValidationEditor } from "./dv_editor/dv_editor";
 import { DataValidationPreview } from "./dv_preview/dv_preview";
@@ -41,12 +40,6 @@ export class DataValidationPanel extends Component<Props, SpreadsheetChildEnv> {
     this.state.activeRule = undefined;
   }
 
-  localizeDVRule(rule?: DataValidationRule): DataValidationRule | undefined {
-    if (!rule) return rule;
-    const locale = this.env.model.getters.getLocale();
-    return localizeDataValidationRule(rule, locale);
-  }
-
   get validationRules() {
     const sheetId = this.env.model.getters.getActiveSheetId();
     return this.env.model.getters.getDataValidationRules(sheetId);

src/helpers/locale.ts

@@ -1,16 +1,8 @@
 import { tokenize } from "../formulas/tokenizer";
 import { toNumber } from "../functions/helpers";
-import {
-  ColorScaleThreshold,
-  ConditionalFormatRule,
-  DataValidationRule,
-  DEFAULT_LOCALE,
-  IconThreshold,
-  Locale,
-} from "../types";
+import { DEFAULT_LOCALE, Locale } from "../types";
 import { isDateTime } from "./dates";
 import { formatValue, getDecimalNumberRegex } from "./format/format";
-import { deepCopy } from "./misc";
 import { isNumber } from "./numbers";
 
 export function isValidLocale(locale: any): locale is Locale {
@@ -232,85 +224,6 @@ function localizeLiteral(literal: string, locale: Locale): string {
   return localizeNumberLiteral(literal, locale);
 }
 
-export function canonicalizeCFRule(
-  cf: ConditionalFormatRule,
-  locale: Locale
-): ConditionalFormatRule {
-  return changeCFRuleLocale(cf, (content) => canonicalizeContent(content, locale));
-}
-
-export function localizeCFRule(cf: ConditionalFormatRule, locale: Locale): ConditionalFormatRule {
-  return changeCFRuleLocale(cf, (content) => localizeContent(content, locale));
-}
-
-export function localizeDataValidationRule(
-  rule: DataValidationRule,
-  locale: Locale
-): DataValidationRule {
-  const localizedDVRule = deepCopy(rule);
-  localizedDVRule.criterion.values = localizedDVRule.criterion.values.map((content) =>
-    localizeContent(content, locale)
-  );
-  return localizedDVRule;
-}
-
-function changeCFRuleLocale(
-  rule: ConditionalFormatRule,
-  changeContentLocale: (content: string) => string
-): ConditionalFormatRule {
-  rule = deepCopy(rule);
-  switch (rule.type) {
-    case "CellIsRule":
-      // Only change value for number operators
-      switch (rule.operator) {
-        case "Between":
-        case "NotBetween":
-        case "Equal":
-        case "NotEqual":
-        case "GreaterThan":
-        case "GreaterThanOrEqual":
-        case "LessThan":
-        case "LessThanOrEqual":
-          rule.values = rule.values.map((v) => changeContentLocale(v));
-          return rule;
-        case "BeginsWith":
-        case "ContainsText":
-        case "EndsWith":
-        case "NotContains":
-        case "IsEmpty":
-        case "IsNotEmpty":
-          return rule;
-      }
-    case "DataBarRule":
-      return rule;
-    case "ColorScaleRule":
-      rule.minimum = changeCFRuleThresholdLocale(rule.minimum, changeContentLocale);
-      rule.maximum = changeCFRuleThresholdLocale(rule.maximum, changeContentLocale);
-      if (rule.midpoint) {
-        rule.midpoint = changeCFRuleThresholdLocale(rule.midpoint, changeContentLocale);
-      }
-      return rule;
-    case "IconSetRule":
-      rule.lowerInflectionPoint.value = changeContentLocale(rule.lowerInflectionPoint.value);
-      rule.upperInflectionPoint.value = changeContentLocale(rule.upperInflectionPoint.value);
-      return rule;
-  }
-}
-
-function changeCFRuleThresholdLocale<T extends IconThreshold | ColorScaleThreshold>(
-  threshold: T,
-  changeContentLocale: (content: string) => string
-): T {
-  if (!threshold?.value) {
-    return threshold;
-  }
-
-  const value = threshold.type === "formula" ? "=" + threshold.value : threshold.value;
-  const modified = changeContentLocale(value);
-  const newValue = threshold.type === "formula" ? modified.slice(1) : modified;
-  return { ...threshold, value: newValue };
-}
-
 export function getDateTimeFormat(locale: Locale) {
   return locale.dateFormat + " " + locale.timeFormat;
 }

src/helpers/pivot/pivot_composer_helpers.ts

@@ -2,7 +2,7 @@ import { tokenColors } from "../../components/composer/composer/abstract_compose
 import { CellComposerStore } from "../../components/composer/composer/cell_composer_store";
 import { Token, getFunctionsFromTokens } from "../../formulas";
 import { EnrichedToken } from "../../formulas/composer_tokenizer";
-import { Granularity, PivotField, PivotMeasure } from "../../types";
+import { Getters, Granularity, PivotField, PivotMeasure } from "../../types";
 
 const PIVOT_FUNCTIONS = ["PIVOT.VALUE", "PIVOT.HEADER", "PIVOT"];
 
@@ -42,7 +42,7 @@ export function makeMeasureProposal(measure: PivotMeasure) {
  * Must be bound to the autocomplete provider.
  */
 export function insertTokenAfterArgSeparator(
-  this: { composer: CellComposerStore },
+  this: { composer: CellComposerStore; getters: Getters },
   tokenAtCursor: EnrichedToken,
   value: string
 ) {
@@ -64,7 +64,7 @@ export function insertTokenAfterArgSeparator(
  * @param {string} value
  */
 export function insertTokenAfterLeftParenthesis(
-  this: { composer: CellComposerStore },
+  this: { composer: CellComposerStore; getters: Getters },
   tokenAtCursor: EnrichedToken,
   value: string
 ) {