Enable sorting step flow menu options in user language (#26845)

* Enable sorting step flow menu options in user language

* Remove menu_sort_values

* Update src/dialogs/config-flow/step-flow-menu.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* prettier

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
pull/26856/head
karwosts 2025-09-03 07:03:09 -07:00 committed by GitHub
parent f3f4bcfe45
commit 26b3212c7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 1 deletions

View File

@ -97,6 +97,7 @@ export interface DataEntryFlowStepMenu {
step_id: string;
/** If array, use value to lookup translations in strings.json */
menu_options: string[] | Record<string, string>;
sort?: boolean;
description_placeholders?: Record<string, string>;
translation_domain?: string;
}

View File

@ -1,4 +1,4 @@
import type { TemplateResult } from "lit";
import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
import { stringCompare } from "../../common/string/compare";
@customElement("step-flow-menu")
class StepFlowMenu extends LitElement {
@ -17,6 +18,14 @@ class StepFlowMenu extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepMenu;
protected shouldUpdate(changedProps: PropertyValues): boolean {
return (
changedProps.size > 1 ||
!changedProps.has("hass") ||
this.hass.localize !== changedProps.get("hass")?.localize
);
}
protected render(): TemplateResult {
let options: string[];
let translations: Record<string, string>;
@ -53,6 +62,16 @@ class StepFlowMenu extends LitElement {
);
}
if (this.step.sort) {
options = options.sort((a, b) =>
stringCompare(
translations[a]!,
translations[b]!,
this.hass.locale.language
)
);
}
const description = this.flowConfig.renderMenuDescription(
this.hass,
this.step