Show items and added event listeners

src/scripts/components/domBuilder.js

@@ -7,7 +7,7 @@ const domBuilder = () => {
     <div id="filter-container"></div>
     <div id="form-container"></div>
     <div id="card-container"></div>
-    <div id="view"></div>
+    <div id="view">
   </div>`;
 
   renderToDOM('#app', domString);

src/scripts/components/pages/revenue.js

@@ -1,5 +1,5 @@
-import renderToDOM from '../../helpers/renderToDom';
 import clearDom from '../../helpers/clearDom';
+import renderToDOM from '../../helpers/renderToDom';
 
 const renderRevenue = () => {
   clearDom();

src/scripts/components/pages/showItems.js

@@ -0,0 +1,41 @@
+import { getItems } from '../../api/itemData';
+import clearDom from '../../helpers/clearDom';
+import renderToDOM from '../../helpers/renderToDom';
+
+const emptyItems = () => {
+  const domString = '<h1>No Items</h1>';
+  renderToDOM('#store', domString);
+};
+
+const showItems = (array) => {
+  clearDom();
+  getItems().then((itemArray) => {
+    const sum = itemArray.reduce((accumulator, curr) => accumulator.itemPrice + curr.itemPrice);
+    if (array.length) {
+      let domString = `
+      <h1>Total $${sum}</h1>
+    `;
+      array.forEach((obj) => {
+        domString += `
+        <div class="card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">${obj.itemName}</h5>
+            <h6 class="card-price mb-2 text-muted">${obj.itemPrice}</h6>
+            <hr>
+            <i class="fas fa-edit btn btn-info" id="edit-item--${obj.firebaseKey}"></i>
+            <i class="btn btn-danger fas fa-trash-alt" id="delete-item-btn--${obj.firebaseKey}"></i>
+          </div>
+        </div>
+    `;
+      });
+      renderToDOM('#card-container', domString);
+    }
+  });
+  const btnString = `
+    <button id="add-item-btn" type="button" class="btn btn-primary btn-lg">Add Item</button>
+    <button id="checkout" type="button" class="btn btn-secondary btn-lg">Checkout</button>
+  `;
+  renderToDOM('#view', btnString);
+};
+
+export { showItems, emptyItems };

src/scripts/events/domEvents.js

@@ -1,7 +1,11 @@
+import { getItems, getSingleItem } from '../api/itemData';
 import { deleteOrders, getOrders, getSingleOrder } from '../api/orderData';
 import createOrderForm from '../components/forms/createAnOrderForm';
+import addItemForm from '../components/forms/addItemForm';
+import addPaymentForm from '../components/forms/addPaymentForm';
 import renderRevenue from '../components/pages/revenue';
 import { showOrders } from '../components/pages/showOrders';
+import { showItems } from '../components/pages/showItems';
 
 const domEvents = () => {
   document.querySelector('#view').addEventListener('click', (e) => {
@@ -21,13 +25,28 @@ const domEvents = () => {
     if (e.target.id.includes('createOrderBtn')) {
       createOrderForm();
     }
+    if (e.target.id.includes('add-item-btn')) {
+      addItemForm();
+    }
     if (e.target.id.includes('viewRevBtn')) {
       renderRevenue();
     }
+    if (e.target.id.includes('details-order')) {
+      getItems().then((itemArray) => showItems(itemArray));
+    }
     if (e.target.id.includes('edit-order')) {
       const [, firebaseKey] = e.target.id.split('--');
       getSingleOrder(firebaseKey).then((wordObject) => createOrderForm(wordObject));
     }
+    if (e.target.id.includes('checkout')) {
+      addPaymentForm();
+    }
+  });
+  document.querySelector('#card-container').addEventListener('click', (e) => {
+    if (e.target.id.includes('edit-item')) {
+      const [, firebaseKey] = e.target.id.split('--');
+      getSingleItem(firebaseKey).then((itemObject) => addItemForm(itemObject));
+    }
   });
 };
 

src/scripts/events/formEvents.js

@@ -25,6 +25,7 @@ const formEvents = () => {
         customerPhone: document.querySelector('#phone').value,
         customerEmail: document.querySelector('#email').value,
         orderType: document.querySelector('#order-type').value,
+        closedStatus: false,
         firebaseKey
       };