Add area dashboard settings (#24619)

* Add hidden and order settings * Share path logic * Add editor to sort and filter areas * Remove unused form * Add areas strategy in the dashboard picker * Move display editor * Fix min width * Add leading icon slot to expansion panel * Fix left chevron icon with dynamic property * Use area display in original state strategy * Rename selector * Rename to area_display * Remove ha-expansion-panel changes * Remove expanded * Fix rebase * Display all entities in the areas strategy overview (#24663) * Don't use subgroup * Add all entities in the overview * Add tile card features for area view
2025-11-09 02:49:51 +00:00 · 2025-03-17 22:04:01 +01:00
parent 7aaea37db7
commit 64b9104199
21 changed files with 779 additions and 595 deletions
--- a/src/components/ha-areas-display-editor.ts
+++ b/src/components/ha-areas-display-editor.ts
@@ -0,0 +1,98 @@
+import { mdiTextureBox } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { getAreaContext } from "../common/entity/context/get_area_context";
+import { areaCompare } from "../data/area_registry";
+import type { HomeAssistant } from "../types";
+import "./ha-expansion-panel";
+import "./ha-items-display-editor";
+import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
+import "./ha-svg-icon";
+import "./ha-textfield";
+
+export interface AreasDisplayValue {
+  hidden?: string[];
+  order?: string[];
+}
+
+@customElement("ha-areas-display-editor")
+export class HaAreasDisplayEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public value?: AreasDisplayValue;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public expanded = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render(): TemplateResult {
+    const compare = areaCompare(this.hass.areas, this.value?.order);
+
+    const areas = Object.values(this.hass.areas).sort((areaA, areaB) =>
+      compare(areaA.area_id, areaB.area_id)
+    );
+
+    const items: DisplayItem[] = areas.map((area) => {
+      const { floor } = getAreaContext(area.area_id, this.hass!);
+      return {
+        value: area.area_id,
+        label: area.name,
+        icon: area.icon ?? undefined,
+        iconPath: mdiTextureBox,
+        description: floor?.name,
+      };
+    });
+
+    const value: DisplayValue = {
+      order: this.value?.order ?? [],
+      hidden: this.value?.hidden ?? [],
+    };
+
+    return html`
+      <ha-expansion-panel
+        outlined
+        .header=${this.label}
+        .expanded=${this.expanded}
+      >
+        <ha-svg-icon slot="leading-icon" .path=${mdiTextureBox}></ha-svg-icon>
+        <ha-items-display-editor
+          .hass=${this.hass}
+          .items=${items}
+          .value=${value}
+          @value-changed=${this._areaDisplayChanged}
+        ></ha-items-display-editor>
+      </ha-expansion-panel>
+    `;
+  }
+
+  private async _areaDisplayChanged(ev) {
+    ev.stopPropagation();
+    const value = ev.detail.value as DisplayValue;
+    const newValue: AreasDisplayValue = {
+      ...this.value,
+      ...value,
+    };
+    if (newValue.hidden?.length === 0) {
+      delete newValue.hidden;
+    }
+    if (newValue.order?.length === 0) {
+      delete newValue.order;
+    }
+
+    fireEvent(this, "value-changed", { value: newValue });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-areas-display-editor": HaAreasDisplayEditor;
+  }
+}