Alarm Card Editor to HA Form

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -1,20 +1,15 @@
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
-import { mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../components/ha-form/ha-form";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { array, assert, assign, object, optional, string } from "superstruct";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-svg-icon";
-import { HomeAssistant } from "../../../../types";
-import { AlarmPanelCardConfig } from "../../cards/types";
-import "../../components/hui-theme-select-editor";
-import { LovelaceCardEditor } from "../../types";
+import type { HomeAssistant } from "../../../../types";
+import type { AlarmPanelCardConfig } from "../../cards/types";
+import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { configElementStyle } from "./config-elements-style";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -26,7 +21,13 @@ const cardConfigStruct = assign(
   })
 );
 
-const includeDomains = ["alarm_control_panel"];
+const states = [
+  "arm_home",
+  "arm_away",
+  "arm_night",
+  "arm_vacation",
+  "arm_custom_bypass",
+];
 
 @customElement("hui-alarm-panel-card-editor")
 export class HuiAlarmPanelCardEditor
@@ -42,177 +43,72 @@ export class HuiAlarmPanelCardEditor
     this._config = config;
   }
 
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
-  get _name(): string {
-    return this._config!.name || "";
-  }
-
-  get _states(): string[] {
-    return this._config!.states || [];
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
+  private _schema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
+    {
+      name: "entity",
+      required: true,
+      selector: { entity: { domain: "alarm_control_panel" } },
+    },
+    {
+      type: "grid",
+      name: "",
+      schema: [
+        { name: "name", selector: { text: {} } },
+        { name: "theme", selector: { theme: {} } },
+      ],
+    },
+
+    {
+      type: "multi_select",
+      name: "states",
+      options: states.map((s) => [
+        s,
+        localize(`ui.card.alarm_control_panel.${s}`),
+      ]) as [string, string][],
+    },
+  ]);
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const states = [
-      "arm_home",
-      "arm_away",
-      "arm_night",
-      "arm_vacation",
-      "arm_custom_bypass",
-    ];
+    const schema = this._schema(this.hass.localize);
 
     return html`
-      <div class="card-config">
-        <ha-entity-picker
-          .label=${`${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.entity"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.required"
-          )})`}
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label=${`${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})`}
-          .value=${this._name}
-          .configValue=${"name"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <span>Used States</span> ${this._states.map(
-          (entityState, index) => html`
-            <div class="states">
-              <paper-item>${entityState}</paper-item>
-              <ha-svg-icon
-                class="deleteState"
-                .value=${index}
-                .path=${mdiClose}
-                @click=${this._stateRemoved}
-              ></ha-svg-icon>
-            </div>
-          `
-        )}
-        <mwc-select
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.alarm-panel.available_states"
-          )}
-          @selected=${this._stateAdded}
-          @closed=${stopPropagation}
-          fixedMenuPosition
-          naturalMenuWidth
-        >
-          ${states.map(
-            (entityState) =>
-              html`<mwc-list-item>${entityState}</mwc-list-item> `
-          )}
-        </mwc-select>
-        <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=${this._config}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      configElementStyle,
-      css`
-        .states {
-          display: flex;
-          flex-direction: row;
-        }
-        .deleteState {
-          visibility: hidden;
-        }
-        .states:hover > .deleteState {
-          visibility: visible;
-        }
-        ha-svg-icon {
-          padding-top: 12px;
-        }
-      `,
-    ];
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _stateRemoved(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this._states || !this.hass) {
-      return;
-    }
-
-    const target = ev.target! as EditorTarget;
-    const index = Number(target.value);
-    if (index > -1) {
-      const newStates = [...this._states];
-      newStates.splice(index, 1);
-      fireEvent(this, "config-changed", {
-        config: {
-          ...this._config,
-          states: newStates,
-        },
-      });
+  private _computeLabelCallback = (schema: HaFormSchema) => {
+    if (schema.name === "entity") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.entity"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.required"
+      )})`;
     }
-  }
 
-  private _stateAdded(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
+    if (schema.name === "name") {
+      return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.name`);
     }
-    const target = ev.target! as EditorTarget;
-    if (!target.value || this._states.indexOf(target.value) !== -1) {
-      return;
-    }
-    const newStates = [...this._states];
-    newStates.push(target.value);
-    target.value = "";
-    fireEvent(this, "config-changed", {
-      config: {
-        ...this._config,
-        states: newStates,
-      },
-    });
-  }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-    if (this[`_${target.configValue}`] === target.value) {
-      return;
-    }
-    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 });
-  }
+    return this.hass!.localize(
+      `ui.panel.lovelace.editor.card.alarm-panel.${
+        schema.name === "states" ? "available_states" : schema.name
+      }`
+    );
+  };
 }
 
 declare global {