Calendar card to HA Form (#11784)

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`
-      <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._title}
-            .configValue=${"title"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-          <mwc-select
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.calendar.inital_view"
-            )}
-            .value=${this._initial_view}
-            .configValue=${"initial_view"}
-            @selected=${this._viewChanged}
-            @closed=${stopPropagation}
-            naturalMenuWidth
-            fixedMenuPosition
-          >
-            ${views.map(
-              (view) => html`
-                <mwc-list-item .value=${view}
-                  >${this.hass!.localize(
-                    `ui.panel.lovelace.editor.card.calendar.views.${view}`
-                  )}
-                </mwc-list-item>
-              `
-            )}
-          </mwc-select>
-        </div>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-      </div>
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       <h3>
         ${this.hass.localize(
           "ui.panel.lovelace.editor.card.calendar.calendar_entities"
@@ -122,62 +98,40 @@ export class HuiCalendarCardEditor
       </h3>
       <ha-entities-picker
         .hass=${this.hass!}
-        .value=${this._configEntities}
+        .value=${this._config.entities}
         .includeDomains=${["calendar"]}
-        @value-changed=${this._valueChanged}
+        @value-changed=${this._entitiesChanged}
       >
       </ha-entities-picker>
     `;
   }
 
-  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 {

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",