Add ability to remove orders

views/dashboardPage/components/components.js

@@ -303,6 +303,8 @@ let orderDetailsComp = {
     display: function(order){
         openSidebar(document.querySelector("#orderDetails"));
 
+        document.querySelector("#removeOrderBtn").onclick = ()=>{this.remove(order._id)};
+
         document.querySelector("#orderDetails h1").innerText = order.orderId || order._id;
         document.querySelector("#orderDetails h3").innerText = new Date(order.date).toLocaleDateString("en-US");
 
@@ -332,6 +334,27 @@ let orderDetailsComp = {
         }
 
         document.querySelector("#orderTotalPrice p").innerText = `$${grandTotal.toFixed(2)}`;
+    },
+
+    remove: function(id){
+        fetch(`/order/${id}`, {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            }
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    updateOrders({_id: id}, true);
+                    banner.createNotification("Order successfully removed");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("Something went wrong, try refreshing the page");
+            });
     }
 }
 
@@ -500,7 +523,6 @@ let ingredientDetailsComp = {
         }
         for(let i = 0; i < recipes.length; i++){
             let li = document.createElement("li");
-            console.log(recipes[i]);
             li.innerText = recipes[i].name;
             li.onclick = ()=>{
                 changeStrand("recipeBookStrand");

views/dashboardPage/components/orderDetails.ejs

@@ -6,6 +6,13 @@
                 <polyline points="12 5 19 12 12 19"></polyline>
             </svg>
         </button>
+
+        <button id="removeOrderBtn" 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></h1>

views/dashboardPage/controller.js

@@ -115,15 +115,15 @@ let updateRecipes = (recipe, remove = false)=>{
 /*
 Updates an order in the front end
 Can create, edit or remove
-Inputs:
-    recipe: object
-        _id: id of recipe
-        name: name of recipe
-        price: price of recipe
-        ingredients: list of ingredients
-            ingredient: id of ingredient
-            quantity: quantity of ingredient
-    remove: if true, remove ingredient from inventory
+order = {
+    _id: id of recipe,
+    name: name of recipe,
+    price: price of recipe,
+    ingredients: [
+        ingredient: id of ingredient,
+        quantity: quantity of ingredient
+    ]
+}
 */
 let updateOrders = (order, remove = false)=>{
     let isNew = true;
@@ -146,6 +146,7 @@ let updateOrders = (order, remove = false)=>{
 
     ordersStrandObj.isPopulated = false;
     ordersStrandObj.display();
+    closeSidebar();
 }
 
 //Close any open sidebar