diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 3230ede7f4..3477d61624 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -63,7 +63,7 @@ export interface DataTableSortColumnData { } export interface DataTableColumnData extends DataTableSortColumnData { - title: string; + title: TemplateResult | string; type?: "numeric" | "icon" | "icon-button"; template?: (data: any, row: T) => TemplateResult | string; width?: string; @@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData { } type ClonedDataTableColumnData = Omit & { - title?: string; + title?: TemplateResult | string; }; export interface DataTableRowData { diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 3dde3113f5..b12675425b 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -70,6 +70,7 @@ class HaAutomationPicker extends LitElement { return { ...automation, name: computeStateName(automation), + last_triggered: automation.attributes.last_triggered || undefined, }; }); } @@ -97,23 +98,41 @@ class HaAutomationPicker extends LitElement { filterable: true, direction: "asc", grows: true, - template: (name, automation: any) => html` - ${name} -
- ${this.hass.localize("ui.card.automation.last_triggered")}: - ${automation.attributes.last_triggered - ? formatDateTime( - new Date(automation.attributes.last_triggered), - this.hass.locale - ) - : this.hass.localize("ui.components.relative_time.never")} -
- `, + template: narrow + ? (name, automation: any) => + html` + ${name} +
+ ${this.hass.localize("ui.card.automation.last_triggered")}: + ${automation.attributes.last_triggered + ? formatDateTime( + new Date(automation.attributes.last_triggered), + this.hass.locale + ) + : this.hass.localize("ui.components.relative_time.never")} +
+ ` + : undefined, }, }; if (!narrow) { + columns.last_triggered = { + sortable: true, + width: "20%", + title: this.hass.localize("ui.card.automation.last_triggered"), + template: (last_triggered) => html` + ${last_triggered + ? formatDateTime(new Date(last_triggered), this.hass.locale) + : this.hass.localize("ui.components.relative_time.never")} + `, + }; columns.trigger = { - title: "", + title: html` + + ${this.hass.localize("ui.card.automation.trigger")} + + `, + width: "20%", template: (_info, automation: any) => html` { - return { + (narrow, _locale): DataTableColumnContainer => { + const columns: DataTableColumnContainer = { activate: { title: "", type: "icon-button", @@ -103,50 +104,65 @@ class HaScriptPicker extends LitElement { filterable: true, direction: "asc", grows: true, - template: (name, script: any) => html` - ${name} -
- ${this.hass.localize("ui.card.automation.last_triggered")}: - ${script.attributes.last_triggered - ? formatDateTime( - new Date(script.attributes.last_triggered), - this.hass.locale - ) - : this.hass.localize("ui.components.relative_time.never")} -
- `, - }, - info: { - title: "", - type: "icon-button", - template: (_info, script) => html` - - - - `, - }, - edit: { - title: "", - type: "icon-button", - template: (_info, script: any) => html` - - - - - - `, + template: narrow + ? (name, script: any) => html` + ${name} +
+ ${this.hass.localize("ui.card.automation.last_triggered")}: + ${script.attributes.last_triggered + ? formatDateTime( + new Date(script.attributes.last_triggered), + this.hass.locale + ) + : this.hass.localize("ui.components.relative_time.never")} +
+ ` + : undefined, }, }; + if (!narrow) { + columns.last_triggered = { + sortable: true, + width: "20%", + title: this.hass.localize("ui.card.automation.last_triggered"), + template: (last_triggered) => html` + ${last_triggered + ? formatDateTime(new Date(last_triggered), this.hass.locale) + : this.hass.localize("ui.components.relative_time.never")} + `, + }; + } + columns.info = { + title: "", + type: "icon-button", + template: (_info, script) => html` + + + + `, + }; + columns.edit = { + title: "", + type: "icon-button", + template: (_info, script: any) => html` + + + + + + `, + }; + return columns; } ); @@ -158,7 +174,7 @@ class HaScriptPicker extends LitElement { back-path="/config" .route=${this.route} .tabs=${configSections.automation} - .columns=${this._columns(this.hass.language)} + .columns=${this._columns(this.narrow, this.hass.locale)} .data=${this._scripts(this.scripts, this._filteredScripts)} .activeFilters=${this._activeFilters} id="entity_id"