Remove old search bar for ingredients and create new one.

views/dashboardPage/bundle.js

@@ -2481,8 +2481,6 @@ let ingredientDetails = {
 
 module.exports = ingredientDetails;
 },{}],12:[function(require,module,exports){
-const { populate } = require("./orders");
-
 let ingredients = {
     isPopulated: false,
     ingredients: [],
@@ -2490,22 +2488,16 @@ let ingredients = {
     display: function(){
         if(!this.isPopulated){
             document.getElementById("ingredientSearch").oninput = ()=>{this.search()};
-            document.getElementById("ingredientClearButton").onclick = ()=>{this.clearSorting()};
-            document.getElementById("ingredientSelect").onchange = ()=>{this.sort()};
 
-            this.populateByProperty("category");
+            this.populateByProperty();
 
             this.isPopulated = true;
         }
     },
 
-    populateByProperty: function(property){
+    populateByProperty: function(){
         let categories;
-        if(property === "category"){
-            categories = merchant.categorizeIngredients();
-        }else if(property === "unit"){
-            categories = merchant.unitizeIngredients();
-        }
+        categories = merchant.categorizeIngredients();
         
         let ingredientStrand = document.getElementById("categoryList");
         let categoryTemplate = document.getElementById("categoryDiv").content.children[0];
@@ -2574,11 +2566,9 @@ let ingredients = {
 
     search: function(){
         let input = document.getElementById("ingredientSearch").value.toLowerCase();
-        document.getElementById("ingredientSelect").selectedIndex = 0;
 
         if(input === ""){
-            this.populateByProperty("category");
-            document.getElementById("ingredientClearButton").style.display = "none";
+            this.populateByProperty();
             return;
         }
 
@@ -2589,45 +2579,12 @@ let ingredients = {
             }
         }
 
-        document.getElementById("ingredientClearButton").style.display = "inline";
         this.displayIngredientsOnly(matchingIngredients);
-    },
-
-    sort: function(){
-        let sortType = document.getElementById("ingredientSelect").value;
-        
-        if(sortType === ""){
-            return;
-        }
-
-        document.getElementById("ingredientSearch").value = "";
-
-        if(sortType === "category"){
-            this.populateByProperty("category");
-            return;
-        }
-
-        if(sortType === "unit"){
-            this.populateByProperty("unit");
-            return;
-        }
-
-        document.getElementById("ingredientClearButton").style.display = "inline";
-        let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
-        this.displayIngredientsOnly(sortedIngredients);
-    },
-
-    clearSorting: function(button){
-        document.getElementById("ingredientSearch").value = "";
-        document.getElementById("ingredientSelect").selectedIndex = 0;
-        document.getElementById("ingredientClearButton").style.display = "none";
-
-        this.populateByProperty("category");
     }
 }
 
 module.exports = ingredients;
-},{"./orders":19}],13:[function(require,module,exports){
+},{}],13:[function(require,module,exports){
 const ingredients = require("./ingredients");
 
 let newIngredient = {
@@ -3675,7 +3632,6 @@ let transactionDetails = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
             })
             .finally(()=>{

views/dashboardPage/dashboard.css

@@ -49,82 +49,6 @@ Multi-strand use classes
             padding: 0;
         }
 
-.searchBar{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 3px;
-    width: 80%;
-    padding: 10px 25px;
-    box-sizing: border-box;
-    background: rgb(0, 27,45);
-    border-radius: 5px;
-}
-
-    .searchAndIcon{
-        display: flex;
-        width: 25%;
-    }
-
-        .searchAndIcon svg{
-            background: rgb(201, 201, 201);
-            border-bottom-left-radius: 5px;
-            border-top-left-radius: 5px;
-            color: gray;
-            padding: 5px 0 5px 5px;
-            width: 30px;
-            z-index: 10;
-        }
-
-        .searchAndIcon input{
-            background: rgb(201, 201, 201);
-            border: none;
-            height: 30px;
-            border-bottom-right-radius: 5px;
-            border-top-right-radius: 5px;
-            font-size: 20px;
-            padding: 5px 0 5px 10px;
-            max-width: 200px;
-        }
-
-    .clearButton{
-        background: none;
-        border: none;
-        color: rgb(255, 99, 107);
-        cursor: pointer;
-    }
-
-        .clearButton:hover{
-            background: rgb(0, 27, 45);
-        }
-
-    .searchBar select{
-        background: rgb(201, 201, 201);
-        font-size: 20px;
-        border-radius: 5px;
-        border: none;
-        height: 30px;
-        padding: 5px 0;
-        box-sizing: content-box;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
-        background-repeat: no-repeat;
-        background-position-x: 100%;
-        background-position-y: 50%;
-        cursor: pointer;
-    }
-
-    .button2Link{
-        background: none;
-        border: none;
-        color: blue;
-        text-decoration: underline;
-        font-size: 15px;
-        margin-top: auto;
-        cursor: pointer;
-    }
-
 #sidebarCloser{
     width: 30px;
     background: rgb(0, 27, 45);
@@ -177,6 +101,39 @@ Multi-strand use classes
         color: white;
     }
 
+.searchBar{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+    .searchButton{
+        padding: 6px;
+        background: rgb(0, 27, 45);
+        cursor: pointer;
+        color: white;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+
+        .searchButton:hover{
+            background: rgb(201, 201, 201);
+            color: black;
+        }
+
+        .searchButton:active{
+            background: rgb(179, 191, 209);
+            color: white;
+        }
+
+    .searchInput{
+        border: 4px solid rgb(0, 27, 45);
+        font-size: 20px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        padding: 1px 0 1px 4px;
+    }
+
 /* 
 Home Strand 
 */
@@ -697,10 +654,6 @@ Transactions Strand
         color: black;
     }
 
-        #ingredientSearch{
-            border-radius: 5px;
-        }
-
         .categoryDiv > div:first-of-type p{
             padding: 5px 0 5px 5px;
         }
@@ -731,10 +684,6 @@ Transactions Strand
         padding: 0;
     }
 
-    .searchAndIcon{
-        width: 100%;
-    }
-
     #recipeSearch{
         border-radius: 5px;
         width: 100%;

views/dashboardPage/dashboard.ejs

@@ -157,28 +157,11 @@
                 </div>
 
                 <div class="searchBar">
-                    <div class="searchAndIcon">
-                        <svg class="mobileHide" 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="ingredientSearch" type="text" placeholder="FILTER">
-                    </div>
-
-                    <button id="ingredientClearButton" class="clearButton" 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="ingredientSelect" class="mobileHide">Sort By:
-                        <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>
+                    <svg class="searchButton" 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="ingredientSearch" class="searchInput" type="text" placeholder="SEARCH">
                 </div>
 
                 <div id="categoryList"></div>

views/dashboardPage/js/ingredients.js

@@ -1,5 +1,3 @@
-const { populate } = require("./orders");
-
 let ingredients = {
     isPopulated: false,
     ingredients: [],
@@ -7,22 +5,16 @@ let ingredients = {
     display: function(){
         if(!this.isPopulated){
             document.getElementById("ingredientSearch").oninput = ()=>{this.search()};
-            document.getElementById("ingredientClearButton").onclick = ()=>{this.clearSorting()};
-            document.getElementById("ingredientSelect").onchange = ()=>{this.sort()};
 
-            this.populateByProperty("category");
+            this.populateByProperty();
 
             this.isPopulated = true;
         }
     },
 
-    populateByProperty: function(property){
+    populateByProperty: function(){
         let categories;
-        if(property === "category"){
-            categories = merchant.categorizeIngredients();
-        }else if(property === "unit"){
-            categories = merchant.unitizeIngredients();
-        }
+        categories = merchant.categorizeIngredients();
         
         let ingredientStrand = document.getElementById("categoryList");
         let categoryTemplate = document.getElementById("categoryDiv").content.children[0];
@@ -91,11 +83,9 @@ let ingredients = {
 
     search: function(){
         let input = document.getElementById("ingredientSearch").value.toLowerCase();
-        document.getElementById("ingredientSelect").selectedIndex = 0;
 
         if(input === ""){
-            this.populateByProperty("category");
-            document.getElementById("ingredientClearButton").style.display = "none";
+            this.populateByProperty();
             return;
         }
 
@@ -106,40 +96,7 @@ let ingredients = {
             }
         }
 
-        document.getElementById("ingredientClearButton").style.display = "inline";
         this.displayIngredientsOnly(matchingIngredients);
-    },
-
-    sort: function(){
-        let sortType = document.getElementById("ingredientSelect").value;
-        
-        if(sortType === ""){
-            return;
-        }
-
-        document.getElementById("ingredientSearch").value = "";
-
-        if(sortType === "category"){
-            this.populateByProperty("category");
-            return;
-        }
-
-        if(sortType === "unit"){
-            this.populateByProperty("unit");
-            return;
-        }
-
-        document.getElementById("ingredientClearButton").style.display = "inline";
-        let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
-        this.displayIngredientsOnly(sortedIngredients);
-    },
-
-    clearSorting: function(button){
-        document.getElementById("ingredientSearch").value = "";
-        document.getElementById("ingredientSelect").selectedIndex = 0;
-        document.getElementById("ingredientClearButton").style.display = "none";
-
-        this.populateByProperty("category");
     }
 }
 

views/dashboardPage/js/transactionDetails.js

@@ -66,7 +66,6 @@ let transactionDetails = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
             })
             .finally(()=>{