Create dialog with form for creating a new shopping list item

ibm-watson-data-lab · Sep 26, 2017 · 7556146 · 7556146
1 parent 7137c68
commit 7556146
Showing 1 changed file with 32 additions and 1 deletion.
diff --git a/src/my-items.html b/src/my-items.html
@@ -6,6 +6,10 @@
 <link rel="import" href="../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../bower_components/iron-form/iron-form.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
 <link rel="import" href="shopping-list-model.html">
 
 <dom-module id="my-items">
@@ -35,6 +39,11 @@
         right: 16px;
         bottom: 16px;
       }
+
+      paper-dialog {
+        width: 332px;
+        padding: 8px;
+      }
     </style>
 
     <template is="dom-if" if="[[loading]]">
@@ -65,7 +74,20 @@
 
     </template>
 
-    <paper-fab mini icon="add"></paper-fab>
+    <paper-fab mini icon="add" on-click="_listItemAdd"></paper-fab>
+
+    <paper-dialog id="listItemAddDialog">
+      <h2>New List Item</h2>
+      <paper-dialog-scrollable>
+        <iron-form id="listItemAddForm">
+          <paper-input id="newListItemTitle" name="title" label="Title" value="{{newListItem.title}}" required autofocus></paper-input>
+        </iron-form>
+      </paper-dialog-scrollable>
+      <div class="buttons">
+        <paper-button dialog-dismiss raised>Cancel</paper-button>
+        <paper-button dialog-confirm raised>Save</paper-button>
+      </div>
+    </paper-dialog>
 
   </template>
   <script>
@@ -137,6 +159,11 @@
             notify: true,
             computed: "_listOfShoppingListItemsIsEmpty(listOfShoppingListItems)"
           },
+          newListItem: {
+            type: Object,
+            notify: false,
+            value: {}
+          },
         };
       }
 
@@ -187,6 +214,10 @@
         });
       }
 
+      _listItemAdd() {
+        this.$.listItemAddDialog.open();
+      }
+
       ready() {
         super.ready();
         this.shoppingListRepository.ensureIndexes();