diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 2f611f859c..3dde3113f5 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -211,6 +211,7 @@ class HaAutomationPicker extends LitElement {
.hass=${this.hass}
.narrow=${this.narrow}
back-path="/config"
+ id="entity_id"
.route=${this.route}
.tabs=${configSections.automation}
.activeFilters=${this._activeFilters}
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index d9b141e9a2..4b18f9e79f 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -1,11 +1,19 @@
import "@material/mwc-icon-button";
-import { mdiHelpCircle, mdiPlus } from "@mdi/js";
+import {
+ mdiHelpCircle,
+ mdiInformationOutline,
+ mdiPencil,
+ mdiPencilOff,
+ mdiPlay,
+ mdiPlus,
+} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,
CSSResultArray,
customElement,
html,
+ internalProperty,
LitElement,
property,
TemplateResult,
@@ -18,8 +26,8 @@ import { stateIcon } from "../../../common/entity/state_icon";
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab";
import "../../../components/ha-icon";
-import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
+import "../../../components/ha-button-related-filter-menu";
import { forwardHaptic } from "../../../data/haptics";
import { activateScene, SceneEntity } from "../../../data/scene";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@@ -42,15 +50,26 @@ class HaSceneDashboard extends LitElement {
@property() public scenes!: SceneEntity[];
- private _scenes = memoizeOne((scenes: SceneEntity[]) => {
- return scenes.map((scene) => {
- return {
- ...scene,
- name: computeStateName(scene),
- icon: stateIcon(scene),
- };
- });
- });
+ @property() private _activeFilters?: string[];
+
+ @internalProperty() private _filteredScenes?: string[] | null;
+
+ @internalProperty() private _filterValue?;
+
+ private _scenes = memoizeOne(
+ (scenes: SceneEntity[], filteredScenes?: string[] | null) => {
+ return (filteredScenes
+ ? scenes.filter((scene) => filteredScenes!.includes(scene.entity_id))
+ : scenes
+ ).map((scene) => {
+ return {
+ ...scene,
+ name: computeStateName(scene),
+ icon: stateIcon(scene),
+ };
+ });
+ }
+ );
private _columns = memoizeOne(
(_language): DataTableColumnContainer => {
@@ -60,14 +79,15 @@ class HaSceneDashboard extends LitElement {
type: "icon-button",
template: (_toggle, scene) =>
html`
- this._activateScene(ev)}
- >
+ >
+
+
`,
},
icon: {
@@ -88,14 +108,15 @@ class HaSceneDashboard extends LitElement {
title: "",
type: "icon-button",
template: (_info, scene) => html`
-
+ >
+
+
`,
},
edit: {
@@ -109,13 +130,16 @@ class HaSceneDashboard extends LitElement {
: undefined
)}
>
-
+ >
+
+
${!scene.attributes.id
? html`
@@ -141,16 +165,27 @@ class HaSceneDashboard extends LitElement {
.route=${this.route}
.tabs=${configSections.automation}
.columns=${this._columns(this.hass.language)}
- .data=${this._scenes(this.scenes)}
id="entity_id"
+ .data=${this._scenes(this.scenes, this._filteredScenes)}
+ .activeFilters=${this._activeFilters}
.noDataText=${this.hass.localize(
"ui.panel.config.scene.picker.no_scenes"
)}
+ @clear-filter=${this._clearFilter}
hasFab
>
+
+