Add sortable last trigger column to automation and script overview (#8783)

This commit is contained in:
Bram Kragten 2021-04-01 18:02:58 +02:00 committed by GitHub
parent 5c1604e959
commit 1fb3663398
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 60 deletions

View File

@ -63,7 +63,7 @@ export interface DataTableSortColumnData {
} }
export interface DataTableColumnData extends DataTableSortColumnData { export interface DataTableColumnData extends DataTableSortColumnData {
title: string; title: TemplateResult | string;
type?: "numeric" | "icon" | "icon-button"; type?: "numeric" | "icon" | "icon-button";
template?: <T>(data: any, row: T) => TemplateResult | string; template?: <T>(data: any, row: T) => TemplateResult | string;
width?: string; width?: string;
@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
} }
type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & { type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
title?: string; title?: TemplateResult | string;
}; };
export interface DataTableRowData { export interface DataTableRowData {

View File

@ -70,6 +70,7 @@ class HaAutomationPicker extends LitElement {
return { return {
...automation, ...automation,
name: computeStateName(automation), name: computeStateName(automation),
last_triggered: automation.attributes.last_triggered || undefined,
}; };
}); });
} }
@ -97,23 +98,41 @@ class HaAutomationPicker extends LitElement {
filterable: true, filterable: true,
direction: "asc", direction: "asc",
grows: true, grows: true,
template: (name, automation: any) => html` template: narrow
${name} ? (name, automation: any) =>
<div class="secondary"> html`
${this.hass.localize("ui.card.automation.last_triggered")}: ${name}
${automation.attributes.last_triggered <div class="secondary">
? formatDateTime( ${this.hass.localize("ui.card.automation.last_triggered")}:
new Date(automation.attributes.last_triggered), ${automation.attributes.last_triggered
this.hass.locale ? formatDateTime(
) new Date(automation.attributes.last_triggered),
: this.hass.localize("ui.components.relative_time.never")} this.hass.locale
</div> )
`, : this.hass.localize("ui.components.relative_time.never")}
</div>
`
: undefined,
}, },
}; };
if (!narrow) { 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 = { columns.trigger = {
title: "", title: html`
<mwc-button style="visibility: hidden">
${this.hass.localize("ui.card.automation.trigger")}
</mwc-button>
`,
width: "20%",
template: (_info, automation: any) => html` template: (_info, automation: any) => html`
<mwc-button <mwc-button
.automation=${automation} .automation=${automation}

View File

@ -66,14 +66,15 @@ class HaScriptPicker extends LitElement {
...script, ...script,
name: computeStateName(script), name: computeStateName(script),
icon: stateIcon(script), icon: stateIcon(script),
last_triggered: script.attributes.last_triggered || undefined,
}; };
}); });
} }
); );
private _columns = memoizeOne( private _columns = memoizeOne(
(_language): DataTableColumnContainer => { (narrow, _locale): DataTableColumnContainer => {
return { const columns: DataTableColumnContainer = {
activate: { activate: {
title: "", title: "",
type: "icon-button", type: "icon-button",
@ -103,50 +104,65 @@ class HaScriptPicker extends LitElement {
filterable: true, filterable: true,
direction: "asc", direction: "asc",
grows: true, grows: true,
template: (name, script: any) => html` template: narrow
${name} ? (name, script: any) => html`
<div class="secondary"> ${name}
${this.hass.localize("ui.card.automation.last_triggered")}: <div class="secondary">
${script.attributes.last_triggered ${this.hass.localize("ui.card.automation.last_triggered")}:
? formatDateTime( ${script.attributes.last_triggered
new Date(script.attributes.last_triggered), ? formatDateTime(
this.hass.locale new Date(script.attributes.last_triggered),
) this.hass.locale
: this.hass.localize("ui.components.relative_time.never")} )
</div> : this.hass.localize("ui.components.relative_time.never")}
`, </div>
}, `
info: { : undefined,
title: "",
type: "icon-button",
template: (_info, script) => html`
<mwc-icon-button
.script=${script}
@click=${this._showInfo}
title="${this.hass.localize(
"ui.panel.config.script.picker.show_info"
)}"
>
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
</mwc-icon-button>
`,
},
edit: {
title: "",
type: "icon-button",
template: (_info, script: any) => html`
<a href="/config/script/edit/${script.entity_id}">
<mwc-icon-button
title="${this.hass.localize(
"ui.panel.config.script.picker.edit_script"
)}"
>
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
</mwc-icon-button>
</a>
`,
}, },
}; };
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`
<mwc-icon-button
.script=${script}
@click=${this._showInfo}
title="${this.hass.localize(
"ui.panel.config.script.picker.show_info"
)}"
>
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
</mwc-icon-button>
`,
};
columns.edit = {
title: "",
type: "icon-button",
template: (_info, script: any) => html`
<a href="/config/script/edit/${script.entity_id}">
<mwc-icon-button
title="${this.hass.localize(
"ui.panel.config.script.picker.edit_script"
)}"
>
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
</mwc-icon-button>
</a>
`,
};
return columns;
} }
); );
@ -158,7 +174,7 @@ class HaScriptPicker extends LitElement {
back-path="/config" back-path="/config"
.route=${this.route} .route=${this.route}
.tabs=${configSections.automation} .tabs=${configSections.automation}
.columns=${this._columns(this.hass.language)} .columns=${this._columns(this.narrow, this.hass.locale)}
.data=${this._scripts(this.scripts, this._filteredScripts)} .data=${this._scripts(this.scripts, this._filteredScripts)}
.activeFilters=${this._activeFilters} .activeFilters=${this._activeFilters}
id="entity_id" id="entity_id"