jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix clear area action in area-picker (#25511)

Browse Source 
* Fix clear area action in area-picker

* Fix area not displayed after creation
This commit is contained in:
Paul Bottein 2025-05-20 10:01:01 +02:00 committed by GitHub
parent 83df10ef29
commit 01b398c2a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,33 +94,40 @@ export class HaAreaPicker extends LitElement {
await this._picker?.open(); await this._picker?.open();
} }
private _valueRenderer: PickerValueRenderer = (value) => { // Recompute value renderer when the areas change
const area = this.hass.areas[value]; private _computeValueRenderer = memoizeOne(
(_haAreas: HomeAssistant["areas"]): PickerValueRenderer =>
(value) => {
const area = this.hass.areas[value];
if (!area) { if (!area) {
return html` return html`
<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
<span slot="headline">${area}</span> <span slot="headline">${area}</span>
`; `;
} }
const { floor } = getAreaContext(area, this.hass); const { floor } = getAreaContext(area, this.hass);
const areaName = area ? computeAreaName(area) : undefined; const areaName = area ? computeAreaName(area) : undefined;
const floorName = floor ? computeFloorName(floor) : undefined; const floorName = floor ? computeFloorName(floor) : undefined;
const icon = area.icon; const icon = area.icon;
return html` return html`
${icon ${icon
? html`<ha-icon slot="start" .icon=${icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>`} : html`<ha-svg-icon
<span slot="headline">${areaName}</span> slot="start"
${floorName .path=${mdiTextureBox}
? html`<span slot="supporting-text">${floorName}</span>` ></ha-svg-icon>`}
: nothing} <span slot="headline">${areaName}</span>
`; ${floorName
}; ? html`<span slot="supporting-text">${floorName}</span>`
: nothing}
`;
}
);
private _getAreas = memoizeOne( private _getAreas = memoizeOne(
( (
@ -352,6 +359,8 @@ export class HaAreaPicker extends LitElement {
const placeholder = const placeholder =
this.placeholder ?? this.hass.localize("ui.components.area-picker.area"); this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
const valueRenderer = this._computeValueRenderer(this.hass.areas);
return html` return html`
<ha-generic-picker <ha-generic-picker
.hass=${this.hass} .hass=${this.hass}
@ -364,7 +373,7 @@ export class HaAreaPicker extends LitElement {
.value=${this.value} .value=${this.value}
.getItems=${this._getItems} .getItems=${this._getItems}
.getAdditionalItems=${this._getAdditionalItems} .getAdditionalItems=${this._getAdditionalItems}
.valueRenderer=${this._valueRenderer} .valueRenderer=${valueRenderer}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
> >
</ha-generic-picker> </ha-generic-picker>
@ -375,33 +384,35 @@ export class HaAreaPicker extends LitElement {
ev.stopPropagation(); ev.stopPropagation();
const value = ev.detail.value; const value = ev.detail.value;
if (!value.startsWith(ADD_NEW_ID)) { if (!value) {
if (value !== this.value) { this._setValue(undefined);
this._setValue(value);
}
return; return;
} }
this.hass.loadFragmentTranslation("config"); if (value.startsWith(ADD_NEW_ID)) {
this.hass.loadFragmentTranslation("config");
const suggestedName = value.substring(ADD_NEW_ID.length); const suggestedName = value.substring(ADD_NEW_ID.length);
showAreaRegistryDetailDialog(this, { showAreaRegistryDetailDialog(this, {
suggestedName: suggestedName, suggestedName: suggestedName,
createEntry: async (values) => { createEntry: async (values) => {
try { try {
const area = await createAreaRegistryEntry(this.hass, values); const area = await createAreaRegistryEntry(this.hass, values);
this._setValue(area.area_id); this._setValue(area.area_id);
} catch (err: any) { } catch (err: any) {
showAlertDialog(this, { showAlertDialog(this, {
title: this.hass.localize( title: this.hass.localize(
"ui.components.area-picker.failed_create_area" "ui.components.area-picker.failed_create_area"
), ),
text: err.message, text: err.message,
}); });
} }
}, },
}); });
}
this._setValue(value);
} }
private _setValue(value?: string) { private _setValue(value?: string) {