Add add device fab to devices page (#13931)

This commit is contained in:
Bram Kragten 2022-09-30 17:37:09 +02:00 committed by GitHub
parent 6a3ac9116e
commit 9811f2681c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 42 deletions

View File

@ -38,6 +38,7 @@ import { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
interface DeviceRowData extends DeviceRegistryEntry {
device?: DeviceRowData;
@ -363,16 +364,15 @@ export class HaConfigDeviceDashboard extends LitElement {
}
protected render(): TemplateResult {
const { devicesOutput, filteredConfigEntry } =
this._devicesAndFilterDomains(
this.devices,
this.entries,
this.entities,
this.areas,
this._searchParms,
this._showDisabled,
this.hass.localize
);
const { devicesOutput } = this._devicesAndFilterDomains(
this.devices,
this.entries,
this.entities,
this.areas,
this._searchParms,
this._showDisabled,
this.hass.localize
);
const activeFilters = this._activeFilters(
this.entries,
this._searchParms,
@ -405,39 +405,21 @@ export class HaConfigDeviceDashboard extends LitElement {
@search-changed=${this._handleSearchChange}
@row-click=${this._handleRowClicked}
clickable
.hasFab=${filteredConfigEntry &&
(filteredConfigEntry.domain === "zha" ||
filteredConfigEntry.domain === "zwave_js")}
hasFab
>
<ha-integration-overflow-menu
.hass=${this.hass}
slot="toolbar-icon"
></ha-integration-overflow-menu>
${!filteredConfigEntry
? ""
: filteredConfigEntry.domain === "zwave_js"
? html`
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.panel.config.zha.add_device")}
extended
?rtl=${computeRTL(this.hass)}
@click=${this._showZJSAddDeviceDialog}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
`
: filteredConfigEntry.domain === "zha"
? html`<a href="/config/zha/add" slot="fab">
<ha-fab
.label=${this.hass.localize("ui.panel.config.zha.add_device")}
extended
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
</a>`
: html``}
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.panel.config.devices.add_device")}
extended
@click=${this._addDevice}
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
<ha-icon-button
slot="trigger"
@ -516,7 +498,7 @@ export class HaConfigDeviceDashboard extends LitElement {
this._showDisabled = true;
}
private _showZJSAddDeviceDialog() {
private _addDevice() {
const { filteredConfigEntry } = this._devicesAndFilterDomains(
this.devices,
this.entries,
@ -526,7 +508,18 @@ export class HaConfigDeviceDashboard extends LitElement {
this._showDisabled,
this.hass.localize
);
if (filteredConfigEntry?.domain === "zha") {
navigate(`/config/zha/add`);
return;
}
if (filteredConfigEntry?.domain === "zwave_js") {
this._showZJSAddDeviceDialog(filteredConfigEntry);
return;
}
showAddIntegrationDialog(this);
}
private _showZJSAddDeviceDialog(filteredConfigEntry: ConfigEntry) {
showZWaveJSAddNodeDialog(this, {
entry_id: filteredConfigEntry!.entry_id,
});

View File

@ -80,10 +80,10 @@ class AddIntegrationDialog extends LitElement {
private _height?: number;
public showDialog(params: AddIntegrationDialogParams): void {
public showDialog(params?: AddIntegrationDialogParams): void {
this._open = true;
this._pickedBrand = params.brand;
this._initialFilter = params.initialFilter;
this._pickedBrand = params?.brand;
this._initialFilter = params?.initialFilter;
this._narrow = matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
).matches;

View File

@ -2610,6 +2610,7 @@
},
"devices": {
"add_prompt": "No {name} have been added using this {type} yet. You can add one by clicking the + button above.",
"add_device": "Add Device",
"caption": "Devices",
"description": "Manage configured devices",
"device_info": "{type} info",