Add confirm modal for deleting ingredients.

views/dashboardPage/js/dashboard.js

@@ -231,11 +231,19 @@ controller = {
                 modalScript.newMerchant();
                 break;
             case "confirmDeleteMerchant":
-                let div = document.getElementById("modalConfirm");
-                div.style.display = "flex";
-                div.children[1].innerText = "Are you sure you want to delete this merchant?";
-                div.children[2].children[1].onclick = ()=>{account.deleteMerchant()};
-                div.children[2].children[0].onclick = ()=>{controller.closeModal()};
+                content = document.getElementById("modalConfirm");
+                content.style.display = "flex";
+                content.children[1].innerText = "Are you sure you want to delete this merchant?";
+                content.children[2].children[0].onclick = ()=>{controller.closeModal()};
+                content.children[2].children[1].onclick = ()=>{account.deleteMerchant()};
+                break;
+            case "confirmDeleteIngredient":
+                console.log(data);
+                content = document.getElementById("modalConfirm");
+                content.style.display = "flex";
+                content.children[1].innerText = `Are you sure you want to delete ingredient: ${data.ingredient.name}?`;
+                content.children[2].children[0].onclick = ()=>{controller.closeModal()};
+                content.children[2].children[1].onclick = ()=>{ingredientDetails.remove(data)};
                 break;
             case "squareLocations":
                 modalScript.squareLocations(data);

views/dashboardPage/js/sidebars/ingredientDetails.js

@@ -3,12 +3,11 @@ let ingredientDetails = {
 
     display: function(ingredient){
         document.getElementById("editIngBtn").onclick = ()=>{controller.openSidebar("editIngredient", ingredient)};
-        document.getElementById("removeIngBtn").onclick = ()=>{this.remove(ingredient)};
+        document.getElementById("removeIngBtn").onclick = ()=>{controller.openModal("confirmDeleteIngredient", ingredient)};
         document.getElementById("ingredientDetailsCategory").innerText = ingredient.ingredient.category;
         document.getElementById("ingredientDetailsName").innerText = ingredient.ingredient.name;
         document.getElementById("ingredientStock").innerText = ingredient.getQuantityDisplay();
 
-
         //Calculate and display average daily use
         let quantities = [];
         let now = new Date();
@@ -74,6 +73,7 @@ let ingredientDetails = {
                     state.updateIngredients();
                     
                     controller.openStrand("ingredients");
+                    controller.closeModal();
                     controller.createBanner("INGREDIENT REMOVED", "success");
                 }
             })