Allow individual item deletion in To-do list (#18464)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -1,4 +1,10 @@
-import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDrag,
+  mdiNotificationClearAll,
+  mdiPlus,
+  mdiSort,
+} from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
@@ -293,6 +299,23 @@ export class HuiTodoListCard
                       .itemId=${item.uid}
                       @change=${this._saveEdit}
                     ></ha-textfield>
+                    ${this.todoListSupportsFeature(
+                      TodoListEntityFeature.DELETE_TODO_ITEM
+                    ) &&
+                    !this.todoListSupportsFeature(
+                      TodoListEntityFeature.UPDATE_TODO_ITEM
+                    )
+                      ? html`<ha-icon-button
+                          .title=${this.hass!.localize(
+                            "ui.panel.lovelace.cards.todo-list.delete_item"
+                          )}
+                          class="deleteItemButton"
+                          .path=${mdiDelete}
+                          .itemId=${item.uid}
+                          @click=${this._deleteItem}
+                        >
+                        </ha-icon-button>`
+                      : nothing}
                   </div>
                 `
               )}
@@ -341,7 +364,23 @@ export class HuiTodoListCard
                   >
                   </ha-svg-icon>
                 `
-              : ""}
+              : this.todoListSupportsFeature(
+                  TodoListEntityFeature.DELETE_TODO_ITEM
+                ) &&
+                !this.todoListSupportsFeature(
+                  TodoListEntityFeature.UPDATE_TODO_ITEM
+                )
+              ? html`<ha-icon-button
+                  .title=${this.hass!.localize(
+                    "ui.panel.lovelace.cards.todo-list.delete_item"
+                  )}
+                  class="deleteItemButton"
+                  .path=${mdiDelete}
+                  .itemId=${item.uid}
+                  @click=${this._deleteItem}
+                >
+                </ha-icon-button>`
+              : nothing}
           </div>
         `
       )}
@@ -431,6 +470,16 @@ export class HuiTodoListCard
     }
   }
 
+  private _deleteItem(ev): void {
+    const item = this._getItem(ev.target.itemId);
+    if (!item) {
+      return;
+    }
+    deleteItem(this.hass!, this._entityId!, item.uid).finally(() =>
+      this._fetchData()
+    );
+  }
+
   private _addKeyPress(ev): void {
     if (ev.key === "Enter") {
       this._addItem(null);
@@ -541,6 +590,12 @@ export class HuiTodoListCard
         direction: var(--direction);
       }
 
+      .deleteItemButton {
+        margin-right: -12px;
+        margin-inline-end: -12px;
+        direction: var(--direction);
+      }
+
       .reorderButton {
         margin-right: -12px;
         margin-inline-end: -12px;

src/translations/en.json

@@ -4526,7 +4526,8 @@
             "clear_items": "Clear checked items",
             "add_item": "Add item",
             "reorder_items": "Reorder items",
-            "drag_and_drop": "Drag and drop"
+            "drag_and_drop": "Drag and drop",
+            "delete_item": "Delete item"
           },
           "picture-elements": {
             "hold": "Hold:",