mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Add config entry selector (#13432)
* Add config entry selector * Let backend filter by integration * Add to gallery * Adjust translation * Fix imports * Rename in gallery as well * Fix typo in localize key * Prettier
This commit is contained in:
parent
8bcbeb299b
commit
ed82ae9f68
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
|
156
src/components/ha-config-entry-picker.ts
Normal file
156
src/components/ha-config-entry-picker.ts
Normal file
@ -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<ConfigEntryExtended> = (
|
||||
item
|
||||
) => html`<mwc-list-item twoline graphic="icon">
|
||||
<span
|
||||
>${item.title ||
|
||||
this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.unnamed_entry"
|
||||
)}</span
|
||||
>
|
||||
<span slot="secondary">${item.localized_domain_name}</span>
|
||||
<img
|
||||
slot="graphic"
|
||||
src=${brandsUrl({
|
||||
domain: item.domain,
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.themes?.darkMode,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
@error=${this._onImageError}
|
||||
@load=${this._onImageLoad}
|
||||
/>
|
||||
</mwc-list-item>`;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._configEntries) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-combo-box
|
||||
.hass=${this.hass}
|
||||
.label=${this.label === undefined && this.hass
|
||||
? this.hass.localize("ui.components.config-entry-picker.config_entry")
|
||||
: this.label}
|
||||
.value=${this._value}
|
||||
.required=${this.required}
|
||||
.disabled=${this.disabled}
|
||||
.helper=${this.helper}
|
||||
.renderer=${this._rowRenderer}
|
||||
.items=${this._configEntries}
|
||||
item-value-path="entry_id"
|
||||
item-id-path="entry_id"
|
||||
item-label-path="title"
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-combo-box>
|
||||
`;
|
||||
}
|
||||
|
||||
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<string>) {
|
||||
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;
|
||||
}
|
||||
}
|
47
src/components/ha-selector/ha-selector-config-entry.ts
Normal file
47
src/components/ha-selector/ha-selector-config-entry.ts
Normal file
@ -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`<ha-config-entry-picker
|
||||
.hass=${this.hass}
|
||||
.value=${this.value}
|
||||
.label=${this.label}
|
||||
.helper=${this.helper}
|
||||
.disabled=${this.disabled}
|
||||
.required=${this.required}
|
||||
.integration=${this.selector.config_entry.integration}
|
||||
allow-custom-entity
|
||||
></ha-config-entry-picker>`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
ha-config-entry-picker {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-selector-config_entry": HaConfigEntrySelector;
|
||||
}
|
||||
}
|
@ -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";
|
||||
|
@ -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: {};
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user