Add area to automation, scene, script tables (#20366)

* Add area to automation, scene, script tables * typing
2024-04-03 13:04:47 +02:00 · 2024-04-03 13:04:47 +02:00 · bfdc9a3d86
parent 5315545a4d
commit bfdc9a3d86
4 changed files with 218 additions and 180 deletions
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@ -103,6 +103,7 @@ import { showNewAutomationDialog } from "./show-dialog-new-automation";

 type AutomationItem = AutomationEntity & {
  name: string;
+  area: string | undefined;
  last_triggered?: string | undefined;
  formatted_state: string;
  category: string | undefined;
@ -152,6 +153,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
    (
      automations: AutomationEntity[],
      entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
      categoryReg?: CategoryRegistryEntry[],
      labelReg?: LabelRegistryEntry[],
      filteredAutomations?: string[] | null
@ -174,6 +176,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
        return {
          ...automation,
          name: computeStateName(automation),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
          last_triggered: automation.attributes.last_triggered || undefined,
          formatted_state: this.hass.formatEntityState(automation),
          category: category
@ -242,6 +247,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
            `;
          },
        },
+        area: {
+          title: localize("ui.panel.config.automation.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
        category: {
          title: localize("ui.panel.config.automation.picker.headers.category"),
          hidden: true,
@ -256,34 +268,32 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          template: (automation) =>
            automation.labels.map((lbl) => lbl.name).join(" "),
        },
-      };
-      columns.last_triggered = {
-        sortable: true,
-        width: "130px",
-        title: localize("ui.card.automation.last_triggered"),
-        hidden: narrow,
-        template: (automation) => {
-          if (!automation.last_triggered) {
-            return this.hass.localize("ui.components.relative_time.never");
-          }
-          const date = new Date(automation.last_triggered);
-          const now = new Date();
-          const dayDifference = differenceInDays(now, date);
-          return html`
-            ${dayDifference > 3
-              ? formatShortDateTime(date, locale, this.hass.config)
-              : relativeTime(date, locale)}
-          `;
+        last_triggered: {
+          sortable: true,
+          width: "130px",
+          title: localize("ui.card.automation.last_triggered"),
+          hidden: narrow,
+          template: (automation) => {
+            if (!automation.last_triggered) {
+              return this.hass.localize("ui.components.relative_time.never");
+            }
+            const date = new Date(automation.last_triggered);
+            const now = new Date();
+            const dayDifference = differenceInDays(now, date);
+            return html`
+              ${dayDifference > 3
+                ? formatShortDateTime(date, locale, this.hass.config)
+                : relativeTime(date, locale)}
+            `;
+          },
        },
-      };
-
-      if (!this.narrow) {
-        columns.formatted_state = {
+        formatted_state: {
          width: "82px",
          sortable: true,
          groupable: true,
          title: "",
          type: "overflow",
+          hidden: narrow,
          label: this.hass.localize("ui.panel.config.automation.picker.state"),
          template: (automation) => html`
            <ha-entity-toggle
@ -291,21 +301,20 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
              .hass=${this.hass}
            ></ha-entity-toggle>
          `,
-        };
-      }
-
-      columns.actions = {
-        title: "",
-        width: "64px",
-        type: "icon-button",
-        template: (automation) => html`
-          <ha-icon-button
-            .automation=${automation}
-            .label=${this.hass.localize("ui.common.overflow_menu")}
-            .path=${mdiDotsVertical}
-            @click=${this._showOverflowMenu}
-          ></ha-icon-button>
-        `,
+        },
+        actions: {
+          title: "",
+          width: "64px",
+          type: "icon-button",
+          template: (automation) => html`
+            <ha-icon-button
+              .automation=${automation}
+              .label=${this.hass.localize("ui.common.overflow_menu")}
+              .path=${mdiDotsVertical}
+              @click=${this._showOverflowMenu}
+            ></ha-icon-button>
+          `,
+        },
      };
      return columns;
    }
@ -401,6 +410,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
        .data=${this._automations(
          this.automations,
          this._entityReg,
+          this.hass.areas,
          this._categories,
          this._labels,
          this._filteredAutomations
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@ -91,6 +91,7 @@ import { computeCssColor } from "../../../common/color/compute-color";

 type SceneItem = SceneEntity & {
  name: string;
+  area: string | undefined;
  category: string | undefined;
  labels: LabelRegistryEntry[];
 };
@ -136,6 +137,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
    (
      scenes: SceneEntity[],
      entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
      categoryReg?: CategoryRegistryEntry[],
      labelReg?: LabelRegistryEntry[],
      filteredScenes?: string[] | null
@ -156,6 +158,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
        return {
          ...scene,
          name: computeStateName(scene),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
          category: category
            ? categoryReg?.find((cat) => cat.category_id === category)?.name
            : undefined,
@ -198,6 +203,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
              : nothing}
          `,
        },
+        area: {
+          title: localize("ui.panel.config.scene.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
        category: {
          title: localize("ui.panel.config.scene.picker.headers.category"),
          hidden: true,
@ -211,14 +223,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
          filterable: true,
          template: (scene) => scene.labels.map((lbl) => lbl.name).join(" "),
        },
-      };
-      if (!narrow) {
-        columns.state = {
+        state: {
          title: localize(
            "ui.panel.config.scene.picker.headers.last_activated"
          ),
          sortable: true,
          width: "30%",
+          hidden: narrow,
          template: (scene) => {
            const lastActivated = scene.state;
            if (!lastActivated || isUnavailableState(lastActivated)) {
@ -233,80 +244,80 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                : relativeTime(date, this.hass.locale)}
            `;
          },
-        };
-      }
-      columns.only_editable = {
-        title: "",
-        width: "56px",
-        template: (scene) =>
-          !scene.attributes.id
-            ? html`
-                <simple-tooltip animation-delay="0" position="left">
-                  ${this.hass.localize(
-                    "ui.panel.config.scene.picker.only_editable"
-                  )}
-                </simple-tooltip>
-                <ha-svg-icon
-                  .path=${mdiPencilOff}
-                  style="color: var(--secondary-text-color)"
-                ></ha-svg-icon>
-              `
-            : "",
-      };
-      columns.actions = {
-        title: "",
-        width: "64px",
-        type: "overflow-menu",
-        template: (scene) => html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            narrow
-            .items=${[
-              {
-                path: mdiInformationOutline,
-                label: this.hass.localize(
-                  "ui.panel.config.scene.picker.show_info"
-                ),
-                action: () => this._showInfo(scene),
-              },
-              {
-                path: mdiPlay,
-                label: this.hass.localize(
-                  "ui.panel.config.scene.picker.activate"
-                ),
-                action: () => this._activateScene(scene),
-              },
-              {
-                path: mdiTag,
-                label: this.hass.localize(
-                  `ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
-                ),
-                action: () => this._editCategory(scene),
-              },
-              {
-                divider: true,
-              },
-              {
-                path: mdiContentDuplicate,
-                label: this.hass.localize(
-                  "ui.panel.config.scene.picker.duplicate"
-                ),
-                action: () => this._duplicate(scene),
-                disabled: !scene.attributes.id,
-              },
-              {
-                label: this.hass.localize(
-                  "ui.panel.config.scene.picker.delete"
-                ),
-                path: mdiDelete,
-                action: () => this._deleteConfirm(scene),
-                warning: scene.attributes.id,
-                disabled: !scene.attributes.id,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
-        `,
+        },
+        only_editable: {
+          title: "",
+          width: "56px",
+          template: (scene) =>
+            !scene.attributes.id
+              ? html`
+                  <simple-tooltip animation-delay="0" position="left">
+                    ${this.hass.localize(
+                      "ui.panel.config.scene.picker.only_editable"
+                    )}
+                  </simple-tooltip>
+                  <ha-svg-icon
+                    .path=${mdiPencilOff}
+                    style="color: var(--secondary-text-color)"
+                  ></ha-svg-icon>
+                `
+              : "",
+        },
+        actions: {
+          title: "",
+          width: "64px",
+          type: "overflow-menu",
+          template: (scene) => html`
+            <ha-icon-overflow-menu
+              .hass=${this.hass}
+              narrow
+              .items=${[
+                {
+                  path: mdiInformationOutline,
+                  label: this.hass.localize(
+                    "ui.panel.config.scene.picker.show_info"
+                  ),
+                  action: () => this._showInfo(scene),
+                },
+                {
+                  path: mdiPlay,
+                  label: this.hass.localize(
+                    "ui.panel.config.scene.picker.activate"
+                  ),
+                  action: () => this._activateScene(scene),
+                },
+                {
+                  path: mdiTag,
+                  label: this.hass.localize(
+                    `ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
+                  ),
+                  action: () => this._editCategory(scene),
+                },
+                {
+                  divider: true,
+                },
+                {
+                  path: mdiContentDuplicate,
+                  label: this.hass.localize(
+                    "ui.panel.config.scene.picker.duplicate"
+                  ),
+                  action: () => this._duplicate(scene),
+                  disabled: !scene.attributes.id,
+                },
+                {
+                  label: this.hass.localize(
+                    "ui.panel.config.scene.picker.delete"
+                  ),
+                  path: mdiDelete,
+                  action: () => this._deleteConfirm(scene),
+                  warning: scene.attributes.id,
+                  disabled: !scene.attributes.id,
+                },
+              ]}
+            >
+            </ha-icon-overflow-menu>
+          `,
+        },
      };

      return columns;
@ -386,6 +397,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
        .data=${this._scenes(
          this.scenes,
          this._entityReg,
+          this.hass.areas,
          this._categories,
          this._labels,
          this._filteredScenes
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@ -93,6 +93,7 @@ import { computeCssColor } from "../../../common/color/compute-color";

 type ScriptItem = ScriptEntity & {
  name: string;
+  area: string | undefined;
  category: string | undefined;
  labels: LabelRegistryEntry[];
 };
@ -140,6 +141,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
    (
      scripts: ScriptEntity[],
      entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
      categoryReg?: CategoryRegistryEntry[],
      labelReg?: LabelRegistryEntry[],
      filteredScripts?: string[] | null
@ -162,6 +164,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
        return {
          ...script,
          name: computeStateName(script),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
          last_triggered: script.attributes.last_triggered || undefined,
          category: category
            ? categoryReg?.find((cat) => cat.category_id === category)?.name
@ -227,6 +232,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
            `;
          },
        },
+        area: {
+          title: localize("ui.panel.config.script.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
        category: {
          title: localize("ui.panel.config.script.picker.headers.category"),
          hidden: true,
@ -240,9 +252,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
          filterable: true,
          template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
        },
-      };
-      if (!narrow) {
-        columns.last_triggered = {
+        last_triggered: {
+          hidden: narrow,
          sortable: true,
          width: "40%",
          title: localize("ui.card.automation.last_triggered"),
@ -262,66 +273,67 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                : this.hass.localize("ui.components.relative_time.never")}
            `;
          },
-        };
-      }
-
-      columns.actions = {
-        title: "",
-        width: "64px",
-        type: "overflow-menu",
-        template: (script) => html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            narrow
-            .items=${[
-              {
-                path: mdiInformationOutline,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.show_info"
-                ),
-                action: () => this._showInfo(script),
-              },
-              {
-                path: mdiTag,
-                label: this.hass.localize(
-                  `ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
-                ),
-                action: () => this._editCategory(script),
-              },
-              {
-                path: mdiPlay,
-                label: this.hass.localize("ui.panel.config.script.picker.run"),
-                action: () => this._runScript(script),
-              },
-              {
-                path: mdiTransitConnection,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.show_trace"
-                ),
-                action: () => this._showTrace(script),
-              },
-              {
-                divider: true,
-              },
-              {
-                path: mdiContentDuplicate,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.duplicate"
-                ),
-                action: () => this._duplicate(script),
-              },
-              {
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.delete"
-                ),
-                path: mdiDelete,
-                action: () => this._deleteConfirm(script),
-                warning: true,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
-        `,
+        },
+        actions: {
+          title: "",
+          width: "64px",
+          type: "overflow-menu",
+          template: (script) => html`
+            <ha-icon-overflow-menu
+              .hass=${this.hass}
+              narrow
+              .items=${[
+                {
+                  path: mdiInformationOutline,
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.show_info"
+                  ),
+                  action: () => this._showInfo(script),
+                },
+                {
+                  path: mdiTag,
+                  label: this.hass.localize(
+                    `ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
+                  ),
+                  action: () => this._editCategory(script),
+                },
+                {
+                  path: mdiPlay,
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.run"
+                  ),
+                  action: () => this._runScript(script),
+                },
+                {
+                  path: mdiTransitConnection,
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.show_trace"
+                  ),
+                  action: () => this._showTrace(script),
+                },
+                {
+                  divider: true,
+                },
+                {
+                  path: mdiContentDuplicate,
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.duplicate"
+                  ),
+                  action: () => this._duplicate(script),
+                },
+                {
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.delete"
+                  ),
+                  path: mdiDelete,
+                  action: () => this._deleteConfirm(script),
+                  warning: true,
+                },
+              ]}
+            >
+            </ha-icon-overflow-menu>
+          `,
+        },
      };

      return columns;
@ -401,6 +413,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
        .data=${this._scripts(
          this.scripts,
          this._entityReg,
+          this.hass.areas,
          this._categories,
          this._labels,
          this._filteredScripts
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -2686,7 +2686,8 @@
              "trigger": "Trigger",
              "actions": "Actions",
              "state": "State",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
            },
            "bulk_action": "Action",
            "bulk_actions": {
@ -3560,7 +3561,8 @@
            "headers": {
              "name": "Name",
              "state": "State",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
            },
            "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
            "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@ -3669,7 +3671,8 @@
              "state": "State",
              "name": "Name",
              "last_activated": "Last activated",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
            },
            "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
            "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",