mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Change automation picker to data table (#5344)
* Change automation picker to data-table * Update ha-automation-picker.ts * Update ha-automation-picker.ts * Update ha-automation-picker.ts * Add edit button + disabled tooltip * Fix translation key * Remove unused * Comments and fixes * Update ha-automation-picker.ts
This commit is contained in:
Bram Kragten
GitHub
parent
5a2e08647f
commit
fca286d6c0
@ -69,7 +69,7 @@ export interface DataTableSortColumnData {
|
||||
|
||||
export interface DataTableColumnData extends DataTableSortColumnData {
|
||||
title: string;
|
||||
type?: "numeric" | "icon";
|
||||
type?: "numeric" | "icon" | "icon-button";
|
||||
template?: <T>(data: any, row: T) => TemplateResult | string;
|
||||
width?: string;
|
||||
maxWidth?: string;
|
||||
@ -228,10 +228,13 @@ export class HaDataTable extends LitElement {
|
||||
const sorted = key === this._sortColumn;
|
||||
const classes = {
|
||||
"mdc-data-table__header-cell--numeric": Boolean(
|
||||
column.type && column.type === "numeric"
|
||||
column.type === "numeric"
|
||||
),
|
||||
"mdc-data-table__header-cell--icon": Boolean(
|
||||
column.type && column.type === "icon"
|
||||
column.type === "icon"
|
||||
),
|
||||
"mdc-data-table__header-cell--icon-button": Boolean(
|
||||
column.type === "icon-button"
|
||||
),
|
||||
sortable: Boolean(column.sortable),
|
||||
"not-sorted": Boolean(column.sortable && !sorted),
|
||||
@ -318,10 +321,13 @@ export class HaDataTable extends LitElement {
|
||||
<div
|
||||
class="mdc-data-table__cell ${classMap({
|
||||
"mdc-data-table__cell--numeric": Boolean(
|
||||
column.type && column.type === "numeric"
|
||||
column.type === "numeric"
|
||||
),
|
||||
"mdc-data-table__cell--icon": Boolean(
|
||||
column.type && column.type === "icon"
|
||||
column.type === "icon"
|
||||
),
|
||||
"mdc-data-table__cell--icon-button": Boolean(
|
||||
column.type === "icon-button"
|
||||
),
|
||||
grows: Boolean(column.grows),
|
||||
})}"
|
||||
@ -614,6 +620,16 @@ export class HaDataTable extends LitElement {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell--icon-button,
|
||||
.mdc-data-table__cell--icon-button {
|
||||
width: 40px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mdc-data-table__cell--icon-button a {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell {
|
||||
font-family: Roboto, sans-serif;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@ -7,18 +7,13 @@ import {
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/entity/ha-entity-toggle";
|
||||
|
||||
import "../ha-config-section";
|
||||
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
@ -27,12 +22,16 @@ import {
|
||||
AutomationEntity,
|
||||
showAutomationEditor,
|
||||
AutomationConfig,
|
||||
triggerAutomation,
|
||||
} from "../../../data/automation";
|
||||
import { formatDateTime } from "../../../common/datetime/format_date_time";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { showThingtalkDialog } from "./show-dialog-thingtalk";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
|
||||
@customElement("ha-automation-picker")
|
||||
class HaAutomationPicker extends LitElement {
|
||||
@ -42,139 +41,152 @@ class HaAutomationPicker extends LitElement {
|
||||
@property() public route!: Route;
|
||||
@property() public automations!: AutomationEntity[];
|
||||
|
||||
private _automations = memoizeOne((automations: AutomationEntity[]) => {
|
||||
return automations.map((automation) => {
|
||||
return {
|
||||
...automation,
|
||||
name: computeStateName(automation),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
private _columns = memoizeOne(
|
||||
(narrow: boolean, _language): DataTableColumnContainer => {
|
||||
const columns: DataTableColumnContainer = {
|
||||
toggle: {
|
||||
title: "",
|
||||
type: "icon",
|
||||
template: (_toggle, automation) =>
|
||||
html`
|
||||
<ha-entity-toggle
|
||||
.hass=${this.hass}
|
||||
.stateObj=${automation}
|
||||
></ha-entity-toggle>
|
||||
`,
|
||||
},
|
||||
name: {
|
||||
title: this.hass.localize(
|
||||
"ui.panel.config.automation.picker.headers.name"
|
||||
),
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
direction: "asc",
|
||||
grows: true,
|
||||
template: (name, automation: any) => html`
|
||||
${name}
|
||||
<div class="secondary">
|
||||
${this.hass.localize("ui.card.automation.last_triggered")}:
|
||||
${automation.attributes.last_triggered
|
||||
? formatDateTime(
|
||||
new Date(automation.attributes.last_triggered),
|
||||
this.hass.language
|
||||
)
|
||||
: this.hass.localize("ui.components.relative_time.never")}
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
};
|
||||
if (!narrow) {
|
||||
columns.execute = {
|
||||
title: "",
|
||||
template: (_info, automation) => html`
|
||||
<mwc-button .automation=${automation} @click=${this._execute}>
|
||||
${this.hass.localize("ui.card.automation.trigger")}
|
||||
</mwc-button>
|
||||
`,
|
||||
};
|
||||
}
|
||||
columns.info = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, automation) => html`
|
||||
<paper-icon-button
|
||||
.automation=${automation}
|
||||
@click=${this._showInfo}
|
||||
icon="hass:information-outline"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.show_info_automation"
|
||||
)}"
|
||||
></paper-icon-button>
|
||||
`,
|
||||
};
|
||||
columns.edit = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, automation: any) => html`
|
||||
<a
|
||||
href=${ifDefined(
|
||||
automation.attributes.id
|
||||
? `/config/automation/edit/${automation.attributes.id}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<paper-icon-button
|
||||
.icon=${automation.attributes.id
|
||||
? "hass:pencil"
|
||||
: "hass:pencil-off"}
|
||||
.disabled=${!automation.attributes.id}
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.show_info_automation"
|
||||
)}"
|
||||
></paper-icon-button>
|
||||
</a>
|
||||
${!automation.attributes.id
|
||||
? html`
|
||||
<paper-tooltip position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.only_editable"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
`,
|
||||
};
|
||||
return columns;
|
||||
}
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
<hass-tabs-subpage-data-table
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.columns=${this._columns(this.narrow, this.hass.language)}
|
||||
.data=${this._automations(this.automations)}
|
||||
id="entity_id"
|
||||
.noDataText=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.no_automations"
|
||||
)}
|
||||
>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize("ui.panel.config.automation.picker.header")}
|
||||
</div>
|
||||
<div slot="introduction">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.introduction"
|
||||
)}
|
||||
<p>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/automation/editor/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.learn_more"
|
||||
)}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ha-card
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.pick_automation"
|
||||
)}
|
||||
>
|
||||
${this.automations.length === 0
|
||||
? html`
|
||||
<div class="card-content">
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.no_automations"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
: this.automations.map(
|
||||
(automation) => html`
|
||||
|
||||
<div class='automation'>
|
||||
<ha-entity-toggle
|
||||
.hass=${this.hass}
|
||||
.stateObj=${automation}
|
||||
></ha-entity-toggle>
|
||||
|
||||
<paper-item-body two-line>
|
||||
<div>${computeStateName(automation)}</div>
|
||||
<div secondary>
|
||||
${this.hass.localize(
|
||||
"ui.card.automation.last_triggered"
|
||||
)}: ${
|
||||
automation.attributes.last_triggered
|
||||
? formatDateTime(
|
||||
new Date(automation.attributes.last_triggered),
|
||||
this.hass.language
|
||||
)
|
||||
: this.hass.localize("ui.components.relative_time.never")
|
||||
}
|
||||
</div>
|
||||
</paper-item-body>
|
||||
<div class='actions'>
|
||||
<paper-icon-button
|
||||
.automation=${automation}
|
||||
@click=${this._showInfo}
|
||||
icon="hass:information-outline"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.show_info_automation"
|
||||
)}"
|
||||
></paper-icon-button>
|
||||
<a
|
||||
href=${ifDefined(
|
||||
automation.attributes.id
|
||||
? `/config/automation/edit/${automation.attributes.id}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<paper-icon-button
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.edit_automation"
|
||||
)}"
|
||||
icon="hass:pencil"
|
||||
.disabled=${!automation.attributes.id}
|
||||
></paper-icon-button>
|
||||
${
|
||||
!automation.attributes.id
|
||||
? html`
|
||||
<paper-tooltip position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.only_editable"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
)}
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
<div>
|
||||
<ha-fab
|
||||
slot="fab"
|
||||
?is-wide=${this.isWide}
|
||||
?narrow=${this.narrow}
|
||||
icon="hass:plus"
|
||||
title=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.add_automation"
|
||||
)}
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
@click=${this._createNew}
|
||||
></ha-fab>
|
||||
</div>
|
||||
</hass-tabs-subpage>
|
||||
</hass-tabs-subpage-data-table>
|
||||
<ha-fab
|
||||
slot="fab"
|
||||
?is-wide=${this.isWide}
|
||||
?narrow=${this.narrow}
|
||||
icon="hass:plus"
|
||||
title=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.add_automation"
|
||||
)}
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
@click=${this._createNew}
|
||||
></ha-fab>
|
||||
`;
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
ev.stopPropagation();
|
||||
const entityId = ev.currentTarget.automation.entity_id;
|
||||
fireEvent(this, "hass-more-info", { entityId });
|
||||
}
|
||||
|
||||
private _execute(ev) {
|
||||
const entityId = ev.currentTarget.automation.entity_id;
|
||||
triggerAutomation(this.hass, entityId);
|
||||
}
|
||||
|
||||
private _createNew() {
|
||||
if (!isComponentLoaded(this.hass, "cloud")) {
|
||||
showAutomationEditor(this);
|
||||
@ -190,33 +202,6 @@ class HaAutomationPicker extends LitElement {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.automation {
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
align-items: center;
|
||||
padding: 0 8px 0 16px;
|
||||
}
|
||||
|
||||
.automation a[href] {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
ha-entity-toggle {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ha-fab {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
@ -242,10 +227,6 @@ class HaAutomationPicker extends LitElement {
|
||||
right: auto;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1002,7 +1002,10 @@
|
||||
"edit_automation": "Edit automation",
|
||||
"show_info_automation": "Show info about automation",
|
||||
"delete_automation": "Delete automation",
|
||||
"delete_confirm": "Are you sure you want to delete this automation?"
|
||||
"delete_confirm": "Are you sure you want to delete this automation?",
|
||||
"headers": {
|
||||
"name": "Name"
|
||||
}
|
||||
},
|
||||
"editor": {
|
||||
"enable_disable": "Enable/Disable automation",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user