From efaad8b2da255f20066e98816ba950ec33c71e7e Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 6 Nov 2018 22:19:03 -0600
Subject: [PATCH 1/8] Add checked item section to shopping-list-card

* Not getting value back from `this.localize`? at line 109
---
 .../lovelace/cards/hui-shopping-list-card.ts  | 92 +++++++++++++------
 src/translations/en.json                      |  5 +
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index fac44b5afe9f..aa85c9b28cc3 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -79,33 +79,60 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-        ${
-          repeat(
-            this._items!,
-            (item) => item.id,
-            (item, index) =>
-              html`
-                <div class="editRow">
-                  <paper-checkbox
-                    slot="item-icon"
-                    id="${index}"
-                    ?checked="${item.complete}"
-                    .itemId="${item.id}"
-                    @click="${this._completeItem}"
-                    tabindex="0"
-                  ></paper-checkbox>
-                  <paper-item-body>
-                    <paper-input
-                      no-label-float
-                      .value="${item.name}"
-                      .itemId="${item.id}"
-                      @change="${this._saveEdit}"
-                    ></paper-input>
-                  </paper-item-body>
-                </div>
-              `
-          )
-        }
+      ${repeat(
+        this._items!.filter((item) => !item.complete),
+        (item) => item.id,
+        (item, index) =>
+          html`
+        <div class="editRow">
+          <paper-checkbox
+            slot="item-icon"
+            id=${index}
+            ?checked=${item.complete}
+            .itemId=${item.id}
+            @click=${this._completeItem}
+            tabindex='0'
+          ></paper-checkbox>
+          <paper-item-body>
+            <paper-input
+              no-label-float
+              .value='${item.name}'
+              .itemId=${item.id}
+              @change=${this._saveEdit}
+            ></paper-input>
+          </paper-item-body>
+        </div>
+        `
+      )}
+        <div class="divider"></div>
+        <div class="label">
+          ${this.localize("ui.lovelace.shopping-list.checked_items")}
+        </div>
+      ${repeat(
+        this._items!.filter((item) => item.complete),
+        (item) => item.id,
+        (item, index) =>
+          html`
+        <div class="editRow">
+          <paper-checkbox
+            slot="item-icon"
+            id=${index}
+            ?checked=${item.complete}
+            .itemId=${item.id}
+            @click=${this._completeItem}
+            tabindex='0'
+          ></paper-checkbox>
+          <paper-item-body>
+            <paper-input
+              no-label-float
+              .value='${item.name}'
+              .itemId=${item.id}
+              @change=${this._saveEdit}
+            ></paper-input>
+          </paper-item-body>
+        </div>
+        `
+      )}
       </ha-card>
     `;
   }
@@ -133,6 +160,17 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           position: relative;
           top: 1px;
         }
+        .label {
+          color: var(--primary-color);
+          margin-left: 16px;
+          margin-bottom: 11px;
+          margin-top: 11px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--divider-color);
+          margin: 10px;
+        }
       </style>
     `;
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index cc04a8926920..b0113ee54049 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -488,6 +488,11 @@
       "remember": "Remember",
       "log_in": "Log in"
     },
+    "lovelace": {
+      "shopping-list": {
+        "checked_items": "Checked items"
+      }
+    },
     "notification_drawer": {
       "click_to_configure": "Click button to configure {entity}",
       "empty": "No Notifications",

From be89d96637793db927db4d54168b0fdf0cba3b0f Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 6 Nov 2018 22:24:52 -0600
Subject: [PATCH 2/8] Alignment of label

---
 src/panels/lovelace/cards/hui-shopping-list-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index aa85c9b28cc3..204e34c749c1 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -162,7 +162,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
         }
         .label {
           color: var(--primary-color);
-          margin-left: 16px;
+          margin-left: 17px;
           margin-bottom: 11px;
           margin-top: 11px;
         }

From b4969f1763eeefd06a407f83b057e018ff85222e Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 6 Nov 2018 22:27:50 -0600
Subject: [PATCH 3/8] Address review comment

---
 src/panels/lovelace/cards/hui-shopping-list-card.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 204e34c749c1..0bd5fa1ff0df 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -96,7 +96,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           <paper-item-body>
             <paper-input
               no-label-float
-              .value='${item.name}'
+              value=${item.name}
               .itemId=${item.id}
               @change=${this._saveEdit}
             ></paper-input>
@@ -125,7 +125,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
           <paper-item-body>
             <paper-input
               no-label-float
-              .value='${item.name}'
+              value=${item.name}
               .itemId=${item.id}
               @change=${this._saveEdit}
             ></paper-input>

From 00314b3c5eedb0c8f76e74e19cffca675000a34d Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 7 Nov 2018 10:09:47 -0600
Subject: [PATCH 4/8] Address review comments

---
 .../lovelace/cards/hui-shopping-list-card.ts  | 22 ++++++++-----------
 src/translations/en.json                      | 10 ++++-----
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 0bd5fa1ff0df..5cef45c93c65 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -22,7 +22,7 @@ interface Config extends LovelaceConfig {
 
 class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
-  private _hass?: HomeAssistant;
+  public hass?: HomeAssistant;
   private _config?: Config;
   private _items?: ShoppingListItem[];
   private _unsubEvents?: Promise<() => Promise<void>>;
@@ -34,10 +34,6 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
     };
   }
 
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-  }
-
   public getCardSize(): number {
     return (
       (this._config ? (this._config.title ? 1 : 0) : 0) +
@@ -54,8 +50,8 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   public connectedCallback(): void {
     super.connectedCallback();
 
-    if (this._hass) {
-      this._unsubEvents = this._hass.connection.subscribeEvents(
+    if (this.hass) {
+      this._unsubEvents = this.hass.connection.subscribeEvents(
         () => this._fetchData(),
         "shopping_list_updated"
       );
@@ -72,7 +68,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected render(): TemplateResult {
-    if (!this._config || !this._hass) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
@@ -106,7 +102,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
       )}
         <div class="divider"></div>
         <div class="label">
-          ${this.localize("ui.lovelace.shopping-list.checked_items")}
+          ${this.localize("ui.panel.lovelace.shopping-list.checked_items")}
         </div>
       ${repeat(
         this._items!.filter((item) => item.complete),
@@ -176,19 +172,19 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private async _fetchData(): Promise<void> {
-    if (this._hass) {
-      this._items = await fetchItems(this._hass);
+    if (this.hass) {
+      this._items = await fetchItems(this.hass);
     }
   }
 
   private _completeItem(ev): void {
-    completeItem(this._hass!, ev.target.itemId, ev.target.checked).catch(() =>
+    completeItem(this.hass!, ev.target.itemId, ev.target.checked).catch(() =>
       this._fetchData()
     );
   }
 
   private _saveEdit(ev): void {
-    saveEdit(this._hass!, ev.target.itemId, ev.target.value).catch(() =>
+    saveEdit(this.hass!, ev.target.itemId, ev.target.value).catch(() =>
       this._fetchData()
     );
 
diff --git a/src/translations/en.json b/src/translations/en.json
index b0113ee54049..27923bdf6360 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -488,11 +488,6 @@
       "remember": "Remember",
       "log_in": "Log in"
     },
-    "lovelace": {
-      "shopping-list": {
-        "checked_items": "Checked items"
-      }
-    },
     "notification_drawer": {
       "click_to_configure": "Click button to configure {entity}",
       "empty": "No Notifications",
@@ -762,6 +757,11 @@
       "logbook": {
         "showing_entries": "[%key:ui::panel::history::showing_entries%]"
       },
+      "lovelace": {
+        "shopping-list": {
+          "checked_items": "Checked items"
+        }
+      },
       "mailbox": {
         "empty": "You do not have any messages",
         "playback_title": "Message playback",

From 1596f7198ae22fe5114689f091dfeede54e2cb75 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 7 Nov 2018 20:44:40 -0600
Subject: [PATCH 5/8] Address review comment and fix Travis errors

---
 .../lovelace/cards/hui-shopping-list-card.ts  | 108 +++++++++---------
 src/translations/en.json                      |   6 +-
 2 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 5cef45c93c65..c9ea48c54206 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -75,60 +75,66 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-      ${repeat(
-        this._items!.filter((item) => !item.complete),
-        (item) => item.id,
-        (item, index) =>
-          html`
-        <div class="editRow">
-          <paper-checkbox
-            slot="item-icon"
-            id=${index}
-            ?checked=${item.complete}
-            .itemId=${item.id}
-            @click=${this._completeItem}
-            tabindex='0'
-          ></paper-checkbox>
-          <paper-item-body>
-            <paper-input
-              no-label-float
-              value=${item.name}
-              .itemId=${item.id}
-              @change=${this._saveEdit}
-            ></paper-input>
-          </paper-item-body>
-        </div>
-        `
-      )}
+        ${
+          repeat(
+            this._items!.filter((item) => !item.complete),
+            (item) => item.id,
+            (item, index) =>
+              html`
+                <div class="editRow">
+                  <paper-checkbox
+                    slot="item-icon"
+                    id="${index}"
+                    ?checked="${item.complete}"
+                    .itemId="${item.id}"
+                    @click="${this._completeItem}"
+                    tabindex="0"
+                  ></paper-checkbox>
+                  <paper-item-body>
+                    <paper-input
+                      no-label-float
+                      value="${item.name}"
+                      .itemId="${item.id}"
+                      @change="${this._saveEdit}"
+                    ></paper-input>
+                  </paper-item-body>
+                </div>
+              `
+          )
+        }
         <div class="divider"></div>
         <div class="label">
-          ${this.localize("ui.panel.lovelace.shopping-list.checked_items")}
-        </div>
-      ${repeat(
-        this._items!.filter((item) => item.complete),
-        (item) => item.id,
-        (item, index) =>
-          html`
-        <div class="editRow">
-          <paper-checkbox
-            slot="item-icon"
-            id=${index}
-            ?checked=${item.complete}
-            .itemId=${item.id}
-            @click=${this._completeItem}
-            tabindex='0'
-          ></paper-checkbox>
-          <paper-item-body>
-            <paper-input
-              no-label-float
-              value=${item.name}
-              .itemId=${item.id}
-              @change=${this._saveEdit}
-            ></paper-input>
-          </paper-item-body>
+          ${
+            this.localize("ui.panel.lovelace.cards.shopping-list.checked_items")
+          }
         </div>
-        `
-      )}
+        ${
+          repeat(
+            this._items!.filter((item) => item.complete),
+            (item) => item.id,
+            (item, index) =>
+              html`
+                <div class="editRow">
+                  <paper-checkbox
+                    slot="item-icon"
+                    id="${index}"
+                    ?checked="${item.complete}"
+                    .itemId="${item.id}"
+                    @click="${this._completeItem}"
+                    tabindex="0"
+                  ></paper-checkbox>
+                  <paper-item-body>
+                    <paper-input
+                      no-label-float
+                      value="${item.name}"
+                      .itemId="${item.id}"
+                      @change="${this._saveEdit}"
+                    ></paper-input>
+                  </paper-item-body>
+                </div>
+              `
+          )
+        }
       </ha-card>
     `;
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 27923bdf6360..53ed0a13c227 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -758,8 +758,10 @@
         "showing_entries": "[%key:ui::panel::history::showing_entries%]"
       },
       "lovelace": {
-        "shopping-list": {
-          "checked_items": "Checked items"
+        "cards": {
+          "shopping-list": {
+            "checked_items": "Checked items"
+          }
         }
       },
       "mailbox": {

From 82b5b537793d658e9e70c7ab3f6029d1170f6952 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 8 Nov 2018 12:41:00 -0600
Subject: [PATCH 6/8] Address review comments

---
 .../lovelace/cards/hui-shopping-list-card.ts  | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index c9ea48c54206..651a7c273cfb 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -24,26 +24,26 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
   private _config?: Config;
-  private _items?: ShoppingListItem[];
+  private _uncheckedItems?: ShoppingListItem[];
+  private _checkedItems?: ShoppingListItem[];
   private _unsubEvents?: Promise<() => Promise<void>>;
 
   static get properties() {
     return {
       _config: {},
-      _items: {},
+      _uncheckedItems: {},
+      _checkedItems: {},
     };
   }
 
   public getCardSize(): number {
-    return (
-      (this._config ? (this._config.title ? 1 : 0) : 0) +
-      (this._items ? this._items.length : 3)
-    );
+    return (this._config ? (this._config.title ? 1 : 0) : 0) + 3;
   }
 
   public setConfig(config: Config): void {
     this._config = config;
-    this._items = [];
+    this._uncheckedItems = [];
+    this._checkedItems = [];
     this._fetchData();
   }
 
@@ -77,7 +77,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
       <ha-card .header="${this._config.title}">
         ${
           repeat(
-            this._items!.filter((item) => !item.complete),
+            this._uncheckedItems!,
             (item) => item.id,
             (item, index) =>
               html`
@@ -110,7 +110,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
         </div>
         ${
           repeat(
-            this._items!.filter((item) => item.complete),
+            this._checkedItems!,
             (item) => item.id,
             (item, index) =>
               html`
@@ -179,7 +179,18 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
 
   private async _fetchData(): Promise<void> {
     if (this.hass) {
-      this._items = await fetchItems(this.hass);
+      const checkedItems: ShoppingListItem[] = [];
+      const uncheckedItems: ShoppingListItem[] = [];
+      const items = await fetchItems(this.hass);
+      for (const key in items) {
+        if (items[key].complete) {
+          checkedItems.push(items[key]);
+        } else {
+          uncheckedItems.push(items[key]);
+        }
+      }
+      this._checkedItems = checkedItems;
+      this._uncheckedItems = uncheckedItems;
     }
   }
 

From 55416dc04f4fda04bba6547ac336babb7328c743 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 8 Nov 2018 12:46:15 -0600
Subject: [PATCH 7/8] Hide checked label when empty

---
 .../lovelace/cards/hui-shopping-list-card.ts  | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 651a7c273cfb..92ca665eb454 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -102,38 +102,46 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
               `
           )
         }
-        <div class="divider"></div>
-        <div class="label">
-          ${
-            this.localize("ui.panel.lovelace.cards.shopping-list.checked_items")
-          }
-        </div>
         ${
-          repeat(
-            this._checkedItems!,
-            (item) => item.id,
-            (item, index) =>
-              html`
-                <div class="editRow">
-                  <paper-checkbox
-                    slot="item-icon"
-                    id="${index}"
-                    ?checked="${item.complete}"
-                    .itemId="${item.id}"
-                    @click="${this._completeItem}"
-                    tabindex="0"
-                  ></paper-checkbox>
-                  <paper-item-body>
-                    <paper-input
-                      no-label-float
-                      value="${item.name}"
-                      .itemId="${item.id}"
-                      @change="${this._saveEdit}"
-                    ></paper-input>
-                  </paper-item-body>
+          this._checkedItems!.length > 0
+            ? html`
+                <div class="divider"></div>
+                <div class="label">
+                  ${
+                    this.localize(
+                      "ui.panel.lovelace.cards.shopping-list.checked_items"
+                    )
+                  }
                 </div>
+                ${
+                  repeat(
+                    this._checkedItems!,
+                    (item) => item.id,
+                    (item, index) =>
+                      html`
+                        <div class="editRow">
+                          <paper-checkbox
+                            slot="item-icon"
+                            id="${index}"
+                            ?checked="${item.complete}"
+                            .itemId="${item.id}"
+                            @click="${this._completeItem}"
+                            tabindex="0"
+                          ></paper-checkbox>
+                          <paper-item-body>
+                            <paper-input
+                              no-label-float
+                              value="${item.name}"
+                              .itemId="${item.id}"
+                              @change="${this._saveEdit}"
+                            ></paper-input>
+                          </paper-item-body>
+                        </div>
+                      `
+                  )
+                }
               `
-          )
+            : html``
         }
       </ha-card>
     `;

From 0799f708edeeeb7a95dac7279ca03d930be6821b Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 8 Nov 2018 12:52:25 -0600
Subject: [PATCH 8/8] Address review comment

---
 src/panels/lovelace/cards/hui-shopping-list-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 92ca665eb454..918b02fb39cb 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -141,7 +141,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
                   )
                 }
               `
-            : html``
+            : ""
         }
       </ha-card>
     `;