Add clearing of checked items to shopping-list-card (#2034)

src/data/shopping-list.ts

@@ -26,3 +26,6 @@ export const completeItem = (
   hass.callApi("POST", "shopping_list/item/" + itemId, {
     complete,
   });
+
+export const clearItems = (hass: HomeAssistant): Promise<void> =>
+  hass.callApi("POST", "shopping_list/clear_completed");

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

@@ -5,6 +5,7 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 
 import "../../../components/ha-card";
+import "../../../components/ha-icon";
 
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
@@ -14,6 +15,7 @@ import {
   completeItem,
   saveEdit,
   ShoppingListItem,
+  clearItems,
 } from "../../../data/shopping-list";
 
 interface Config extends LovelaceConfig {
@@ -106,12 +108,25 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           this._checkedItems!.length > 0
             ? html`
                 <div class="divider"></div>
-                <div class="label">
+                <div class="checked">
+                  <span class="label">
                     ${
                       this.localize(
                         "ui.panel.lovelace.cards.shopping-list.checked_items"
                       )
                     }
+                  </span>
+                  <ha-icon
+                    class="clearall"
+                    @click="${this._clearItems}"
+                    icon="hass:notification-clear-all"
+                    .title="${
+                      this.localize(
+                        "ui.panel.lovelace.cards.shopping-list.clear_items"
+                      )
+                    }"
+                  >
+                  </ha-icon>
                 </div>
                 ${
                   repeat(
@@ -170,17 +185,25 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           position: relative;
           top: 1px;
         }
-        .label {
-          color: var(--primary-color);
+        .checked {
           margin-left: 17px;
           margin-bottom: 11px;
           margin-top: 11px;
         }
+        .label {
+          color: var(--primary-color);
+        }
         .divider {
           height: 1px;
           background-color: var(--divider-color);
           margin: 10px;
         }
+        .clearall {
+          cursor: pointer;
+          margin-bottom: 3px;
+          float: right;
+          padding-right: 10px;
+        }
       </style>
     `;
   }
@@ -215,6 +238,12 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
 
     ev.target.blur();
   }
+
+  private _clearItems(): void {
+    if (this.hass) {
+      clearItems(this.hass).catch(() => this._fetchData());
+    }
+  }
 }
 
 declare global {

src/translations/en.json

@@ -760,7 +760,8 @@
       "lovelace": {
         "cards": {
           "shopping-list": {
-            "checked_items": "Checked items"
+            "checked_items": "Checked items",
+            "clear_items": "Clear checked items"
           }
         }
       },