diff --git a/src/data/zha.ts b/src/data/zha.ts index 2f60c313e4..eb270f8556 100644 --- a/src/data/zha.ts +++ b/src/data/zha.ts @@ -164,3 +164,12 @@ export const fetchGroups = (hass: HomeAssistant): Promise => hass.callWS({ type: "zha/groups", }); + +export const removeGroups = ( + hass: HomeAssistant, + groupIdsToRemove: number[] +): Promise => + hass.callWS({ + type: "zha/group/remove", + group_ids: groupIdsToRemove, + }); diff --git a/src/panels/config/zha/zha-groups-dashboard.ts b/src/panels/config/zha/zha-groups-dashboard.ts index d9cde8cbd4..547a3c7b20 100644 --- a/src/panels/config/zha/zha-groups-dashboard.ts +++ b/src/panels/config/zha/zha-groups-dashboard.ts @@ -9,20 +9,37 @@ import { customElement, CSSResult, css, + PropertyValues, } from "lit-element"; import { HomeAssistant } from "../../../types"; -import { ZHAGroup, fetchGroups } from "../../../data/zha"; +import { ZHAGroup, fetchGroups, removeGroups } from "../../../data/zha"; import { sortZHAGroups } from "./functions"; +import { SelectionChangedEvent } from "../../../components/data-table/ha-data-table"; +import "@material/mwc-button"; +import "@polymer/paper-spinner/paper-spinner"; @customElement("zha-groups-dashboard") export class ZHAGroupsDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public narrow = false; - @property() public _groups!: ZHAGroup[]; + @property() public _groups?: ZHAGroup[]; + @property() private _processingRemove: boolean = false; + @property() private _selectedGroupsToRemove: number[] = []; + private _firstUpdatedCalled: boolean = false; public connectedCallback(): void { super.connectedCallback(); - this._fetchGroups(); + if (this.hass && this._firstUpdatedCalled) { + this._fetchGroups(); + } + } + + protected firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + if (this.hass) { + this._fetchGroups(); + } + this._firstUpdatedCalled = true; } protected render(): TemplateResult { @@ -33,12 +50,41 @@ export class ZHAGroupsDashboard extends LitElement { )} >
- + ${this._groups + ? html` + + ` + : html` + + `} +
+
+ + + ${this.hass!.localize( + "ui.panel.config.zha.groups.remove_groups" + )}
`; @@ -48,6 +94,27 @@ export class ZHAGroupsDashboard extends LitElement { this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups); } + private _handleRemoveSelectionChanged(ev: CustomEvent): void { + const changedSelection = ev.detail as SelectionChangedEvent; + const groupId = Number(changedSelection.id); + if (changedSelection.selected) { + this._selectedGroupsToRemove.push(groupId); + } else { + const index = this._selectedGroupsToRemove.indexOf(groupId); + if (index !== -1) { + this._selectedGroupsToRemove.splice(index, 1); + } + } + this._selectedGroupsToRemove = [...this._selectedGroupsToRemove]; + } + + private async _removeGroup(): Promise { + this._processingRemove = true; + this._groups = await removeGroups(this.hass, this._selectedGroupsToRemove); + this._selectedGroupsToRemove = []; + this._processingRemove = false; + } + static get styles(): CSSResult[] { return [ css` @@ -60,11 +127,28 @@ export class ZHAGroupsDashboard extends LitElement { .button { float: right; } - .table { height: 200px; overflow: auto; } + mwc-button paper-spinner { + width: 14px; + height: 14px; + margin-right: 20px; + } + paper-spinner { + display: none; + } + paper-spinner[active] { + display: block; + } + .paper-dialog-buttons { + align-items: flex-end; + padding: 8px; + } + .paper-dialog-buttons .warning { + --mdc-theme-primary: var(--google-red-500); + } `, ]; } diff --git a/src/panels/config/zha/zha-groups-data-table.ts b/src/panels/config/zha/zha-groups-data-table.ts index 0f9e6dc6cd..bdb6c4024b 100644 --- a/src/panels/config/zha/zha-groups-data-table.ts +++ b/src/panels/config/zha/zha-groups-data-table.ts @@ -27,6 +27,7 @@ export class ZHAGroupsDataTable extends LitElement { @property() public hass!: HomeAssistant; @property() public narrow = false; @property() public groups: ZHAGroup[] = []; + @property() public selectable = false; private _columns = memoizeOne( (narrow: boolean): DataTableColumnContainer => @@ -73,6 +74,7 @@ export class ZHAGroupsDataTable extends LitElement { .columns=${this._columns(this.narrow)} .data=${this.groups} .id=${"group_id"} + .selectable=${this.selectable} > `; } diff --git a/src/translations/en.json b/src/translations/en.json index 9afee83ad5..f6d0619d2d 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1445,7 +1445,9 @@ "group_id": "Group ID", "members": "Members", "header": "Zigbee Group Management", - "introduction": "Create and modify zigbee groups" + "introduction": "Create and modify zigbee groups", + "remove_groups": "Remove Groups", + "removing_groups": "Removing Groups" } }, "zwave": {