Use area and floor dialog when adding item in picker (#20311)

* Use area and floor dialog when adding item in picker

* use const

src/components/ha-area-picker.ts

@@ -21,10 +21,8 @@ import {
   getDeviceEntityDisplayLookup,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import {
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-  showAlertDialog,
+import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
 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<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.area_id === "add_new" })}
+    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
@@ -46,6 +44,10 @@ const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
     ${item.name}
   </ha-list-item>`;
 
+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"),
+    showAreaRegistryDetailDialog(this, {
-      text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      confirmText: this.hass.localize(
+      createEntry: async (values) => {
-        "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;
-        }
         try {
-          const area = await createAreaRegistryEntry(this.hass, {
+          const area = await createAreaRegistryEntry(this.hass, values);
-            name,
-          });
           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) {

src/components/ha-floor-picker.ts

@@ -23,11 +23,9 @@ import {
   getFloorAreaLookup,
   subscribeFloorRegistry,
 } from "../data/floor_registry";
-import {
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-  showAlertDialog,
-  showPromptDialog,
-} 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"),
+    showFloorRegistryDetailDialog(this, {
-      text: this.hass.localize("ui.components.floor-picker.add_dialog.text"),
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      confirmText: this.hass.localize(
+      createEntry: async (values) => {
-        "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;
-        }
         try {
-          const floor = await createFloorRegistryEntry(this.hass, {
+          const floor = await createFloorRegistryEntry(this.hass, values);
-            name,
-          });
           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) {

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -52,7 +52,9 @@ class DialogAreaDetail extends LitElement {
   ): Promise<void> {
     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;

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -38,7 +38,9 @@ class DialogFloorDetail extends LitElement {
   ): Promise<void> {
     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;

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<unknown>;
   updateEntry?: (
     updates: Partial<AreaRegistryEntryMutableParams>

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<unknown>;
   updateEntry?: (
     updates: Partial<FloorRegistryEntryMutableParams>

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": {
+        "failed_create_area": "Failed to create area."
-          "title": "Add new area",
-          "text": "Enter the name of the new area.",
-          "name": "Name",
-          "add": "Add",
-          "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": {
+        "failed_create_floor": "Failed to create floor."
-          "title": "Add new floor",
-          "text": "Enter the name of the new floor.",
-          "name": "Name",
-          "add": "Add",
-          "failed_create_floor": "Failed to create floor."
-        }
       },
       "area-filter": {
         "title": "Areas",