jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix removing labels (#20354)

Browse Source
This commit is contained in:
Bram Kragten 2024-04-03 09:54:49 +02:00 committed by GitHub
parent 17ad3a87f3
commit bb20ab8c2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ha-labels-picker.ts
View File

@ -2,8 +2,10 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { LitElement, TemplateResult, css, html, nothing } from "lit"; import { LitElement, TemplateResult, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../common/color/compute-color"; import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
@ -17,7 +19,6 @@ import "./chips/ha-input-chip";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-label-picker"; import "./ha-label-picker";
import type { HaLabelPicker } from "./ha-label-picker"; import type { HaLabelPicker } from "./ha-label-picker";
import { stringCompare } from "../common/string/compare";
@customElement("ha-labels-picker") @customElement("ha-labels-picker")
export class HaLabelsPicker extends SubscribeMixin(LitElement) { export class HaLabelsPicker extends SubscribeMixin(LitElement) {
@ -102,25 +103,35 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
]; ];
} }
private _sortedLabels = memoizeOne(
(
value: string[] | undefined,
labels: { [id: string]: LabelRegistryEntry } | undefined,
language: string
) =>
value
?.map((id) => labels?.[id])
.sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
);
protected render(): TemplateResult { protected render(): TemplateResult {
const labels = this.value const labels = this._sortedLabels(
?.map((id) => this._labels?.[id]) this.value,
.sort((a, b) => this._labels,
stringCompare(a?.name || "", b?.name || "", this.hass.locale.language) this.hass.locale.language
); );
return html` return html`
${labels?.length ${labels?.length
? html`<ha-chip-set> ? html`<ha-chip-set>
${repeat( ${repeat(
labels, labels,
(label) => label?.label_id, (label) => label?.label_id,
(label, idx) => { (label) => {
const color = label?.color const color = label?.color
? computeCssColor(label.color) ? computeCssColor(label.color)
: undefined; : undefined;
return html` return html`
<ha-input-chip <ha-input-chip
.idx=${idx}
.item=${label} .item=${label}
@remove=${this._removeItem} @remove=${this._removeItem}
@click=${this._openDetail} @click=${this._openDetail}
@ -161,12 +172,12 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
} }
private _removeItem(ev) { private _removeItem(ev) {
this._value.splice(ev.target.idx, 1); const label = ev.currentTarget.item;
this._setValue([...this._value]); this._setValue(this._value.filter((id) => id !== label.label_id));
} }
private _openDetail(ev) { private _openDetail(ev) {
const label = ev.target.item; const label = ev.currentTarget.item;
showLabelDetailDialog(this, { showLabelDetailDialog(this, {
entry: label, entry: label,
updateEntry: async (values) => { updateEntry: async (values) => {