Grid Card to HA Form (#11798)

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

@@ -12,8 +12,8 @@ import {
   string,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { GridCardConfig } from "../../cards/types";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { GridCardConfig } from "../../cards/types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { HuiStackCardEditor } from "./hui-stack-card-editor";
 
@@ -27,6 +27,17 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA: HaFormSchema[] = [
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "columns", selector: { number: { min: 1, mode: "box" } } },
+      { name: "square", selector: { boolean: {} } },
+    ],
+  },
+];
+
 @customElement("hui-grid-card-editor")
 export class HuiGridCardEditor extends HuiStackCardEditor {
   public setConfig(config: Readonly<GridCardConfig>): void {
@@ -34,80 +45,31 @@ export class HuiGridCardEditor extends HuiStackCardEditor {
     this._config = config;
   }
 
-  get _columns(): number {
-    return this._config!.columns || 3;
-  }
-
-  get _square(): boolean {
-    return this._config!.square ?? true;
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
+    const data = { square: true, columns: 3, ...this._config };
+
     return html`
-      <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.grid.columns"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._columns}
-            .configValue=${"columns"}
-            @value-changed=${this._handleColumnsChanged}
-          ></paper-input>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.grid.square"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-switch
-              .checked=${this._square}
-              .configValue=${"square"}
-              @change=${this._handleSquareChanged}
-            ></ha-switch>
-          </ha-formfield>
-        </div>
-      </div>
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       ${super.render()}
     `;
   }
 
-  private _handleColumnsChanged(ev): void {
-    if (!this._config) {
-      return;
-    }
-    const value = Number(ev.target.value);
-    if (this._columns === value) {
-      return;
-    }
-    if (!ev.target.value) {
-      this._config = { ...this._config };
-      delete this._config.columns;
-    } else {
-      this._config = {
-        ...this._config,
-        columns: value,
-      };
-    }
-    fireEvent(this, "config-changed", { config: this._config });
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _handleSquareChanged(ev): void {
-    if (!this._config || this._square === ev.target.checked) {
-      return;
-    }
-
-    fireEvent(this, "config-changed", {
-      config: { ...this._config, square: ev.target.checked },
-    });
-  }
+  private _computeLabelCallback = (schema: HaFormSchema) =>
+    this.hass!.localize(`ui.panel.lovelace.editor.card.grid.${schema.name}`);
 }
 
 declare global {