[REF] side_panel: split CF/DV panel into main and editor panel

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";
@@ -323,12 +322,7 @@ export const insertDropdown: ActionSpec = {
     if (!rule) {
       return;
     }
-    env.openSidePanel("DataValidationEditor", {
-      rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
-      onExit: () => {
-        env.replaceSidePanel("DataValidation", "DataValidationEditor");
-      },
-    });
+    env.openSidePanel("DataValidationEditor", { id: ruleID });
   },
   isEnabled: (env) => !env.isSmall,
   icon: "o-spreadsheet-Icon.INSERT_DROPDOWN",

src/actions/menu_items_actions.ts

@@ -16,14 +16,15 @@ import {
   largeMax,
   largeMin,
   numberToLetters,
+  zoneToXc,
 } from "../helpers/index";
 import { DEFAULT_TABLE_CONFIG } from "../helpers/table_presets";
 import { interactivePaste, interactivePasteFromOS } from "../helpers/ui/paste_interactive";
 import { interactiveCreateTable } from "../helpers/ui/table_interactive";
 import { _t } from "../translation";
 import { ClipboardMIMEType, ClipboardPasteOptions } from "../types/clipboard";
 import { Image } from "../types/image";
-import { Dimension, Format, SpreadsheetChildEnv, Style } from "../types/index";
+import { ConditionalFormat, Dimension, Format, SpreadsheetChildEnv, Style } from "../types/index";
 import { ActionSpec } from "./action";
 
 //------------------------------------------------------------------------------
@@ -554,7 +555,44 @@ export const FORMAT_PERCENT_ACTION = (env: SpreadsheetChildEnv) => setFormatter(
 // Side panel
 //------------------------------------------------------------------------------
 export const OPEN_CF_SIDEPANEL_ACTION = (env: SpreadsheetChildEnv) => {
-  env.openSidePanel("ConditionalFormatting", { selection: env.model.getters.getSelectedZones() });
+  const sheetId = env.model.getters.getActiveSheetId();
+  const zones = env.model.getters.getSelectedZones();
+  const createNewCf = () => {
+    const cf: Omit<ConditionalFormat, "ranges"> = {
+      id: env.model.uuidGenerator.smallUuid(),
+      rule: {
+        type: "CellIsRule",
+        operator: "isNotEmpty",
+        style: { fillColor: "#b6d7a8" },
+        values: [],
+      },
+    };
+    const result = env.model.dispatch("ADD_CONDITIONAL_FORMAT", {
+      cf,
+      ranges: zones.map((zone) => env.model.getters.getRangeDataFromZone(sheetId, zone)),
+      sheetId,
+    });
+    if (result.isSuccessful) {
+      const ranges = zones.map((zone) =>
+        zoneToXc(env.model.getters.getUnboundedZone(sheetId, zone))
+      );
+      env.openSidePanel("ConditionalFormattingEditor", { cf: { ...cf, ranges }, isNewCf: true });
+    }
+  };
+
+  // TODO: add manage rule in (sleection/sheet) feature like excel does
+  const rules = env.model.getters.getConditionalFormats(sheetId);
+  const ruleIds = Array.from(env.model.getters.getRulesSelection(sheetId, zones));
+  if (ruleIds.length === 1) {
+    return env.openSidePanel("ConditionalFormattingEditor", {
+      cf: rules.find((r) => r.id === ruleIds[0]),
+      isNewCf: false,
+    });
+  }
+  if (ruleIds.length > 1) {
+    return env.openSidePanel("ConditionalFormatting");
+  }
+  return createNewCf();
 };
 
 export const INSERT_LINK = (env: SpreadsheetChildEnv) => {

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

@@ -15,20 +15,21 @@
   <t t-name="o-spreadsheet-CellIsRuleEditor">
     <t t-set="fill_color">Fill Color</t>
     <t t-set="text_color">Text Color</t>
+    <t t-set="state" t-value="store.state"/>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
       <SelectMenu
         class="'o-cell-is-operator o-input mb-2'"
-        menuItems="cfCriterionMenuItems"
-        selectedValue="selectedCriterionName"
+        menuItems="store.cfCriterionMenuItems"
+        selectedValue="store.selectedCriterionName"
       />
 
       <t
-        t-if="criterionComponent"
-        t-component="criterionComponent"
+        t-if="store.criterionComponent"
+        t-component="store.criterionComponent"
         t-key="state.rules.cellIs.operator"
-        criterion="genericCriterion"
-        onCriterionChanged.bind="onRuleValuesChanged"
+        criterion="store.genericCriterion"
+        onCriterionChanged="(rule) => store.onRuleValuesChanged(rule)"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
@@ -41,45 +42,45 @@
           class="o-hoverable-button o-menu-item-button"
           title="Bold"
           t-att-class="{active:rule.style.bold}"
-          t-on-click="() => this.toggleStyle('bold')">
+          t-on-click="() => store.toggleStyle('bold')">
           <t t-call="o-spreadsheet-Icon.BOLD"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Italic"
           t-att-class="{active:rule.style.italic}"
-          t-on-click="() => this.toggleStyle('italic')">
+          t-on-click="() => store.toggleStyle('italic')">
           <t t-call="o-spreadsheet-Icon.ITALIC"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Underline"
           t-att-class="{active:rule.style.underline}"
-          t-on-click="(ev) => this.toggleStyle('underline', ev)">
+          t-on-click="(ev) => store.toggleStyle('underline', ev)">
           <t t-call="o-spreadsheet-Icon.UNDERLINE"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Strikethrough"
           t-att-class="{active:rule.style.strikethrough}"
-          t-on-click="(ev) => this.toggleStyle('strikethrough', ev)">
+          t-on-click="(ev) => store.toggleStyle('strikethrough', ev)">
           <t t-call="o-spreadsheet-Icon.STRIKE"/>
         </div>
         <ColorPickerWidget
           currentColor="rule.style.textColor || '#000000'"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-textColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-textColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-textColor'"
-          onColorPicked="(color) => this.setColor('textColor', color)"
+          onColorPicked="(color) => store.setColor('textColor', color)"
           title="text_color"
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
         />
         <div class="o-divider"/>
         <ColorPickerWidget
           currentColor="rule.style.fillColor"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-fillColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-fillColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-fillColor'"
-          onColorPicked="(color) => this.setColor('fillColor', color)"
+          onColorPicked="(color) => store.setColor('fillColor', color)"
           title="fill_color"
           icon="'o-spreadsheet-Icon.FILL_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"

src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css

@@ -1,5 +1,5 @@
 .o-spreadsheet {
-  .o-cf-ruleEditor {
+  .o-cf-editor {
     .o-cf-preview-display {
       border: 1px solid var(--os-gray-300);
       padding: 10px;