Fix categories filtering

This commit is contained in:
Paul Bottein 2024-03-28 13:30:53 +01:00
parent 8ec8dc160f
commit 31c6247a86
No known key found for this signature in database

View File

@ -26,10 +26,14 @@ import { showCategoryRegistryDetailDialog } from "./show-dialog-category-registr
type ScorableCategoryRegistryEntry = ScorableTextItem & CategoryRegistryEntry; type ScorableCategoryRegistryEntry = ScorableTextItem & CategoryRegistryEntry;
const ADD_NEW_ID = "___ADD_NEW___";
const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) => const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) =>
html`<ha-list-item html`<ha-list-item
graphic="icon" graphic="icon"
class=${classMap({ "add-new": item.category_id === "add_new" })} class=${classMap({ "add-new": item.category_id === ADD_NEW_ID })}
> >
${item.icon ${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>` ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
@ -100,7 +104,7 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
const result = categories ? [...categories] : []; const result = categories ? [...categories] : [];
if (!result?.length) { if (!result?.length) {
result.push({ result.push({
category_id: "no_categories", category_id: NO_CATEGORIES_ID,
name: this.hass.localize( name: this.hass.localize(
"ui.components.category-picker.no_categories" "ui.components.category-picker.no_categories"
), ),
@ -113,7 +117,7 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
: [ : [
...result, ...result,
{ {
category_id: "add_new", category_id: ADD_NEW_ID,
name: this.hass.localize("ui.components.category-picker.add_new"), name: this.hass.localize("ui.components.category-picker.add_new"),
icon: "mdi:plus", icon: "mdi:plus",
}, },
@ -127,7 +131,12 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
(this._init && changedProps.has("_opened") && this._opened) (this._init && changedProps.has("_opened") && this._opened)
) { ) {
this._init = true; this._init = true;
const categories = this._getCategories(this._categories, this.noAdd); const categories = this._getCategories(this._categories, this.noAdd).map(
(label) => ({
...label,
strings: [label.name],
})
);
this.comboBox.items = categories; this.comboBox.items = categories;
this.comboBox.filteredItems = categories; this.comboBox.filteredItems = categories;
} }
@ -172,18 +181,30 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
filterString, filterString,
target.items || [] target.items || []
); );
if (!this.noAdd && filteredItems?.length === 0) { if (filteredItems?.length === 0) {
this._suggestion = filterString; if (this.noAdd) {
this.comboBox.filteredItems = [ this.comboBox.filteredItems = [
{ {
category_id: "add_new_suggestion", category_id: NO_CATEGORIES_ID,
name: this.hass.localize( name: this.hass.localize(
"ui.components.category-picker.add_new_sugestion", "ui.components.category-picker.no_categories"
{ name: this._suggestion } ),
), icon: null,
picture: null, },
}, ] as ScorableCategoryRegistryEntry[];
]; } else {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
category_id: ADD_NEW_SUGGESTION_ID,
name: this.hass.localize(
"ui.components.category-picker.add_new_sugestion",
{ name: this._suggestion }
),
icon: "mdi:plus",
},
];
}
} else { } else {
this.comboBox.filteredItems = filteredItems; this.comboBox.filteredItems = filteredItems;
} }
@ -201,11 +222,11 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
ev.stopPropagation(); ev.stopPropagation();
let newValue = ev.detail.value; let newValue = ev.detail.value;
if (newValue === "no_categories") { if (newValue === NO_CATEGORIES_ID) {
newValue = ""; newValue = "";
} }
if (!["add_new_suggestion", "add_new"].includes(newValue)) { if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
if (newValue !== this._value) { if (newValue !== this._value) {
this._setValue(newValue); this._setValue(newValue);
} }