diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 15df18b002..ad48a92dd3 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -2,17 +2,21 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiCheck, mdiCheckCircleOutline, + mdiDelete, mdiDotsVertical, - mdiOpenInNew, + mdiPencil, mdiPlus, + mdiStar, } from "@mdi/js"; import { LitElement, PropertyValues, html, nothing } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import memoize from "memoize-one"; import { isComponentLoaded } from "../../../../common/config/is_component_loaded"; +import { storage } from "../../../../common/decorators/storage"; import { navigate } from "../../../../common/navigate"; import { stringCompare } from "../../../../common/string/compare"; +import { LocalizeFunc } from "../../../../common/translations/localize"; import { DataTableColumnContainer, RowClickedEvent, @@ -22,6 +26,9 @@ import "../../../../components/ha-clickable-list-item"; import "../../../../components/ha-fab"; import "../../../../components/ha-icon"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-menu"; +import type { HaMenu } from "../../../../components/ha-menu"; +import "../../../../components/ha-menu-item"; import "../../../../components/ha-svg-icon"; import { LovelacePanelConfig } from "../../../../data/lovelace"; import { @@ -41,13 +48,11 @@ import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog- import "../../../../layouts/hass-loading-screen"; import "../../../../layouts/hass-tabs-subpage-data-table"; import { HomeAssistant, Route } from "../../../../types"; -import { LocalizeFunc } from "../../../../common/translations/localize"; import { getLovelaceStrategy } from "../../../lovelace/strategies/get-strategy"; import { showNewDashboardDialog } from "../../dashboard/show-dialog-new-dashboard"; import { lovelaceTabs } from "../ha-config-lovelace"; import { showDashboardConfigureStrategyDialog } from "./show-dialog-lovelace-dashboard-configure-strategy"; import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail"; -import { storage } from "../../../../common/decorators/storage"; type DataTableItem = Pick< LovelaceDashboard, @@ -85,6 +90,10 @@ export class HaConfigLovelaceDashboards extends LitElement { }) private _activeSorting?: SortingChangedEvent; + @state() private _overflowDashboard?: LovelaceDashboard; + + @query("#overflow-menu") private _overflowMenu!: HaMenu; + public willUpdate() { if (!this.hasUpdated) { this.hass.loadFragmentTranslation("lovelace"); @@ -210,40 +219,36 @@ export class HaConfigLovelaceDashboards extends LitElement { }; } - columns.url_path = { + columns.actions = { title: "", - label: localize( - "ui.panel.config.lovelace.dashboards.picker.headers.url" - ), - filterable: true, - width: "100px", - template: (dashboard) => - narrow - ? html` - - ` - : html` - ${this.hass.localize( - "ui.panel.config.lovelace.dashboards.picker.open" - )} - `, + width: "64px", + type: "icon-button", + template: (dashboard) => html` + + `, }; - return columns; } ); + private _showOverflowMenu = (ev) => { + if ( + this._overflowMenu.open && + ev.target === this._overflowMenu.anchorElement + ) { + this._overflowMenu.close(); + return; + } + this._overflowDashboard = ev.target.dashboard; + this._overflowMenu.anchorElement = ev.target; + this._overflowMenu.show(); + }; + private _getItems = memoize((dashboards: LovelaceDashboard[]) => { const defaultMode = ( this.hass.panels?.lovelace?.config as LovelacePanelConfig @@ -314,7 +319,7 @@ export class HaConfigLovelaceDashboards extends LitElement { @sorting-changed=${this._handleSortingChanged} .filter=${this._filter} @search-changed=${this._handleSearchChange} - @row-click=${this._editDashboard} + @row-click=${this._navigate} id="url_path" hasFab clickable @@ -346,6 +351,22 @@ export class HaConfigLovelaceDashboards extends LitElement { + + + +
Edit
+
+ + + +
Set to default
+
+ + + +
Delete
+
+
`; } @@ -358,21 +379,23 @@ export class HaConfigLovelaceDashboards extends LitElement { this._dashboards = await fetchDashboards(this.hass); } - private _navigate(ev: Event) { - ev.stopPropagation(); - navigate(`/${(ev.target as any).urlPath}`); + private _navigate(ev: CustomEvent) { + const urlPath = (ev.detail as RowClickedEvent).id; + navigate(`/${urlPath}`); } - private _editDashboard(ev: CustomEvent) { - const urlPath = (ev.detail as RowClickedEvent).id; + private _editDashboard = (ev) => { + ev.stopPropagation(); + const dashboard = ev.currentTarget.parentElement.anchorElement.automation; + + const urlPath = (ev.currentTarget as any).urlPath; if (urlPath === "energy") { navigate("/config/energy"); return; } - const dashboard = this._dashboards.find((res) => res.url_path === urlPath); this._openDetailDialog(dashboard, urlPath); - } + }; private async _addDashboard() { showNewDashboardDialog(this, {