ch[#161947498] Connect delete button to API

ebenezerdon · Nov 14, 2018 · 0701547 · 0701547
1 parent 2c0e32c
commit 0701547
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/UI/assets/js/products.js b/UI/assets/js/products.js
@@ -1,19 +1,21 @@
 const addProductDiv = document.getElementById('add-product');
-const deleteProductDiv = document.getElementById('confirm-delete');
+/* const deleteProductDiv = document.getElementById('confirm-delete'); */
 let deleteProduct;
+let confirmDeleteModal;
+let closeDeleteModal;
 const addProductModal = () => {
   addProductDiv.style.display = 'block';
 };
 const closeProductModal = () => {
   addProductDiv.style.display = 'none';
 };
 
-const deleteProductModal = () => {
+/* const deleteProductModal = () => {
   deleteProductDiv.style.display = 'block';
 };
 const closeDeleteModal = () => {
   deleteProductDiv.style.display = 'none';
-};
+}; */
 
 const getProducts = () => {
   fetch('https://newstoremanager.herokuapp.com/api/v1/products', {
@@ -41,13 +43,25 @@ const getProducts = () => {
               <button>Add to cart</button>
               <div class='edit-product-div'>
                 <button class='edit-product'>Edit</button>
-                <button class='delete-product' onclick='deleteProduct(${product.id})'>Delete</button>
+                <button class='delete-product' onclick='confirmDeleteModal(${product.id})'>Delete</button>
               </div>
             <div>
           </div>
+          <div class="confirm-delete" id="${product.id}">
+            <h3>Are you sure you want to delete this product?</h3>
+            <button id="confirm-delete-btn" onclick='deleteProduct(${product.id}); closeDeleteModal(${product.id})'>Yes</button>
+            <button id="close-delete-modal" onclick="closeDeleteModal(${product.id})">No</button>
+          </div>
         `;
         document.getElementById('products-list').innerHTML += output;
 
+        confirmDeleteModal = (productId) => {
+          document.getElementById(productId).style.display = 'block';
+        };
+        closeDeleteModal = (productId) => {
+          document.getElementById(productId).style.display = 'none';
+        };
+
         deleteProduct = (productId) => {
           const options = {
             method: 'DELETE',

diff --git a/UI/pages/products.html b/UI/pages/products.html
@@ -58,12 +58,6 @@
       <button type="submit"class="btn p-modal">Add product</button>
       <a href="" class="btn p-modal" id="close-modal-btn">Close</a>
   </form>
-
-  <div class="confirm-delete" id="confirm-delete">
-    <h3>Are you sure you want to delete this product?</h3>
-    <button id="confirm-delete-btn">Yes</button>
-    <button id="close-delete-modal" onclick="closeDeleteModal()">No</button>
-  </div>
 
   <div class='row' id="products-list"></div>