Create ability to search ingredients when creating a new order.

views/dashboardPage/css/dashboard.css

@@ -171,7 +171,7 @@ Multi-strand use classes
     align-items: center;
     background: rgb(0, 27, 45);
     color: white;
-    margin: 2px;
+    margin: 2px 0;
     padding: 5px;
     text-align: center;
     cursor: pointer;

views/dashboardPage/ejs/sidebars/newOrder.ejs

@@ -11,7 +11,9 @@
 
     <h1>INGREDIENTS</h1>
 
-    <div id="newOrderIngredients"></div>
+    <div id="newOrderIngredients">
+        <input type="text" placeholder="SEARCH">
+    </div>
 </div>
 
 <div id="newOrder">

views/dashboardPage/js/sidebars/newOrder.js

@@ -9,7 +9,8 @@ let newOrder = {
         }
 
         let ingredientList = document.getElementById("newOrderIngredients");
-        while(ingredientList.children.length > 0){
+        ingredientList.children[0].onkeyup = ()=>{this.searchIngredients()};
+        while(ingredientList.children.length > 1){
             ingredientList.removeChild(ingredientList.firstChild);
         }
 
@@ -116,6 +117,25 @@ let newOrder = {
             .finally(()=>{
                 loader.style.display = "none";
             });
+    },
+
+    searchIngredients: function(){
+        let items = document.getElementById("newOrderIngredients").children;
+        let searchString = items[0].value.toLowerCase();
+
+        if(searchString === ""){
+            for(let i = 1; i < items.length; i++){
+                items[i].style.display = "flex";
+            }
+        }else{
+            for(let i = 1; i < items.length; i++){
+                if(items[i].innerText.toLowerCase().includes(searchString)){
+                    items[i].style.display = "flex";
+                }else{
+                    items[i].style.display = "none";
+                }
+            }
+        }
     }
 };
 

views/dashboardPage/js/strands/analytics.js

@@ -476,7 +476,7 @@ let analytics = {
                 if(!list[i].innerText.toLowerCase().includes(searchString)){
                     list[i].style.display = "none";
                 }else{
-                    list[i].style.display = "block";
+                    list[i].style.display = "flex";
                 }
             }
         }