diff --git a/src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts b/src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts index 86c450f691a3..080ec7843218 100644 --- a/src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts +++ b/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, - preferred: string | null - ): DataTableColumnContainer => { - const columns: DataTableColumnContainer = { + (localize: LocalizeFunc): DataTableColumnContainer => { + const columns: DataTableColumnContainer = { 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, + 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} >