mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Add filtering and grouping to scenes and scripts (#20203)
* Add filtering and grouping to scenes and scripts * hide labels when there are none * Update ha-data-table.ts
This commit is contained in:
parent
68935d46ce
commit
e08a0c44ba
@ -533,15 +533,20 @@ export class HaDataTable extends LitElement {
|
|||||||
}, {});
|
}, {});
|
||||||
const groupedItems: DataTableRowData[] = [];
|
const groupedItems: DataTableRowData[] = [];
|
||||||
Object.entries(sorted).forEach(([groupName, rows]) => {
|
Object.entries(sorted).forEach(([groupName, rows]) => {
|
||||||
groupedItems.push({
|
if (
|
||||||
append: true,
|
groupName !== UNDEFINED_GROUP_KEY ||
|
||||||
content: html`<div
|
Object.keys(sorted).length > 1
|
||||||
class="mdc-data-table__cell group-header"
|
) {
|
||||||
role="cell"
|
groupedItems.push({
|
||||||
>
|
append: true,
|
||||||
${groupName === UNDEFINED_GROUP_KEY ? "" : groupName || ""}
|
content: html`<div
|
||||||
</div>`,
|
class="mdc-data-table__cell group-header"
|
||||||
});
|
role="cell"
|
||||||
|
>
|
||||||
|
${groupName === UNDEFINED_GROUP_KEY ? "" : groupName || ""}
|
||||||
|
</div>`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
groupedItems.push(...rows);
|
groupedItems.push(...rows);
|
||||||
});
|
});
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import { consume } from "@lit-labs/context";
|
||||||
|
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||||
import {
|
import {
|
||||||
mdiContentDuplicate,
|
mdiContentDuplicate,
|
||||||
mdiDelete,
|
mdiDelete,
|
||||||
@ -7,38 +9,59 @@ import {
|
|||||||
mdiPencilOff,
|
mdiPencilOff,
|
||||||
mdiPlay,
|
mdiPlay,
|
||||||
mdiPlus,
|
mdiPlus,
|
||||||
|
mdiTag,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
import { differenceInDays } from "date-fns/esm";
|
||||||
|
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
css,
|
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
html,
|
|
||||||
LitElement,
|
LitElement,
|
||||||
nothing,
|
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
|
css,
|
||||||
|
html,
|
||||||
|
nothing,
|
||||||
} from "lit";
|
} from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { differenceInDays } from "date-fns/esm";
|
import { formatShortDateTime } from "../../../common/datetime/format_date_time";
|
||||||
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
|
import { relativeTime } from "../../../common/datetime/relative_time";
|
||||||
|
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
|
||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { navigate } from "../../../common/navigate";
|
import { navigate } from "../../../common/navigate";
|
||||||
|
import { LocalizeFunc } from "../../../common/translations/localize";
|
||||||
import {
|
import {
|
||||||
DataTableColumnContainer,
|
DataTableColumnContainer,
|
||||||
RowClickedEvent,
|
RowClickedEvent,
|
||||||
} from "../../../components/data-table/ha-data-table";
|
} from "../../../components/data-table/ha-data-table";
|
||||||
import "../../../components/ha-fab";
|
import "../../../components/data-table/ha-data-table-labels";
|
||||||
import "../../../components/ha-button";
|
import "../../../components/ha-button";
|
||||||
|
import "../../../components/ha-fab";
|
||||||
|
import "../../../components/ha-filter-categories";
|
||||||
|
import "../../../components/ha-filter-devices";
|
||||||
|
import "../../../components/ha-filter-entities";
|
||||||
|
import "../../../components/ha-filter-floor-areas";
|
||||||
|
import "../../../components/ha-filter-labels";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
|
import "../../../components/ha-icon-overflow-menu";
|
||||||
import "../../../components/ha-state-icon";
|
import "../../../components/ha-state-icon";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-icon-overflow-menu";
|
import {
|
||||||
|
CategoryRegistryEntry,
|
||||||
|
subscribeCategoryRegistry,
|
||||||
|
} from "../../../data/category_registry";
|
||||||
|
import { fullEntitiesContext } from "../../../data/context";
|
||||||
|
import { isUnavailableState } from "../../../data/entity";
|
||||||
|
import { EntityRegistryEntry } from "../../../data/entity_registry";
|
||||||
import { forwardHaptic } from "../../../data/haptics";
|
import { forwardHaptic } from "../../../data/haptics";
|
||||||
import {
|
import {
|
||||||
|
LabelRegistryEntry,
|
||||||
|
subscribeLabelRegistry,
|
||||||
|
} from "../../../data/label_registry";
|
||||||
|
import {
|
||||||
|
SceneEntity,
|
||||||
activateScene,
|
activateScene,
|
||||||
deleteScene,
|
deleteScene,
|
||||||
getSceneConfig,
|
getSceneConfig,
|
||||||
SceneEntity,
|
|
||||||
showSceneEditor,
|
showSceneEditor,
|
||||||
} from "../../../data/scene";
|
} from "../../../data/scene";
|
||||||
import {
|
import {
|
||||||
@ -46,21 +69,22 @@ import {
|
|||||||
showConfirmationDialog,
|
showConfirmationDialog,
|
||||||
} from "../../../dialogs/generic/show-dialog-box";
|
} from "../../../dialogs/generic/show-dialog-box";
|
||||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||||
|
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||||
import { haStyle } from "../../../resources/styles";
|
import { haStyle } from "../../../resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../types";
|
import { HomeAssistant, Route } from "../../../types";
|
||||||
import { documentationUrl } from "../../../util/documentation-url";
|
import { documentationUrl } from "../../../util/documentation-url";
|
||||||
import { showToast } from "../../../util/toast";
|
import { showToast } from "../../../util/toast";
|
||||||
|
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
|
||||||
import { configSections } from "../ha-panel-config";
|
import { configSections } from "../ha-panel-config";
|
||||||
import { formatShortDateTime } from "../../../common/datetime/format_date_time";
|
|
||||||
import { relativeTime } from "../../../common/datetime/relative_time";
|
|
||||||
import { isUnavailableState } from "../../../data/entity";
|
|
||||||
|
|
||||||
type SceneItem = SceneEntity & {
|
type SceneItem = SceneEntity & {
|
||||||
name: string;
|
name: string;
|
||||||
|
category: string | undefined;
|
||||||
|
labels: LabelRegistryEntry[];
|
||||||
};
|
};
|
||||||
|
|
||||||
@customElement("ha-scene-dashboard")
|
@customElement("ha-scene-dashboard")
|
||||||
class HaSceneDashboard extends LitElement {
|
class HaSceneDashboard extends SubscribeMixin(LitElement) {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property({ type: Boolean }) public narrow = false;
|
@property({ type: Boolean }) public narrow = false;
|
||||||
@ -75,8 +99,31 @@ class HaSceneDashboard extends LitElement {
|
|||||||
|
|
||||||
@state() private _filteredScenes?: string[] | null;
|
@state() private _filteredScenes?: string[] | null;
|
||||||
|
|
||||||
|
@state() private _filters: Record<
|
||||||
|
string,
|
||||||
|
{ value: string[] | undefined; items: Set<string> | undefined }
|
||||||
|
> = {};
|
||||||
|
|
||||||
|
@state() private _expandedFilter?: string;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
_categories!: CategoryRegistryEntry[];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
_labels!: LabelRegistryEntry[];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
@consume({ context: fullEntitiesContext, subscribe: true })
|
||||||
|
_entityReg!: EntityRegistryEntry[];
|
||||||
|
|
||||||
private _scenes = memoizeOne(
|
private _scenes = memoizeOne(
|
||||||
(scenes: SceneEntity[], filteredScenes?: string[] | null): SceneItem[] => {
|
(
|
||||||
|
scenes: SceneEntity[],
|
||||||
|
entityReg: EntityRegistryEntry[],
|
||||||
|
categoryReg?: CategoryRegistryEntry[],
|
||||||
|
labelReg?: LabelRegistryEntry[],
|
||||||
|
filteredScenes?: string[] | null
|
||||||
|
): SceneItem[] => {
|
||||||
if (filteredScenes === null) {
|
if (filteredScenes === null) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
@ -84,21 +131,32 @@ class HaSceneDashboard extends LitElement {
|
|||||||
filteredScenes
|
filteredScenes
|
||||||
? scenes.filter((scene) => filteredScenes!.includes(scene.entity_id))
|
? scenes.filter((scene) => filteredScenes!.includes(scene.entity_id))
|
||||||
: scenes
|
: scenes
|
||||||
).map((scene) => ({
|
).map((scene) => {
|
||||||
...scene,
|
const entityRegEntry = entityReg.find(
|
||||||
name: computeStateName(scene),
|
(reg) => reg.entity_id === scene.entity_id
|
||||||
}));
|
);
|
||||||
|
const category = entityRegEntry?.categories.scene;
|
||||||
|
const labels = labelReg && entityRegEntry?.labels;
|
||||||
|
return {
|
||||||
|
...scene,
|
||||||
|
name: computeStateName(scene),
|
||||||
|
category: category
|
||||||
|
? categoryReg?.find((cat) => cat.category_id === category)?.name
|
||||||
|
: undefined,
|
||||||
|
labels: (labels || []).map(
|
||||||
|
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
private _columns = memoizeOne(
|
private _columns = memoizeOne(
|
||||||
(_language, narrow): DataTableColumnContainer => {
|
(narrow, localize: LocalizeFunc): DataTableColumnContainer => {
|
||||||
const columns: DataTableColumnContainer<SceneItem> = {
|
const columns: DataTableColumnContainer<SceneItem> = {
|
||||||
icon: {
|
icon: {
|
||||||
title: "",
|
title: "",
|
||||||
label: this.hass.localize(
|
label: localize("ui.panel.config.scene.picker.headers.state"),
|
||||||
"ui.panel.config.scene.picker.headers.state"
|
|
||||||
),
|
|
||||||
type: "icon",
|
type: "icon",
|
||||||
template: (scene) => html`
|
template: (scene) => html`
|
||||||
<ha-state-icon
|
<ha-state-icon
|
||||||
@ -108,19 +166,39 @@ class HaSceneDashboard extends LitElement {
|
|||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
title: this.hass.localize(
|
title: localize("ui.panel.config.scene.picker.headers.name"),
|
||||||
"ui.panel.config.scene.picker.headers.name"
|
|
||||||
),
|
|
||||||
main: true,
|
main: true,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
filterable: true,
|
filterable: true,
|
||||||
direction: "asc",
|
direction: "asc",
|
||||||
grows: true,
|
grows: true,
|
||||||
|
template: (scene) => html`
|
||||||
|
<div style="font-size: 14px;">${scene.name}</div>
|
||||||
|
${scene.labels.length
|
||||||
|
? html`<ha-data-table-labels
|
||||||
|
@label-clicked=${this._labelClicked}
|
||||||
|
.labels=${scene.labels}
|
||||||
|
></ha-data-table-labels>`
|
||||||
|
: nothing}
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
category: {
|
||||||
|
title: localize("ui.panel.config.scene.picker.headers.category"),
|
||||||
|
hidden: true,
|
||||||
|
groupable: true,
|
||||||
|
filterable: true,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
title: "",
|
||||||
|
hidden: true,
|
||||||
|
filterable: true,
|
||||||
|
template: (scene) => scene.labels.map((lbl) => lbl.name).join(" "),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
if (!narrow) {
|
if (!narrow) {
|
||||||
columns.state = {
|
columns.state = {
|
||||||
title: this.hass.localize(
|
title: localize(
|
||||||
"ui.panel.config.scene.picker.headers.last_activated"
|
"ui.panel.config.scene.picker.headers.last_activated"
|
||||||
),
|
),
|
||||||
sortable: true,
|
sortable: true,
|
||||||
@ -128,7 +206,7 @@ class HaSceneDashboard extends LitElement {
|
|||||||
template: (scene) => {
|
template: (scene) => {
|
||||||
const lastActivated = scene.state;
|
const lastActivated = scene.state;
|
||||||
if (!lastActivated || isUnavailableState(lastActivated)) {
|
if (!lastActivated || isUnavailableState(lastActivated)) {
|
||||||
return this.hass.localize("ui.components.relative_time.never");
|
return localize("ui.components.relative_time.never");
|
||||||
}
|
}
|
||||||
const date = new Date(scene.state);
|
const date = new Date(scene.state);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
@ -161,7 +239,7 @@ class HaSceneDashboard extends LitElement {
|
|||||||
};
|
};
|
||||||
columns.actions = {
|
columns.actions = {
|
||||||
title: "",
|
title: "",
|
||||||
width: "72px",
|
width: "64px",
|
||||||
type: "overflow-menu",
|
type: "overflow-menu",
|
||||||
template: (scene) => html`
|
template: (scene) => html`
|
||||||
<ha-icon-overflow-menu
|
<ha-icon-overflow-menu
|
||||||
@ -182,6 +260,13 @@ class HaSceneDashboard extends LitElement {
|
|||||||
),
|
),
|
||||||
action: () => this._activateScene(scene),
|
action: () => this._activateScene(scene),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: mdiTag,
|
||||||
|
label: this.hass.localize(
|
||||||
|
`ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
|
||||||
|
),
|
||||||
|
action: () => this._editCategory(scene),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
divider: true,
|
divider: true,
|
||||||
},
|
},
|
||||||
@ -212,6 +297,17 @@ class HaSceneDashboard extends LitElement {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
|
||||||
|
return [
|
||||||
|
subscribeCategoryRegistry(this.hass.connection, "scene", (categories) => {
|
||||||
|
this._categories = categories;
|
||||||
|
}),
|
||||||
|
subscribeLabelRegistry(this.hass.connection, (labels) => {
|
||||||
|
this._labels = labels;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<hass-tabs-subpage-data-table
|
<hass-tabs-subpage-data-table
|
||||||
@ -220,9 +316,20 @@ class HaSceneDashboard extends LitElement {
|
|||||||
back-path="/config"
|
back-path="/config"
|
||||||
.route=${this.route}
|
.route=${this.route}
|
||||||
.tabs=${configSections.automations}
|
.tabs=${configSections.automations}
|
||||||
.columns=${this._columns(this.hass.locale, this.narrow)}
|
hasFilters
|
||||||
|
.filters=${Object.values(this._filters).filter(
|
||||||
|
(filter) => filter.value?.length
|
||||||
|
).length}
|
||||||
|
.columns=${this._columns(this.narrow, this.hass.localize)}
|
||||||
id="entity_id"
|
id="entity_id"
|
||||||
.data=${this._scenes(this.scenes, this._filteredScenes)}
|
initialGroupColumn="category"
|
||||||
|
.data=${this._scenes(
|
||||||
|
this.scenes,
|
||||||
|
this._entityReg,
|
||||||
|
this._categories,
|
||||||
|
this._labels,
|
||||||
|
this._filteredScenes
|
||||||
|
)}
|
||||||
.empty=${!this.scenes.length}
|
.empty=${!this.scenes.length}
|
||||||
.activeFilters=${this._activeFilters}
|
.activeFilters=${this._activeFilters}
|
||||||
.noDataText=${this.hass.localize(
|
.noDataText=${this.hass.localize(
|
||||||
@ -239,6 +346,57 @@ class HaSceneDashboard extends LitElement {
|
|||||||
.label=${this.hass.localize("ui.common.help")}
|
.label=${this.hass.localize("ui.common.help")}
|
||||||
.path=${mdiHelpCircle}
|
.path=${mdiHelpCircle}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
|
|
||||||
|
<ha-filter-floor-areas
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"scene"}
|
||||||
|
.value=${this._filters["ha-filter-floor-areas"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-floor-areas"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-floor-areas>
|
||||||
|
<ha-filter-devices
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"scene"}
|
||||||
|
.value=${this._filters["ha-filter-devices"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-devices"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-devices>
|
||||||
|
<ha-filter-entities
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"scene"}
|
||||||
|
.value=${this._filters["ha-filter-entities"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-entities"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-entities>
|
||||||
|
<ha-filter-labels
|
||||||
|
.hass=${this.hass}
|
||||||
|
.value=${this._filters["ha-filter-labels"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-labels"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-labels>
|
||||||
|
<ha-filter-categories
|
||||||
|
.hass=${this.hass}
|
||||||
|
scope="scene"
|
||||||
|
.value=${this._filters["ha-filter-categories"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-categories"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-categories>
|
||||||
|
|
||||||
${!this.scenes.length
|
${!this.scenes.length
|
||||||
? html`<div class="empty" slot="empty">
|
? html`<div class="empty" slot="empty">
|
||||||
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
|
||||||
@ -275,6 +433,95 @@ class HaSceneDashboard extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _filterExpanded(ev) {
|
||||||
|
if (ev.detail.expanded) {
|
||||||
|
this._expandedFilter = ev.target.localName;
|
||||||
|
} else if (this._expandedFilter === ev.target.localName) {
|
||||||
|
this._expandedFilter = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _labelClicked = (ev: CustomEvent) => {
|
||||||
|
const label = ev.detail.label;
|
||||||
|
this._filters = {
|
||||||
|
...this._filters,
|
||||||
|
"ha-filter-labels": {
|
||||||
|
value: [label.label_id],
|
||||||
|
items: undefined,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this._applyFilters();
|
||||||
|
};
|
||||||
|
|
||||||
|
private _filterChanged(ev) {
|
||||||
|
const type = ev.target.localName;
|
||||||
|
this._filters[type] = ev.detail;
|
||||||
|
this._applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _applyFilters() {
|
||||||
|
const filters = Object.entries(this._filters);
|
||||||
|
let items: Set<string> | undefined;
|
||||||
|
for (const [key, filter] of filters) {
|
||||||
|
if (filter.items) {
|
||||||
|
if (!items) {
|
||||||
|
items = filter.items;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(filter.items)
|
||||||
|
: new Set([...items].filter((x) => filter.items!.has(x)));
|
||||||
|
}
|
||||||
|
if (key === "ha-filter-categories" && filter.value?.length) {
|
||||||
|
const categoryItems: Set<string> = new Set();
|
||||||
|
this.scenes
|
||||||
|
.filter(
|
||||||
|
(scene) =>
|
||||||
|
filter.value![0] ===
|
||||||
|
this._entityReg.find((reg) => reg.entity_id === scene.entity_id)
|
||||||
|
?.categories.scene
|
||||||
|
)
|
||||||
|
.forEach((scene) => categoryItems.add(scene.entity_id));
|
||||||
|
if (!items) {
|
||||||
|
items = categoryItems;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(categoryItems)
|
||||||
|
: new Set([...items].filter((x) => categoryItems!.has(x)));
|
||||||
|
}
|
||||||
|
if (key === "ha-filter-labels" && filter.value?.length) {
|
||||||
|
const labelItems: Set<string> = new Set();
|
||||||
|
this.scenes
|
||||||
|
.filter((scene) =>
|
||||||
|
this._entityReg
|
||||||
|
.find((reg) => reg.entity_id === scene.entity_id)
|
||||||
|
?.labels.some((lbl) => filter.value!.includes(lbl))
|
||||||
|
)
|
||||||
|
.forEach((scene) => labelItems.add(scene.entity_id));
|
||||||
|
if (!items) {
|
||||||
|
items = labelItems;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(labelItems)
|
||||||
|
: new Set([...items].filter((x) => labelItems!.has(x)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._filteredScenes = items ? [...items] : undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _clearFilter() {
|
||||||
|
this._filters = {};
|
||||||
|
this._applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
|
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
|
||||||
const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
|
const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
|
||||||
|
|
||||||
@ -283,9 +530,25 @@ class HaSceneDashboard extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _clearFilter() {
|
private _editCategory(scene: any) {
|
||||||
this._filteredScenes = undefined;
|
const entityReg = this._entityReg.find(
|
||||||
this._activeFilters = undefined;
|
(reg) => reg.entity_id === scene.entity_id
|
||||||
|
);
|
||||||
|
if (!entityReg) {
|
||||||
|
showAlertDialog(this, {
|
||||||
|
title: this.hass.localize(
|
||||||
|
"ui.panel.config.scene.picker.no_category_support"
|
||||||
|
),
|
||||||
|
text: this.hass.localize(
|
||||||
|
"ui.panel.config.scene.picker.no_category_entity_reg"
|
||||||
|
),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showAssignCategoryDialog(this, {
|
||||||
|
scope: "scene",
|
||||||
|
entityReg,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private _showInfo(scene: SceneEntity) {
|
private _showInfo(scene: SceneEntity) {
|
||||||
@ -359,6 +622,9 @@ class HaSceneDashboard extends LitElement {
|
|||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
|
hass-tabs-subpage-data-table {
|
||||||
|
--data-table-row-height: 60px;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { consume } from "@lit-labs/context";
|
||||||
import {
|
import {
|
||||||
mdiContentDuplicate,
|
mdiContentDuplicate,
|
||||||
mdiDelete,
|
mdiDelete,
|
||||||
@ -6,9 +7,11 @@ import {
|
|||||||
mdiPlay,
|
mdiPlay,
|
||||||
mdiPlus,
|
mdiPlus,
|
||||||
mdiScriptText,
|
mdiScriptText,
|
||||||
|
mdiTag,
|
||||||
mdiTransitConnection,
|
mdiTransitConnection,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import { differenceInDays } from "date-fns/esm";
|
import { differenceInDays } from "date-fns/esm";
|
||||||
|
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
LitElement,
|
LitElement,
|
||||||
@ -26,17 +29,33 @@ import { relativeTime } from "../../../common/datetime/relative_time";
|
|||||||
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
|
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
|
||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { navigate } from "../../../common/navigate";
|
import { navigate } from "../../../common/navigate";
|
||||||
|
import { LocalizeFunc } from "../../../common/translations/localize";
|
||||||
import {
|
import {
|
||||||
DataTableColumnContainer,
|
DataTableColumnContainer,
|
||||||
RowClickedEvent,
|
RowClickedEvent,
|
||||||
} from "../../../components/data-table/ha-data-table";
|
} from "../../../components/data-table/ha-data-table";
|
||||||
|
import "../../../components/data-table/ha-data-table-labels";
|
||||||
import "../../../components/ha-fab";
|
import "../../../components/ha-fab";
|
||||||
|
import "../../../components/ha-filter-blueprints";
|
||||||
|
import "../../../components/ha-filter-categories";
|
||||||
|
import "../../../components/ha-filter-devices";
|
||||||
|
import "../../../components/ha-filter-entities";
|
||||||
|
import "../../../components/ha-filter-floor-areas";
|
||||||
|
import "../../../components/ha-filter-labels";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-icon-overflow-menu";
|
import "../../../components/ha-icon-overflow-menu";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import { fetchBlueprints } from "../../../data/blueprint";
|
import {
|
||||||
|
CategoryRegistryEntry,
|
||||||
|
subscribeCategoryRegistry,
|
||||||
|
} from "../../../data/category_registry";
|
||||||
|
import { fullEntitiesContext } from "../../../data/context";
|
||||||
import { UNAVAILABLE } from "../../../data/entity";
|
import { UNAVAILABLE } from "../../../data/entity";
|
||||||
import { EntityRegistryEntry } from "../../../data/entity_registry";
|
import { EntityRegistryEntry } from "../../../data/entity_registry";
|
||||||
|
import {
|
||||||
|
LabelRegistryEntry,
|
||||||
|
subscribeLabelRegistry,
|
||||||
|
} from "../../../data/label_registry";
|
||||||
import {
|
import {
|
||||||
ScriptEntity,
|
ScriptEntity,
|
||||||
deleteScript,
|
deleteScript,
|
||||||
@ -51,19 +70,23 @@ import {
|
|||||||
showConfirmationDialog,
|
showConfirmationDialog,
|
||||||
} from "../../../dialogs/generic/show-dialog-box";
|
} from "../../../dialogs/generic/show-dialog-box";
|
||||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||||
|
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||||
import { haStyle } from "../../../resources/styles";
|
import { haStyle } from "../../../resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../types";
|
import { HomeAssistant, Route } from "../../../types";
|
||||||
import { documentationUrl } from "../../../util/documentation-url";
|
import { documentationUrl } from "../../../util/documentation-url";
|
||||||
import { showToast } from "../../../util/toast";
|
import { showToast } from "../../../util/toast";
|
||||||
import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
|
import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
|
||||||
|
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
|
||||||
import { configSections } from "../ha-panel-config";
|
import { configSections } from "../ha-panel-config";
|
||||||
|
|
||||||
type ScriptItem = ScriptEntity & {
|
type ScriptItem = ScriptEntity & {
|
||||||
name: string;
|
name: string;
|
||||||
|
category: string | undefined;
|
||||||
|
labels: LabelRegistryEntry[];
|
||||||
};
|
};
|
||||||
|
|
||||||
@customElement("ha-script-picker")
|
@customElement("ha-script-picker")
|
||||||
class HaScriptPicker extends LitElement {
|
class HaScriptPicker extends SubscribeMixin(LitElement) {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property({ attribute: false }) public scripts!: ScriptEntity[];
|
@property({ attribute: false }) public scripts!: ScriptEntity[];
|
||||||
@ -82,9 +105,29 @@ class HaScriptPicker extends LitElement {
|
|||||||
|
|
||||||
@state() private _filteredScripts?: string[] | null;
|
@state() private _filteredScripts?: string[] | null;
|
||||||
|
|
||||||
|
@state() private _filters: Record<
|
||||||
|
string,
|
||||||
|
{ value: string[] | undefined; items: Set<string> | undefined }
|
||||||
|
> = {};
|
||||||
|
|
||||||
|
@state() private _expandedFilter?: string;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
_categories!: CategoryRegistryEntry[];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
_labels!: LabelRegistryEntry[];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
@consume({ context: fullEntitiesContext, subscribe: true })
|
||||||
|
_entityReg!: EntityRegistryEntry[];
|
||||||
|
|
||||||
private _scripts = memoizeOne(
|
private _scripts = memoizeOne(
|
||||||
(
|
(
|
||||||
scripts: ScriptEntity[],
|
scripts: ScriptEntity[],
|
||||||
|
entityReg: EntityRegistryEntry[],
|
||||||
|
categoryReg?: CategoryRegistryEntry[],
|
||||||
|
labelReg?: LabelRegistryEntry[],
|
||||||
filteredScripts?: string[] | null
|
filteredScripts?: string[] | null
|
||||||
): ScriptItem[] => {
|
): ScriptItem[] => {
|
||||||
if (filteredScripts === null) {
|
if (filteredScripts === null) {
|
||||||
@ -96,22 +139,37 @@ class HaScriptPicker extends LitElement {
|
|||||||
filteredScripts!.includes(script.entity_id)
|
filteredScripts!.includes(script.entity_id)
|
||||||
)
|
)
|
||||||
: scripts
|
: scripts
|
||||||
).map((script) => ({
|
).map((script) => {
|
||||||
...script,
|
const entityRegEntry = entityReg.find(
|
||||||
name: computeStateName(script),
|
(reg) => reg.entity_id === script.entity_id
|
||||||
last_triggered: script.attributes.last_triggered || undefined,
|
);
|
||||||
}));
|
const category = entityRegEntry?.categories.script;
|
||||||
|
const labels = labelReg && entityRegEntry?.labels;
|
||||||
|
return {
|
||||||
|
...script,
|
||||||
|
name: computeStateName(script),
|
||||||
|
last_triggered: script.attributes.last_triggered || undefined,
|
||||||
|
category: category
|
||||||
|
? categoryReg?.find((cat) => cat.category_id === category)?.name
|
||||||
|
: undefined,
|
||||||
|
labels: (labels || []).map(
|
||||||
|
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
private _columns = memoizeOne(
|
private _columns = memoizeOne(
|
||||||
(narrow, _locale): DataTableColumnContainer<ScriptItem> => {
|
(
|
||||||
|
narrow,
|
||||||
|
localize: LocalizeFunc,
|
||||||
|
locale: HomeAssistant["locale"]
|
||||||
|
): DataTableColumnContainer<ScriptItem> => {
|
||||||
const columns: DataTableColumnContainer = {
|
const columns: DataTableColumnContainer = {
|
||||||
icon: {
|
icon: {
|
||||||
title: "",
|
title: "",
|
||||||
label: this.hass.localize(
|
label: localize("ui.panel.config.script.picker.headers.state"),
|
||||||
"ui.panel.config.script.picker.headers.state"
|
|
||||||
),
|
|
||||||
type: "icon",
|
type: "icon",
|
||||||
template: (script) =>
|
template: (script) =>
|
||||||
html`<ha-state-icon
|
html`<ha-state-icon
|
||||||
@ -124,43 +182,56 @@ class HaScriptPicker extends LitElement {
|
|||||||
></ha-state-icon>`,
|
></ha-state-icon>`,
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
title: this.hass.localize(
|
title: localize("ui.panel.config.script.picker.headers.name"),
|
||||||
"ui.panel.config.script.picker.headers.name"
|
|
||||||
),
|
|
||||||
main: true,
|
main: true,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
filterable: true,
|
filterable: true,
|
||||||
direction: "asc",
|
direction: "asc",
|
||||||
grows: true,
|
grows: true,
|
||||||
template: narrow
|
template: (script) => {
|
||||||
? (script) => {
|
const date = new Date(script.last_triggered);
|
||||||
const date = new Date(script.last_triggered);
|
const now = new Date();
|
||||||
const now = new Date();
|
const dayDifference = differenceInDays(now, date);
|
||||||
const dayDifference = differenceInDays(now, date);
|
return html`
|
||||||
return html`
|
<div style="font-size: 14px;">${script.name}</div>
|
||||||
${script.name}
|
${narrow
|
||||||
<div class="secondary">
|
? html`<div class="secondary">
|
||||||
${this.hass.localize("ui.card.automation.last_triggered")}:
|
${this.hass.localize("ui.card.automation.last_triggered")}:
|
||||||
${script.last_triggered
|
${script.attributes.last_triggered
|
||||||
? dayDifference > 3
|
? dayDifference > 3
|
||||||
? formatShortDateTime(
|
? formatShortDateTime(date, locale, this.hass.config)
|
||||||
date,
|
: relativeTime(date, locale)
|
||||||
this.hass.locale,
|
: localize("ui.components.relative_time.never")}
|
||||||
this.hass.config
|
</div>`
|
||||||
)
|
: nothing}
|
||||||
: relativeTime(date, this.hass.locale)
|
${script.labels.length
|
||||||
: this.hass.localize("ui.components.relative_time.never")}
|
? html`<ha-data-table-labels
|
||||||
</div>
|
@label-clicked=${this._labelClicked}
|
||||||
`;
|
.labels=${script.labels}
|
||||||
}
|
></ha-data-table-labels>`
|
||||||
: undefined,
|
: nothing}
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
category: {
|
||||||
|
title: localize("ui.panel.config.script.picker.headers.category"),
|
||||||
|
hidden: true,
|
||||||
|
groupable: true,
|
||||||
|
filterable: true,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
title: "",
|
||||||
|
hidden: true,
|
||||||
|
filterable: true,
|
||||||
|
template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
if (!narrow) {
|
if (!narrow) {
|
||||||
columns.last_triggered = {
|
columns.last_triggered = {
|
||||||
sortable: true,
|
sortable: true,
|
||||||
width: "40%",
|
width: "40%",
|
||||||
title: this.hass.localize("ui.card.automation.last_triggered"),
|
title: localize("ui.card.automation.last_triggered"),
|
||||||
template: (script) => {
|
template: (script) => {
|
||||||
const date = new Date(script.last_triggered);
|
const date = new Date(script.last_triggered);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
@ -182,7 +253,7 @@ class HaScriptPicker extends LitElement {
|
|||||||
|
|
||||||
columns.actions = {
|
columns.actions = {
|
||||||
title: "",
|
title: "",
|
||||||
width: this.narrow ? undefined : "10%",
|
width: "64px",
|
||||||
type: "overflow-menu",
|
type: "overflow-menu",
|
||||||
template: (script) => html`
|
template: (script) => html`
|
||||||
<ha-icon-overflow-menu
|
<ha-icon-overflow-menu
|
||||||
@ -196,6 +267,13 @@ class HaScriptPicker extends LitElement {
|
|||||||
),
|
),
|
||||||
action: () => this._showInfo(script),
|
action: () => this._showInfo(script),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: mdiTag,
|
||||||
|
label: this.hass.localize(
|
||||||
|
`ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
|
||||||
|
),
|
||||||
|
action: () => this._editCategory(script),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: mdiPlay,
|
path: mdiPlay,
|
||||||
label: this.hass.localize("ui.panel.config.script.picker.run"),
|
label: this.hass.localize("ui.panel.config.script.picker.run"),
|
||||||
@ -236,6 +314,21 @@ class HaScriptPicker extends LitElement {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
|
||||||
|
return [
|
||||||
|
subscribeCategoryRegistry(
|
||||||
|
this.hass.connection,
|
||||||
|
"script",
|
||||||
|
(categories) => {
|
||||||
|
this._categories = categories;
|
||||||
|
}
|
||||||
|
),
|
||||||
|
subscribeLabelRegistry(this.hass.connection, (labels) => {
|
||||||
|
this._labels = labels;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<hass-tabs-subpage-data-table
|
<hass-tabs-subpage-data-table
|
||||||
@ -244,8 +337,23 @@ class HaScriptPicker extends LitElement {
|
|||||||
back-path="/config"
|
back-path="/config"
|
||||||
.route=${this.route}
|
.route=${this.route}
|
||||||
.tabs=${configSections.automations}
|
.tabs=${configSections.automations}
|
||||||
.columns=${this._columns(this.narrow, this.hass.locale)}
|
hasFilters
|
||||||
.data=${this._scripts(this.scripts, this._filteredScripts)}
|
initialGroupColumn="category"
|
||||||
|
.filters=${Object.values(this._filters).filter(
|
||||||
|
(filter) => filter.value?.length
|
||||||
|
).length}
|
||||||
|
.columns=${this._columns(
|
||||||
|
this.narrow,
|
||||||
|
this.hass.localize,
|
||||||
|
this.hass.locale
|
||||||
|
)}
|
||||||
|
.data=${this._scripts(
|
||||||
|
this.scripts,
|
||||||
|
this._entityReg,
|
||||||
|
this._categories,
|
||||||
|
this._labels,
|
||||||
|
this._filteredScripts
|
||||||
|
)}
|
||||||
.empty=${!this.scripts.length}
|
.empty=${!this.scripts.length}
|
||||||
.activeFilters=${this._activeFilters}
|
.activeFilters=${this._activeFilters}
|
||||||
id="entity_id"
|
id="entity_id"
|
||||||
@ -255,6 +363,7 @@ class HaScriptPicker extends LitElement {
|
|||||||
@clear-filter=${this._clearFilter}
|
@clear-filter=${this._clearFilter}
|
||||||
hasFab
|
hasFab
|
||||||
clickable
|
clickable
|
||||||
|
class=${this.narrow ? "narrow" : ""}
|
||||||
@row-click=${this._handleRowClicked}
|
@row-click=${this._handleRowClicked}
|
||||||
>
|
>
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
@ -263,6 +372,65 @@ class HaScriptPicker extends LitElement {
|
|||||||
.path=${mdiHelpCircle}
|
.path=${mdiHelpCircle}
|
||||||
@click=${this._showHelp}
|
@click=${this._showHelp}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
|
<ha-filter-floor-areas
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"script"}
|
||||||
|
.value=${this._filters["ha-filter-floor-areas"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-floor-areas"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-floor-areas>
|
||||||
|
<ha-filter-devices
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"script"}
|
||||||
|
.value=${this._filters["ha-filter-devices"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-devices"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-devices>
|
||||||
|
<ha-filter-entities
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"script"}
|
||||||
|
.value=${this._filters["ha-filter-entities"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-entities"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-entities>
|
||||||
|
<ha-filter-labels
|
||||||
|
.hass=${this.hass}
|
||||||
|
.value=${this._filters["ha-filter-labels"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-labels"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-labels>
|
||||||
|
<ha-filter-categories
|
||||||
|
.hass=${this.hass}
|
||||||
|
scope="script"
|
||||||
|
.value=${this._filters["ha-filter-categories"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-categories"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-categories>
|
||||||
|
<ha-filter-blueprints
|
||||||
|
.hass=${this.hass}
|
||||||
|
.type=${"script"}
|
||||||
|
.value=${this._filters["ha-filter-blueprints"]?.value}
|
||||||
|
@data-table-filter-changed=${this._filterChanged}
|
||||||
|
slot="filter-pane"
|
||||||
|
.expanded=${this._expandedFilter === "ha-filter-blueprints"}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
@expanded-changed=${this._filterExpanded}
|
||||||
|
></ha-filter-blueprints>
|
||||||
${!this.scripts.length
|
${!this.scripts.length
|
||||||
? html` <div class="empty" slot="empty">
|
? html` <div class="empty" slot="empty">
|
||||||
<ha-svg-icon .path=${mdiScriptText}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiScriptText}></ha-svg-icon>
|
||||||
@ -303,6 +471,95 @@ class HaScriptPicker extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _filterExpanded(ev) {
|
||||||
|
if (ev.detail.expanded) {
|
||||||
|
this._expandedFilter = ev.target.localName;
|
||||||
|
} else if (this._expandedFilter === ev.target.localName) {
|
||||||
|
this._expandedFilter = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _labelClicked = (ev: CustomEvent) => {
|
||||||
|
const label = ev.detail.label;
|
||||||
|
this._filters = {
|
||||||
|
...this._filters,
|
||||||
|
"ha-filter-labels": {
|
||||||
|
value: [label.label_id],
|
||||||
|
items: undefined,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this._applyFilters();
|
||||||
|
};
|
||||||
|
|
||||||
|
private _filterChanged(ev) {
|
||||||
|
const type = ev.target.localName;
|
||||||
|
this._filters[type] = ev.detail;
|
||||||
|
this._applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _clearFilter() {
|
||||||
|
this._filters = {};
|
||||||
|
this._applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _applyFilters() {
|
||||||
|
const filters = Object.entries(this._filters);
|
||||||
|
let items: Set<string> | undefined;
|
||||||
|
for (const [key, filter] of filters) {
|
||||||
|
if (filter.items) {
|
||||||
|
if (!items) {
|
||||||
|
items = filter.items;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(filter.items)
|
||||||
|
: new Set([...items].filter((x) => filter.items!.has(x)));
|
||||||
|
}
|
||||||
|
if (key === "ha-filter-categories" && filter.value?.length) {
|
||||||
|
const categoryItems: Set<string> = new Set();
|
||||||
|
this.scripts
|
||||||
|
.filter(
|
||||||
|
(script) =>
|
||||||
|
filter.value![0] ===
|
||||||
|
this._entityReg.find((reg) => reg.entity_id === script.entity_id)
|
||||||
|
?.categories.script
|
||||||
|
)
|
||||||
|
.forEach((script) => categoryItems.add(script.entity_id));
|
||||||
|
if (!items) {
|
||||||
|
items = categoryItems;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(categoryItems)
|
||||||
|
: new Set([...items].filter((x) => categoryItems!.has(x)));
|
||||||
|
}
|
||||||
|
if (key === "ha-filter-labels" && filter.value?.length) {
|
||||||
|
const labelItems: Set<string> = new Set();
|
||||||
|
this.scripts
|
||||||
|
.filter((script) =>
|
||||||
|
this._entityReg
|
||||||
|
.find((reg) => reg.entity_id === script.entity_id)
|
||||||
|
?.labels.some((lbl) => filter.value!.includes(lbl))
|
||||||
|
)
|
||||||
|
.forEach((script) => labelItems.add(script.entity_id));
|
||||||
|
if (!items) {
|
||||||
|
items = labelItems;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
items =
|
||||||
|
"intersection" in items
|
||||||
|
? // @ts-ignore
|
||||||
|
items.intersection(labelItems)
|
||||||
|
: new Set([...items].filter((x) => labelItems!.has(x)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._filteredScripts = items ? [...items] : undefined;
|
||||||
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
firstUpdated() {
|
||||||
if (this._searchParms.has("blueprint")) {
|
if (this._searchParms.has("blueprint")) {
|
||||||
this._filterBlueprint();
|
this._filterBlueprint();
|
||||||
@ -314,28 +571,36 @@ class HaScriptPicker extends LitElement {
|
|||||||
if (!blueprint) {
|
if (!blueprint) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const [related, blueprints] = await Promise.all([
|
const related = await findRelated(this.hass, "script_blueprint", blueprint);
|
||||||
findRelated(this.hass, "script_blueprint", blueprint),
|
this._filters = {
|
||||||
fetchBlueprints(this.hass, "script"),
|
...this._filters,
|
||||||
]);
|
"ha-filter-blueprints": {
|
||||||
this._filteredScripts = related.script || [];
|
value: [blueprint],
|
||||||
const blueprintMeta = blueprints[blueprint];
|
items: new Set(related.automation || []),
|
||||||
this._activeFilters = [
|
},
|
||||||
this.hass.localize(
|
};
|
||||||
"ui.panel.config.script.picker.filtered_by_blueprint",
|
this._applyFilters();
|
||||||
{
|
|
||||||
name:
|
|
||||||
!blueprintMeta || "error" in blueprintMeta
|
|
||||||
? blueprint
|
|
||||||
: blueprintMeta.metadata.name || blueprint,
|
|
||||||
}
|
|
||||||
),
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _clearFilter() {
|
private _editCategory(script: any) {
|
||||||
this._filteredScripts = undefined;
|
const entityReg = this._entityReg.find(
|
||||||
this._activeFilters = undefined;
|
(reg) => reg.entity_id === script.entity_id
|
||||||
|
);
|
||||||
|
if (!entityReg) {
|
||||||
|
showAlertDialog(this, {
|
||||||
|
title: this.hass.localize(
|
||||||
|
"ui.panel.config.script.picker.no_category_support"
|
||||||
|
),
|
||||||
|
text: this.hass.localize(
|
||||||
|
"ui.panel.config.script.picker.no_category_entity_reg"
|
||||||
|
),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showAssignCategoryDialog(this, {
|
||||||
|
scope: "script",
|
||||||
|
entityReg,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
|
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
|
||||||
@ -477,6 +742,12 @@ class HaScriptPicker extends LitElement {
|
|||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
|
hass-tabs-subpage-data-table {
|
||||||
|
--data-table-row-height: 60px;
|
||||||
|
}
|
||||||
|
hass-tabs-subpage-data-table.narrow {
|
||||||
|
--data-table-row-height: 72px;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -3551,8 +3551,13 @@
|
|||||||
"filtered_by_blueprint": "[%key:ui::panel::config::automation::picker::filtered_by_blueprint%]",
|
"filtered_by_blueprint": "[%key:ui::panel::config::automation::picker::filtered_by_blueprint%]",
|
||||||
"headers": {
|
"headers": {
|
||||||
"name": "Name",
|
"name": "Name",
|
||||||
"state": "State"
|
"state": "State",
|
||||||
|
"category": "Category"
|
||||||
},
|
},
|
||||||
|
"edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
|
||||||
|
"assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
|
||||||
|
"no_category_support": "You can't assign an category to this script",
|
||||||
|
"no_category_entity_reg": "To assign an category to an script it needs to have a unique ID.",
|
||||||
"delete": "[%key:ui::common::delete%]",
|
"delete": "[%key:ui::common::delete%]",
|
||||||
"duplicate": "[%key:ui::common::duplicate%]",
|
"duplicate": "[%key:ui::common::duplicate%]",
|
||||||
"empty_header": "Create your first script",
|
"empty_header": "Create your first script",
|
||||||
@ -3655,8 +3660,13 @@
|
|||||||
"headers": {
|
"headers": {
|
||||||
"state": "State",
|
"state": "State",
|
||||||
"name": "Name",
|
"name": "Name",
|
||||||
"last_activated": "Last activated"
|
"last_activated": "Last activated",
|
||||||
|
"category": "Category"
|
||||||
},
|
},
|
||||||
|
"edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
|
||||||
|
"assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
|
||||||
|
"no_category_support": "You can't assign an category to this scene",
|
||||||
|
"no_category_entity_reg": "To assign an category to an scene it needs to have a unique ID.",
|
||||||
"empty_header": "Create your first scene",
|
"empty_header": "Create your first scene",
|
||||||
"empty_text": "Scenes capture entities' states, so you can re-experience the same scene later on. For example, a ''Watching TV'' scene that dims the living room lights, sets a warm white color and turns on the TV."
|
"empty_text": "Scenes capture entities' states, so you can re-experience the same scene later on. For example, a ''Watching TV'' scene that dims the living room lights, sets a warm white color and turns on the TV."
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user