mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add filtering by devices/areas to scripts (#8748)
This commit is contained in:
Bram Kragten
GitHub
parent
fed63f645d
commit
db3f5447ca
@ -1,11 +1,18 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiHelpCircle, mdiPlus } from "@mdi/js";
|
||||
import {
|
||||
mdiHelpCircle,
|
||||
mdiInformationOutline,
|
||||
mdiPencil,
|
||||
mdiPlay,
|
||||
mdiPlus,
|
||||
} from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
@ -17,8 +24,8 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { stateIcon } from "../../../common/entity/state_icon";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-button-related-filter-menu";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { triggerScript } from "../../../data/script";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
@ -41,15 +48,28 @@ class HaScriptPicker extends LitElement {
|
||||
|
||||
@property() public route!: Route;
|
||||
|
||||
private _scripts = memoizeOne((scripts: HassEntity[]) => {
|
||||
return scripts.map((script) => {
|
||||
return {
|
||||
...script,
|
||||
name: computeStateName(script),
|
||||
icon: stateIcon(script),
|
||||
};
|
||||
});
|
||||
});
|
||||
@property() private _activeFilters?: string[];
|
||||
|
||||
@internalProperty() private _filteredScripts?: string[] | null;
|
||||
|
||||
@internalProperty() private _filterValue?;
|
||||
|
||||
private _scripts = memoizeOne(
|
||||
(scripts: HassEntity[], filteredScripts?: string[] | null) => {
|
||||
return (filteredScripts
|
||||
? scripts.filter((script) =>
|
||||
filteredScripts!.includes(script.entity_id)
|
||||
)
|
||||
: scripts
|
||||
).map((script) => {
|
||||
return {
|
||||
...script,
|
||||
name: computeStateName(script),
|
||||
icon: stateIcon(script),
|
||||
};
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
private _columns = memoizeOne(
|
||||
(_language): DataTableColumnContainer => {
|
||||
@ -59,14 +79,15 @@ class HaScriptPicker extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_toggle, script) =>
|
||||
html`
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
.script=${script}
|
||||
icon="hass:play"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.script.picker.run_script"
|
||||
)}"
|
||||
@click=${(ev: Event) => this._runScript(ev)}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`,
|
||||
},
|
||||
icon: {
|
||||
@ -99,14 +120,15 @@ class HaScriptPicker extends LitElement {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, script) => html`
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
.script=${script}
|
||||
@click=${this._showInfo}
|
||||
icon="hass:information-outline"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.script.picker.show_info"
|
||||
)}"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`,
|
||||
},
|
||||
edit: {
|
||||
@ -114,12 +136,13 @@ class HaScriptPicker extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_info, script: any) => html`
|
||||
<a href="/config/script/edit/${script.entity_id}">
|
||||
<ha-icon-button
|
||||
icon="hass:pencil"
|
||||
<mwc-icon-button
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.script.picker.edit_script"
|
||||
)}"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</a>
|
||||
`,
|
||||
},
|
||||
@ -136,16 +159,27 @@ class HaScriptPicker extends LitElement {
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.columns=${this._columns(this.hass.language)}
|
||||
.data=${this._scripts(this.scripts)}
|
||||
.data=${this._scripts(this.scripts, this._filteredScripts)}
|
||||
.activeFilters=${this._activeFilters}
|
||||
id="entity_id"
|
||||
.noDataText=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.no_scripts"
|
||||
)}
|
||||
@clear-filter=${this._clearFilter}
|
||||
hasFab
|
||||
>
|
||||
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-button-related-filter-menu
|
||||
slot="filter-menu"
|
||||
corner="BOTTOM_START"
|
||||
.narrow=${this.narrow}
|
||||
.hass=${this.hass}
|
||||
.value=${this._filterValue}
|
||||
@related-changed=${this._relatedFilterChanged}
|
||||
>
|
||||
</ha-button-related-filter-menu>
|
||||
<a href="/config/script/edit/new" slot="fab">
|
||||
<ha-fab
|
||||
?is-wide=${this.isWide}
|
||||
@ -163,6 +197,22 @@ class HaScriptPicker extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private _relatedFilterChanged(ev: CustomEvent) {
|
||||
this._filterValue = ev.detail.value;
|
||||
if (!this._filterValue) {
|
||||
this._clearFilter();
|
||||
return;
|
||||
}
|
||||
this._activeFilters = [ev.detail.filter];
|
||||
this._filteredScripts = ev.detail.items.script || null;
|
||||
}
|
||||
|
||||
private _clearFilter() {
|
||||
this._filteredScripts = undefined;
|
||||
this._activeFilters = undefined;
|
||||
this._filterValue = undefined;
|
||||
}
|
||||
|
||||
private async _runScript(ev) {
|
||||
ev.stopPropagation();
|
||||
const script = ev.currentTarget.script as HassEntity;
|
||||
|
||||
@ -1215,7 +1215,7 @@
|
||||
"introduction": "The automation editor allows you to create and edit automations. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
|
||||
"learn_more": "Learn more about automations",
|
||||
"pick_automation": "Pick automation to edit",
|
||||
"no_automations": "We couldn’t find any editable automations",
|
||||
"no_automations": "We couldn’t find any automations",
|
||||
"add_automation": "Add automation",
|
||||
"only_editable": "Only automations defined in automations.yaml are editable.",
|
||||
"dev_only_editable": "Only automations defined in automations.yaml are debuggable.",
|
||||
@ -1609,7 +1609,7 @@
|
||||
"header": "Script Editor",
|
||||
"introduction": "The script editor allows you to create and edit scripts. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
|
||||
"learn_more": "Learn more about scripts",
|
||||
"no_scripts": "We couldn’t find any editable scripts",
|
||||
"no_scripts": "We couldn’t find any scripts",
|
||||
"add_script": "Add script",
|
||||
"show_info": "Show info about script",
|
||||
"run_script": "Run script",
|
||||
@ -1660,7 +1660,7 @@
|
||||
"introduction": "The scene editor allows you to create and edit scenes. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
|
||||
"learn_more": "Learn more about scenes",
|
||||
"pick_scene": "Pick scene to edit",
|
||||
"no_scenes": "We couldn’t find any editable scenes",
|
||||
"no_scenes": "We couldn’t find any scenes",
|
||||
"add_scene": "Add scene",
|
||||
"only_editable": "Only scenes defined in scenes.yaml are editable.",
|
||||
"edit_scene": "Edit scene",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user