Add ability to toggle hidden status of recipes on both backend and frontend.

controllers/recipeData.js

@@ -263,5 +263,26 @@ module.exports = {
                 });
             })
             .catch((err)=>{});
+    },
+
+    /*
+    GET: toggles the hidden property of a recipe
+    req.params.id = String (id of recipe)
+    response = {}
+    */
+    hideRecipe: function(req, res){
+        Recipe.findOne({_id: req.params.id})
+            .then((recipe)=>{
+                if(recipe.merchant.toString() !== res.locals.merchant._id.toString()) throw "unauthorized";
+                recipe.hidden = (recipe.hidden === true) ? false : true;
+                return recipe.save();
+            })
+            .then((recipe)=>{
+                return res.json({});
+            })
+            .catch((err)=>{
+                if(err === "unauthorized") return res.json("YOU DO NOT HAVE PERMISSION TO EDIT THAT RECIPE");
+                return res.json("ERROR: UNABLE TO HIDE/UNHIDE THE RECIPE");
+            });
     }
 }

routes.js

@@ -47,6 +47,7 @@ module.exports = function(app){
     app.delete("/recipe/remove/:id", session, recipeData.removeRecipe);
     app.post("/recipes/create/spreadsheet", session, upload.single("recipes"), recipeData.createFromSpreadsheet);
     app.get("/recipes/download/spreadsheet", session, recipeData.spreadsheetTemplate);
+    app.get("/recipes/hide/:id", session, recipeData.hideRecipe);
 
     //Orders
     app.post("/orders/get", session, orderData.getOrders);

views/dashboardPage/ejs/sidebars/recipeDetails.ejs

@@ -7,6 +7,13 @@
             </svg>
         </button>
 
+        <button id="hideRecipeBtn" class="iconButton">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                <line x1="1" y1="1" x2="23" y2="23"></line>
+            </svg>
+        </button>
+
         <button id="editRecipeBtn" 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">
                 <path d="M12 20h9"></path>

views/dashboardPage/js/classes/Merchant.js

@@ -180,7 +180,6 @@ class Merchant{
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{

views/dashboardPage/js/classes/Recipe.js

@@ -99,6 +99,14 @@ class Recipe{
         return this._parent;
     }
 
+    get hidden(){
+        return this._hidden;
+    }
+
+    set hidden(hidden){
+        this._hidden = hidden;
+    }
+
     get ingredients(){
         return this._ingredients;
     }

views/dashboardPage/js/sidebars/recipeDetails.js

@@ -1,6 +1,7 @@
 let recipeDetails = {
     display: function(recipe){
         document.getElementById("editRecipeBtn").onclick = ()=>{controller.openSidebar("editRecipe", recipe)};
+        document.getElementById("hideRecipeBtn").onclick = ()=>{this.hide(recipe)};
         document.getElementById("recipeName").innerText = recipe.name;
 
         let button = document.getElementById("removeRecipeBtn");
@@ -36,6 +37,23 @@ let recipeDetails = {
         document.getElementById("recipePrice").children[1].innerText = `$${recipe.price.toFixed(2)}`;
     },
 
+    hide: function(recipe){
+        recipe.hidden = (recipe.hidden === true) ? false : true;
+
+        controller.openStrand("recipeBook");
+
+        fetch(`/recipes/hide/${recipe.id}`)
+            .then(response => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    recipe.hidden = (recipe.hidden === true) ? false : true;
+                    controller.openStrand("recipes");
+                    controller.createBanner(response, "error");
+                }
+            })
+            .catch((err)=>{});
+    },
+
     remove: function(recipe){
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";