Style displaying of orders

controllers/orderData.js

@@ -11,7 +11,13 @@ module.exports = {
         Order.aggregate([
             {$match: {merchant: req.session.user}},
             {$sort: {date: -1}},
-            {$limit: 25}
+            {$limit: 25},
+            {$project: {
+                _id: 0,
+                orderId: 1,
+                date: 1,
+                ingredients: 1
+            }}
         ]).toArray()
             .then((orders)=>{
                 return res.json({orders});
@@ -36,17 +42,14 @@ module.exports = {
             req.session.error = "Must be logged in to do that";
             return res.redirect("/");
         }
-        console.log("something here");
 
         let newOrder = new Order(req.body);
         newOrder.merchant = req.session.user;
         newOrder.save()
             .then((response)=>{
-                console.log("responsing");
                 return res.json({});
             })
             .catch((err)=>{
-                console.log(err);
                 return res.json("Error: unable to save the new order");
             });
     }

views/dashboardPage/components/components.js

@@ -187,7 +187,7 @@ let newOrderComp = {
                     priceInput.type = "number";
                     priceInput.min = "0";
                     priceInput.step = "0.01";
-                    priceInput.placeholder = "Total Cost";
+                    priceInput.placeholder = "Price Per Unit";
                     ingredientDiv.appendChild(priceInput);
 
                     category.children[1].appendChild(ingredientDiv);

views/dashboardPage/dashboard.css

@@ -38,6 +38,23 @@ body{
     align-items: center;
 }
 
+.rowItem{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgb(240, 252, 255);
+    border-radius: 5px;
+    padding: 20px 20px;
+    width: 90%;
+    border: 1px solid gray;
+    cursor: pointer;
+}
+
+    .rowItem:hover{
+        background: rgb(0, 27, 45);
+        color: white;
+    }
+
 /* Cards */
 .card{
     margin: 0 15px;
@@ -274,24 +291,18 @@ body{
         overflow-y: auto;
     }
 
-    .recipeItem{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: rgb(240, 252, 255);
-        border-radius: 5px;
-        padding: 20px 20px;
-        width: 90%;
-        border: 1px solid gray;
-        cursor: pointer;
-    }
-
-    .recipeItem:hover{
-        background: rgb(0, 27, 45);
-        color: white;
-    }
-
 /* Orders Strand */
 #ordersStrand{
     display: none;
-}
+    align-items: center;
+}
+
+    #orderList{
+        width: 50%;
+        margin-top: 50px;
+    }
+
+        #orderList p:first-of-type{
+            font-weight: bold;
+            font-size: 20px;
+        }

views/dashboardPage/dashboard.ejs

@@ -86,29 +86,22 @@
                     <h1 class="strandTitle">Orders</h1>
 
                     <button class="button" onclick="newOrderComp.display()">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
                         add
                     </button>
                 </div>
 
-                <table id="orderList">
-                    <thead>
-                        <tr>
-                            <th>ID #</th>
-                            <th>Item Count</th>
-                            <th>Date</th>
-                            <th>Cost</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
+                <div id="orderList"></div>
 
                 <template id="order">
-                    <tr class="order">
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
+                    <div class="rowItem">
+                        <p></p>
+                        <p></p>
+                        <p></p>
+                        <p></p>
                     </div>
                 </template>
             </div>

views/dashboardPage/orders.js

@@ -14,7 +14,7 @@ window.ordersStrandObj = {
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
-                        let tbody = document.querySelector("#orderList tbody");
+                        let listDiv = document.querySelector("#orderList");
                         let template = document.querySelector("#order").content.children[0];
 
                         for(let i = 0; i < response.length; i++){
@@ -25,16 +25,20 @@ window.ordersStrandObj = {
                                 totalCost += response[i].ingredients[j].quantity * response[i].ingredients[j].price;
                             }
 
-                            row.children[0].innerText = response[i]._id;
-                            row.children[1].innerText = response[i].ingredients.length;
-                            row.children[2].innerText = response[i].date;
+                            row.children[0].innerText = response[i].orderId;
+                            row.children[1].innerText = `${response[i].ingredients.length} items`;
+                            row.children[2].innerText = new Date(response[i].date).toLocaleDateString("en-US");
                             row.children[3].innerText = totalCost;
+
+                            listDiv.appendChild(row);
                         }
                     }
                 })
                 .catch((err)=>{
                     banner.createError("Unable to retrieve your orders at the moment");
                 });
+
+            this.isPopulated = true;
         }
     }
 }

views/dashboardPage/recipeBook.js

@@ -18,7 +18,7 @@ window.recipeBookStrandObj = {
 
         for(let recipe of merchant.recipes){
             let recipeDiv = document.createElement("div");
-            recipeDiv.classList = "recipeItem";
+            recipeDiv.classList = "rowItem";
             recipeDiv.onclick = ()=>{recipeDetailsComp.display(recipe)};
             recipeList.appendChild(recipeDiv);
 

views/shared/shared.css

@@ -42,46 +42,6 @@ button::-moz-focus-inner{
     cursor: pointer;
 }
 
-table{
-    border-spacing: 0;
-}
-
-    th{
-        color: rgb(240, 252, 255);
-        padding: 20px;
-        background: rgb(0, 27, 45);
-        color: rgb(255, 99, 107);
-    }
-
-    tr{
-        color: rgb(0, 27, 45);
-        text-align: center;
-    }
-
-    tr, td{
-        padding: 5px 20px;
-    }
-
-    tr:nth-of-type(even){
-        background: rgb(201, 201, 201);
-    }
-
-    tr:nth-of-type(odd){
-        background: rgb(240, 252, 255);
-    }
-
-    .clickableRow{
-        cursor: pointer;
-        transition: 0.3s;
-    }
-
-        .clickableRow:hover{
-            position: relative;
-            z-index: 2;
-            box-shadow: 0 0 25px black;
-            border-radius: 50px;
-        }
-
 form{
     display: flex;
     flex-direction: column;