Collapsible sections in entity configuration (#177)

Author: farmio

src/components/knx-configure-entity-options.ts

@@ -63,30 +63,26 @@ export const renderConfigureEntityCard = (
         ></ha-selector-text>
       </ha-settings-row>
       <ha-expansion-panel .header=${"Advanced"} outlined>
-        <ha-settings-row narrow>
-          <div slot="heading">Entity settings</div>
-          <div slot="description">Description</div>
-          <ha-selector-select
-            .hass=${hass}
-            .label=${"Entity category"}
-            .helper=${"Leave empty for standard behaviour."}
-            .required=${false}
-            .selector=${{
-              select: {
-                multiple: false,
-                custom_value: false,
-                mode: "dropdown",
-                options: [
-                  { value: "config", label: "Config" },
-                  { value: "diagnostic", label: "Diagnostic" },
-                ],
-              },
-            }}
-            .key=${"entity_category"}
-            .value=${config.entity_category}
-            @value-changed=${updateConfig}
-          ></ha-selector-select>
-        </ha-settings-row>
+        <ha-selector-select
+          .hass=${hass}
+          .label=${"Entity category"}
+          .helper=${"Leave empty for standard behaviour."}
+          .required=${false}
+          .selector=${{
+            select: {
+              multiple: false,
+              custom_value: false,
+              mode: "dropdown",
+              options: [
+                { value: "config", label: "Config" },
+                { value: "diagnostic", label: "Diagnostic" },
+              ],
+            },
+          }}
+          .key=${"entity_category"}
+          .value=${config.entity_category}
+          @value-changed=${updateConfig}
+        ></ha-selector-select>
       </ha-expansion-panel>
     </ha-card>
   `;

src/components/knx-configure-entity.ts

@@ -17,10 +17,10 @@ import "./knx-sync-state-selector-row";
 import { renderConfigureEntityCard } from "./knx-configure-entity-options";
 import { KNXLogger } from "../tools/knx-logger";
 import { extractValidationErrors } from "../utils/validation";
-import type { EntityData, ErrorDescription } from "../types/entity_data";
+import type { EntityData, ErrorDescription, KnxEntityData } from "../types/entity_data";
 import type { KNX } from "../types/knx";
 import type { PlatformInfo } from "../utils/common";
-import type { SettingsGroup, SelectorSchema, GroupSelect } from "../utils/schema";
+import type { SettingsGroup, SelectorSchema, GroupSelect, GASchema } from "../utils/schema";
 
 const logger = new KNXLogger("knx-configure-entity");
 
@@ -91,13 +91,53 @@ export class KNXConfigureEntity extends LitElement {
   }
 
   _generateSettingsGroup(group: SettingsGroup, errors?: ErrorDescription[]) {
+    if (group.collapsible === true) {
+      return html` <ha-expansion-panel
+        outlined
+        .header=${group.heading}
+        .secondary=${group.description}
+        .expanded=${this._groupHasGroupAddressInConfig(group)}
+        >${this._generateItems(group.selectors, errors)}
+      </ha-expansion-panel>`;
+    }
     return html` <ha-settings-row narrow>
       <div slot="heading">${group.heading}</div>
       <div slot="description">${group.description}</div>
       ${this._generateItems(group.selectors, errors)}
     </ha-settings-row>`;
   }
 
+  _groupHasGroupAddressInConfig(group: SettingsGroup) {
+    if (this.config === undefined) {
+      return false;
+    }
+    return group.selectors.some((selector) => {
+      if (selector.type === "group_address")
+        return this._hasGroupAddressInConfig(selector, this.config!.knx);
+      if (selector.type === "group_select")
+        return selector.options.some((options) =>
+          options.schema.some((schema) => {
+            if (schema.type === "settings_group") return this._groupHasGroupAddressInConfig(schema);
+            if (schema.type === "group_address")
+              return this._hasGroupAddressInConfig(schema, this.config!.knx);
+            return false;
+          }),
+        );
+      return false;
+    });
+  }
+
+  _hasGroupAddressInConfig(ga_selector: GASchema, knxData: KnxEntityData) {
+    if (!(ga_selector.name in knxData)) return false;
+
+    const knxEntry = knxData[ga_selector.name];
+    if (knxEntry.write !== undefined) return true;
+    if (knxEntry.state !== undefined) return true;
+    if (knxEntry.passive?.length) return true;
+
+    return false;
+  }
+
   _generateItems(selectors: SelectorSchema[], errors?: ErrorDescription[]) {
     return html`${selectors.map((selector: SelectorSchema) =>
       this._generateItem(selector, errors),
@@ -245,7 +285,18 @@ export class KNXConfigureEntity extends LitElement {
         }
       }
 
+      ha-expansion-panel {
+        margin-bottom: 16px;
+      }
+      ha-expansion-panel > :first-child {
+        margin-top: 16px;
+      }
+      ha-expansion-panel > ha-settings-row:first-child {
+        border: 0;
+      }
+
       ha-settings-row {
+        margin-bottom: 16px;
         padding: 0;
       }
       ha-control-select {

src/utils/schema.ts

@@ -7,6 +7,7 @@ export type SettingsGroup = {
   description: string;
   selectors: SelectorSchema[];
   advanced?: boolean;
+  collapsible?: boolean;
 };
 
 export type SelectorSchema =
@@ -22,7 +23,7 @@ export type SelectorSchema =
       helper?: string;
     };
 
-type GASchema = {
+export type GASchema = {
   name: string;
   type: "group_address";
   label?: string;
@@ -141,6 +142,7 @@ export const lightSchema: SettingsGroup[] = [
     type: "settings_group",
     heading: "Color temperature",
     description: "Control the lights color temperature.",
+    collapsible: true,
     selectors: [
       {
         name: "ga_color_temp",
@@ -206,6 +208,7 @@ export const lightSchema: SettingsGroup[] = [
     type: "settings_group",
     heading: "Color",
     description: "Control the light color.",
+    collapsible: true,
     selectors: [
       {
         type: "group_select",