Add modal for deleting recipes.

Bug fix: merchant was not being saved after deleting recipes.

controllers/recipeData.js

@@ -87,21 +87,29 @@ module.exports = {
                 return res.json("ERROR: UNABLE TO UPDATE DATA");
             });
     },
-
-    //DELETE - removes a single recipe from the merchant and the database
+    /*
+    DELETE: removes a single recipe from the merchant and the database
+    req.params.id = String (recipe id)
+    response = {}
+    */
     removeRecipe: function(req, res){
-        if(res.locals.merchant.pos === "square"){
-            return res.json("YOU MUST EDIT YOUR RECIPES INSIDE SQUARE");
-        }
+        if(res.locals.merchant.pos === "square") return res.json("YOU MUST EDIT YOUR RECIPES INSIDE SQUARE");
         
+        console.log(res.locals.merchant.recipes);
+        console.log();
         for(let i = 0; i < res.locals.merchant.recipes.length; i++){
             if(res.locals.merchant.recipes[i].toString() === req.params.id){
                 res.locals.merchant.recipes.splice(i, 1);
                 break;
             }
         }
-
-        return res.json({});
+        res.locals.merchant.save()
+            .then(()=>{
+                return res.json({});
+            })
+            .catch((err)=>{
+                return res.json("ERROR: UNABLE TO DELETE RECIPE");
+            });
     },
 
     createFromSpreadsheet: function(req, res){

views/dashboardPage/ejs/sidebars/recipeDetails.ejs

@@ -14,14 +14,12 @@
             </svg>
         </button>
 
-        <% if(merchant.pos === "none"){ %>
-            <button id="removeRecipeBtn" class="iconButton">
-                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                </svg>
-            </button>
-        <% } %>
+        <button id="removeRecipeBtn" class="iconButton">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="3 6 5 6 21 6"></polyline>
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+            </svg>
+        </button>
     </div>
 
     <h1 id="recipeName"></h1>

views/dashboardPage/ejs/strands/recipeBook.ejs

@@ -2,11 +2,7 @@
     <div class="strandHead">
         <h1 class="strandTitle">RECIPE BOOK</h1>
 
-        <% if(merchant.pos === "none"){ %>
-            <button class="button mobileHide" onclick="controller.openSidebar('addRecipe')">NEW</button>
-        <% }else{ %>
-            <button id="posUpdateRecipe" class="button mobileHide">UPDATE</button>
-        <% } %>
+        <button id="recipeUpdate" class="button mobileHide"></button>
     </div>
 
     <div class="searchBar">

views/dashboardPage/js/dashboard.js

@@ -244,6 +244,13 @@ controller = {
                 content.children[2].children[0].onclick = ()=>{controller.closeModal()};
                 content.children[2].children[1].onclick = ()=>{ingredientDetails.remove(data)};
                 break;
+            case "confirmDeleteRecipe":
+                content = document.getElementById("modalConfirm");
+                content.style.display = "flex";
+                content.children[1].innerText = `Are you sure you want to delete recipe: ${data.name}?`;
+                content.children[2].children[0].onclick = ()=>{controller.closeModal()};
+                content.children[2].children[1].onclick = ()=>{recipeDetails.remove(data)};
+                break;
             case "squareLocations":
                 modalScript.squareLocations(data);
                 break;
@@ -379,6 +386,7 @@ window.state = {
         this.updateTransactions();
         this.updateOrders();
         document.getElementById("menuLocationName").innerText = merchant.name;
+        recipeBook.isPopulated = false;
     }
 }
 

views/dashboardPage/js/sidebars/recipeDetails.js

@@ -2,8 +2,16 @@ let recipeDetails = {
     display: function(recipe){
         document.getElementById("editRecipeBtn").onclick = ()=>{controller.openSidebar("editRecipe", recipe)};
         document.getElementById("recipeName").innerText = recipe.name;
-        if(merchant.pos === "none"){
-            document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove(recipe)};
+
+        let button = document.getElementById("removeRecipeBtn");
+        switch(merchant.pos){
+            case "square":
+                button.style.display = "none";
+                break;
+            case "none":
+                button.style.display = "block";
+                button.onclick = ()=>{controller.openModal("confirmDeleteRecipe", recipe)};
+                break;
         }
 
         //ingredient list
@@ -44,6 +52,7 @@ let recipeDetails = {
                     state.updateRecipes();
 
                     controller.createBanner("RECIPE REMOVED", "success");
+                    controller.closeModal();
                     controller.openStrand("recipeBook");
                 }
             })

views/dashboardPage/js/strands/recipeBook.js

@@ -8,8 +8,18 @@ let recipeBook = {
         if(!this.isPopulated){
             this.populateRecipes();
 
-            if(merchant.pos === "square") document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate()};
-            
+            let button = document.getElementById("recipeUpdate");
+            switch(merchant.pos){
+                case "square":
+                    button.innerText = "UPDATE";
+                    button.onclick = ()=>{this.posUpdate()};
+                    break;
+                case "none":
+                    button.innerText = "NEW";
+                    button.onclick = ()=>{controller.openSidebar("addRecipe")};
+                    break;
+            }
+                            
             document.getElementById("recipeSearch").oninput = ()=>{this.search()};
 
             this.populateRecipes();