Add group detail view to the ZHA config panel (#4380)

* add group details

* review comments

src/data/zha.ts

@@ -173,3 +173,12 @@ export const removeGroups = (
     type: "zha/group/remove",
     group_ids: groupIdsToRemove,
   });
+
+export const fetchGroup = (
+  hass: HomeAssistant,
+  groupId: number
+): Promise<ZHAGroup> =>
+  hass.callWS({
+    type: "zha/group",
+    group_id: groupId,
+  });

src/panels/config/zha/zha-config-panel.ts

@@ -40,6 +40,11 @@ class ZHAConfigPanel extends HassRouterPage {
             /* webpackChunkName: "zha-groups-dashboard" */ "./zha-groups-dashboard"
           ),
       },
+      group: {
+        tag: "zha-group-page",
+        load: () =>
+          import(/* webpackChunkName: "zha-group-page" */ "./zha-group-page"),
+      },
     },
   };
 
@@ -48,6 +53,9 @@ class ZHAConfigPanel extends HassRouterPage {
     el.hass = this.hass;
     el.isWide = this.isWide;
     el.narrow = this.narrow;
+    if (this._currentPage === "group") {
+      el.groupId = this.routeTail.path.substr(1);
+    }
   }
 }
 

src/panels/config/zha/zha-group-page.ts

@@ -0,0 +1,145 @@
+import {
+  property,
+  LitElement,
+  html,
+  customElement,
+  css,
+  CSSResult,
+  PropertyValues,
+} from "lit-element";
+
+import memoizeOne from "memoize-one";
+
+import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-error-screen";
+import "../ha-config-section";
+import { HomeAssistant } from "../../../types";
+import {
+  ZHADevice,
+  ZHAGroup,
+  fetchGroup,
+  removeGroups,
+} from "../../../data/zha";
+import { formatAsPaddedHex } from "./functions";
+import "./zha-device-card";
+import { navigate } from "../../../common/navigate";
+import "@polymer/paper-icon-button/paper-icon-button";
+
+@customElement("zha-group-page")
+export class ZHAGroupPage extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public group?: ZHAGroup;
+  @property() public groupId!: number;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  private _firstUpdatedCalled: boolean = false;
+
+  private _members = memoizeOne(
+    (group: ZHAGroup): ZHADevice[] => group.members
+  );
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hass && this._firstUpdatedCalled) {
+      this._fetchData();
+    }
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.hass) {
+      this._fetchData();
+    }
+    this._firstUpdatedCalled = true;
+  }
+
+  protected render() {
+    if (!this.group) {
+      return html`
+        <hass-error-screen
+          error="${this.hass.localize(
+            "ui.panel.config.zha.groups.group_not_found"
+          )}"
+        ></hass-error-screen>
+      `;
+    }
+
+    const members = this._members(this.group);
+
+    return html`
+      <hass-subpage .header=${this.group.name}>
+        <paper-icon-button
+          slot="toolbar-icon"
+          icon="hass:delete"
+          @click=${this._deleteGroup}
+        ></paper-icon-button>
+        <ha-config-section .isWide=${this.isWide}>
+          <div class="header">
+            ${this.hass.localize("ui.panel.config.zha.groups.group_info")}
+          </div>
+
+          <p slot="introduction">
+            ${this.hass.localize("ui.panel.config.zha.groups.group_details")}
+          </p>
+
+          <p><b>Name:</b> ${this.group.name}</p>
+          <p><b>Group Id:</b> ${formatAsPaddedHex(this.group.group_id)}</p>
+
+          <div class="header">
+            ${this.hass.localize("ui.panel.config.zha.groups.members")}
+          </div>
+
+          ${members.length
+            ? members.map(
+                (member) => html`
+                  <zha-device-card
+                    class="card"
+                    .hass=${this.hass}
+                    .device=${member}
+                    .narrow=${this.narrow}
+                  ></zha-device-card>
+                `
+              )
+            : html`
+                <p>
+                  This group has no members
+                </p>
+              `}
+        </ha-config-section>
+      </hass-subpage>
+    `;
+  }
+
+  private async _fetchData() {
+    if (this.groupId !== null && this.groupId !== undefined) {
+      this.group = await fetchGroup(this.hass!, this.groupId);
+    }
+  }
+
+  private async _deleteGroup(): Promise<void> {
+    await removeGroups(this.hass, [this.groupId]);
+    navigate(this, `/config/zha/groups`, true);
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        .header {
+          font-family: var(--paper-font-display1_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-display1_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-display1_-_font-size);
+          font-weight: var(--paper-font-display1_-_font-weight);
+          letter-spacing: var(--paper-font-display1_-_letter-spacing);
+          line-height: var(--paper-font-display1_-_line-height);
+          opacity: var(--dark-primary-opacity);
+        }
+
+        ha-config-section *:last-child {
+          padding-bottom: 24px;
+        }
+      `,
+    ];
+  }
+}

src/panels/config/zha/zha-groups-data-table.ts

@@ -16,6 +16,7 @@ import { DataTableColumnContainer } from "../../../components/data-table/ha-data
 // tslint:disable-next-line
 import { ZHAGroup, ZHADevice } from "../../../data/zha";
 import { formatAsPaddedHex } from "./functions";
+import { navigate } from "../../../common/navigate";
 
 export interface GroupRowData extends ZHAGroup {
   group?: GroupRowData;
@@ -38,6 +39,11 @@ export class ZHAGroupsDataTable extends LitElement {
               sortable: true,
               filterable: true,
               direction: "asc",
+              template: (name) => html`
+                <div @click=${this._handleRowClicked} style="cursor: pointer;">
+                  ${name}
+                </div>
+              `,
             },
           }
         : {
@@ -46,6 +52,11 @@ export class ZHAGroupsDataTable extends LitElement {
               sortable: true,
               filterable: true,
               direction: "asc",
+              template: (name) => html`
+                <div @click=${this._handleRowClicked} style="cursor: pointer;">
+                  ${name}
+                </div>
+              `,
             },
             group_id: {
               title: this.hass.localize("ui.panel.config.zha.groups.group_id"),
@@ -78,6 +89,13 @@ export class ZHAGroupsDataTable extends LitElement {
       ></ha-data-table>
     `;
   }
+
+  private _handleRowClicked(ev: CustomEvent) {
+    const groupId = (ev.target as HTMLElement)
+      .closest("tr")!
+      .getAttribute("data-row-id")!;
+    navigate(this, `/config/zha/group/${groupId}`);
+  }
 }
 
 declare global {

src/translations/en.json

@@ -1447,7 +1447,10 @@
             "header": "Zigbee Group Management",
             "introduction": "Create and modify zigbee groups",
             "remove_groups": "Remove Groups",
-            "removing_groups": "Removing Groups"
+            "removing_groups": "Removing Groups",
+            "group_info": "Group Information",
+            "group_details": "Here are all the details for the selected Zigbee group.",
+            "group_not_found": "Group not found!"
           }
         },
         "zwave": {