Configurable todo item tap action (#26551)

* Configurable todo item tap action

* string

Author: karwosts

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -54,6 +54,9 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { TodoListCardConfig } from "./types";
 
+export const ITEM_TAP_ACTION_EDIT = "edit";
+export const ITEM_TAP_ACTION_TOGGLE = "toggle";
+
 @customElement("hui-todo-list-card")
 export class HuiTodoListCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -482,7 +485,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
               )}
               .itemId=${item.uid}
               @change=${this._completeItem}
-              @click=${this._openItem}
+              @click=${this._itemTap}
               @request-selected=${this._requestSelected}
               @keydown=${this._handleKeydown}
             >
@@ -575,7 +578,18 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
       return;
     }
     if (ev.key === "Enter") {
+      this._itemTap(ev);
+    }
+  }
+
+  private _itemTap(ev): void {
+    if (
+      !this._config!.item_tap_action ||
+      this._config!.item_tap_action === ITEM_TAP_ACTION_EDIT
+    ) {
       this._openItem(ev);
+    } else if (this._config!.item_tap_action === ITEM_TAP_ACTION_TOGGLE) {
+      this._completeItem(ev);
     }
   }
 

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

@@ -3,6 +3,11 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
+import { mdiGestureTap } from "@mdi/js";
+import {
+  ITEM_TAP_ACTION_EDIT,
+  ITEM_TAP_ACTION_TOGGLE,
+} from "../../cards/hui-todo-list-card";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
@@ -17,6 +22,8 @@ import { configElementStyle } from "./config-elements-style";
 import { TodoListEntityFeature, TodoSortMode } from "../../../../data/todo";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 
+const ITEM_TAP_ACTIONS = [ITEM_TAP_ACTION_EDIT, ITEM_TAP_ACTION_TOGGLE];
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -26,6 +33,7 @@ const cardConfigStruct = assign(
     hide_completed: optional(boolean()),
     hide_create: optional(boolean()),
     display_order: optional(string()),
+    item_tap_action: optional(string()),
   })
 );
 
@@ -64,11 +72,35 @@ export class HuiTodoListEditor
             },
           },
         },
+        {
+          name: "interactions",
+          type: "expandable",
+          flatten: true,
+          iconPath: mdiGestureTap,
+          schema: [
+            {
+              name: "item_tap_action",
+              required: true,
+              selector: {
+                select: {
+                  mode: "dropdown",
+                  options: Object.values(ITEM_TAP_ACTIONS).map((action) => ({
+                    value: action,
+                    label: localize(
+                      `ui.panel.lovelace.editor.card.todo-list.actions.${action}`
+                    ),
+                  })),
+                },
+              },
+            },
+          ],
+        },
       ] as const
   );
 
   private _data = memoizeOne((config) => ({
     display_order: "none",
+    item_tap_action: "edit",
     ...config,
   }));
 
@@ -106,7 +138,10 @@ export class HuiTodoListEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    const config = ev.detail.value;
+    const config = { ...ev.detail.value };
+    if (config.item_tap_action === ITEM_TAP_ACTION_EDIT) {
+      delete config.item_tap_action;
+    }
     fireEvent(this, "config-changed", { config });
   }
 
@@ -130,6 +165,7 @@ export class HuiTodoListEditor
       case "hide_completed":
       case "hide_create":
       case "display_order":
+      case "item_tap_action":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.todo-list.${schema.name}`
         );

src/translations/en.json

@@ -7734,6 +7734,11 @@
               "hide_completed": "Hide completed items",
               "hide_create": "Hide 'Add item' field",
               "display_order": "Display order",
+              "item_tap_action": "Item tap behavior",
+              "actions": {
+                "edit": "Default (edit item)",
+                "toggle": "Toggle item"
+              },
               "sort_modes": {
                 "none": "Default",
                 "manual": "Manual",