github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Move Editing of Dashboard to config page

This commit is contained in:
Zack 2022-05-10 10:35:31 -05:00
parent b295bbd706
commit 723e6c46b4
3 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View File

@ -3,6 +3,7 @@ import {
mdiCheckCircleOutline,
mdiDotsVertical,
mdiOpenInNew,
mdiPencil,
mdiPlus,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
@ -13,6 +14,7 @@ import memoize from "memoize-one";
import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
import { navigate } from "../../../../common/navigate";
import { stringCompare } from "../../../../common/string/compare";
import { addSearchParam } from "../../../../common/url/search-params";
import {
DataTableColumnContainer,
RowClickedEvent,
@ -31,7 +33,10 @@ import {
LovelacePanelConfig,
updateDashboard,
} from "../../../../data/lovelace";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import {
showAlertDialog,
showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import "../../../../layouts/hass-loading-screen";
import "../../../../layouts/hass-tabs-subpage-data-table";
import { HomeAssistant, Route } from "../../../../types";
@ -42,11 +47,11 @@ import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-deta
export class HaConfigLovelaceDashboards extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public isWide!: boolean;
@property({ type: Boolean }) public isWide!: boolean;
@property() public narrow!: boolean;
@property({ type: Boolean }) public narrow!: boolean;
@property() public route!: Route;
@property({ attribute: false }) public route!: Route;
@state() private _dashboards: LovelaceDashboard[] = [];
@ -192,6 +197,37 @@ export class HaConfigLovelaceDashboards extends LitElement {
`,
};
columns.edit_path = {
title: "",
label: this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.headers.edit"
),
width: "100px",
template: (edit_path, dashboard) =>
narrow
? html`
<ha-icon-button
.path=${mdiPencil}
.urlPath=${edit_path}
.mode=${dashboard.mode}
@click=${this._editDashboard}
.label=${this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.edit"
)}
></ha-icon-button>
`
: html`
<mwc-button
.urlPath=${edit_path}
.mode=${dashboard.mode}
@click=${this._editDashboard}
>${this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.edit"
)}</mwc-button
>
`,
};
return columns;
}
);
@ -210,6 +246,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
show_in_sidebar: isDefault,
require_admin: false,
url_path: "lovelace",
edit_path: "lovelace?edit=1",
mode: defaultMode,
filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
iconColor: "var(--primary-color)",
@ -222,6 +259,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
show_in_sidebar: true,
mode: "storage",
url_path: "energy",
edit_path: "config/energy",
filename: "",
iconColor: "var(--label-badge-yellow)",
});
@ -232,6 +270,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
.sort((a, b) => stringCompare(a.title, b.title))
.map((dashboard) => ({
filename: "",
edit_path: `${dashboard.url_path}?${addSearchParam({ edit: "1" })}`,
...dashboard,
default: defaultUrlPath === dashboard.url_path,
}))
@ -257,7 +296,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
this._dashboards
)}
.data=${this._getItems(this._dashboards)}
@row-click=${this._editDashboard}
@row-click=${this._updateDashboard}
id="url_path"
hasFab
clickable
@ -316,7 +355,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
navigate(`/${(ev.target as any).urlPath}`);
}
private _editDashboard(ev: CustomEvent) {
private _updateDashboard(ev: CustomEvent) {
const urlPath = (ev.detail as RowClickedEvent).id;
if (urlPath === "energy") {
@ -327,6 +366,16 @@ export class HaConfigLovelaceDashboards extends LitElement {
this._openDialog(dashboard, urlPath);
}
private _editDashboard(ev: CustomEvent) {
if ((ev.detail as any).mode === "yaml") {
showAlertDialog(this, {
text: "The edit UI is not available when in YAML mode.",
});
return;
}
navigate(`/${(ev.target as any).urlPath}`);
}
private _addDashboard() {
this._openDialog();
}
@ -387,3 +436,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
ev.currentTarget.blur();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-config-lovelace-dashboards": HaConfigLovelaceDashboards;
}
}

48
src/panels/lovelace/hui-root.ts
View File

@ -57,10 +57,7 @@ import type {
LovelacePanelConfig,
LovelaceViewConfig,
} from "../../data/lovelace";
import {
showAlertDialog,
showConfirmationDialog,
} from "../../dialogs/generic/show-dialog-box";
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
import "../../layouts/ha-app-layout";
@ -240,7 +237,7 @@ class HUIRoot extends LitElement {
${this.lovelace!.config.views.map(
(view) => html`
<paper-tab
aria-label=${view.title}
.aria-label=${view.title}
class=${classMap({
"hide-tab": Boolean(
view.visible !== undefined &&
@ -255,7 +252,7 @@ class HUIRoot extends LitElement {
${view.icon
? html`
<ha-icon
title=${view.title}
.title=${view.title}
.icon=${view.icon}
></ha-icon>
`
@ -403,27 +400,6 @@ class HUIRoot extends LitElement {
</mwc-list-item>
`
: ""}
${this.hass!.user?.is_admin &&
!this.hass!.config.safe_mode
? html`
<mwc-list-item
graphic="icon"
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
@request-selected=${this
._handleEnableEditMode}
>
${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiPencil}
></ha-svg-icon>
</mwc-list-item>
`
: ""}
${this._editMode
? html`
<a
@ -469,7 +445,7 @@ class HUIRoot extends LitElement {
${this.lovelace!.config.views.map(
(view) => html`
<paper-tab
aria-label=${view.title}
.aria-label=${view.title}
class=${classMap({
"hide-tab": Boolean(
!this._editMode &&
@ -498,7 +474,7 @@ class HUIRoot extends LitElement {
${view.icon
? html`
<ha-icon
title=${view.title}
.title=${view.title}
.icon=${view.icon}
></ha-icon>
`
@ -674,7 +650,6 @@ class HUIRoot extends LitElement {
return (
(this.narrow && this._conversation(this.hass.config.components)) ||
this._editMode ||
(this.hass!.user?.is_admin && !this.hass!.config.safe_mode) ||
(this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
"yaml" ||
this._yamlMode
@ -747,19 +722,6 @@ class HUIRoot extends LitElement {
showVoiceCommandDialog(this);
}
private _handleEnableEditMode(ev: CustomEvent<RequestSelectedDetail>): void {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
if (this._yamlMode) {
showAlertDialog(this, {
text: "The edit UI is not available when in YAML mode.",
});
return;
}
this.lovelace!.setEditMode(true);
}
private _editModeDisable(): void {
this.lovelace!.setEditMode(false);
}

4
src/translations/en.json
View File

@ -1621,9 +1621,11 @@
"require_admin": "Admin only",
"sidebar": "Show in sidebar",
"filename": "Filename",
"url": "Open"
"url": "Open",
"edit": "Edit"
},
"open": "Open",
"edit": "Edit",
"add_dashboard": "Add dashboard"
},
"confirm_delete_title": "Delete {dashboard_title}?",