Add search functionality to recipes

views/dashboardPage/dashboard.css

@@ -45,9 +45,10 @@ body{
     background: rgb(240, 252, 255);
     border-radius: 5px;
     padding: 20px 20px;
-    width: 90%;
+    width: 100%;
     border: 1px solid gray;
     cursor: pointer;
+    box-sizing: border-box;
 }
 
     .rowItem:hover{
@@ -368,6 +369,18 @@ body{
     align-items: center;
 }
 
+    #recipeBookStrand .searchBar{
+        width: 50%;
+    }
+
+        #recipeSearch{
+            width: 50%;
+        }
+
+        #recipeSelect{
+            width: 25%;
+        }
+
     #recipeHead{
         display: flex;
         justify-content: space-between;
@@ -384,7 +397,6 @@ body{
         flex-direction: column;
         align-items: center;
         width: 50%;
-        margin-top: 50px;
         overflow-y: auto;
     }
 

views/dashboardPage/dashboard.ejs

@@ -146,6 +146,31 @@
                     <% } %>
                 </div>
 
+                <div class="searchBar">
+                    <div class="searchAndIcon">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                        <input id="recipeSearch" type="text" placeholder="FILTER" oninput="recipeBookStrandObj.search()">
+                    </div>
+
+                    <button id="recipeClearButton" class="clearButton" onclick="ingredientsStrandObj.clearSorting()" style="display: none;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                    </button>
+
+                    <select id="recipeSelect" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
+                        <option value="" selected disabled>Sort By:</option>
+                        <option value="_name">Ingredient</option>
+                        <option value="category">Category</option>
+                        <option value="unit">Unit of Measurement</option>
+                    </select>
+                </div>
+
                 <div id="recipeList"></div>
             </div>
 

views/dashboardPage/recipeBook.js

@@ -1,5 +1,6 @@
 window.recipeBookStrandObj = {
     isPopulated: false,
+    recipeDivList: [],
 
     display: function(){
         if(!this.isPopulated){
@@ -20,6 +21,7 @@ window.recipeBookStrandObj = {
             let recipeDiv = document.createElement("div");
             recipeDiv.classList = "rowItem";
             recipeDiv.onclick = ()=>{recipeDetailsComp.display(recipe)};
+            recipeDiv._name = recipe.name;
             recipeList.appendChild(recipeDiv);
 
             let recipeName = document.createElement("p");
@@ -29,6 +31,8 @@ window.recipeBookStrandObj = {
             let recipePrice = document.createElement("p");
             recipePrice.innerText = `$${(recipe.price / 100).toFixed(2)}`;
             recipeDiv.appendChild(recipePrice);
+
+            this.recipeDivList.push(recipeDiv);
         }
     },
 
@@ -122,5 +126,24 @@ window.recipeBookStrandObj = {
             .catch((err)=>{
                 banner.createError("Refresh page to update data");
             });
+    },
+
+    search: function(){
+        let input = document.getElementById("recipeSearch").value.toLowerCase();
+        let recipeList = document.getElementById("recipeList");
+
+        let matchingRecipes = [];
+        for(let i = 0; i < this.recipeDivList.length; i++){
+            if(this.recipeDivList[i]._name.toLowerCase().includes(input)){
+                matchingRecipes.push(this.recipeDivList[i]);
+            }
+        }
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+        for(let i = 0; i < matchingRecipes.length; i++){
+            recipeList.appendChild(matchingRecipes[i]);
+        }
     }
 }