Re-style the new transaction sidebar to add search and better functionality.

views/dashboardPage/css/sidebars/newTransaction.css

@@ -9,20 +9,68 @@
         text-align: center;
     }
 
-    .newTransactionRecipes{
+    #newTransHorizontal{
+        display: flex;
         width: 100%;
-        height: 90%;
-        overflow-y: auto;
+        margin-top: 10px;
+        flex-basis: 100px;
+        flex-grow: 2;
+        max-height: 75%;
     }
 
-    .newTransactionRecipe{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background: white;
-        margin: 10px 0;
-        padding: 5px 0;
-        font-weight: bold;
-        font-size: 17px;
-        color: black;
-    }
+        #newTransAdd{
+            width: 50%;
+        }
+    
+        #newTransAvailable{
+            width: 50%;
+            padding-right: 5px;
+            border-right: 2px solid rgb(255, 99, 107);
+            max-height: 100%;
+            overflow-y: auto;
+        }
+
+        #newTransAvailable .choosable{
+            background: rgb(240, 252, 255);
+            color: black;
+        }
+
+        #newTransAvailable input{
+            padding-right: 2px;
+            box-sizing: border-box;
+            width: 99%;
+        }
+
+            #newTransAvailable .choosable:hover{
+                background: rgb(179, 191, 209);
+            }
+
+        .newTransactionRecipes{
+            width: 100%;
+            height: 90%;
+            overflow-y: auto;
+        }
+
+        .newTransactionRecipe{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 10px 0;
+            font-weight: bold;
+            font-size: 17px;
+            color: white;
+        }
+
+        .newTransactionRecipe div{
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            margin-bottom: 2px;
+            padding-left: 10px;
+            box-sizing: border-box;
+        }
+
+        .newTransactionRecipe input{
+            box-sizing: border-box;
+            width: 99%;
+        }

views/dashboardPage/ejs/sidebars/newTransaction.ejs

@@ -13,14 +13,28 @@
 
     <input id="newTransactionDate" type="date">
 
-    <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
+    <div id="newTransHorizontal">
+        <div id="newTransAvailable">
+            <input type="text" placeholder="SEARCH">
+        </div>
 
-    <button id="submitNewTransaction" class="sidebarButton">Create</button>
+        <div id="newTransAdd">
+            <h3>TRANSACTIONS</h3>
+
+            <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
+            
+            <template id="createTransaction">
+                <div class="newTransactionRecipe">
+                    <div>
+                        <p></p>
 
-    <template id="createTransaction">
-        <div class="newTransactionRecipe">
-            <p></p>
-            <input type="number" min="0" step="1" value="0">
+                        <button class="newOrderRemove">REMOVE</button>
+                    </div>
+                    <input type="number" min="0" step="1" value="0">
+                </div>
+            </template>
         </div>
-    </template>
+    </div>
+
+    <button id="submitNewTransaction" class="sidebarButton">Create</button>
 </div>

views/dashboardPage/js/sidebars/newTransaction.js

@@ -1,32 +1,61 @@
 let newTransaction = {
     display: function(){
-        let recipeList = document.getElementById("newTransactionRecipes");
-        let template = document.getElementById("createTransaction").content.children[0];
+        document.getElementById("sidebarDiv").classList.add("sidebarWide");
+        document.getElementById("newTransactionDate").valueAsDate = new Date();
 
-        while(recipeList.children.length > 0){
+        let recipeList = document.getElementById("newTransAvailable");
+        recipeList.children[0].onkeyup = ()=>{this.searchRecipes()};
+        while(recipeList.children.length > 1){
             recipeList.removeChild(recipeList.firstChild);
         }
 
         for(let i = 0; i < merchant.recipes.length; i++){
-            let recipeDiv = template.cloneNode(true);
-            recipeDiv.recipe = merchant.recipes[i];
-            recipeList.appendChild(recipeDiv);
-
-            recipeDiv.children[0].innerText = merchant.recipes[i].name;
+            let button = document.createElement("button");
+            button.classList.add("choosable");
+            button.innerText = merchant.recipes[i].name;
+            button.onclick = ()=>{this.add(merchant.recipes[i], button)};
+            recipeList.appendChild(button);
         }
 
         document.getElementById("submitNewTransaction").onclick = ()=>{this.submit()};
     },
 
+    add: function(recipe, element){
+        element.style.display = "none";
+
+        let template = document.getElementById("createTransaction").content.children[0].cloneNode(true);
+        template.children[0].children[0].innerText = recipe.name;
+        template.children[0].children[1].onclick = ()=>{
+            template.parentElement.removeChild(template);
+            element.style.display = "flex";
+        };
+        template.recipe = recipe;
+        document.getElementById("newTransactionRecipes").appendChild(template);
+    },
+
+    searchRecipes: function(){
+        let items = document.getElementById("newTransAvailable").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";
+                }
+            }
+        }
+    },
+
     submit: function(){
         let recipeDivs = document.getElementById("newTransactionRecipes");
         let date = document.getElementById("newTransactionDate").valueAsDate;
 
-        if(date === null){
-            controller.createBanner("DATE IS REQUIRED FOR TRANSACTIONS", "error");
-            return;
-        }
-
         date.setHours(0, 0, 0, 0);
         
         let data = {