Add ability to categorize ingredients by their unit

views/dashboardPage/controller.js

@@ -58,7 +58,7 @@ let updateInventory = (ingredients, remove = false)=>{
     }
 
     homeStrandObj.drawInventoryCheckCard();
-    ingredientsStrandObj.populateIngredients();
+    ingredientsStrandObj.populateByProperty("category");
     addIngredientsComp.isPopulated = false;
     closeSidebar();
 }
@@ -364,6 +364,41 @@ let categorizeIngredients = (ingredients)=>{
     return ingredientsByCategory;
 }
 
+let unitizeIngredients = (ingredients)=>{
+    let ingredientsByUnit = [];
+
+    for(let i = 0; i < ingredients.length; i++){
+        let unitExists = false;
+        for(let j = 0; j < ingredientsByUnit.length; j++){
+            if(ingredients[i].ingredient.unit === ingredientsByUnit[j].name){
+                ingredientsByUnit[j].ingredients.push({
+                    id: ingredients[i].ingredient._id,
+                    name: ingredients[i].ingredient.name,
+                    quantity: ingredients[i].quantity,
+                    unit: ingredients[i].ingredient.unit
+                });
+
+                unitExists = true;
+                break;
+            }
+        }
+
+        if(!unitExists){
+            ingredientsByUnit.push({
+                name: ingredients[i].ingredient.unit,
+                ingredients: [{
+                    id: ingredients[i].ingredient._id,
+                    name: ingredients[i].ingredient.name,
+                    quantity: ingredients[i].quantity,
+                    unit: ingredients[i].ingredient.unit
+                }]
+            })
+        }
+    }
+
+    return ingredientsByUnit;
+}
+
 let categorizeIngredientsFromDB = (ingredients)=>{
     let ingredientsByCategory = [];
 

views/dashboardPage/dashboard.ejs

@@ -70,7 +70,7 @@
                         <option value="">Sort By:</option>
                         <option value="_name">Ingredient</option>
                         <option value="category">Category</option>
-                        <option value="_unit">Unit of Measurement</option>
+                        <option value="unit">Unit of Measurement</option>
                     </select>
                 </div>
 

views/dashboardPage/ingredients.js

@@ -4,14 +4,20 @@ window.ingredientsStrandObj = {
 
     display: function(){
         if(!this.isPopulated){
-            this.populateIngredients();
+            this.populateByProperty("category");
 
             this.isPopulated = true;
         }
     },
 
-    populateIngredients: function(){
-        let categories = categorizeIngredients(merchant.inventory);
+    populateByProperty: function(property){
+        let categories;
+        if(property === "category"){
+            categories = categorizeIngredients(merchant.inventory);
+        }else if(property === "unit"){
+            categories = unitizeIngredients(merchant.inventory);
+        }
+        
         let ingredientStrand = document.querySelector("#categoryList");
         let categoryTemplate = document.querySelector("#categoryDiv").content.children[0];
         let ingredientTemplate = document.querySelector("#ingredient").content.children[0];
@@ -55,7 +61,6 @@ window.ingredientsStrandObj = {
         }
     },
 
-    //Open or close the list of ingredients for a category
     toggleCategory: function(div, button){
         if(div.style.display === "none"){
             button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
@@ -69,7 +74,7 @@ window.ingredientsStrandObj = {
     search: function(){
         let input = document.querySelector("#ingredientSearch").value.toLowerCase();
         if(input === ""){
-            this.populateIngredients();
+            this.populateByProperty("category");
             return;
         }
 
@@ -91,7 +96,12 @@ window.ingredientsStrandObj = {
         document.querySelector("#ingredientSearch").value = "";
 
         if(sortType === "category"){
-            this.populateIngredients();
+            this.populateByProperty("category");
+            return;
+        }
+
+        if(sortType === "unit"){
+            this.populateByProperty("unit");
             return;
         }