[FIX] Fix localization in CF part 2

matho-odoo · matho-odoo · commit b49fb7e2ee6d · 2026-04-17T09:19:03.000+02:00
Task: 6089166
diff --git a/src/actions/insert_actions.ts b/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");
       },
diff --git a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts b/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 });
   }
 
diff --git a/src/components/side_panel/conditional_formatting/cf_editor/color_scale_rule_editor.xml b/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 }"
         />
diff --git a/src/components/side_panel/conditional_formatting/cf_editor/icon_set_rule_editor.xml b/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)"/>
diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.ts b/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":
diff --git a/src/components/side_panel/conditional_formatting/conditional_formatting.ts b/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() {
diff --git a/src/components/side_panel/data_validation/data_validation_panel.ts b/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);
diff --git a/src/helpers/locale.ts b/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;
 }
diff --git a/src/helpers/pivot/pivot_composer_helpers.ts b/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
 ) {
diff --git a/src/registries/auto_completes/auto_complete_registry.ts b/src/registries/auto_completes/auto_complete_registry.ts
@@ -55,7 +55,7 @@ export interface AutoCompleteProviderDefinition {
     content: string
   ): AutoCompleteProposal[] | undefined;
   selectProposal(
-    this: { composer: ComposerStoreInterface },
+    this: { composer: ComposerStoreInterface; getters: Getters },
     tokenAtCursor: EnrichedToken,
     text: string
   ): void;
diff --git a/src/registries/auto_completes/data_validation_auto_complete.ts b/src/registries/auto_completes/data_validation_auto_complete.ts
@@ -1,5 +1,6 @@
 import { CellPosition, CellValue, Getters } from "../..";
 import { positions } from "../../helpers";
+import { canonicalizeContent, localizeContent } from "../../helpers/locale";
 import { autoCompleteProviders } from "./auto_complete_registry";
 
 autoCompleteProviders.add("dataValidation", {
@@ -20,7 +21,9 @@ autoCompleteProviders.add("dataValidation", {
     }));
   },
   selectProposal(tokenAtCursor, value) {
-    this.composer.setCurrentContent(value);
+    const locale = this.getters.getLocale();
+    const canonicalizedValue = canonicalizeContent(value, locale);
+    this.composer.setCurrentContent(canonicalizedValue);
     this.composer.stopEdition();
   },
 });
@@ -39,7 +42,11 @@ function getProposedValues(
 
   let values: { label: string; value: CellValue }[] = [];
   if (rule.criterion.type === "isValueInList") {
-    values = rule.criterion.values.map((value) => ({ label: value, value }));
+    const locale = getters.getLocale();
+    values = rule.criterion.values.map((value) => {
+      const localizedValue = localizeContent(value, locale);
+      return { label: localizedValue, value };
+    });
   } else {
     const labelsSet = new Set<string>();
     const range = getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
diff --git a/tests/composer/auto_complete/data_validation_auto_complete_store.test.ts b/tests/composer/auto_complete/data_validation_auto_complete_store.test.ts
@@ -1,5 +1,11 @@
 import { CellComposerStore } from "../../../src/components/composer/composer/cell_composer_store";
-import { addDataValidation, setCellContent, setFormat } from "../../test_helpers/commands_helpers";
+import {
+  addDataValidation,
+  setCellContent,
+  setFormat,
+  updateLocale,
+} from "../../test_helpers/commands_helpers";
+import { FR_LOCALE } from "../../test_helpers/constants";
 import { makeStore } from "../../test_helpers/stores";
 
 describe("Data validation auto complete", () => {
@@ -60,4 +66,31 @@ describe("Data validation auto complete", () => {
       },
     ]);
   });
+
+  test("Date values with a locale are correctly displayed in the proposals", () => {
+    const { store: composer, model } = makeStore(CellComposerStore);
+    addDataValidation(model, "A1", "id", {
+      type: "isValueInList",
+      values: ["2/1/2020", "3/1/2020"],
+      displayStyle: "arrow",
+    });
+    updateLocale(model, FR_LOCALE);
+
+    composer.startEdition();
+    const autoComplete = composer.autocompleteProvider;
+    const proposals = autoComplete?.proposals;
+    expect(proposals).toHaveLength(2);
+    expect(proposals).toMatchObject([
+      {
+        text: "2/1/2020",
+        htmlContent: [{ value: "01/02/2020" }],
+        fuzzySearchKey: "01/02/2020",
+      },
+      {
+        text: "3/1/2020",
+        htmlContent: [{ value: "01/03/2020" }],
+        fuzzySearchKey: "01/03/2020",
+      },
+    ]);
+  });
 });
diff --git a/tests/helpers/locale_helpers.test.ts b/tests/helpers/locale_helpers.test.ts
