diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts index 8117ac826b..5ddf38b765 100644 --- a/gallery/src/pages/components/ha-form.ts +++ b/gallery/src/pages/components/ha-form.ts @@ -3,6 +3,7 @@ import "@material/mwc-button"; import { html, LitElement, TemplateResult } from "lit"; import { customElement, state } from "lit/decorators"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; @@ -153,6 +154,7 @@ const SCHEMAS: { context: { filter_entity: "entity", filter_attribute: "Attribute" }, }, { name: "Device", selector: { device: {} } }, + { name: "Config entry", selector: { config_entry: {} } }, { name: "Duration", selector: { duration: {} } }, { name: "area", selector: { area: {} } }, { name: "target", selector: { target: {} } }, @@ -434,6 +436,7 @@ class DemoHaForm extends LitElement { hass.addEntities(ENTITIES); mockEntityRegistry(hass); mockDeviceRegistry(hass, DEVICES); + mockConfigEntries(hass); mockAreaRegistry(hass, AREAS); mockHassioSupervisor(hass); } diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 6549c8e30e..dcc099b636 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -3,6 +3,7 @@ import "@material/mwc-button"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, state } from "lit/decorators"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; @@ -124,6 +125,10 @@ const SCHEMAS: { selector: { attribute: { entity_id: "" } }, }, device: { name: "Device", selector: { device: {} } }, + config_entry: { + name: "Integration", + selector: { config_entry: {} }, + }, duration: { name: "Duration", selector: { duration: {} } }, addon: { name: "Addon", selector: { addon: {} } }, area: { name: "Area", selector: { area: {} } }, @@ -280,6 +285,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement { hass.addEntities(ENTITIES); mockEntityRegistry(hass); mockDeviceRegistry(hass, DEVICES); + mockConfigEntries(hass); mockAreaRegistry(hass, AREAS); mockHassioSupervisor(hass); hass.mockWS("auth/sign_path", (params) => params); diff --git a/src/components/ha-config-entry-picker.ts b/src/components/ha-config-entry-picker.ts new file mode 100644 index 0000000000..739491cd17 --- /dev/null +++ b/src/components/ha-config-entry-picker.ts @@ -0,0 +1,156 @@ +import "@material/mwc-list/mwc-list-item"; +import { html, LitElement, TemplateResult } from "lit"; +import { ComboBoxLitRenderer } from "lit-vaadin-helpers"; +import { customElement, property, query, state } from "lit/decorators"; +import { fireEvent } from "../common/dom/fire_event"; +import { PolymerChangedEvent } from "../polymer-types"; +import { HomeAssistant } from "../types"; +import type { HaComboBox } from "./ha-combo-box"; +import { ConfigEntry, getConfigEntries } from "../data/config_entries"; +import { domainToName } from "../data/integration"; +import { caseInsensitiveStringCompare } from "../common/string/compare"; +import { brandsUrl } from "../util/brands-url"; +import "./ha-combo-box"; + +export interface ConfigEntryExtended extends ConfigEntry { + localized_domain_name?: string; +} + +@customElement("ha-config-entry-picker") +class HaConfigEntryPicker extends LitElement { + public hass!: HomeAssistant; + + @property() public integration?: string; + + @property() public label?: string; + + @property() public value = ""; + + @property() public helper?: string; + + @state() private _configEntries?: ConfigEntryExtended[]; + + @property({ type: Boolean }) public disabled = false; + + @property({ type: Boolean }) public required = false; + + @query("ha-combo-box") private _comboBox!: HaComboBox; + + public open() { + this._comboBox?.open(); + } + + public focus() { + this._comboBox?.focus(); + } + + protected firstUpdated() { + this._getConfigEntries(); + } + + private _rowRenderer: ComboBoxLitRenderer = ( + item + ) => html` + ${item.title || + this.hass.localize( + "ui.panel.config.integrations.config_entry.unnamed_entry" + )} + ${item.localized_domain_name} + + `; + + protected render(): TemplateResult { + if (!this._configEntries) { + return html``; + } + return html` + + `; + } + + private _onImageLoad(ev) { + ev.target.style.visibility = "initial"; + } + + private _onImageError(ev) { + ev.target.style.visibility = "hidden"; + } + + private async _getConfigEntries() { + getConfigEntries(this.hass, { + type: "integration", + domain: this.integration, + }).then((configEntries) => { + this._configEntries = configEntries + .map( + (entry: ConfigEntry): ConfigEntryExtended => ({ + ...entry, + localized_domain_name: domainToName( + this.hass.localize, + entry.domain + ), + }) + ) + .sort((conf1, conf2) => + caseInsensitiveStringCompare( + conf1.localized_domain_name + conf1.title, + conf2.localized_domain_name + conf2.title + ) + ); + }); + } + + private get _value() { + return this.value || ""; + } + + private _valueChanged(ev: PolymerChangedEvent) { + ev.stopPropagation(); + const newValue = ev.detail.value; + + if (newValue !== this._value) { + this._setValue(newValue); + } + } + + private _setValue(value: string) { + this.value = value; + setTimeout(() => { + fireEvent(this, "value-changed", { value }); + fireEvent(this, "change"); + }, 0); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-config-entry-picker": HaConfigEntryPicker; + } +} diff --git a/src/components/ha-selector/ha-selector-config-entry.ts b/src/components/ha-selector/ha-selector-config-entry.ts new file mode 100644 index 0000000000..85f6823276 --- /dev/null +++ b/src/components/ha-selector/ha-selector-config-entry.ts @@ -0,0 +1,47 @@ +import { css, html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import { ConfigEntrySelector } from "../../data/selector"; +import { HomeAssistant } from "../../types"; +import "../ha-config-entry-picker"; + +@customElement("ha-selector-config_entry") +export class HaConfigEntrySelector extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public selector!: ConfigEntrySelector; + + @property() public value?: any; + + @property() public label?: string; + + @property() public helper?: string; + + @property({ type: Boolean }) public disabled = false; + + @property({ type: Boolean }) public required = true; + + protected render() { + return html``; + } + + static styles = css` + ha-config-entry-picker { + width: 100%; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-selector-config_entry": HaConfigEntrySelector; + } +} diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts index cc13845e01..40f22e1a13 100644 --- a/src/components/ha-selector/ha-selector.ts +++ b/src/components/ha-selector/ha-selector.ts @@ -9,6 +9,7 @@ import "./ha-selector-area"; import "./ha-selector-attribute"; import "./ha-selector-boolean"; import "./ha-selector-color-rgb"; +import "./ha-selector-config-entry"; import "./ha-selector-date"; import "./ha-selector-datetime"; import "./ha-selector-device"; diff --git a/src/data/selector.ts b/src/data/selector.ts index 10d0fb8bf1..1620f1c306 100644 --- a/src/data/selector.ts +++ b/src/data/selector.ts @@ -11,6 +11,7 @@ export type Selector = | BooleanSelector | ColorRGBSelector | ColorTempSelector + | ConfigEntrySelector | DateSelector | DateTimeSelector | DeviceSelector @@ -86,6 +87,12 @@ export interface ColorTempSelector { }; } +export interface ConfigEntrySelector { + config_entry: { + integration?: string; + }; +} + export interface DateSelector { // eslint-disable-next-line @typescript-eslint/ban-types date: {}; diff --git a/src/translations/en.json b/src/translations/en.json index 5c4342b975..631adac4fc 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -417,6 +417,9 @@ "add_device_id": "Choose device", "add_entity_id": "Choose entity" }, + "config-entry-picker": { + "config_entry": "Integration" + }, "theme-picker": { "theme": "Theme", "no_theme": "No theme"