From 8db22d4f884a4fc74b5b933d73bcbeb92c637128 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Wed, 23 Feb 2022 10:28:49 -0600 Subject: [PATCH] Calendar card to HA Form (#11784) --- .../hui-calendar-card-editor.ts | 176 +++++++----------- src/translations/en.json | 2 +- 2 files changed, 66 insertions(+), 112 deletions(-) diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts index 2142f325f4..30c81af52c 100644 --- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts @@ -1,7 +1,8 @@ -import "@material/mwc-list/mwc-list-item"; -import "@material/mwc-select/mwc-select"; -import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import "../../../../components/entity/ha-entities-picker"; +import "../../../../components/ha-form/ha-form"; +import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { array, assert, @@ -13,16 +14,12 @@ import { union, } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { stopPropagation } from "../../../../common/dom/stop_propagation"; -import "../../../../components/entity/ha-entities-picker"; +import { LocalizeFunc } from "../../../../common/translations/localize"; +import type { HaFormSchema } from "../../../../components/ha-form/types"; import type { HomeAssistant } from "../../../../types"; import type { CalendarCardConfig } from "../../cards/types"; -import "../../components/hui-entity-editor"; -import "../../components/hui-theme-select-editor"; import type { LovelaceCardEditor } from "../../types"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; -import type { EditorTarget, EntitiesEditorEvent } from "../types"; -import { configElementStyle } from "./config-elements-style"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -43,75 +40,54 @@ export class HuiCalendarCardEditor { @property({ attribute: false }) public hass?: HomeAssistant; - @property({ attribute: false }) private _config?: CalendarCardConfig; - - @state() private _configEntities?: string[]; + @state() private _config?: CalendarCardConfig; public setConfig(config: CalendarCardConfig): void { assert(config, cardConfigStruct); this._config = config; - this._configEntities = config.entities; } - get _title(): string { - return this._config!.title || ""; - } - - get _initial_view(): string { - return this._config!.initial_view || "dayGridMonth"; - } - - get _theme(): string { - return this._config!.theme || ""; - } + private _schema = memoizeOne((localize: LocalizeFunc) => [ + { + name: "", + type: "grid", + schema: [ + { name: "title", required: false, selector: { text: {} } }, + { + name: "initial_view", + required: false, + selector: { + select: { + options: views.map((view) => [ + view, + localize( + `ui.panel.lovelace.editor.card.calendar.views.${view}` + ), + ]), + }, + }, + }, + ], + }, + { name: "theme", required: false, selector: { theme: {} } }, + ]); protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; } + const schema = this._schema(this.hass.localize); + const data = { initial_view: "dayGridMonth", ...this._config }; + return html` -
-
- - - ${views.map( - (view) => html` - ${this.hass!.localize( - `ui.panel.lovelace.editor.card.calendar.views.${view}` - )} - - ` - )} - -
- -
+

${this.hass.localize( "ui.panel.lovelace.editor.card.calendar.calendar_entities" @@ -122,62 +98,40 @@ export class HuiCalendarCardEditor

`; } - private _valueChanged(ev: EntitiesEditorEvent | CustomEvent): void { - if (!this._config || !this.hass) { - return; - } - - const target = ev.target! as EditorTarget; - - if (this[`_${target.configValue}`] === target.value) { - return; - } - - if (ev.detail && ev.detail.value && Array.isArray(ev.detail.value)) { - this._config = { ...this._config, entities: ev.detail.value }; - } else if (target.configValue) { - if (target.value === "") { - this._config = { ...this._config }; - delete this._config[target.configValue!]; - } else { - this._config = { - ...this._config, - [target.configValue]: target.value, - }; - } - } - - fireEvent(this, "config-changed", { config: this._config }); + private _valueChanged(ev: CustomEvent): void { + const config = ev.detail.value; + fireEvent(this, "config-changed", { config }); } - private _viewChanged(ev): void { - if (!this._config || !this.hass) { - return; - } - - if (ev.target.value === "") { - this._config = { ...this._config }; - delete this._config.initial_view; - } else { - this._config = { - ...this._config, - initial_view: ev.target.value, - }; - } - fireEvent(this, "config-changed", { config: this._config }); + private _entitiesChanged(ev): void { + const config = { ...this._config!, entities: ev.detail.value }; + fireEvent(this, "config-changed", { config }); } - static get styles(): CSSResultGroup { - return configElementStyle; - } + private _computeLabelCallback = (schema: HaFormSchema) => { + if (schema.name === "title") { + return this.hass!.localize("ui.panel.lovelace.editor.card.generic.title"); + } + + return this.hass!.localize( + `ui.panel.lovelace.editor.card.calendar.${schema.name}` + ); + }; + + static styles = css` + ha-form { + display: block; + overflow: auto; + } + `; } declare global { diff --git a/src/translations/en.json b/src/translations/en.json index 54eda22ef1..da653b245d 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3449,7 +3449,7 @@ "calendar": { "name": "Calendar", "description": "The Calendar card displays a calendar including day, week and list views", - "inital_view": "Initial View", + "initial_view": "Initial View", "calendar_entities": "Calendar Entities", "views": { "dayGridMonth": "Month",