Ability to add items to shopping-list-card (#2035)

* Ability to add items to shopping-list-card

* Address review comments

src/data/shopping-list.ts

@@ -29,3 +29,11 @@ export const completeItem = (
 
 export const clearItems = (hass: HomeAssistant): Promise<void> =>
   hass.callApi("POST", "shopping_list/clear_completed");
+
+export const addItem = (
+  hass: HomeAssistant,
+  name: string
+): Promise<ShoppingListItem> =>
+  hass.callApi("POST", "shopping_list/item", {
+    name,
+  });

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

@@ -1,8 +1,8 @@
 import { html, LitElement } from "@polymer/lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import { TemplateResult } from "lit-html";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
@@ -16,6 +16,7 @@ import {
   saveEdit,
   ShoppingListItem,
   clearItems,
+  addItem,
 } from "../../../data/shopping-list";
 
 interface Config extends LovelaceConfig {
@@ -77,6 +78,27 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
+        <div class="addRow">
+          <ha-icon
+            class="addButton"
+            @click="${this._addItem}"
+            icon="hass:plus"
+            .title="${
+              this.localize("ui.panel.lovelace.cards.shopping-list.add_item")
+            }"
+          >
+          </ha-icon>
+          <paper-item-body>
+            <paper-input
+              no-label-float
+              class="addBox"
+              placeholder="${
+                this.localize("ui.panel.lovelace.cards.shopping-list.add_item")
+              }"
+              @keydown="${this._addKeyPress}"
+            ></paper-input>
+          </paper-item-body>
+        </div>
         ${
           repeat(
             this._uncheckedItems!,
@@ -165,10 +187,15 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   private renderStyle(): TemplateResult {
     return html`
       <style>
-        .editRow {
+        .editRow,
+        .addRow {
           display: flex;
           flex-direction: row;
         }
+        .addButton {
+          padding: 9px 15px 11px 15px;
+          cursor: pointer;
+        }
         paper-checkbox {
           padding: 11px 11px 11px 18px;
         }
@@ -204,6 +231,9 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           float: right;
           padding-right: 10px;
         }
+        .addRow > ha-icon {
+          color: var(--secondary-text-color);
+        }
       </style>
     `;
   }
@@ -244,6 +274,29 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
       clearItems(this.hass).catch(() => this._fetchData());
     }
   }
+
+  private get _newItem(): PaperInputElement {
+    return this.shadowRoot!.querySelector(".addBox") as PaperInputElement;
+  }
+
+  private _addItem(ev): void {
+    const newItem = this._newItem;
+
+    if (newItem.value!.length > 0) {
+      addItem(this.hass!, newItem.value!).catch(() => this._fetchData());
+    }
+
+    newItem.value = "";
+    if (ev) {
+      newItem.focus();
+    }
+  }
+
+  private _addKeyPress(ev): void {
+    if (ev.keyCode === 13) {
+      this._addItem(null);
+    }
+  }
 }
 
 declare global {

src/translations/en.json

@@ -761,7 +761,8 @@
         "cards": {
           "shopping-list": {
             "checked_items": "Checked items",
-            "clear_items": "Clear checked items"
+            "clear_items": "Clear checked items",
+            "add_item": "Add item"
           }
         }
       },