Skip to content

Commit ef4d944

Browse files
pro-odoopro-odoo
committed
[REF] cf_editor: remove t-call sub templates
This commit removes sub templates calls on the cf editor component. Sub templates are replaced either by: - Creating a child component - Inlining the template closes #8274 Task: 6087887 Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
1 parent a748236 commit ef4d944

12 files changed

Lines changed: 527 additions & 399 deletions

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component } from "@odoo/owl";
2+
import { SpreadsheetChildEnv } from "../../../../types/spreadsheet_env";
3+
import { Store } from "../../../../types/store_engine";
4+
import { ColorPickerWidget } from "../../../color_picker/color_picker_widget";
5+
import { getTextDecoration } from "../../../helpers";
6+
import { Select } from "../../../select/select";
7+
import { ConditionalFormattingEditorStore } from "./cf_editor_store";
8+
9+
interface Props {
10+
store: Store<ConditionalFormattingEditorStore>;
11+
}
12+
13+
export class CellIsRuleEditor extends Component<Props, SpreadsheetChildEnv> {
14+
static template = "o-spreadsheet-CellIsRuleEditor";
15+
static components = {
16+
ColorPickerWidget,
17+
Select,
18+
};
19+
static props = { store: Object };
20+
21+
getTextDecoration = getTextDecoration;
22+
23+
get rule() {
24+
return this.props.store.state.rules.cellIs;
25+
}
26+
}

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

Lines changed: 37 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,80 @@
11
<templates>
2-
<t t-name="o-spreadsheet-CellIsRuleEditorPreview">
3-
<div
4-
class="o-cf-preview-display border"
5-
t-attf-style="font-weight:{{currentStyle.bold ?'bold':'normal'}};
6-
text-decoration:{{getTextDecoration(currentStyle)}};
7-
font-style:{{currentStyle.italic?'italic':'normal'}};
8-
color:{{currentStyle.textColor || '#000'}};
9-
background-color:{{currentStyle.fillColor}};">
10-
<t t-if="previewText" t-out="previewText"/>
11-
<t t-else="">Preview text</t>
12-
</div>
13-
</t>
14-
152
<t t-name="o-spreadsheet-CellIsRuleEditor">
16-
<t t-set="fill_color">Fill Color</t>
17-
<t t-set="text_color">Text Color</t>
18-
<t t-set="state" t-value="store.state"/>
193
<div class="o-cf-cell-is-rule">
204
<div class="o-section-subtitle">Format cells if...</div>
215
<Select
226
class="'o-cell-is-operator mb-2'"
23-
values="store.cfCriterions"
24-
selectedValue="state.rules.cellIs.operator"
25-
onChange="(operator) => store.editOperator(operator)"
7+
values="this.props.store.cfCriterions"
8+
selectedValue="this.rule.operator"
9+
onChange="(operator) => this.props.store.editOperator(operator)"
2610
/>
2711

2812
<t
29-
t-if="store.criterionComponent"
30-
t-component="store.criterionComponent"
31-
t-key="state.rules.cellIs.operator"
32-
criterion="store.genericCriterion"
33-
onCriterionChanged="(rule) => store.onRuleValuesChanged(rule)"
34-
autofocus="store.state.hasEditedCf"
13+
t-if="this.props.store.criterionComponent"
14+
t-component="this.props.store.criterionComponent"
15+
t-key="this.rule.operator"
16+
criterion="this.props.store.genericCriterion"
17+
onCriterionChanged="(rule) => this.props.store.onRuleValuesChanged(rule)"
18+
autofocus="this.props.store.state.hasEditedCf"
3519
/>
3620

3721
<div class="o-section-subtitle pt-3">Formatting style</div>
3822

39-
<t t-call="o-spreadsheet-CellIsRuleEditorPreview">
40-
<t t-set="currentStyle" t-value="rule.style"/>
41-
</t>
23+
<div
24+
class="o-cf-preview-display border"
25+
t-attf-style="font-weight:{{this.rule.style.bold ?'bold':'normal'}};
26+
text-decoration:{{this.getTextDecoration(this.rule.style)}};
27+
font-style:{{this.rule.style.italic?'italic':'normal'}};
28+
color:{{this.rule.style.textColor || '#000'}};
29+
background-color:{{this.rule.style.fillColor}};">
30+
<t t-if="previewText" t-out="previewText"/>
31+
<t t-else="">Preview text</t>
32+
</div>
4233
<div class="o-sidePanel-tools d-flex">
4334
<div
4435
class="o-hoverable-button o-menu-item-button"
4536
title="Bold"
46-
t-att-class="{active:rule.style.bold}"
47-
t-on-click="() => store.toggleStyle('bold')">
37+
t-att-class="{active:this.rule.style.bold}"
38+
t-on-click="() => this.props.store.toggleStyle('bold')">
4839
<t t-call="o-spreadsheet-Icon.BOLD"/>
4940
</div>
5041
<div
5142
class="o-hoverable-button o-menu-item-button"
5243
title="Italic"
53-
t-att-class="{active:rule.style.italic}"
54-
t-on-click="() => store.toggleStyle('italic')">
44+
t-att-class="{active:this.rule.style.italic}"
45+
t-on-click="() => this.props.store.toggleStyle('italic')">
5546
<t t-call="o-spreadsheet-Icon.ITALIC"/>
5647
</div>
5748
<div
5849
class="o-hoverable-button o-menu-item-button"
5950
title="Underline"
60-
t-att-class="{active:rule.style.underline}"
61-
t-on-click="(ev) => store.toggleStyle('underline', ev)">
51+
t-att-class="{active:this.rule.style.underline}"
52+
t-on-click="(ev) => this.props.store.toggleStyle('underline', ev)">
6253
<t t-call="o-spreadsheet-Icon.UNDERLINE"/>
6354
</div>
6455
<div
6556
class="o-hoverable-button o-menu-item-button"
6657
title="Strikethrough"
67-
t-att-class="{active:rule.style.strikethrough}"
68-
t-on-click="(ev) => store.toggleStyle('strikethrough', ev)">
58+
t-att-class="{active:this.rule.style.strikethrough}"
59+
t-on-click="(ev) => this.props.store.toggleStyle('strikethrough', ev)">
6960
<t t-call="o-spreadsheet-Icon.STRIKE"/>
7061
</div>
7162
<ColorPickerWidget
72-
currentColor="rule.style.textColor || '#000000'"
73-
toggleColorPicker="() => store.toggleMenu('cellIsRule-textColor')"
74-
showColorPicker="state.openedMenu === 'cellIsRule-textColor'"
75-
onColorPicked="(color) => store.setColor('textColor', color)"
76-
title="text_color"
63+
currentColor="this.rule.style.textColor || '#000000'"
64+
toggleColorPicker="() => this.props.store.toggleMenu('cellIsRule-textColor')"
65+
showColorPicker="this.props.store.state.openedMenu === 'cellIsRule-textColor'"
66+
onColorPicked="(color) => this.props.store.setColor('textColor', color)"
67+
title.translate="Text Color"
7768
icon="'o-spreadsheet-Icon.TEXT_COLOR'"
7869
class="'o-hoverable-button o-menu-item-button'"
7970
/>
8071
<div class="o-divider border-end"/>
8172
<ColorPickerWidget
82-
currentColor="rule.style.fillColor"
83-
toggleColorPicker="() => store.toggleMenu('cellIsRule-fillColor')"
84-
showColorPicker="state.openedMenu === 'cellIsRule-fillColor'"
85-
onColorPicked="(color) => store.setColor('fillColor', color)"
86-
title="fill_color"
73+
currentColor="this.rule.style.fillColor"
74+
toggleColorPicker="() => this.props.store.toggleMenu('cellIsRule-fillColor')"
75+
showColorPicker="this.props.store.state.openedMenu === 'cellIsRule-fillColor'"
76+
onColorPicked="(color) => this.props.store.setColor('fillColor', color)"
77+
title.translate="Fill Color"
8778
icon="'o-spreadsheet-Icon.FILL_COLOR'"
8879
class="'o-hoverable-button o-menu-item-button'"
8980
/>

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

Lines changed: 10 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
import { Component, useEffect, useExternalListener } from "@odoo/owl";
2-
import { DEFAULT_COLOR_SCALE_MIDPOINT_COLOR } from "../../../../constants";
3-
import { colorNumberToHex, deepCopy } from "../../../../helpers";
2+
import { deepCopy } from "../../../../helpers";
43
import { useLocalStore } from "../../../../store_engine";
54
import { _t } from "../../../../translation";
6-
import {
7-
ColorScaleThreshold,
8-
CommandResult,
9-
ConditionalFormat,
10-
UID,
11-
ValueAndLabel,
12-
} from "../../../../types";
5+
import { ConditionalFormat, UID } from "../../../../types";
136
import { SpreadsheetChildEnv } from "../../../../types/spreadsheet_env";
147
import { Store } from "../../../../types/store_engine";
15-
import { ColorPickerWidget } from "../../../color_picker/color_picker_widget";
16-
import { StandaloneComposer } from "../../../composer/standalone_composer/standalone_composer";
17-
import { getTextDecoration } from "../../../helpers";
18-
import { IconPicker } from "../../../icon_picker/icon_picker";
19-
import { Select } from "../../../select/select";
208
import { SelectionInput } from "../../../selection_input/selection_input";
219
import { ValidationMessages } from "../../../validation_messages/validation_messages";
2210
import { BadgeSelection } from "../../components/badge_selection/badge_selection";
23-
import { RoundColorPicker } from "../../components/round_color_picker/round_color_picker";
2411
import { Section } from "../../components/section/section";
12+
import { CellIsRuleEditor } from "./cell_is_rule_editor";
2513
import { ConditionalFormattingEditorStore } from "./cf_editor_store";
14+
import { ColorScaleRuleEditor } from "./color_scale_rule_editor";
15+
import { DataBarRuleEditor } from "./data_bar_rule_editor";
16+
import { IconSetRuleEditor } from "./icon_set_rule_editor";
2617

2718
interface Props {
2819
cf: ConditionalFormat;
@@ -34,20 +25,16 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
3425
static template = "o-spreadsheet-ConditionalFormattingEditor";
3526
static components = {
3627
SelectionInput,
37-
IconPicker,
38-
ColorPickerWidget,
3928
Section,
40-
RoundColorPicker,
41-
StandaloneComposer,
4229
BadgeSelection,
4330
ValidationMessages,
44-
Select,
31+
CellIsRuleEditor,
32+
ColorScaleRuleEditor,
33+
IconSetRuleEditor,
34+
DataBarRuleEditor,
4535
};
4636
static props = { cf: Object, isNewCf: Boolean, onCloseSidePanel: Function };
4737

48-
getTextDecoration = getTextDecoration;
49-
colorNumberToHex = colorNumberToHex;
50-
5138
private activeSheetId!: UID;
5239
private store!: Store<ConditionalFormattingEditorStore>;
5340

@@ -122,131 +109,4 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
122109
`ConditionalFormattingEditor_${this.props.cf.id}`
123110
);
124111
}
125-
126-
/*****************************************************************************
127-
* Color Scale Rule
128-
****************************************************************************/
129-
130-
getThresholdColor(threshold?: ColorScaleThreshold) {
131-
return threshold
132-
? colorNumberToHex(threshold.color)
133-
: colorNumberToHex(DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
134-
}
135-
136-
isValueInvalid(threshold: "minimum" | "midpoint" | "maximum"): boolean {
137-
const errors = this.store.state.errors;
138-
switch (threshold) {
139-
case "minimum":
140-
return (
141-
errors.includes(CommandResult.MinInvalidFormula) ||
142-
errors.includes(CommandResult.MinBiggerThanMid) ||
143-
errors.includes(CommandResult.MinBiggerThanMax) ||
144-
errors.includes(CommandResult.MinNaN)
145-
);
146-
case "midpoint":
147-
return (
148-
errors.includes(CommandResult.MidInvalidFormula) ||
149-
errors.includes(CommandResult.MidNaN) ||
150-
errors.includes(CommandResult.MidBiggerThanMax)
151-
);
152-
case "maximum":
153-
return (
154-
errors.includes(CommandResult.MaxInvalidFormula) || errors.includes(CommandResult.MaxNaN)
155-
);
156-
default:
157-
return false;
158-
}
159-
}
160-
161-
getColorScaleComposerProps(
162-
thresholdType: "minimum" | "midpoint" | "maximum"
163-
): StandaloneComposer["props"] {
164-
const threshold = this.store.state.rules.colorScale[thresholdType];
165-
if (!threshold) {
166-
throw new Error("Threshold not found");
167-
}
168-
const isInvalid = this.isValueInvalid(thresholdType);
169-
return {
170-
onConfirm: (str: string) => {
171-
threshold.value = str;
172-
this.store.updateConditionalFormat({ rule: this.store.state.rules.colorScale });
173-
},
174-
composerContent: threshold.value || "",
175-
placeholder: _t("Formula"),
176-
defaultStatic: true,
177-
invalid: isInvalid,
178-
class: "o-sidePanel-composer",
179-
defaultRangeSheetId: this.activeSheetId,
180-
};
181-
}
182-
183-
/*****************************************************************************
184-
* Icon Set
185-
****************************************************************************/
186-
187-
isInflectionPointInvalid(
188-
inflectionPoint: "lowerInflectionPoint" | "upperInflectionPoint"
189-
): boolean {
190-
const errors = this.store.state.errors;
191-
switch (inflectionPoint) {
192-
case "lowerInflectionPoint":
193-
return (
194-
errors.includes(CommandResult.ValueLowerInflectionNaN) ||
195-
errors.includes(CommandResult.ValueLowerInvalidFormula) ||
196-
errors.includes(CommandResult.LowerBiggerThanUpper)
197-
);
198-
case "upperInflectionPoint":
199-
return (
200-
errors.includes(CommandResult.ValueUpperInflectionNaN) ||
201-
errors.includes(CommandResult.ValueUpperInvalidFormula) ||
202-
errors.includes(CommandResult.LowerBiggerThanUpper)
203-
);
204-
default:
205-
return true;
206-
}
207-
}
208-
209-
getColorIconSetComposerProps(
210-
inflectionPoint: "lowerInflectionPoint" | "upperInflectionPoint"
211-
): StandaloneComposer["props"] {
212-
const inflection = this.store.state.rules.iconSet[inflectionPoint];
213-
const isInvalid = this.isInflectionPointInvalid(inflectionPoint);
214-
return {
215-
onConfirm: (str: string) => {
216-
inflection.value = str;
217-
this.store.updateConditionalFormat({ rule: this.store.state.rules.iconSet });
218-
},
219-
composerContent: inflection.value || "",
220-
placeholder: _t("Formula"),
221-
defaultStatic: true,
222-
invalid: isInvalid,
223-
class: "o-sidePanel-composer",
224-
defaultRangeSheetId: this.activeSheetId,
225-
};
226-
}
227-
228-
getThresholdTypeSelectOptions(
229-
thresholdType: "minimum" | "midpoint" | "maximum" | "iconSet"
230-
): ValueAndLabel[] {
231-
const options: ValueAndLabel[] = [
232-
{ value: "number", label: _t("Number") },
233-
{ value: "percentage", label: _t("Percentage") },
234-
{ value: "percentile", label: _t("Percentile") },
235-
{ value: "formula", label: _t("Formula") },
236-
];
237-
if (thresholdType === "iconSet") {
238-
return options;
239-
}
240-
if (thresholdType === "midpoint") {
241-
return [{ value: "none", label: _t("None") }, ...options];
242-
}
243-
return [{ value: "value", label: _t("Cell values") }, ...options];
244-
}
245-
246-
getIconSetOperatorSelectOptions(): ValueAndLabel[] {
247-
return [
248-
{ value: "gt", label: ">" },
249-
{ value: "ge", label: ">=" },
250-
];
251-
}
252112
}

0 commit comments

Comments
 (0)