Shopping List: Allow adding items (#647)

* Shopping List: Allow adding items

* Remove unused parts

panels/shopping-list/ha-panel-shopping-list.html

@@ -21,38 +21,38 @@
       :host {
         height: 100%;
       }
+      app-toolbar paper-listbox {
+        width: 150px;
+      }
+      app-toolbar paper-item {
+        cursor: pointer;
+      }
       .content {
-        padding: 24px 0 32px;
+        padding-bottom: 32px;
         max-width: 600px;
         margin: 0 auto;
       }
       paper-card {
         display: block;
-        padding-bottom: 16px;
       }
-      .list-header { @apply --paper-font-headline; }
-      .list-options {
-        position: absolute;
-        top: 0;
-        right: 0;
-        color: var(--secondary-text-color);
+      paper-icon-item {
+        border-top: 1px solid var(--divider-color);
       }
-      .list-header paper-listbox {
-        width: 150px;
-      }
-      .list-header paper-item {
-        cursor: pointer;
-      }
-      paper-item {
-        --paper-item-focused: {
-          background-color: white;
-        }
+      paper-icon-item:first-child {
+        border-top: 0;
       }
       paper-checkbox {
-        padding: 11px 7px;
+        padding: 11px;
       }
       paper-input {
-        width: 100%;
+        --paper-input-container-underline: {
+          display: none;
+        }
+        --paper-input-container-underline-focus: {
+          display: none;
+        }
+        position: relative;
+        top: 1px;
       }
       .tip {
         padding: 24px;
@@ -66,70 +66,63 @@
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Shopping List</div>
-          <ha-start-voice-button hass='[[hass]]'></ha-start-voice-button>
+          <ha-start-voice-button hass='[[hass]]' can-listen='{{canListen}}'></ha-start-voice-button>
+          <paper-menu-button
+            horizontal-align="right"
+            horizontal-offset="-5"
+            vertical-offset="-5"
+          >
+            <paper-icon-button
+              icon="mdi:dots-vertical"
+              slot="dropdown-trigger"
+            ></paper-icon-button>
+            <paper-listbox slot="dropdown-content">
+              <paper-item
+                on-tap="_clearCompleted"
+              >Clear completed</paper-item>
+            </paper-listbox>
+          </paper-menu-button>
         </app-toolbar>
       </app-header>
 
       <div class='content'>
         <paper-card>
-          <div class="card-content list-header">Shopping List
-            <div class="list-options">
-              <paper-menu-button
-                horizontal-align="right"
-                horizontal-offset="-5"
-                vertical-offset="-5"
-              >
-                <paper-icon-button
-                  icon="mdi:dots-vertical"
-                  slot="dropdown-trigger"
-                ></paper-icon-button>
-                <paper-listbox slot="dropdown-content">
-                  <paper-item
-                    on-tap="_clearCompleted"
-                  >Clear completed</paper-item>
-                </paper-listbox>
-              </paper-menu-button>
-            </div>
-          </div>
-          <template is='dom-if' if='[[!items.length]]'>
-            <div class='card-content'>
-              You have no items on your shopping list.
-            </div>
-          </template>
+          <paper-icon-item on-focus='_focusRowInput'>
+            <paper-icon-button
+              slot="item-icon"
+              icon="mdi:plus"
+              on-tap='_addItem'
+            ></paper-icon-button>
+            <paper-item-body>
+              <paper-input
+                id='addBox'
+                placeholder="Add item"
+                on-keydown='_addKeyPress'
+                no-label-float
+              ></paper-input>
+            </paper-item-body>
+          </paper-icon-item>
+
           <template is='dom-repeat' items='[[items]]'>
             <paper-icon-item on-tap='_enableEditting'>
-              <paper-checkbox
-                slot="item-icon"
-                checked='{{item.complete}}'
-                on-tap='_itemCompleteTapped'
-                tabindex='0'
-              ></paper-checkbox>
+                <paper-checkbox
+                  slot="item-icon"
+                  checked='{{item.complete}}'
+                  on-tap='_itemCompleteTapped'
+                  tabindex='0'
+                ></paper-checkbox>
               <paper-item-body>
-                <template is='dom-if' if='[[!_computeIsEditting(_editIndex, index)]]'>
-                  [[item.name]]
-                </template>
-                <template is='dom-if' if='[[_computeIsEditting(_editIndex, index)]]' restamp>
-                  <paper-input
-                    tabindex='0'
-                    autofocus
-                    id='editBox'
-                    no-label-float
-                    value='{{_editValue}}'
-                    on-keydown='_editKeyPress'
-                  ></paper-input>
-                </template>
+                <paper-input
+                  id='editBox'
+                  no-label-float
+                  value='[[item.name]]'
+                  on-change='_saveEdit'
+                ></paper-input>
               </paper-item-body>
-              <template is='dom-if' if='[[_computeIsEditting(_editIndex, index)]]'>
-                <paper-icon-button
-                  icon='mdi:content-save'
-                  on-tap='_finishEditting'
-                  alt='Save item'
-                ></paper-icon-button>
-              </template>
             </paper-icon-item>
           </template>
         </paper-card>
-        <div class='tip'>
+        <div class='tip' hidden$='[[!canListen]]'>
           Tap the microphone on the top right and say "Add candy to my shopping list"
         </div>
       </div>
@@ -146,26 +139,14 @@ class HaPanelShoppingList extends Polymer.Element {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
+      canListen: Boolean,
       items: {
         type: Array,
         value: [],
       },
-      _editIndex: {
-        type: Number,
-        value: -1,
-      },
-      _editValue: {
-        type: String,
-        value: '',
-      },
     };
   }
 
-  ready() {
-    super.ready();
-    this.addEventListener('keydown', ev => this._checkEsc(ev));
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this._fetchData = this._fetchData.bind(this);
@@ -183,48 +164,39 @@ class HaPanelShoppingList extends Polymer.Element {
   _fetchData() {
     this.hass.callApi('get', 'shopping_list')
       .then(function (items) {
+        items.reverse();
         this.items = items;
       }.bind(this));
   }
 
-  _computeIsEditting(editIndex, index) {
-    return editIndex === index;
-  }
-
   _itemCompleteTapped(ev) {
     ev.stopPropagation();
     var item = ev.model.item;
     this.hass.callApi('post', 'shopping_list/item/' + item.id, {
-      complete: item.complete
-    }).catch(function () {
-      this._fetchData();
-    }.bind(this));
+      complete: !item.complete
+    }).catch(() => this._fetchData());
   }
 
-  _enableEditting(ev) {
-    var item = ev.model.item;
-    var index = this.items.indexOf(item);
-
-    if (index === this._editIndex) return;
-
-    this._editValue = item.name;
-    this._editIndex = index;
+  _addItem(ev) {
+    this.hass.callApi('post', 'shopping_list/item', {
+      name: this.$.addBox.value,
+    }).catch(() => this._fetchData());
+    this.$.addBox.value = '';
+    // Presence of 'ev' means tap on "add" button.
+    if (ev) {
+      setTimeout(() => this.$.addBox.focus(), 10);
+    }
   }
 
-  _cancelEditting() {
-    this._editIndex = -1;
-    this._editValue = '';
+  _addKeyPress(ev) {
+    if (ev.keyCode === 13) {
+      this._addItem();
+    }
   }
 
-  _finishEditting(ev) {
-    ev.stopPropagation();
-
-    var index = this._editIndex;
-    var name = this._editValue;
-    var item = this.items[index];
-
-    this._editIndex = -1;
-    this._editValue = '';
+  _saveEdit(ev) {
+    const { index, item } = ev.model;
+    const name = ev.target.value;
 
     if (name === item.name) {
       return;
@@ -233,21 +205,7 @@ class HaPanelShoppingList extends Polymer.Element {
     this.set(['items', index, 'name'], name);
     this.hass.callApi('post', 'shopping_list/item/' + item.id, {
       name: name
-    }).catch(function () {
-      this._fetchData();
-    }.bind(this));
-  }
-
-  _editKeyPress(ev) {
-    if (ev.keyCode === 13) {
-      this._finishEditting(ev);
-    }
-  }
-
-  _checkEsc(ev) {
-    if (ev.keyCode === 27) {
-      this._cancelEditting();
-    }
+    }).catch(() => this._fetchData());
   }
 
   _clearCompleted() {

src/components/ha-start-voice-button.html

@@ -27,6 +27,7 @@ class HaStartVoiceButton extends window.hassMixins.EventsMixin(Polymer.Element)
       canListen: {
         type: Boolean,
         computed: 'computeCanListen(hass)',
+        notify: true,
       },
     };
   }