github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

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

* Use area and floor dialog when adding item in picker

* use const
This commit is contained in:
Bram Kragten 2024-04-02 11:49:05 +02:00 committed by GitHub
parent 871949e760
commit d8b43597a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 43 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/ha-area-picker.ts
View File

@ -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<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"),
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) {

39
src/components/ha-floor-picker.ts
View File

@ -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) {

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

@ -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;

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

@ -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;

1
src/panels/config/areas/show-dialog-area-registry-detail.ts
View File

@ -6,6 +6,7 @@ import {
export interface AreaRegistryDetailDialogParams {
entry?: AreaRegistryEntry;
suggestedName?: string;
createEntry?: (values: AreaRegistryEntryMutableParams) => Promise<unknown>;
updateEntry?: (
updates: Partial<AreaRegistryEntryMutableParams>

1
src/panels/config/areas/show-dialog-floor-registry-detail.ts
View File

@ -6,6 +6,7 @@ import {
export interface FloorRegistryDetailDialogParams {
entry?: FloorRegistryEntry;
suggestedName?: string;
createEntry?: (values: FloorRegistryEntryMutableParams) => Promise<unknown>;
updateEntry?: (
updates: Partial<FloorRegistryEntryMutableParams>

16
src/translations/en.json
View File

@ -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",