Assist devices: Move logic from column to data (#19359)

* Move logic from column to data

* Type

src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts

@@ -1,10 +1,10 @@
 import { LitElement, PropertyValues, html } from "lit";
-import memoizeOne from "memoize-one";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../layouts/hass-subpage";
+import memoizeOne from "memoize-one";
+import { navigate } from "../../../../common/navigate";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../components/data-table/ha-data-table";
-import { HomeAssistant } from "../../../../types";
 import {
   AssistDevice,
   AssistPipeline,
@@ -12,11 +12,13 @@ import {
   listAssistPipelines,
 } from "../../../../data/assist_pipeline";
 import { computeDeviceName } from "../../../../data/device_registry";
-import { navigate } from "../../../../common/navigate";
+import "../../../../layouts/hass-subpage";
+import { HomeAssistant } from "../../../../types";
 
-interface AssistDeviceExtra {
-  pipeline: string | undefined;
-  last_used: string | undefined;
+interface AssistDeviceExtra extends AssistDevice {
+  name: string;
+  pipeline: string;
+  area: string;
 }
 
 @customElement("ha-config-voice-assistants-assist-devices")
@@ -29,65 +31,34 @@ class AssistDevicesPage extends LitElement {
 
   @state() private _preferred: string | null = null;
 
-  @state() private _devices?: (AssistDevice | AssistDeviceExtra)[];
+  @state() private _devices?: AssistDevice[];
 
   private _columns = memoizeOne(
-    (
-      hass: HomeAssistant,
-      pipelines: Record<string, AssistPipeline>,
-      preferred: string | null
-    ): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer<AssistDevice> = {
+    (localize: LocalizeFunc): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<AssistDeviceExtra> = {
         name: {
-          title: hass.localize(
+          title: localize(
             "ui.panel.config.voice_assistants.assistants.pipeline.devices.device"
           ),
-          width: "50%",
           filterable: true,
           sortable: true,
-          template: (assistDevice) =>
-            computeDeviceName(hass.devices[assistDevice.device_id], hass),
+          grows: true,
         },
         pipeline: {
-          title: hass.localize(
+          title: localize(
             "ui.panel.config.voice_assistants.assistants.pipeline.devices.pipeline"
           ),
           width: "30%",
           filterable: true,
           sortable: true,
-          template: (assistDevice) => {
-            let selected = hass.states[assistDevice.pipeline_entity].state;
-            if (!pipelines) {
-              return selected;
-            }
-            let isPreferred = false;
-
-            if (selected === "preferred") {
-              isPreferred = true;
-              selected = preferred!;
-            }
-
-            const name = pipelines[selected].name;
-
-            return isPreferred
-              ? hass.localize("ui.components.pipeline-picker.preferred", {
-                  preferred: name,
-                })
-              : name;
-          },
         },
         area: {
-          title: hass.localize(
+          title: localize(
             "ui.panel.config.voice_assistants.assistants.pipeline.devices.area"
           ),
-          width: "20%",
-          template: (assistDevice) => {
-            const device = hass.devices[assistDevice.device_id];
-            return (
-              (device && device.area_id && hass.areas[device.area_id]?.name) ||
-              ""
-            );
-          },
+          filterable: true,
+          sortable: true,
+          width: "30%",
         },
       };
 
@@ -95,6 +66,38 @@ class AssistDevicesPage extends LitElement {
     }
   );
 
+  private _data = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      deviceReg: HomeAssistant["devices"],
+      areaReg: HomeAssistant["areas"],
+      states: HomeAssistant["states"],
+      pipelines: Record<string, AssistPipeline>,
+      preferred: string | null,
+      assistDevices: AssistDevice[]
+    ): AssistDeviceExtra[] =>
+      assistDevices.map((assistDevice) => {
+        const device = deviceReg[assistDevice.device_id];
+        const selected = states[assistDevice.pipeline_entity]?.state;
+        const isPreferred = selected === "preferred";
+        const pipeline = isPreferred ? preferred : selected;
+        const pipelineName =
+          (pipeline && pipelines[pipeline]?.name) || pipeline;
+
+        return {
+          ...assistDevice,
+          name: device ? computeDeviceName(device, this.hass) : "",
+          pipeline: isPreferred
+            ? localize("ui.components.pipeline-picker.preferred", {
+                preferred: pipelineName,
+              })
+            : pipelineName || "",
+          area:
+            (device && device.area_id && areaReg[device.area_id]?.name) || "",
+        };
+      })
+  );
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -126,8 +129,16 @@ class AssistDevicesPage extends LitElement {
           clickable
           id="device_id"
           .hass=${this.hass}
-          .columns=${this._columns(this.hass, this._pipelines, this._preferred)}
-          .data=${this._devices || []}
+          .columns=${this._columns(this.hass.localize)}
+          .data=${this._data(
+            this.hass.localize,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.states,
+            this._pipelines,
+            this._preferred,
+            this._devices || []
+          )}
           auto-height
           @row-click=${this._handleRowClicked}
         ></ha-data-table>