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

View File

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

View File

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