Convert shopping list card editor to ha-form (#18376)

* Convert shopping list card editor to ha-form

* hide todo from generated dashboard

src/common/const.ts

@@ -16,7 +16,7 @@ import {
   mdiCarCoolantLevel,
   mdiCash,
   mdiChatSleep,
-  mdiClipboardCheck,
+  mdiClipboardList,
   mdiClock,
   mdiCloudUpload,
   mdiCog,
@@ -121,7 +121,7 @@ export const FIXED_DOMAIN_ICONS = {
   siren: mdiBullhorn,
   stt: mdiMicrophoneMessage,
   text: mdiFormTextbox,
-  todo: mdiClipboardCheck,
+  todo: mdiClipboardList,
   time: mdiClock,
   timer: mdiTimerOutline,
   tts: mdiSpeakerMessage,

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -39,6 +39,7 @@ const HIDE_DOMAIN = new Set([
   "event",
   "tts",
   "stt",
+  "todo",
 ]);
 
 const HIDE_PLATFORM = new Set(["mobile_app"]);

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -1,16 +1,16 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, assign, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-alert";
-import "../../../../components/ha-textfield";
+import "../../../../components/ha-form/ha-form";
-import "../../../../components/ha-theme-picker";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { SchemaUnion } from "../../../../components/ha-form/types";
+import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -21,6 +21,17 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  { name: "title", selector: { text: {} } },
+  {
+    name: "entity",
+    selector: {
+      entity: { domain: "todo" },
+    },
+  },
+  { name: "theme", selector: { theme: {} } },
+] as const;
+
 @customElement("hui-shopping-list-card-editor")
 export class HuiShoppingListEditor
   extends LitElement
@@ -35,92 +46,56 @@ export class HuiShoppingListEditor
     this._config = config;
   }
 
-  get _title(): string {
-    return this._config!.title || "";
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
     return html`
-      <div class="card-config">
+        ${
-        ${!isComponentLoaded(this.hass, "todo")
+          !isComponentLoaded(this.hass, "todo")
-          ? html`
+            ? html`
-              <div class="error">
+                <ha-alert alert-type="error">
-                ${this.hass.localize(
+                  ${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
+                    "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
-                )}
+                  )}
-              </div>
+                </ha-alert>
-            `
+              `
-          : ""}
+            : ""
-        <ha-textfield
+        }
-          .label="${this.hass.localize(
+        <ha-form
-            "ui.panel.lovelace.editor.card.generic.title"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._title}
-          .configValue=${"title"}
-          @input=${this._valueChanged}
-        ></ha-textfield>
-        <ha-entity-picker
-          .hass=${this.hass!}
-          .configValue=${"entity"}
-          .value=${this._config.entity}
-          .includeDomains=${["todo"]}
-          @value-changed=${this._valueChanged}
-        >
-        </ha-entity-picker>
-        <ha-theme-picker
           .hass=${this.hass}
-          .value=${this._theme}
+          .data=${this._config}
-          .configValue=${"theme"}
+          .schema=${SCHEMA}
-          .label=${`${this.hass!.localize(
+          .computeLabel=${this._computeLabelCallback}
-            "ui.panel.lovelace.editor.card.generic.theme"
-          )} (${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})`}
           @value-changed=${this._valueChanged}
-        ></ha-theme-picker>
+        ></ha-form>
       </div>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
+    const config = ev.detail.value;
-      return;
+    fireEvent(this, "config-changed", { config });
-    }
-    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 });
   }
 
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "theme":
+        return `${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.theme"
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.optional"
+        )})`;
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+    }
+  };
+
   static get styles(): CSSResultGroup {
-    return css`
+    return configElementStyle;
-      .error {
-        color: var(--error-color);
-      }
-    `;
   }
 }