mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add new dashboard dialog (#18657)
* Add new dashboard dialog * Update default dashboard wording
This commit is contained in:
parent
0eeadcd31a
commit
842df983c3
143
src/panels/config/dashboard/dialog-new-dashboard.ts
Normal file
143
src/panels/config/dashboard/dialog-new-dashboard.ts
Normal file
@ -0,0 +1,143 @@
|
||||
import "@material/mwc-list/mwc-list";
|
||||
import { mdiPencilOutline, mdiShape } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { createCloseHeading } from "../../../components/ha-dialog";
|
||||
import "../../../components/ha-icon-next";
|
||||
import "../../../components/ha-list-item";
|
||||
import { HassDialog } from "../../../dialogs/make-dialog-manager";
|
||||
import { haStyle, haStyleDialog } from "../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
|
||||
import { NewDashboardDialogParams } from "./show-dialog-new-dashboard";
|
||||
import { LovelaceRawConfig } from "../../../data/lovelace/config/types";
|
||||
|
||||
const EMPTY_CONFIG: LovelaceRawConfig = { views: [{ title: "Home" }] };
|
||||
|
||||
@customElement("ha-dialog-new-dashboard")
|
||||
class DialogNewDashboard extends LitElement implements HassDialog {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _opened = false;
|
||||
|
||||
@state() private _params?: NewDashboardDialogParams;
|
||||
|
||||
public showDialog(params: NewDashboardDialogParams): void {
|
||||
this._opened = true;
|
||||
this._params = params;
|
||||
}
|
||||
|
||||
public closeDialog(): void {
|
||||
if (this._opened) {
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
}
|
||||
this._opened = false;
|
||||
this._params = undefined;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this._opened) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
hideActions
|
||||
@closed=${this.closeDialog}
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.header`
|
||||
)
|
||||
)}
|
||||
>
|
||||
<mwc-list
|
||||
innerRole="listbox"
|
||||
itemRoles="option"
|
||||
innerAriaLabel=${this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.header`
|
||||
)}
|
||||
rootTabbable
|
||||
dialogInitialFocus
|
||||
@selected=${this._selected}
|
||||
>
|
||||
<ha-list-item
|
||||
hasmeta
|
||||
twoline
|
||||
graphic="icon"
|
||||
.config=${EMPTY_CONFIG}
|
||||
@request-selected=${this._selected}
|
||||
>
|
||||
<ha-svg-icon slot="graphic" .path=${mdiPencilOutline}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty`
|
||||
)}
|
||||
<span slot="secondary">
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty_description`
|
||||
)}
|
||||
</span>
|
||||
<ha-icon-next slot="meta"></ha-icon-next>
|
||||
</ha-list-item>
|
||||
<li divider role="separator"></li>
|
||||
<ha-list-item
|
||||
hasmeta
|
||||
twoline
|
||||
graphic="icon"
|
||||
.config=${null}
|
||||
@request-selected=${this._selected}
|
||||
>
|
||||
<ha-svg-icon slot="graphic" .path=${mdiShape}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.default`
|
||||
)}
|
||||
<span slot="secondary"
|
||||
>${this.hass.localize(
|
||||
`ui.panel.config.lovelace.dashboards.dialog_new.default_description`
|
||||
)}</span
|
||||
>
|
||||
<ha-icon-next slot="meta"></ha-icon-next>
|
||||
</ha-list-item>
|
||||
</mwc-list>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _selected(ev) {
|
||||
if (!shouldHandleRequestSelectedEvent(ev)) {
|
||||
return;
|
||||
}
|
||||
const config = (ev.currentTarget! as any).config;
|
||||
this._params?.selectConfig(config);
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-dialog {
|
||||
--dialog-content-padding: 0;
|
||||
--mdc-dialog-max-height: 60vh;
|
||||
}
|
||||
@media all and (min-width: 550px) {
|
||||
ha-dialog {
|
||||
--mdc-dialog-min-width: 500px;
|
||||
}
|
||||
}
|
||||
ha-icon-next {
|
||||
width: 24px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-dialog-new-dashboard": DialogNewDashboard;
|
||||
}
|
||||
}
|
19
src/panels/config/dashboard/show-dialog-new-dashboard.ts
Normal file
19
src/panels/config/dashboard/show-dialog-new-dashboard.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { LovelaceConfig } from "../../../data/lovelace/config/types";
|
||||
|
||||
export interface NewDashboardDialogParams {
|
||||
selectConfig: (config: LovelaceConfig | undefined) => any;
|
||||
}
|
||||
|
||||
export const loadNewDashboardDialog = () => import("./dialog-new-dashboard");
|
||||
|
||||
export const showNewDashboardDialog = (
|
||||
element: HTMLElement,
|
||||
newDashboardDialogParams: NewDashboardDialogParams
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "ha-dialog-new-dashboard",
|
||||
dialogImport: loadNewDashboardDialog,
|
||||
dialogParams: newDashboardDialogParams,
|
||||
});
|
||||
};
|
@ -1,3 +1,4 @@
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import {
|
||||
mdiCheck,
|
||||
mdiCheckCircleOutline,
|
||||
@ -5,8 +6,7 @@ import {
|
||||
mdiOpenInNew,
|
||||
mdiPlus,
|
||||
} from "@mdi/js";
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import { html, LitElement, nothing, PropertyValues } from "lit";
|
||||
import { LitElement, PropertyValues, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import memoize from "memoize-one";
|
||||
@ -22,21 +22,26 @@ import "../../../../components/ha-fab";
|
||||
import "../../../../components/ha-icon";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { LovelacePanelConfig } from "../../../../data/lovelace";
|
||||
import {
|
||||
LovelaceConfig,
|
||||
saveConfig,
|
||||
} from "../../../../data/lovelace/config/types";
|
||||
import {
|
||||
LovelaceDashboard,
|
||||
LovelaceDashboardCreateParams,
|
||||
createDashboard,
|
||||
deleteDashboard,
|
||||
fetchDashboards,
|
||||
LovelaceDashboard,
|
||||
LovelaceDashboardCreateParams,
|
||||
updateDashboard,
|
||||
} from "../../../../data/lovelace/dashboard";
|
||||
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../../layouts/hass-loading-screen";
|
||||
import "../../../../layouts/hass-tabs-subpage-data-table";
|
||||
import { HomeAssistant, Route } from "../../../../types";
|
||||
import { showNewDashboardDialog } from "../../dashboard/show-dialog-new-dashboard";
|
||||
import { lovelaceTabs } from "../ha-config-lovelace";
|
||||
import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail";
|
||||
import { LovelacePanelConfig } from "../../../../data/lovelace";
|
||||
|
||||
type DataTableItem = Pick<
|
||||
LovelaceDashboard,
|
||||
@ -329,16 +334,21 @@ export class HaConfigLovelaceDashboards extends LitElement {
|
||||
return;
|
||||
}
|
||||
const dashboard = this._dashboards.find((res) => res.url_path === urlPath);
|
||||
this._openDialog(dashboard, urlPath);
|
||||
this._openDetailDialog(dashboard, urlPath);
|
||||
}
|
||||
|
||||
private _addDashboard() {
|
||||
this._openDialog();
|
||||
private async _addDashboard() {
|
||||
showNewDashboardDialog(this, {
|
||||
selectConfig: (config) => {
|
||||
this._openDetailDialog(undefined, undefined, config);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private async _openDialog(
|
||||
private async _openDetailDialog(
|
||||
dashboard?: LovelaceDashboard,
|
||||
urlPath?: string
|
||||
urlPath?: string,
|
||||
defaultConfig?: LovelaceConfig
|
||||
): Promise<void> {
|
||||
showDashboardDetailDialog(this, {
|
||||
dashboard,
|
||||
@ -353,6 +363,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
|
||||
this.hass.locale.language
|
||||
)
|
||||
);
|
||||
if (defaultConfig) {
|
||||
await saveConfig(this.hass!, created.url_path, defaultConfig);
|
||||
}
|
||||
},
|
||||
updateDashboard: async (values) => {
|
||||
const updated = await updateDashboard(
|
||||
|
@ -2100,6 +2100,13 @@
|
||||
"yaml": "YAML file",
|
||||
"storage": "UI controlled"
|
||||
},
|
||||
"dialog_new": {
|
||||
"header": "Add dashboard",
|
||||
"create_empty": "New dashboard from scratch",
|
||||
"create_empty_description": "Start with an empty dashboard from scratch",
|
||||
"default": "Default dashboard",
|
||||
"default_description": "Display your devices grouped by area"
|
||||
},
|
||||
"picker": {
|
||||
"headers": {
|
||||
"icon": "Icon",
|
||||
|
Loading…
x
Reference in New Issue
Block a user