diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index a7b404f29a..625ea62beb 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -21,10 +21,8 @@ import { getDeviceEntityDisplayLookup, } from "../data/device_registry"; import { EntityRegistryDisplayEntry } from "../data/entity_registry"; -import { - showAlertDialog, - showPromptDialog, -} from "../dialogs/generic/show-dialog-box"; +import { showAlertDialog } from "../dialogs/generic/show-dialog-box"; +import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail"; import { HomeAssistant, ValueChangedEvent } from "../types"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import "./ha-combo-box"; @@ -38,7 +36,7 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry; const rowRenderer: ComboBoxLitRenderer = (item) => html` ${item.icon ? html`` @@ -46,6 +44,10 @@ const rowRenderer: ComboBoxLitRenderer = (item) => ${item.name} `; +const ADD_NEW_ID = "___ADD_NEW___"; +const NO_ITEMS_ID = "___NO_ITEMS___"; +const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___"; + @customElement("ha-area-picker") export class HaAreaPicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -137,7 +139,7 @@ export class HaAreaPicker extends LitElement { if (!areas.length) { return [ { - area_id: "no_areas", + area_id: NO_ITEMS_ID, floor_id: null, name: this.hass.localize("ui.components.area-picker.no_areas"), picture: null, @@ -284,7 +286,7 @@ export class HaAreaPicker extends LitElement { if (!outputAreas.length) { outputAreas = [ { - area_id: "no_areas", + area_id: NO_ITEMS_ID, floor_id: null, name: this.hass.localize("ui.components.area-picker.no_match"), picture: null, @@ -300,7 +302,7 @@ export class HaAreaPicker extends LitElement { : [ ...outputAreas, { - area_id: "add_new", + area_id: ADD_NEW_ID, floor_id: null, name: this.hass.localize("ui.components.area-picker.add_new"), picture: null, @@ -380,7 +382,7 @@ export class HaAreaPicker extends LitElement { this._suggestion = filterString; this.comboBox.filteredItems = [ { - area_id: "add_new_suggestion", + area_id: ADD_NEW_SUGGESTION_ID, name: this.hass.localize( "ui.components.area-picker.add_new_sugestion", { name: this._suggestion } @@ -405,11 +407,11 @@ export class HaAreaPicker extends LitElement { ev.stopPropagation(); let newValue = ev.detail.value; - if (newValue === "no_areas") { + if (newValue === NO_ITEMS_ID) { newValue = ""; } - if (!["add_new_suggestion", "add_new"].includes(newValue)) { + if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) { if (newValue !== this._value) { this._setValue(newValue); } @@ -417,25 +419,12 @@ export class HaAreaPicker extends LitElement { } (ev.target as any).value = this._value; - showPromptDialog(this, { - title: this.hass.localize("ui.components.area-picker.add_dialog.title"), - text: this.hass.localize("ui.components.area-picker.add_dialog.text"), - confirmText: this.hass.localize( - "ui.components.area-picker.add_dialog.add" - ), - inputLabel: this.hass.localize( - "ui.components.area-picker.add_dialog.name" - ), - defaultValue: - newValue === "add_new_suggestion" ? this._suggestion : undefined, - confirm: async (name) => { - if (!name) { - return; - } + + showAreaRegistryDetailDialog(this, { + suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "", + createEntry: async (values) => { try { - const area = await createAreaRegistryEntry(this.hass, { - name, - }); + const area = await createAreaRegistryEntry(this.hass, values); const areas = [...Object.values(this.hass.areas), area]; this.comboBox.filteredItems = this._getAreas( areas, @@ -455,18 +444,16 @@ export class HaAreaPicker extends LitElement { } catch (err: any) { showAlertDialog(this, { title: this.hass.localize( - "ui.components.area-picker.add_dialog.failed_create_area" + "ui.components.area-picker.failed_create_area" ), text: err.message, }); } }, - cancel: () => { - this._setValue(undefined); - this._suggestion = undefined; - this.comboBox.setInputValue(""); - }, }); + + this._suggestion = undefined; + this.comboBox.setInputValue(""); } private _setValue(value?: string) { diff --git a/src/components/ha-floor-picker.ts b/src/components/ha-floor-picker.ts index 9ac37cf746..aa6ea9501b 100644 --- a/src/components/ha-floor-picker.ts +++ b/src/components/ha-floor-picker.ts @@ -23,11 +23,9 @@ import { getFloorAreaLookup, subscribeFloorRegistry, } from "../data/floor_registry"; -import { - showAlertDialog, - showPromptDialog, -} from "../dialogs/generic/show-dialog-box"; +import { showAlertDialog } from "../dialogs/generic/show-dialog-box"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; +import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail"; import { HomeAssistant, ValueChangedEvent } from "../types"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import "./ha-combo-box"; @@ -438,25 +436,12 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) { } (ev.target as any).value = this._value; - showPromptDialog(this, { - title: this.hass.localize("ui.components.floor-picker.add_dialog.title"), - text: this.hass.localize("ui.components.floor-picker.add_dialog.text"), - confirmText: this.hass.localize( - "ui.components.floor-picker.add_dialog.add" - ), - inputLabel: this.hass.localize( - "ui.components.floor-picker.add_dialog.name" - ), - defaultValue: - newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : undefined, - confirm: async (name) => { - if (!name) { - return; - } + + showFloorRegistryDetailDialog(this, { + suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "", + createEntry: async (values) => { try { - const floor = await createFloorRegistryEntry(this.hass, { - name, - }); + const floor = await createFloorRegistryEntry(this.hass, values); const floors = [...this._floors!, floor]; this.comboBox.filteredItems = this._getFloors( floors, @@ -477,18 +462,16 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) { } catch (err: any) { showAlertDialog(this, { title: this.hass.localize( - "ui.components.floor-picker.add_dialog.failed_create_floor" + "ui.components.floor-picker.failed_create_floor" ), text: err.message, }); } }, - cancel: () => { - this._setValue(undefined); - this._suggestion = undefined; - this.comboBox.setInputValue(""); - }, }); + + this._suggestion = undefined; + this.comboBox.setInputValue(""); } private _setValue(value?: string) { diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index 0153bd8903..bdbfff68d8 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -52,7 +52,9 @@ class DialogAreaDetail extends LitElement { ): Promise { this._params = params; this._error = undefined; - this._name = this._params.entry ? this._params.entry.name : ""; + this._name = this._params.entry + ? this._params.entry.name + : this._params.suggestedName || ""; this._aliases = this._params.entry ? this._params.entry.aliases : []; this._labels = this._params.entry ? this._params.entry.labels : []; this._picture = this._params.entry?.picture || null; diff --git a/src/panels/config/areas/dialog-floor-registry-detail.ts b/src/panels/config/areas/dialog-floor-registry-detail.ts index 775d183993..12e666873f 100644 --- a/src/panels/config/areas/dialog-floor-registry-detail.ts +++ b/src/panels/config/areas/dialog-floor-registry-detail.ts @@ -38,7 +38,9 @@ class DialogFloorDetail extends LitElement { ): Promise { this._params = params; this._error = undefined; - this._name = this._params.entry ? this._params.entry.name : ""; + this._name = this._params.entry + ? this._params.entry.name + : this._params.suggestedName || ""; this._aliases = this._params.entry?.aliases || []; this._icon = this._params.entry?.icon || null; this._level = this._params.entry?.level ?? null; diff --git a/src/panels/config/areas/show-dialog-area-registry-detail.ts b/src/panels/config/areas/show-dialog-area-registry-detail.ts index 0f0eb422fa..19d56e52c1 100644 --- a/src/panels/config/areas/show-dialog-area-registry-detail.ts +++ b/src/panels/config/areas/show-dialog-area-registry-detail.ts @@ -6,6 +6,7 @@ import { export interface AreaRegistryDetailDialogParams { entry?: AreaRegistryEntry; + suggestedName?: string; createEntry?: (values: AreaRegistryEntryMutableParams) => Promise; updateEntry?: ( updates: Partial diff --git a/src/panels/config/areas/show-dialog-floor-registry-detail.ts b/src/panels/config/areas/show-dialog-floor-registry-detail.ts index 507d103469..ecaa74786b 100644 --- a/src/panels/config/areas/show-dialog-floor-registry-detail.ts +++ b/src/panels/config/areas/show-dialog-floor-registry-detail.ts @@ -6,6 +6,7 @@ import { export interface FloorRegistryDetailDialogParams { entry?: FloorRegistryEntry; + suggestedName?: string; createEntry?: (values: FloorRegistryEntryMutableParams) => Promise; updateEntry?: ( updates: Partial diff --git a/src/translations/en.json b/src/translations/en.json index 9a68c368b7..b6353d934a 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -599,13 +599,7 @@ "no_areas": "You don't have any areas", "no_match": "No matching areas found", "unassigned_areas": "Unassigned areas", - "add_dialog": { - "title": "Add new area", - "text": "Enter the name of the new area.", - "name": "Name", - "add": "Add", - "failed_create_area": "Failed to create area." - } + "failed_create_area": "Failed to create area." }, "floor-picker": { "clear": "Clear", @@ -615,13 +609,7 @@ "add_new": "Add new floor…", "no_floors": "You don't have any floors", "no_match": "No matching floors found", - "add_dialog": { - "title": "Add new floor", - "text": "Enter the name of the new floor.", - "name": "Name", - "add": "Add", - "failed_create_floor": "Failed to create floor." - } + "failed_create_floor": "Failed to create floor." }, "area-filter": { "title": "Areas",