storing products functionality

app/components/modals/new-product.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  init() {
+    this.set('product', {});
+    this._super(...arguments);
+  }
+});

app/controllers/storage.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { storageFor } from 'ember-local-storage';
+import { action } from '@ember/object';
+
+export default class Storage extends Controller { 
+  @storageFor('products') products;
+
+  @action
+  onDelete(product) {
+    this.products.removeObject(product);  
+  }
+};

app/storages/products.js

@@ -0,0 +1,12 @@
+import StorageArray from 'ember-local-storage/local/array';
+
+const Storage = StorageArray.extend();
+
+// Uncomment if you would like to set initialState
+// Storage.reopenClass({
+//   initialState() {
+//     return [];
+//   }
+// });
+
+export default Storage;

app/templates/components/modals/new-product.hbs

@@ -0,0 +1,46 @@
+<Modals::BasicModal @name="addNew" as |Modal|>
+  <Modal.content>
+    <div class="flex flex-col p-4">
+      <div class="flex justify-center mb-2">
+        Nie znaleziono produktu. Dodaj jako nowy.
+      </div>
+      <input  
+        class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+        placeholder="Nazwa"
+        value={{this.product.name}}
+        oninput={{action (mut this.product.name) value="target.value"}}
+      >
+      <input  
+        class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+        placeholder="Białko"
+        value={{this.product.p}}
+        oninput={{action (mut this.product.p) value="target.value"}}
+      >
+      <input  
+        class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+        placeholder="Węglowodany"
+        value={{this.product.c}}
+        oninput={{action (mut this.product.c) value="target.value"}}
+      >
+      <input  
+        class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+        placeholder="Tłuszcz"
+        value={{this.product.f}}
+        oninput={{action (mut this.product.f) value="target.value"}}
+      >
+      <input  
+        class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+        placeholder="Kcal"
+        value={{this.product.kcal}}
+        oninput={{action (mut this.product.kcal) value="target.value"}}
+      >
+      <button 
+        type="button" 
+        class="text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+        {{on "click" (fn @onClickAddProduct product)}}  
+      >
+        Dodaj
+      </button>
+    </div>
+  </Modal.content>
+</Modals::BasicModal>

app/templates/storage.hbs

@@ -0,0 +1,38 @@
+<div class="text-gray-900">
+   <div class="p-4 flex">
+        <h1 class="text-3xl">
+          Produkty
+        </h1>
+    </div>
+    <div class="px-3 py-4 flex justify-center">
+        <table class="w-full text-md bg-white shadow-md rounded mb-4">
+            <tbody>
+                <tr class="border-b">
+                    <th class="text-left p-3 px-5">Nazwa</th>
+                    <th class="text-left p-3 px-5">Białko</th>
+                    <th class="text-left p-3 px-5">Węglowodany</th>
+                    <th class="text-left p-3 px-5">Tłuszcz</th>
+                    <th class="text-left p-3 px-5">kcal</th>
+                    <th></th>
+                </tr>
+                {{#each this.products as |product|}}
+                  <tr class="border-b hover:bg-orange-100">
+                    <td class="p-3 px-5">{{product.name}}</td>
+                    <td class="p-3 px-5">{{product.p}}</td>
+                    <td class="p-3 px-5">{{product.c}}</td>
+                    <td class="p-3 px-5">{{product.f}}</td>
+                    <td class="p-3 px-5">{{product.kcal}}</td>
+                    <td class="p-3 px-5 flex justify-end">
+                      <button 
+                        type="button" 
+                        class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+                        {{on "click" (fn this.onDelete product)}}>
+                        Usuń
+                      </button>
+                    </td>
+                  </tr>
+                {{/each}}
+            </tbody>
+        </table>
+    </div>
+</div>