Add sorting and filtering to add ingredients action

views/inventoryPage/addIngredient.js

@@ -1,24 +1,21 @@
 window.addIngredientObj = {
     isPopulated: false,
     rows: [],
+    currentSort: 0,
 
     display: function(){
         clearScreen();
         document.querySelector("#addIngredientAction").style.display = "flex";
 
         if(!this.isPopulated){
-            this.populateIngredients();
+            this.filter();
             this.isPopulated = true;
         }
     },
 
-    populateIngredients: function(){
-        let tbody = document.querySelector("#addIngredientAction tbody");
-
-        while(tbody.children.length > 0){
-            tbody.removeChild(tbody.firstChild);
-        }
-
+    filter: function(){
+        this.rows = [];
+        
         axios.get("/ingredients")
             .then((response)=>{
                 if(typeof(response.data) === "string"){
@@ -33,11 +30,12 @@ window.addIngredientObj = {
                             }
                         }
 
-                        if(!exists){
+                        let searchStr = document.querySelector("#addFilter").value;
+
+                        if(!exists && ingredient.name.includes(searchStr)){
                             let row = document.createElement("tr");
                             row._id = ingredient._id;
                             this.rows.push(row);
-                            tbody.appendChild(row);
 
                             let checkbox = document.createElement("td");
                             row.appendChild(checkbox);
@@ -68,6 +66,8 @@ window.addIngredientObj = {
                             quantity.appendChild(quantityInput);
                         }
                     }
+
+                    this.displayIngredients();
                 }
             })
             .catch((err)=>{
@@ -76,6 +76,30 @@ window.addIngredientObj = {
             });
     },
 
+    displayIngredients: function(){
+        let tbody = document.querySelector("#addIngredientAction tbody");
+
+        while(tbody.children.length > 0){
+            tbody.removeChild(tbody.firstChild);
+        }
+
+        for(let row of this.rows){
+            tbody.appendChild(row);
+        }
+    },
+
+    sort: function(child){
+        if(this.currentSort === child){
+            this.rows.sort((a, b) => (a.children[child].innerText > b.children[child].innerText) ? -1 : 1);
+            this.currentSort = 0;
+        }else{
+            this.rows.sort((a, b) => (a.children[child].innerText > b.children[child].innerText) ? 1 : -1);
+            this.currentSort = child;
+        }
+
+        this.displayIngredients();
+    },
+
     submitAdd: function(){
         event.preventDefault();
 

views/inventoryPage/inventory.css

@@ -5,6 +5,10 @@
     margin-top: 25px;
 }
 
+.cursor{
+    cursor: pointer;
+}
+
 /* Inventory Strand */
 #inventoryStrand{
     flex-direction: column;
@@ -15,10 +19,6 @@
         margin: 10px;
     }
 
-    #inventoryStrand th{
-        cursor: pointer;
-    }
-
     #inventoryStrand tbody{
         text-transform: capitalize;
     }

views/inventoryPage/inventory.ejs

@@ -34,10 +34,10 @@
             <table>
                 <thead>
                     <tr>
-                        <th onclick="inventoryObj.sortIngredients('name')">Item</th>
-                        <th onclick="inventoryObj.sortIngredients('category')">Category</th>
-                        <th onclick="inventoryObj.sortIngredients('quantity')">Quantity</th>
-                        <th onclick="inventoryObj.sortIngredients('unit')">Unit</th>
+                        <th class="cursor" onclick="inventoryObj.sortIngredients('name')">Item</th>
+                        <th class="cursor" onclick="inventoryObj.sortIngredients('category')">Category</th>
+                        <th class="cursor" onclick="inventoryObj.sortIngredients('quantity')">Quantity</th>
+                        <th class="cursor" onclick="inventoryObj.sortIngredients('unit')">Unit</th>
                         <th>Actions</th>
                     </tr>
                     <tbody></tbody>
@@ -130,13 +130,15 @@
                 <div>
                     <h2>Choose Ingredients</h2>
 
+                    <input id="addFilter" type="text" placeholder="FILTER INGREDIENTS" onkeyup="window.addIngredientObj.filter()">
+
                     <table>
                         <thead>
                             <tr>
                                 <th>Add</th>
-                                <th>Ingredient</th>
-                                <th>Category</th>
-                                <th>Unit</th>
+                                <th class="cursor" onclick="window.addIngredientObj.sort(1)">Ingredient</th>
+                                <th class="cursor" onclick="window.addIngredientObj.sort(2)">Category</th>
+                                <th class="cursor" onclick="window.addIngredientObj.sort(3)">Unit</th>
                                 <th>Quantity</th>
                             </tr>
                         </thead>