Add sorting by different categories

views/dashboardPage/dashboard.ejs

@@ -63,7 +63,16 @@
                     </button>
                 </div>
 
-                <input id="ingredientSearch" type="text" placeholder="filter" oninput="ingredientsStrandObj.search()">
+                <div>
+                    <input id="ingredientSearch" type="text" placeholder="filter" oninput="ingredientsStrandObj.search()">
+
+                    <select onchange="ingredientsStrandObj.sort(this.value)">
+                        <option value="">Sort By:</option>
+                        <option value="_name">Ingredient</option>
+                        <option value="category">Category</option>
+                        <option value="_unit">Unit of Measurement</option>
+                    </select>
+                </div>
 
                 <div id="categoryList"></div>
             </div>

views/dashboardPage/ingredients.js

@@ -102,5 +102,21 @@ window.ingredientsStrandObj = {
         }
 
         this.displayIngredientsOnly(matchingIngredients);
+    },
+
+    sort: function(sortType){
+        if(sortType === ""){
+            return;
+        }
+
+        document.querySelector("#ingredientSearch").value = "";
+
+        if(sortType === "category"){
+            this.populateIngredients();
+            return;
+        }
+
+        let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
+        this.displayIngredientsOnly(sortedIngredients);
     }
 }